App Bar#

The <AppBar> component sticks to the top of its parent and provides a convenient entrypoint for many app layouts.

Leptonic

Scroll ↓

<Box style="position: relative; border: 4px solid gray; width: 100%; height: 20em; overflow: auto;"> <AppBar height=app_bar_height style="z-index: 1; background: var(--brand-color); color: white;"> <H3 style="margin-left: 1em; color: white;">"Leptonic"</H3> <Stack orientation=StackOrientation::Horizontal spacing=Size::Em(1.0) style="margin-right: 1em"> <Icon icon=icondata::BsGithub></Icon> <Icon icon=icondata::BsPower></Icon> </Stack> </AppBar> <Box style="padding: 0.5em;"> <P>"Scroll ↓"</P> <Stack spacing=Size::Em(0.5)> {(0..10).map(|_| view! { <Skeleton height=Size::Em(3.0)/> }).collect_view()} </Stack> </Box> </Box>

Styling#

You may overwrite any of the following CSS variables to meet your styling needs.

--app-bar-height --app-bar-background-color --app-bar-border-bottom --app-bar-box-shadow