[Feature Request] VAppBar and VToolbar should be able to calculate and emit it's own height
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Problem to solve
This is something that I've ran into frequently. I often need to change the contents of my VToolbar or VAppBar dynamically depending on the height of the contents with in it. That way I might swap out contents depending on my route by using something like use PortalVue, or by some other means.
If you want to use VAppBar or VToolbar in a layout (and I am using VToolbar as a Layout Item for reasons) it's best to define the height of the element so it can pass that information along to the layout system. But that also means that if you want to automatically adjust the size of the VAppBar or VToolbar depending on it's contents, you have to handle that yourself, which can really make things difficult if you don't want to interfere with the styles built into Vuetify.
Proposed solution
Make it an option for vuetify to apply a resize observer to the container v-toolbar__content in the toolbar components via a prop. Get the height of the element with the v-toolbar__content class (I'm not saying use a class selector, that's dumb. That's just how I'm identifying the element you should use) and also get the border and padding heights that exist outside of the the observed element within the component (so you can get the actual height of the toolbar which is content height + padding height + border height). Emit that to the layout system if applicable and expose an event on the component so if you need to wrap VToolbar in VLayoutItem, you can wire them together.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the VAppBar and VToolbar component implementations and trace how VLayoutItem receives layout sizing information. Then inspect the v-toolbar__content element and the existing layout integration points, including the proposed event and prop behavior. Done means dynamic content height can be observed, the full component height is reported, and the result can be connected to VLayoutItem.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100