mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
docs: add new component docs
This commit is contained in:
Eric Liu
parent
c2fb2d213d
commit
2008d0035f
130 changed files with 6662 additions and 3801 deletions
20
docs/src/pages/framed/Grid/AspectRatioColumns.svelte
Normal file
20
docs/src/pages/framed/Grid/AspectRatioColumns.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
aspectRatio="2x1"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
2x1
|
||||
</Column>
|
||||
<Column
|
||||
aspectRatio="2x1"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
2x1
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
12
docs/src/pages/framed/Grid/CondensedGrid.svelte
Normal file
12
docs/src/pages/framed/Grid/CondensedGrid.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid condensed>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
12
docs/src/pages/framed/Grid/FullWidthGrid.svelte
Normal file
12
docs/src/pages/framed/Grid/FullWidthGrid.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid fullWidth>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
12
docs/src/pages/framed/Grid/Grid.svelte
Normal file
12
docs/src/pages/framed/Grid/Grid.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
12
docs/src/pages/framed/Grid/NarrowGrid.svelte
Normal file
12
docs/src/pages/framed/Grid/NarrowGrid.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid narrow>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
32
docs/src/pages/framed/Grid/OffsetColumns.svelte
Normal file
32
docs/src/pages/framed/Grid/OffsetColumns.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
sm="{{ span: 1, offset: 3 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 3
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 2, offset: 2 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 2
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 3, offset: 1 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 1
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 4, offset: 0 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 0
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
40
docs/src/pages/framed/Grid/ResponsiveGrid.svelte
Normal file
40
docs/src/pages/framed/Grid/ResponsiveGrid.svelte
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{4}"
|
||||
lg="{8}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 4, lg: 8
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{2}"
|
||||
lg="{2}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 2, lg: 2
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{1}"
|
||||
lg="{1}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 1, lg: 1
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{1}"
|
||||
lg="{1}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 1, lg: 1
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
5
docs/src/pages/framed/Loading/Loading.svelte
Normal file
5
docs/src/pages/framed/Loading/Loading.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import { Loading } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Loading />
|
||||
19
docs/src/pages/framed/Modal/ComposedModal.svelte
Normal file
19
docs/src/pages/framed/Modal/ComposedModal.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import {
|
||||
ComposedModal,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Checkbox,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let checked = false;
|
||||
</script>
|
||||
|
||||
<ComposedModal open>
|
||||
<ModalHeader title="Confirm changes" />
|
||||
<ModalBody hasForm>
|
||||
<Checkbox labelText="I have reviewed the changes" bind:checked />
|
||||
</ModalBody>
|
||||
<ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
|
||||
</ComposedModal>
|
||||
21
docs/src/pages/framed/Modal/DangerModal.svelte
Normal file
21
docs/src/pages/framed/Modal/DangerModal.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
|
||||
|
||||
<Modal
|
||||
danger
|
||||
bind:open
|
||||
modalHeading="Delete all instances"
|
||||
primaryButtonText="Delete"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (open = false)}"
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>This is a permanent action and cannot be undone.</p>
|
||||
</Modal>
|
||||
20
docs/src/pages/framed/Modal/Modal.svelte
Normal file
20
docs/src/pages/framed/Modal/Modal.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (open = false)}"
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
17
docs/src/pages/framed/Modal/ModalExtraSmall.svelte
Normal file
17
docs/src/pages/framed/Modal/ModalExtraSmall.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
size="xs"
|
||||
open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
17
docs/src/pages/framed/Modal/ModalLarge.svelte
Normal file
17
docs/src/pages/framed/Modal/ModalLarge.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
size="lg"
|
||||
open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
17
docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
Normal file
17
docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
preventCloseOnClickOutside
|
||||
open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
17
docs/src/pages/framed/Modal/ModalSmall.svelte
Normal file
17
docs/src/pages/framed/Modal/ModalSmall.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
size="sm"
|
||||
open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
14
docs/src/pages/framed/Modal/PassiveModal.svelte
Normal file
14
docs/src/pages/framed/Modal/PassiveModal.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="tertiary" on:click="{() => (open = true)}">Learn more</Button>
|
||||
|
||||
<Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
|
||||
<p>
|
||||
IBM Cloudant is a distributed, secure database with global availability and
|
||||
zero vendor lock-in used to build web and mobile apps at scale.
|
||||
</p>
|
||||
</Modal>
|
||||
60
docs/src/pages/framed/UIShell/HeaderNav.svelte
Normal file
60
docs/src/pages/framed/UIShell/HeaderNav.svelte
Normal 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
66
docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
Normal 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
71
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
Normal 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>
|
||||
7
docs/src/pages/framed/_reset.svelte
Normal file
7
docs/src/pages/framed/_reset.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
// TODO: [refactor] parse search parameters more reliably
|
||||
$: currentTheme = window.location.search.split("?theme=")[1];
|
||||
$: document.documentElement.setAttribute("theme", currentTheme);
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
Loading…
Add table
Add a link
Reference in a new issue