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

docs: add new component docs

Browse source
This commit is contained in:
Eric Liu 2020-10-02 20:13:02 -07:00
commit 2008d0035f
130 changed files with 6662 additions and 3801 deletions
Download patch file Download diff file Expand all files Collapse all files

60
docs/src/pages/framed/UIShell/HeaderNav.svelte Normal file
View file

@ -0,0 +1,60 @@
<script>
import {
Header,
HeaderNav,
HeaderNavItem,
HeaderNavMenu,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
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>
<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>

66
docs/src/pages/framed/UIShell/HeaderSwitcher.svelte Normal file
View file

@ -0,0 +1,66 @@
<script>
import {
Header,
HeaderUtilities,
HeaderAction,
HeaderPanelLinks,
HeaderPanelDivider,
HeaderPanelLink,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "carbon-components-svelte";
let isSideNavOpen = false;
let isOpen = false;
</script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderAction bind:isOpen>
<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>

71
docs/src/pages/framed/UIShell/HeaderUtilities.svelte Normal file
View file

@ -0,0 +1,71 @@
<script>
import {
Header,
HeaderUtilities,
HeaderAction,
HeaderActionSearch,
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";
let isSideNavOpen = false;
let isOpen = false;
</script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderActionSearch />
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
<HeaderAction bind:isOpen>
<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>