import {AppBar} from "@qinetik/anique/appbar";
export default function BasicAppBarExample() {
return (
<AppBar
title={"Demo"}
/>
)
}
Basic App Bar
Demo
App Bar With Icon
Demo
import {AppBar} from "@qinetik/anique/appbar";
import {Icon} from "@qinetik/anique/icon";
import Menu from "../../../../solid/icons/Menu";
export default function AppBarWithIconExample() {
return (
<AppBar
title={"Demo"}
navIcon={() => (
<Icon>
<Menu/>
</Icon>
)}
/>
)
}
App Bar With IconButton
Demo
import {AppBar} from "@qinetik/anique/appbar";
import Menu from "../../../../solid/icons/Menu";
import {IconButton} from "@qinetik/anique/icon-button";
export default function AppBarWithIconButtonExample() {
return (
<AppBar
title={"Demo"}
navIcon={() => (
<IconButton>
<Menu/>
</IconButton>
)}
/>
)
}
App Bar With Actions
Demo
import {AppBar} from "@qinetik/anique/appbar";
import Menu from "../../../../solid/icons/Menu";
import {IconButton} from "@qinetik/anique/icon-button";
import {Row} from "@qinetik/anique/row";
export default function AppBarWithActionsExample() {
return (
<AppBar
title={"Demo"}
navIcon={() => (
<IconButton>
<Menu/>
</IconButton>
)}
actions={(
<Row>
<IconButton>
<Menu/>
</IconButton>
<IconButton>
<Menu/>
</IconButton>
<IconButton>
<Menu/>
</IconButton>
</Row>
)}
/>
)
}
Styled App Bar
Demo
import {AppBar} from "@qinetik/anique/appbar";
import Menu from "../../../../solid/icons/Menu";
import {IconButton} from "@qinetik/anique/icon-button";
import {Row} from "@qinetik/anique/row";
import {Anique} from "@qinetik/anique";
export default function StyledAppBarExample() {
return (
<AppBar
title={"Demo"}
navIcon={() => (
<IconButton>
<Menu/>
</IconButton>
)}
actions={(
<Row>
<IconButton>
<Menu/>
</IconButton>
<IconButton>
<Menu/>
</IconButton>
<IconButton>
<Menu/>
</IconButton>
</Row>
)}
style={{
background: Anique.colors.accent100,
"border-bottom-left-radius": Anique.border.lgRadius,
"border-bottom-right-radius": Anique.border.lgRadius,
}}
/>
)
}