Appbar

An application bar component with start, center, and end slots.

vu-appbar · @velkin/react/appbar

Copy page

Import

React

npm i @velkin/react

import { VuAppbar } from "@velkin/react/appbar";

Prop	Type	Default	Description
variant	VuAppbarVariant	"flat"	Surface paint recipe. Default: `"flat"`.
tone	VuAppbarTone	"normal"	Neutral surface weight. Default: `"normal"`.
size	VuAppbarSize	"md"	Padding, gap, and bar height. Default: `"md"`.
placement	VuAppbarPlacement	"top"	Pin to top or bottom when `sticky`. Default: `"top"`.
sticky	`boolean`	false	Pins via `position: sticky`. Default: `false`.
condense	`boolean`	false	Elevates the bar after scroll when `sticky`. Default: `false`.
autohide	`boolean`	false	Hides on scroll-down, reveals on scroll-up. Default: `false`.

Slot	Description
start	Leading content; hidden when empty.
—	- Center content; hidden when empty.
end	Trailing content; hidden when empty.