Appearance
App Bar ​
Regular
Loading...
Dense
Loading...
flint-app-bar: The top App bar provides content and actions related to the current screen.
- Tag:
<flint-app-bar> - Class:
FlintAppBar
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintAppBar } from 'flint-ui';Usage ​
html
<flint-app-bar></flint-app-bar>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
title | title | string | '' | Title text displayed in the center of the app bar. |
position | position | 'static' | 'fixed' | 'absolute' | 'sticky' | 'static' | CSS positioning behavior of the app bar. |
variant | variant | 'regular' | 'outlined' | 'regular' | Visual style variant of the app bar. |
Slots ​
| Name | Description |
|---|---|
navigation | |
title | |
actions |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-app-bar-height | — |
--flint-app-bar-bg | — |
--flint-app-bar-color | — |
--flint-app-bar-shadow | — |
--flint-primary-color | — |
--flint-text-color-on-primary | — |
--flint-shadow-md | — |
--flint-surface-1 | — |
--flint-text-color | — |
--flint-border-color | — |
--flint-font-family | — |