mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
ba58ba8f00* chore: update ignore rules, remove unused files * refactor(icons): use icons from carbon-icons-svelte@11 * docs(time-picker): fix default value * chore: upgrade carbon-icons-svelte to v11 * docs: update examples to use icons from carbon-icons-svelte@11 * docs: update number of icons [ci skip]
64 lines
1.6 KiB
Svelte
64 lines
1.6 KiB
Svelte
<script>
|
|
import {
|
|
Header,
|
|
HeaderNav,
|
|
HeaderNavItem,
|
|
HeaderNavMenu,
|
|
SideNav,
|
|
SideNavItems,
|
|
SideNavMenu,
|
|
SideNavMenuItem,
|
|
SideNavLink,
|
|
SideNavDivider,
|
|
SkipToContent,
|
|
Content,
|
|
Grid,
|
|
Row,
|
|
Column,
|
|
} from "carbon-components-svelte";
|
|
import Fade from "carbon-icons-svelte/lib/Fade.svelte";
|
|
|
|
let isSideNavOpen = false;
|
|
</script>
|
|
|
|
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
|
<svelte:fragment slot="skip-to-content">
|
|
<SkipToContent />
|
|
</svelte:fragment>
|
|
<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>
|
|
<HeaderNavItem href="/" text="Link 4" />
|
|
</HeaderNav>
|
|
|
|
<SideNav bind:isOpen="{isSideNavOpen}" rail>
|
|
<SideNavItems>
|
|
<SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
|
|
<SideNavLink icon="{Fade}" text="Link 2" href="/" />
|
|
<SideNavLink icon="{Fade}" text="Link 3" href="/" />
|
|
<SideNavMenu icon="{Fade}" text="Menu">
|
|
<SideNavMenuItem href="/" text="Link 1" />
|
|
<SideNavMenuItem href="/" text="Link 2" />
|
|
<SideNavMenuItem href="/" text="Link 3" />
|
|
</SideNavMenu>
|
|
<SideNavDivider />
|
|
<SideNavLink icon="{Fade}" text="Link 4" href="/" />
|
|
</SideNavItems>
|
|
</SideNav>
|
|
</Header>
|
|
|
|
<Content>
|
|
<Grid>
|
|
<Row>
|
|
<Column>
|
|
<h1>Welcome</h1>
|
|
</Column>
|
|
</Row>
|
|
</Grid>
|
|
</Content>
|