mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
dce2dda72a* chore(docs): run "npx browserslist@latest --update-db" * chore(docs): upgrade carbon-icons-svelte to latest * refactor(docs): re-use styles from css/all.scss * chore(docs): add pnpm install command * chore(docs): upgrade prettier, prettier-plugin-svelte * docs(date-picker): improve "DatePicker in a modal" example * fix(docs): restore "scripts-markup-styles" svelte sort order * chore(docs): upgrade mdsvex * chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte * refactor(docs): use svelte:fragment where applicable * fix(docs): include missing "options" in svelteSortOrder prettier config
89 lines
2.7 KiB
Svelte
89 lines
2.7 KiB
Svelte
<script>
|
|
import {
|
|
Header,
|
|
HeaderUtilities,
|
|
HeaderAction,
|
|
HeaderGlobalAction,
|
|
HeaderPanelLinks,
|
|
HeaderPanelDivider,
|
|
HeaderPanelLink,
|
|
SideNav,
|
|
SideNavItems,
|
|
SideNavMenu,
|
|
SideNavMenuItem,
|
|
SideNavLink,
|
|
SkipToContent,
|
|
Content,
|
|
Grid,
|
|
Row,
|
|
Column,
|
|
} from "carbon-components-svelte";
|
|
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
|
|
import UserAvatarFilledAlt20 from "carbon-icons-svelte/lib/UserAvatarFilledAlt20";
|
|
|
|
let isSideNavOpen = false;
|
|
let isOpen1 = false;
|
|
let isOpen2 = false;
|
|
</script>
|
|
|
|
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
|
<svelte:fragment slot="skip-to-content">
|
|
<SkipToContent />
|
|
</svelte:fragment>
|
|
<HeaderUtilities>
|
|
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
|
|
<HeaderAction
|
|
bind:isOpen="{isOpen1}"
|
|
icon="{UserAvatarFilledAlt20}"
|
|
closeIcon="{UserAvatarFilledAlt20}"
|
|
>
|
|
<HeaderPanelLinks>
|
|
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
|
|
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
|
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
|
|
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
|
|
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
|
|
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
|
|
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
|
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
|
|
<HeaderPanelDivider>Switcher subject 3</HeaderPanelDivider>
|
|
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
|
</HeaderPanelLinks>
|
|
</HeaderAction>
|
|
<HeaderAction bind:isOpen="{isOpen2}">
|
|
<HeaderPanelLinks>
|
|
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
|
|
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
|
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
|
|
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
|
|
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
|
|
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
|
|
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
|
|
<HeaderPanelLink>Switcher item 5</HeaderPanelLink>
|
|
</HeaderPanelLinks>
|
|
</HeaderAction>
|
|
</HeaderUtilities>
|
|
</Header>
|
|
|
|
<SideNav bind:isOpen="{isSideNavOpen}">
|
|
<SideNavItems>
|
|
<SideNavLink text="Link 1" />
|
|
<SideNavLink text="Link 2" />
|
|
<SideNavLink text="Link 3" />
|
|
<SideNavMenu text="Menu">
|
|
<SideNavMenuItem href="/" text="Link 1" />
|
|
<SideNavMenuItem href="/" text="Link 2" />
|
|
<SideNavMenuItem href="/" text="Link 3" />
|
|
</SideNavMenu>
|
|
</SideNavItems>
|
|
</SideNav>
|
|
|
|
<Content>
|
|
<Grid>
|
|
<Row>
|
|
<Column>
|
|
<h1>Welcome</h1>
|
|
</Column>
|
|
</Row>
|
|
</Grid>
|
|
</Content>
|