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 |