mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(ui-shell): add plain header example

Browse source
This commit is contained in:
Eric Liu 2020-12-11 04:40:25 -08:00
commit d5ad66df2e
2 changed files with 48 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/src/pages/components/UIShell.svx
View file

@ -26,8 +26,14 @@ components: ["Header",
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
### Header
<FileSource src="/framed/UIShell/Header" />
### Header with side navigation ### Header with side navigation
The hamburger menu will automatically be rendered if the `SideNav` component is used.
<FileSource src="/framed/UIShell/HeaderNav" /> <FileSource src="/framed/UIShell/HeaderNav" />
### Header with app switcher ### Header with app switcher

42
docs/src/pages/framed/UIShell/Header.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
import {
Header,
HeaderNav,
HeaderNavItem,
HeaderNavMenu,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "carbon-components-svelte";
let isSideNavOpen = false;
</script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderNav>
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
<HeaderNavMenu text="Menu">
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
</HeaderNavMenu>
</HeaderNav>
</Header>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>