App bar #
The app bar component is a part of a websiteโs navigation and itโs an alternative to the header element in apps.
Examples #
Basic usage #
By default, a va-app-bar needs a parent element with relative position.
Color #
You can set a background color and gradient of the component with color and gradient props.
Fixed #
You can make app bar position fixed via fixed prop.
Hide #
hide-on-scroll allows you to hide app bar when you scroll away. You need to define target.
.
Shadow #
You can set a shadow with shadow-on-scroll prop. You need to define target.
.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| bottom |
|
| |
| color |
| - | |
| fixed |
|
| |
| gradient |
|
| |
| hideOnScroll |
|
| |
| preset |
| - | |
| shadowColor |
|
| |
| shadowOnScroll |
|
| |
| target |
|
|
Slots #
| Name | Description |
|---|---|
default | Slot for app-bar content |
Css Variables #
| Name | Default Value |
|---|---|
| --va-app-bar-position | relative |
| --va-app-bar-height | auto |
| --va-app-bar-shadow | 0 0 12px 2px |
| --va-app-bar-z-index | calc(var(--va-z-index-teleport-overlay) - 100) |
| --va-app-bar-transition | transform 0.5s ease |