App Bar Different Sizes
src / Demo.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import React, { ReactElement } from "react";
import { AppBar, AppBarAction, AppBarNav } from "@react-md/app-bar";
import { TextIconSpacing } from "@react-md/icon";
import {
ArrowDropDownSVGIcon,
MenuSVGIcon,
MoreVertSVGIcon,
SearchSVGIcon,
} from "@react-md/material-icons";
import AppBarTitle from "./AppBarTitle";
import Container from "./Container";
function DenseAppBar(): ReactElement {
return (
<AppBar height="dense">
<AppBarNav aria-label="Navigation" id="dense-nav">
<MenuSVGIcon />
</AppBarNav>
<AppBarTitle>Dense</AppBarTitle>
<AppBarAction first aria-label="Search" id="dense-search">
<SearchSVGIcon />
</AppBarAction>
<AppBarAction last aria-label="Actions" id="dense-actions">
<MoreVertSVGIcon />
</AppBarAction>
</AppBar>
);
}
function NormalAppBar(): ReactElement {
return (
<AppBar>
<AppBarNav aria-label="Navigation" id="normal-nav">
<MenuSVGIcon />
</AppBarNav>
<AppBarTitle>Dense Prominent</AppBarTitle>
<AppBarAction first aria-label="Search" id="normal-search">
<SearchSVGIcon />
</AppBarAction>
<AppBarAction last aria-label="Actions" id="normal-actions">
<MoreVertSVGIcon />
</AppBarAction>
</AppBar>
);
}
function DenseProminentAppBar(): ReactElement {
return (
<AppBar height="prominent-dense">
<AppBar height="dense">
<AppBarNav aria-label="Navigation" id="dense-prominent-nav">
<MenuSVGIcon />
</AppBarNav>
<AppBarTitle>Dense</AppBarTitle>
<AppBarAction first aria-label="Search" id="dense-prominent-search">
<SearchSVGIcon />
</AppBarAction>
<AppBarAction last aria-label="Actions" id="dense-prominent-actions">
<MoreVertSVGIcon />
</AppBarAction>
</AppBar>
<AppBar height="dense">
<AppBarTitle keyline>And Prominent!</AppBarTitle>
<AppBarAction first buttonType="text" id="dense-prominent-new">
<TextIconSpacing icon={<ArrowDropDownSVGIcon />} iconAfter>
New...
</TextIconSpacing>
</AppBarAction>
</AppBar>
</AppBar>
);
}
function ProminentAppBar(): ReactElement {
return (
<AppBar height="prominent">
<AppBar>
<AppBarNav aria-label="Navigation">
<MenuSVGIcon />
</AppBarNav>
<AppBarAction first aria-label="Search">
<SearchSVGIcon />
</AppBarAction>
<AppBarAction last aria-label="Actions" id="prominent-actions">
<MoreVertSVGIcon />
</AppBarAction>
</AppBar>
<AppBar>
<AppBarTitle keyline>Only Prominent</AppBarTitle>
<AppBarAction first buttonType="text" id="prominent-new">
<TextIconSpacing icon={<ArrowDropDownSVGIcon />} iconAfter>
New...
</TextIconSpacing>
</AppBarAction>
</AppBar>
</AppBar>
);
}
export default function Demo(): ReactElement {
return (
<Container>
<DenseAppBar />
<NormalAppBar />
<DenseProminentAppBar />
<ProminentAppBar />
</Container>
);
}