Quaff
info QToolbar API Source
interface QToolbarProps extends HTMLAttributes<HTMLDivElement>
floating
?: boolean = falseUses a rounded, elevated container that fits its contents instead of a full-width docked bar.
unelevated
?: boolean = falseRemoves the floating toolbar's shadow.
vertical
?: boolean = falseArranges controls vertically. Vertical toolbars always use the floating layout.
vibrant
?: boolean = falseUses the vibrant color scheme.
Usage
Floating Toolbar
Use
floating for a compact group of actions and vibrant for a stronger
color. Position the toolbar within your content, leaving at least 16px from screen edges. Use
buttons or links for toolbar actions. Tab enters or leaves the group; arrow keys along the toolbar's
orientation move between enabled, visible actions. Home and End move to the first and last action.
The last focused action is remembered. Other controls, such as text inputs, keep their usual Tab
and arrow-key behavior. Vibrant colors
Docked Toolbar
Docked toolbars fill their container's width and scroll horizontally when the actions need
more space. Place one alongside the content it controls. Place buttons directly inside the
toolbar to receive its button styling.
100% zoom
Vertical Toolbar
vertical uses the floating layout automatically and grows wider to fit larger
controls. Leave at least 24px from screen edges and give each toolbar an accessible name
with aria-label.