404
Page not found.
- Return home
v0.15.0 v0.15.0 <script>
- import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<Accordion>
- <AccordionItem title="Title 1">Content 1</AccordionItem>
- <AccordionItem title="Title 2">Content 2</AccordionItem>
- <AccordionItem title="Title 3">Content 3</AccordionItem>
-</Accordion>
-
<script>
- import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<Accordion align="start">
- <AccordionItem title="Title 1">Content 1</AccordionItem>
- <AccordionItem title="Title 2">Content 2</AccordionItem>
- <AccordionItem title="Title 3">Content 3</AccordionItem>
-</Accordion>
-
<script>
- import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<Accordion>
- <AccordionItem>
- <h5 slot="title" style="color: red;">Custom title slot</h5>
- Content 1
- </AccordionItem>
- <AccordionItem title="Title 2">Content 2</AccordionItem>
- <AccordionItem title="Title 3">Content 3</AccordionItem>
-</Accordion>
-
<script>
- import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<Accordion>
- <AccordionItem title="Title 1" open>Content 1</AccordionItem>
- <AccordionItem title="Title 2">Content 2</AccordionItem>
- <AccordionItem title="Title 3">Content 3</AccordionItem>
-</Accordion>
-
<script>
- import { Accordion } from "carbon-components-svelte";
-</script>
-
-<Accordion skeleton count={3} />
-
<script>
- import { Accordion } from "carbon-components-svelte";
-</script>
-
-<Accordion skeleton open={false} count={3} />
-
v0.15.0 <script>
- import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
-</script>
-
-<Breadcrumb>
- <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
- <BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
- <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
-</Breadcrumb>
-
<script>
- import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
-</script>
-
-<Breadcrumb noTrailingSlash>
- <BreadcrumbItem href="/">Home</BreadcrumbItem>
- <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
-</Breadcrumb>
-
<script>
- import { Breadcrumb } from "carbon-components-svelte";
-</script>
-
-<Breadcrumb skeleton count={3} />
-
v0.15.0 <script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button>Primary button</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button kind="secondary">Secondary button</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button kind="tertiary">Tertiary button</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button kind="ghost">Ghost button</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button kind="danger">Danger button</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
- import Add16 from "carbon-icons-svelte/lib/Add16";
-</script>
-
-<Button icon={Add16}>With icon</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
- import Add16 from "carbon-icons-svelte/lib/Add16";
-</script>
-
-<Button
- icon={Add16}
- hasIconOnly
- tooltipPosition="bottom"
- tooltipAlignment="center"
- iconDescription="Tooltip text"
-/>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button href="#">Link button</Button>
-
Custom element
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button as let:props>
- <p {...props}>Custom element</p>
-</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button size="field">Primary</Button>
-<Button size="field" kind="secondary">Secondary</Button>
-<Button size="field" kind="tertiary">Tertiary</Button>
-<Button size="field" kind="ghost">Ghost</Button>
-<Button size="field" kind="danger">Danger</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button size="small">Primary</Button>
-<Button size="small" kind="secondary">Secondary</Button>
-<Button size="small" kind="tertiary">Tertiary</Button>
-<Button size="small" kind="ghost">Ghost</Button>
-<Button size="small" kind="danger">Danger</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button disabled>Disabled button</Button>
-
<script>
- import { Button } from "carbon-components-svelte";
-</script>
-
-<Button skeleton />
-
v0.15.0 <script>
- import { ButtonSet, Button } from "carbon-components-svelte";
-</script>
-
-<ButtonSet>
- <Button kind="secondary">Cancel</Button>
- <Button>Submit</Button>
-</ButtonSet>
-
<script>
- import { ButtonSet, Button } from "carbon-components-svelte";
-</script>
-
-<ButtonSet stacked>
- <Button>Login</Button>
- <Button kind="ghost">Sign up</Button>
-</ButtonSet>
-
v0.15.0 <script>
- import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" />
-
<script>
- import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" checked />
-
<script>
- import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" indeterminate />
-
<script>
- import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" hideLabel />
-
<script>
- import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox labelText="Label text" disabled />
-
<script>
- import { Checkbox } from "carbon-components-svelte";
-</script>
-
-<Checkbox skeleton />
-
v0.15.0 <script>
- import { ClickableTile } from "carbon-components-svelte";
-</script>
-
-<ClickableTile href="https://www.carbondesignsystem.com/">
- Carbon Design System
-</ClickableTile>
-
<script>
- import { ClickableTile } from "carbon-components-svelte";
-</script>
-
-<ClickableTile light href="https://www.carbondesignsystem.com/">
- Carbon Design System
-</ClickableTile>
-
v0.15.0 yarn add -D carbon-components-svelte
<script>
- import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
-
<script>
- import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
-
// helpers.js
-
-export function multiply(a: number, b: number) {
- return a * b;
-}
-
-export function divide(a: number, b: number) {
- return a / b;
-}
-
-export function add(a: number, b: number) {
- return a + b;
-}
-
-export function subtract(a: number, b: number) {
- return a - b;
-}<script>
- import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet type="multi" {code} />
-
// helpers.js
-
-export function multiply(a: number, b: number) {
- return a * b;
-}
-
-export function divide(a: number, b: number) {
- return a / b;
-}
-
-export function add(a: number, b: number) {
- return a + b;
-}
-
-export function subtract(a: number, b: number) {
- return a - b;
-}<script>
- import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet type="multi" {code} hideCopyButton />
-
<script>
- import { CodeSnippet } from "carbon-components-svelte";
-</script>
-
-<CodeSnippet skeleton />
-
v0.15.0 <script>
- import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
- titleText="Contact"
- placeholder="Select contact method"
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
- titleText="Contact"
- placeholder="Select contact method"
- selectedIndex={1}
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
- titleText="Contact"
- placeholder="Select contact method"
- size="xl"
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
- titleText="Contact"
- placeholder="Select contact method"
- size="sm"
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { ComboBox } from "carbon-components-svelte";
-</script>
-
-<ComboBox
- titleText="Contact"
- placeholder="Select contact method"
- disabled
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
v0.15.0 <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>
-
v0.15.0 <script>
- import { ContentSwitcher, Switch } from "carbon-components-svelte";
-</script>
-
-<ContentSwitcher>
- <Switch text="Switch 1" />
- <Switch text="Switch 2" />
- <Switch text="Switch 3" />
-</ContentSwitcher>
-
<script>
- import { ContentSwitcher, Switch } from "carbon-components-svelte";
-</script>
-
-<ContentSwitcher light>
- <Switch text="Switch 1" />
- <Switch text="Switch 2" />
- <Switch text="Switch 3" />
-</ContentSwitcher>
-
<script>
- import { ContentSwitcher, Switch } from "carbon-components-svelte";
- import Add16 from "carbon-icons-svelte/lib/Add16";
-</script>
-
-<ContentSwitcher>
- <Switch>
- <div style="display: flex; align-items: center;">
- Third section
- <Add16 style="margin-left: .25rem;" />
- </div>
- </Switch>
- <Switch text="Switch 2" />
-</ContentSwitcher>
-
<script>
- import { ContentSwitcher, Switch } from "carbon-components-svelte";
-</script>
-
-<ContentSwitcher>
- <Switch text="Switch 1" disabled />
- <Switch text="Switch 2" disabled />
-</ContentSwitcher>
-
v0.15.0 <script>
- import { CopyButton } from "carbon-components-svelte";
-</script>
-
-<CopyButton on:click />
-
<script>
- import { CopyButton } from "carbon-components-svelte";
-</script>
-
-<CopyButton on:click feedback="Copied to clipboard" />
-
v0.15.0 | Name | Protocol | Port | Rule |
|---|---|---|---|
| Load Balancer 3 | HTTP | 3000 | Round robin |
| Load Balancer 1 | HTTP | 443 | Round robin |
| Load Balancer 2 | HTTP | 80 | DNS delegation |
| Load Balancer 6 | HTTP | 3000 | Round robin |
| Load Balancer 4 | HTTP | 443 | Round robin |
| Load Balancer 5 | HTTP | 80 | DNS delegation |
<script>
- import { DataTable } from "carbon-components-svelte";
-</script>
-
-<DataTable
- headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
- rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
-/>
-
Your organization's active load balancers.
| Name | Protocol | Port | Rule |
|---|---|---|---|
| Load Balancer 3 | HTTP | 3000 | Round robin |
| Load Balancer 1 | HTTP | 443 | Round robin |
| Load Balancer 2 | HTTP | 80 | DNS delegation |
| Load Balancer 6 | HTTP | 3000 | Round robin |
| Load Balancer 4 | HTTP | 443 | Round robin |
| Load Balancer 5 | HTTP | 80 | DNS delegation |
<script>
- import { DataTable } from "carbon-components-svelte";
-</script>
-
-<DataTable
- title="Load balancers"
- description="Your organization's active load balancers."
- headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
- rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
-/>
-
| Name | Protocol | Port | Rule |
|---|---|---|---|
| Load Balancer 3 | HTTP | 3000 | Round robin |
| Load Balancer 1 | HTTP | 443 | Round robin |
| Load Balancer 2 | HTTP | 80 | DNS delegation |
| Load Balancer 6 | HTTP | 3000 | Round robin |
| Load Balancer 4 | HTTP | 443 | Round robin |
| Load Balancer 5 | HTTP | 80 | DNS delegation |
<script>
- import { DataTable } from "carbon-components-svelte";
-</script>
-
-<DataTable
- zebra
- headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
- rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
-/>
-
| Name | Protocol | Port | Rule |
|---|---|---|---|
| Load Balancer 3 | HTTP | 3000 | Round robin |
| Load Balancer 1 | HTTP | 443 | Round robin |
| Load Balancer 2 | HTTP | 80 | DNS delegation |
| Load Balancer 6 | HTTP | 3000 | Round robin |
| Load Balancer 4 | HTTP | 443 | Round robin |
| Load Balancer 5 | HTTP | 80 | DNS delegation |
<script>
- import { DataTable } from "carbon-components-svelte";
-</script>
-
-<DataTable
- size="short"
- headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
- rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
-/>
-
| Name | Protocol | Port | Rule |
|---|---|---|---|
| Load Balancer 3 | HTTP | 3000 | Round robin |
| Load Balancer 1 | HTTP | 443 | Round robin |
| Load Balancer 2 | HTTP | 80 | DNS delegation |
| Load Balancer 6 | HTTP | 3000 | Round robin |
| Load Balancer 4 | HTTP | 443 | Round robin |
| Load Balancer 5 | HTTP | 80 | DNS delegation |
<script>
- import { DataTable } from "carbon-components-svelte";
-</script>
-
-<DataTable
- size="compact"
- headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
- rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
-/>
-
| Load Balancer 3 | HTTP | 3000 | Round robin |
| Load Balancer 1 | HTTP | 443 | Round robin |
| Load Balancer 2 | HTTP | 80 | DNS delegation |
| Load Balancer 6 | HTTP | 3000 | Round robin |
| Load Balancer 4 | HTTP | 443 | Round robin |
| Load Balancer 5 | HTTP | 80 | DNS delegation |
<script>
- import { DataTable } from "carbon-components-svelte";
-</script>
-
-<DataTable
- sortable
- headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
- rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
-/>
-
<script>
- import { DataTableSkeleton } from "carbon-components-svelte";
-</script>
-
-<DataTableSkeleton />
-
| Name | Protocol | Port | Rule |
|---|---|---|---|
<script>
- import { DataTableSkeleton } from "carbon-components-svelte";
-</script>
-
-<DataTableSkeleton headers={['Name', 'Protocol', 'Port', 'Rule']} rows={10} />
-
<script>
- import { DataTableSkeleton } from "carbon-components-svelte";
-</script>
-
-<DataTableSkeleton showHeader={false} showToolbar={false} />
-
v0.15.0 <script>
- import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
- <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
-</DatePicker>
-
<script>
- import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
- <DatePickerInput
- hideLabel
- labelText="Date of birth"
- placeholder="mm/dd/yyyy"
- />
-</DatePicker>
-
<script>
- import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker light>
- <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
-</DatePicker>
-
<script>
- import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
- <DatePickerInput
- size="xl"
- labelText="Date of birth"
- placeholder="mm/dd/yyyy"
- />
-</DatePicker>
-
<script>
- import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
- <DatePickerInput
- size="sm"
- labelText="Date of birth"
- placeholder="mm/dd/yyyy"
- />
-</DatePicker>
-
<script>
- import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
- <DatePickerInput
- invalid
- invalidText="Invalid date"
- labelText="Date of birth"
- placeholder="mm/dd/yyyy"
- />
-</DatePicker>
-
<script>
- import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker>
- <DatePickerInput
- disabled
- labelText="Date of birth"
- placeholder="mm/dd/yyyy"
- />
-</DatePicker>
-
<script>
- import { DatePicker, DatePickerInput } from "carbon-components-svelte";
-</script>
-
-<DatePicker datePickerType="single">
- <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
-</DatePicker>
-
<script>
- import { DatePickerSkeleton } from "carbon-components-svelte";
-</script>
-
-<DatePickerSkeleton />
-
v0.15.0 <script>
- import { Dropdown } from "carbon-components-svelte";
-</script>
-
-<Dropdown
- titleText="Contact"
- selectedIndex={0}
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { Dropdown } from "carbon-components-svelte";
-</script>
-
-<Dropdown
- light
- titleText="Contact"
- selectedIndex={0}
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { Dropdown } from "carbon-components-svelte";
-</script>
-
-<Dropdown
- type="inline"
- titleText="Contact"
- selectedIndex={0}
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { Dropdown } from "carbon-components-svelte";
-</script>
-
-<Dropdown
- disabled
- titleText="Contact"
- selectedIndex={0}
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { DropdownSkeleton } from "carbon-components-svelte";
-</script>
-
-<DropdownSkeleton />
-
v0.15.0 <script>
- import { ExpandableTile } from "carbon-components-svelte";
-</script>
-
-<ExpandableTile>
- <div slot="above" style="height: 10rem">Above the fold content here</div>
- <div slot="below" style="height: 10rem">Below the fold content here</div>
-</ExpandableTile>
-
<script>
- import { ExpandableTile } from "carbon-components-svelte";
-</script>
-
-<ExpandableTile expanded>
- <div slot="above" style="height: 10rem">Above the fold content here</div>
- <div slot="below" style="height: 10rem">Below the fold content here</div>
-</ExpandableTile>
-
<script>
- import { ExpandableTile } from "carbon-components-svelte";
-</script>
-
-<ExpandableTile light>
- <div slot="above" style="height: 10rem">Above the fold content here</div>
- <div slot="below" style="height: 10rem">Below the fold content here</div>
-</ExpandableTile>
-
v0.15.0 <script>
- import { FileUploaderButton } from "carbon-components-svelte";
-</script>
-
-<FileUploaderButton labelText="Add files" />
-
Only JPEG files are accepted.
<script>
- import { FileUploader } from "carbon-components-svelte";
-</script>
-
-<FileUploader
- multiple
- labelTitle="Upload files"
- buttonLabel="Add files"
- labelDescription="Only JPEG files are accepted."
- accept={['.jpg', '.jpeg']}
- status="complete"
-/>
-
README.md
<script>
- import { FileUploaderItem } from "carbon-components-svelte";
-</script>
-
-<FileUploaderItem name="README.md" status="uploading" />
-
README.md
<script>
- import { FileUploaderItem } from "carbon-components-svelte";
-</script>
-
-<FileUploaderItem name="README.md" status="complete" />
-
README.md
<script>
- import { FileUploaderItem } from "carbon-components-svelte";
-</script>
-
-<FileUploaderItem invalid name="README.md" status="edit" />
-
<script>
- import { FileUploaderDropContainer } from "carbon-components-svelte";
-</script>
-
-<FileUploaderDropContainer
- labelText="Drag and drop files here or click to upload"
- multiple
-/>
-
<script>
- import { FileUploaderSkeleton } from "carbon-components-svelte";
-</script>
-
-<FileUploaderSkeleton />
-
v0.15.0 <script>
- import {
- FluidForm,
- TextInput,
- PasswordInput,
- } from "carbon-components-svelte";
-</script>
-
-<FluidForm>
- <TextInput labelText="User name" placeholder="Enter user name..." required />
- <PasswordInput
- required
- type="password"
- labelText="Password"
- placeholder="Enter password..."
- />
-</FluidForm>
-
v0.15.0 <script>
- import {
- Form,
- FormGroup,
- Checkbox,
- RadioButtonGroup,
- RadioButton,
- Select,
- SelectItem,
- Button,
- } from "carbon-components-svelte";
-</script>
-
-<Form on:submit>
- <FormGroup legendText="Checkboxes">
- <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
- <Checkbox id="checkbox-1" labelText="Checkbox Label" />
- <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
- </FormGroup>
- <FormGroup legendText="Radio buttons">
- <RadioButtonGroup name="radio-button-group" selected="default-selected">
- <RadioButton
- id="radio-1"
- value="standard"
- labelText="Standard Radio Button"
- />
- <RadioButton
- id="radio-2"
- value="default-selected"
- labelText="Default Selected Radio Button"
- />
- <RadioButton
- id="radio-4"
- value="disabled"
- labelText="Disabled Radio Button"
- disabled
- />
- </RadioButtonGroup>
- </FormGroup>
- <FormGroup>
- <Select id="select-1" labelText="Select menu" value="placeholder-item">
- <SelectItem
- disabled
- hidden
- value="placeholder-item"
- text="Choose an option"
- />
- <SelectItem value="option-1" text="Option 1" />
- <SelectItem value="option-2" text="Option 2" />
- <SelectItem value="option-3" text="Option 3" />
- </Select>
- </FormGroup>
- <Button type="submit">Submit</Button>
-</Form>
-
v0.15.0 <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>
-
<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>
-
<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>
-
<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>
-
<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>
-
<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>
-
<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>
-
v0.15.0 <script>
- import { Icon } from "carbon-components-svelte";
- import Add16 from "carbon-icons-svelte/lib/Add16";
- import Add20 from "carbon-icons-svelte/lib/Add20";
- import Add24 from "carbon-icons-svelte/lib/Add24";
- import Add32 from "carbon-icons-svelte/lib/Add32";
-</script>
-
-<Icon render={Add16} />
-<Icon render={Add20} />
-<Icon render={Add24} />
-<Icon render={Add32} />
-
<script>
- import { Icon } from "carbon-components-svelte";
- import Add16 from "carbon-icons-svelte/lib/Add16";
- import Add20 from "carbon-icons-svelte/lib/Add20";
- import Add24 from "carbon-icons-svelte/lib/Add24";
- import Add32 from "carbon-icons-svelte/lib/Add32";
-</script>
-
-<Icon skeleton render={Add16} />
-<Icon skeleton size={20} render={Add20} />
-<Icon skeleton size={24} render={Add24} />
-<Icon skeleton size={32} render={Add32} />
-
v0.15.0 <script>
- import { InlineLoading } from "carbon-components-svelte";
-</script>
-
-<InlineLoading />
-
<script>
- import { InlineLoading } from "carbon-components-svelte";
-</script>
-
-<InlineLoading description="Loading metrics..." />
-
<script>
- import { InlineLoading } from "carbon-components-svelte";
-</script>
-
-<InlineLoading status="active" />
-<InlineLoading status="inactive" />
-<InlineLoading status="finished" />
-<InlineLoading status="error" />
-
v0.15.0 Title
<script>
- import { InlineNotification } from "carbon-components-svelte";
-</script>
-
-<InlineNotification on:close />
-
<script>
- import { InlineNotification } from "carbon-components-svelte";
-</script>
-
-<InlineNotification
- hideCloseButton
- kind="warning"
- title="Upcoming scheduled maintenance"
-/>
-
Upcoming scheduled maintenance
<script>
- import {
- InlineNotification,
- NotificationActionButton,
- } from "carbon-components-svelte";
-</script>
-
-<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
- <div slot="actions">
- <NotificationActionButton>Learn more</NotificationActionButton>
- </div>
-</InlineNotification>
-
Title
Title
Title
Title
Title
Title
<script>
- import { InlineNotification } from "carbon-components-svelte";
-</script>
-
-<InlineNotification kind="error" />
-<InlineNotification kind="info" />
-<InlineNotification kind="info-square" />
-<InlineNotification kind="success" />
-<InlineNotification kind="warning" />
-<InlineNotification kind="warning-alt" />
-
Title
Title
Title
Title
Title
Title
<script>
- import { InlineNotification } from "carbon-components-svelte";
-</script>
-
-<InlineNotification lowContrast kind="error" />
-<InlineNotification lowContrast kind="info" />
-<InlineNotification lowContrast kind="info-square" />
-<InlineNotification lowContrast kind="success" />
-<InlineNotification lowContrast kind="warning" />
-<InlineNotification lowContrast kind="warning-alt" />
-
v0.15.0 <script>
- import { Link } from "carbon-components-svelte";
-</script>
-
-<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
-
<script>
- import { Link } from "carbon-components-svelte";
-</script>
-
-<div>
- Visit the
- <Link inline href="https://www.carbondesignsystem.com/">
- Carbon Design System
- </Link>.
-</div>
-
Carbon Design System
<script>
- import { Link } from "carbon-components-svelte";
-</script>
-
-<Link disabled href="https://www.carbondesignsystem.com/">
- Carbon Design System
-</Link>
-
<script>
- import { Link } from "carbon-components-svelte";
-</script>
-
-<Link visited href="https://www.carbondesignsystem.com/">
- Carbon Design System
-</Link>
-
v0.15.0 <script>
- import { Loading } from "carbon-components-svelte";
-</script>
-
-<Loading />
-
<script>
- import { Loading } from "carbon-components-svelte";
-</script>
-
-<Loading withOverlay={false} />
-
<script>
- import { Loading } from "carbon-components-svelte";
-</script>
-
-<Loading withOverlay={false} small />
-
v0.15.0 <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>
-
<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>
-
<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>
-
<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>
-
<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>
-
<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>
-
preventCloseOnClickOutside prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
<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>
-
v0.15.0 <script>
- import { MultiSelect } from "carbon-components-svelte";
-</script>
-
-<MultiSelect
- titleText="Contact"
- label="Select contact methods..."
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
- selectedIds={['0', '1']}
-/>
-
<script>
- import { MultiSelect } from "carbon-components-svelte";
-</script>
-
-<MultiSelect
- light
- titleText="Contact"
- label="Select contact methods..."
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { MultiSelect } from "carbon-components-svelte";
-</script>
-
-<MultiSelect
- type="inline"
- titleText="Contact"
- label="Select contact methods..."
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
<script>
- import { MultiSelect } from "carbon-components-svelte";
-</script>
-
-<MultiSelect
- filterable
- titleText="Contact"
- placeholder="Filter contact methods..."
- items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
-/>
-
v0.15.0 <script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput label="Clusters" />
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput
- label="Clusters"
- helperText="Clusters provisioned in your region"
-/>
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput
- min={4}
- max={20}
- value={4}
- invalidText="Number must be between 4 and 20."
- helperText="Clusters provisioned in your region"
- label="Clusters (4 min, 20 max)"
-/>
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput hideLabel label="Clusters" />
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput light label="Clusters" />
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput mobile label="Clusters" />
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput size="xl" label="Clusters" />
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput size="sm" label="Clusters" />
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput invalid invalidText="An error occurred" label="Clusters" />
-
<script>
- import { NumberInput } from "carbon-components-svelte";
-</script>
-
-<NumberInput disabled label="Clusters" />
-
<script>
- import { NumberInputSkeleton } from "carbon-components-svelte";
-</script>
-
-<NumberInputSkeleton />
-
<script>
- import { NumberInputSkeleton } from "carbon-components-svelte";
-</script>
-
-<NumberInputSkeleton hideLabel />
-
v0.15.0 <script>
- import { OrderedList, ListItem } from "carbon-components-svelte";
-</script>
-
-<OrderedList>
- <ListItem>Ordered list item</ListItem>
- <ListItem>Ordered list item</ListItem>
- <ListItem>Ordered list item</ListItem>
-</OrderedList>
-
<script>
- import { OrderedList, ListItem, Link } from "carbon-components-svelte";
-</script>
-
-<OrderedList>
- <ListItem>
- <Link href="#">Ordered list item</Link>
- </ListItem>
- <ListItem>
- <Link href="#">Ordered list item</Link>
- </ListItem>
- <ListItem>
- <Link href="#">Ordered list item</Link>
- </ListItem>
-</OrderedList>
-
<script>
- import { OrderedList, ListItem } from "carbon-components-svelte";
-</script>
-
-<OrderedList>
- <ListItem>
- Ordered list level 1
- <OrderedList nested>
- <ListItem>Ordered list level 2</ListItem>
- <ListItem>
- Ordered list level 3
- <OrderedList nested>
- <ListItem>Ordered list level 3</ListItem>
- <ListItem>Ordered list level 3</ListItem>
- </OrderedList>
- </ListItem>
- </OrderedList>
- </ListItem>
- <ListItem>Ordered list level 1</ListItem>
- <ListItem>Ordered list level 1</ListItem>
-</OrderedList>
-
v0.15.0 <script>
- import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<OverflowMenu>
- <OverflowMenuItem text="Manage credentials" />
- <OverflowMenuItem
- href="https://cloud.ibm.com/docs/api-gateway/"
- text="API documentation"
- />
- <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
<script>
- import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<OverflowMenu open flipped>
- <OverflowMenuItem text="Manage credentials" />
- <OverflowMenuItem
- href="https://cloud.ibm.com/docs/api-gateway/"
- text="API documentation"
- />
- <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
<script>
- import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<OverflowMenu flipped direction="top">
- <OverflowMenuItem text="Manage credentials" />
- <OverflowMenuItem
- href="https://cloud.ibm.com/docs/api-gateway/"
- text="API documentation"
- />
- <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
By default, the first overflow menu item is focused when opening the dropdown.
<script>
- import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<OverflowMenu>
- <OverflowMenuItem text="Manage credentials" />
- <OverflowMenuItem
- href="https://cloud.ibm.com/docs/api-gateway/"
- text="API documentation"
- />
- <OverflowMenuItem primaryFocus danger text="Delete service" />
-</OverflowMenu>
-
<script>
- import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-</script>
-
-<OverflowMenu style="width: auto;">
- <div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
- <OverflowMenuItem text="Manage credentials" />
- <OverflowMenuItem
- href="https://cloud.ibm.com/docs/api-gateway/"
- text="API documentation"
- />
- <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
v0.15.0 <script>
- import { Pagination } from "carbon-components-svelte";
-</script>
-
-<Pagination totalItems={102} pageSizes={[10, 15, 20]} />
-
<script>
- import { Pagination } from "carbon-components-svelte";
-</script>
-
-<Pagination totalItems={102} page={4} />
-
<script>
- import { Pagination } from "carbon-components-svelte";
-</script>
-
-<Pagination totalItems={102} pageSizes={[16, 36, 99]} pageSize={36} />
-
<script>
- import { Pagination } from "carbon-components-svelte";
-</script>
-
-<Pagination totalItems={102} pageInputDisabled />
-
<script>
- import { PaginationSkeleton } from "carbon-components-svelte";
-</script>
-
-<PaginationSkeleton />
-
v0.15.0 v0.15.0 <script>
- import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput labelText="Password" placeholder="Enter password..." />
-
Set prop type to "text" to toggle password visibility.
<script>
- import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput
- labelText="Password"
- type="text"
- placeholder="Enter password..."
- value="as_lta0890sdfpo__!9901"
-/>
-
<script>
- import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
-
<script>
- import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput light labelText="Password" placeholder="Enter password..." />
-
<script>
- import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
-
<script>
- import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
-
<script>
- import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput
- invalid
- invalidText="Incorrect user name or password."
- labelText="Password"
- placeholder="Enter password..."
-/>
-
<script>
- import { PasswordInput } from "carbon-components-svelte";
-</script>
-
-<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
-
v0.15.0 <script>
- import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
-</script>
-
-<ProgressIndicator>
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
-</ProgressIndicator>
-
<script>
- import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
-</script>
-
-<ProgressIndicator spaceEqually>
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
-</ProgressIndicator>
-
<script>
- import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
-</script>
-
-<ProgressIndicator vertical>
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
- <ProgressStep
- label="Really long label"
- description="The progress indicator will listen for clicks on the steps"
- />
-</ProgressIndicator>
-
<script>
- import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
-</script>
-
-<ProgressIndicatorSkeleton />
-
v0.15.0 <script>
- import {
- FormGroup,
- RadioButtonGroup,
- RadioButton,
- } from "carbon-components-svelte";
-</script>
-
-<FormGroup legendText="Storage tier (disk)">
- <RadioButtonGroup selected="standard">
- <RadioButton labelText="Free (1 GB)" value="free" />
- <RadioButton labelText="Standard (10 GB)" value="standard" />
- <RadioButton labelText="Pro (128 GB)" value="pro" />
- </RadioButtonGroup>
-</FormGroup>
-
<script>
- import {
- FormGroup,
- RadioButtonGroup,
- RadioButton,
- } from "carbon-components-svelte";
-</script>
-
-<FormGroup legendText="Storage tier (disk)">
- <RadioButtonGroup labelPosition="left" selected="standard">
- <RadioButton labelText="Free (1 GB)" value="free" />
- <RadioButton labelText="Standard (10 GB)" value="standard" />
- <RadioButton labelText="Pro (128 GB)" value="pro" />
- </RadioButtonGroup>
-</FormGroup>
-
<script>
- import {
- FormGroup,
- RadioButtonGroup,
- RadioButton,
- } from "carbon-components-svelte";
-</script>
-
-<FormGroup legendText="Storage tier (disk)">
- <RadioButtonGroup orientation="vertical" selected="standard">
- <RadioButton labelText="Free (1 GB)" value="free" />
- <RadioButton labelText="Standard (10 GB)" value="standard" />
- <RadioButton labelText="Pro (128 GB)" value="pro" />
- </RadioButtonGroup>
-</FormGroup>
-
<script>
- import {
- FormGroup,
- RadioButtonGroup,
- RadioButtonSkeleton,
- } from "carbon-components-svelte";
-</script>
-
-<FormGroup legendText="Storage tier (disk)">
- <RadioButtonGroup>
- <RadioButtonSkeleton />
- <RadioButtonSkeleton />
- <RadioButtonSkeleton />
- </RadioButtonGroup>
-</FormGroup>
-
<script>
- import {
- FormGroup,
- RadioButtonGroup,
- RadioButtonSkeleton,
- } from "carbon-components-svelte";
-</script>
-
-<FormGroup legendText="Storage tier (disk)">
- <RadioButtonGroup orientation="vertical">
- <RadioButtonSkeleton />
- <RadioButtonSkeleton />
- <RadioButtonSkeleton />
- </RadioButtonGroup>
-</FormGroup>
-
v0.15.0 <script>
- import { TileGroup, RadioTile } from "carbon-components-svelte";
-</script>
-
-<TileGroup legend="Service pricing tiers">
- <RadioTile value="0" checked>Lite plan</RadioTile>
- <RadioTile value="1">Standard plan</RadioTile>
- <RadioTile value="2">Plus plan</RadioTile>
-</TileGroup>
-
<script>
- import { TileGroup, RadioTile } from "carbon-components-svelte";
-</script>
-
-<TileGroup legend="Service pricing tiers">
- <RadioTile value="0" checked>Lite plan</RadioTile>
- <RadioTile value="1">Standard plan</RadioTile>
- <RadioTile value="2">Plus plan</RadioTile>
-</TileGroup>
-
v0.15.0 <script>
- import { Search } from "carbon-components-svelte";
-</script>
-
-<Search />
-
<script>
- import { Search } from "carbon-components-svelte";
-</script>
-
-<Search placeholder="Search catalog..." value="Cloud functions" />
-
<script>
- import { Search } from "carbon-components-svelte";
-</script>
-
-<Search light />
-
<script>
- import { Search } from "carbon-components-svelte";
-</script>
-
-<Search size="lg" />
-
<script>
- import { Search } from "carbon-components-svelte";
-</script>
-
-<Search size="sm" />
-
<script>
- import { Search } from "carbon-components-svelte";
-</script>
-
-<Search skeleton />
-
v0.15.0 <script>
- import { Select, SelectItem } from "carbon-components-svelte";
-</script>
-
-<Select labelText="Carbon theme" selected="g10">
- <SelectItem value="white" text="White" />
- <SelectItem value="g10" text="Gray 10" />
- <SelectItem value="g90" text="Gray 90" />
- <SelectItem value="g100" text="Gray 100" />
-</Select>
-
<script>
- import {
- Select,
- SelectItem,
- SelectItemGroup,
- } from "carbon-components-svelte";
-</script>
-
-<Select labelText="Carbon theme" selected="g10">
- <SelectItem value="0" text="Select a theme" disabled hidden />
- <SelectItemGroup label="Light theme">
- <SelectItem value="white" text="White" />
- <SelectItem value="g10" text="Gray 10" />
- </SelectItemGroup>
- <SelectItemGroup label="Dark theme">
- <SelectItem value="g90" text="Gray 90" />
- <SelectItem value="g100" text="Gray 100" />
- </SelectItemGroup>
-</Select>
-
<script>
- import { Select, SelectItem } from "carbon-components-svelte";
-</script>
-
-<Select light labelText="Carbon theme" selected="g10">
- <SelectItem value="white" text="White" />
- <SelectItem value="g10" text="Gray 10" />
- <SelectItem value="g90" text="Gray 90" />
- <SelectItem value="g100" text="Gray 100" />
-</Select>
-
<script>
- import { Select, SelectItem } from "carbon-components-svelte";
-</script>
-
-<Select inline labelText="Carbon theme" selected="g10">
- <SelectItem value="white" text="White" />
- <SelectItem value="g10" text="Gray 10" />
- <SelectItem value="g90" text="Gray 90" />
- <SelectItem value="g100" text="Gray 100" />
-</Select>
-
<script>
- import { Select, SelectItem } from "carbon-components-svelte";
-</script>
-
-<Select disabled labelText="Carbon theme" selected="g10">
- <SelectItem value="white" text="White" />
- <SelectItem value="g10" text="Gray 10" />
- <SelectItem value="g90" text="Gray 90" />
- <SelectItem value="g100" text="Gray 100" />
-</Select>
-
<script>
- import { SelectSkeleton } from "carbon-components-svelte";
-</script>
-
-<SelectSkeleton />
-
v0.15.0 <script>
- import { SelectableTile } from "carbon-components-svelte";
-</script>
-
-<div role="group" aria-label="selectable tiles">
- <SelectableTile selected>Multi-select Tile</SelectableTile>
- <SelectableTile selected>Multi-select Tile</SelectableTile>
- <SelectableTile>Multi-select Tile</SelectableTile>
-</div>
-
<script>
- import { SelectableTile } from "carbon-components-svelte";
-</script>
-
-<div role="group" aria-label="selectable tiles">
- <SelectableTile light selected>Multi-select Tile</SelectableTile>
- <SelectableTile light selected>Multi-select Tile</SelectableTile>
- <SelectableTile light>Multi-select Tile</SelectableTile>
-</div>
-
v0.15.0 <script>
- import { SkeletonPlaceholder } from "carbon-components-svelte";
-</script>
-
-<SkeletonPlaceholder />
-
<script>
- import { SkeletonPlaceholder } from "carbon-components-svelte";
-</script>
-
-<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />
-
v0.15.0 <script>
- import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText />
-
<script>
- import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText heading />
-
<script>
- import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText heading />
-
<script>
- import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText paragraph />
-
<script>
- import { SkeletonText } from "carbon-components-svelte";
-</script>
-
-<SkeletonText paragraph width="50%" />
-
v0.15.0 <script>
- import { Slider } from "carbon-components-svelte";
-</script>
-
-<Slider />
-
<script>
- import { Slider } from "carbon-components-svelte";
-</script>
-
-<Slider
- labelText="Runtime memory (MB)"
- min={10}
- max={990}
- maxLabel="990 MB"
- value={100}
-/>
-
<script>
- import { Slider } from "carbon-components-svelte";
-</script>
-
-<Slider
- labelText="Runtime memory (MB)"
- min={10}
- max={990}
- maxLabel="990 MB"
- value={100}
- step={10}
-/>
-
<script>
- import { Slider } from "carbon-components-svelte";
-</script>
-
-<Slider
- light
- labelText="Runtime memory (MB)"
- min={10}
- max={990}
- maxLabel="990 MB"
- value={100}
- step={10}
-/>
-
<script>
- import { SliderSkeleton } from "carbon-components-svelte";
-</script>
-
-<SliderSkeleton />
-
<script>
- import { SliderSkeleton } from "carbon-components-svelte";
-</script>
-
-<SliderSkeleton hideLabel />
-
v0.15.0 <script>
- import {
- StructuredList,
- StructuredListHead,
- StructuredListRow,
- StructuredListCell,
- StructuredListBody,
- } from "carbon-components-svelte";
-</script>
-
-<StructuredList>
- <StructuredListHead>
- <StructuredListRow head>
- <StructuredListCell head>Column A</StructuredListCell>
- <StructuredListCell head>Column B</StructuredListCell>
- <StructuredListCell head>Column C</StructuredListCell>
- </StructuredListRow>
- </StructuredListHead>
- <StructuredListBody>
- <StructuredListRow>
- <StructuredListCell noWrap>Row 1</StructuredListCell>
- <StructuredListCell>Row 1</StructuredListCell>
- <StructuredListCell>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
- finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
- euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
- porttitor interdum.
- </StructuredListCell>
- </StructuredListRow>
- <StructuredListRow>
- <StructuredListCell noWrap>Row 2</StructuredListCell>
- <StructuredListCell>Row 2</StructuredListCell>
- <StructuredListCell>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
- finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
- euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
- porttitor interdum.
- </StructuredListCell>
- </StructuredListRow>
- <StructuredListRow>
- <StructuredListCell noWrap>Row 3</StructuredListCell>
- <StructuredListCell>Row 3</StructuredListCell>
- <StructuredListCell>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
- finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
- euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
- porttitor interdum.
- </StructuredListCell>
- </StructuredListRow>
- </StructuredListBody>
-</StructuredList>
-
<script>
- import {
- StructuredList,
- StructuredListHead,
- StructuredListRow,
- StructuredListCell,
- StructuredListBody,
- StructuredListInput,
- } from "carbon-components-svelte";
- import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
-</script>
-
-<StructuredList selection selected="row-1-value">
- <StructuredListHead>
- <StructuredListRow head>
- <StructuredListCell head>ColumnA</StructuredListCell>
- <StructuredListCell head>ColumnB</StructuredListCell>
- <StructuredListCell head>ColumnC</StructuredListCell>
- <StructuredListCell head>{''}</StructuredListCell>
- </StructuredListRow>
- </StructuredListHead>
- <StructuredListBody>
- {#each [1, 2, 3] as item}
- <StructuredListRow label for="row-{item}">
- <StructuredListCell>Row {item}</StructuredListCell>
- <StructuredListCell>Row {item}</StructuredListCell>
- <StructuredListCell>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
- sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
- vulputate nisl a porttitor interdum.
- </StructuredListCell>
- <StructuredListInput
- id="row-{item}"
- value="row-{item}-value"
- title="row-{item}-title"
- name="row-{item}-name"
- />
- <StructuredListCell>
- <CheckmarkFilled16
- class="bx--structured-list-svg"
- aria-label="select an option"
- title="select an option"
- />
- </StructuredListCell>
- </StructuredListRow>
- {/each}
- </StructuredListBody>
-</StructuredList>
-
<script>
- import { StructuredListSkeleton } from "carbon-components-svelte";
-</script>
-
-<StructuredListSkeleton rows={3} />
-
v0.15.0 <script>
- import { Tabs, Tab, TabContent } from "carbon-components-svelte";
-</script>
-
-<Tabs>
- <Tab label="Tab label 1" />
- <Tab label="Tab label 2" />
- <Tab label="Tab label 3" />
- <div slot="content">
- <TabContent>Content 1</TabContent>
- <TabContent>Content 2</TabContent>
- <TabContent>Content 3</TabContent>
- </div>
-</Tabs>
-
<script>
- import { Tabs, Tab, TabContent } from "carbon-components-svelte";
-</script>
-
-<Tabs type="container">
- <Tab label="Tab label 1" />
- <Tab label="Tab label 2" />
- <Tab label="Tab label 3" />
- <div slot="content">
- <TabContent>Content 1</TabContent>
- <TabContent>Content 2</TabContent>
- <TabContent>Content 3</TabContent>
- </div>
-</Tabs>
-
<script>
- import { TabsSkeleton } from "carbon-components-svelte";
-</script>
-
-<TabsSkeleton count={3} />
-
v0.15.0 <script>
- import { Tag } from "carbon-components-svelte";
-</script>
-
-<Tag>IBM Cloud</Tag>
-
<script>
- import { Tag } from "carbon-components-svelte";
-</script>
-
-<Tag type="red">red</Tag>
-<Tag type="magenta">magenta</Tag>
-<Tag type="purple">purple</Tag>
-<Tag type="blue">blue</Tag>
-<Tag type="cyan">cyan</Tag>
-<Tag type="teal">teal</Tag>
-<Tag type="green">green</Tag>
-<Tag type="gray">gray</Tag>
-<Tag type="cool-gray">cool-gray</Tag>
-<Tag type="warm-gray">warm-gray</Tag>
-<Tag type="high-contrast">high-contrast</Tag>
-
<script>
- import { Tag } from "carbon-components-svelte";
-</script>
-
-<Tag filter on:click>Filterable</Tag>
-
<script>
- import { Tag } from "carbon-components-svelte";
-</script>
-
-<Tag skeleton />
-
v0.15.0 <script>
- import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea labelText="App description" placeholder="Enter a description..." />
-
<script>
- import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
- labelText="App description"
- helperText="A rich description helps us better recommend related products and services"
- placeholder="Enter a description..."
-/>
-
<script>
- import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
- hideLabel
- labelText="App description"
- placeholder="Enter a description..."
-/>
-
<script>
- import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
- light
- labelText="App description"
- placeholder="Enter a description..."
-/>
-
<script>
- import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
- rows={10}
- labelText="App description"
- placeholder="Enter a description..."
-/>
-
<script>
- import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
- invalid
- invalidText="Only plain text characters are allowed"
- labelText="App description"
- placeholder="Enter a description..."
-/>
-
<script>
- import { TextArea } from "carbon-components-svelte";
-</script>
-
-<TextArea
- disabled
- labelText="App description"
- placeholder="Enter a description..."
-/>
-
<script>
- import { TextAreaSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextAreaSkeleton />
-
<script>
- import { TextAreaSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextAreaSkeleton hideLabel />
-
v0.15.0 <script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput labelText="User name" placeholder="Enter user name..." />
-
<script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput
- labelText="User name"
- helperText="Your user name is associated with your email"
- placeholder="Enter user name..."
-/>
-
<script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
-
<script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput light labelText="User name" placeholder="Enter user name..." />
-
<script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput inline labelText="User name" placeholder="Enter user name..." />
-
<script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
-
<script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
-
<script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput
- invalid
- invalidText="User name is already taken. Please try another."
- labelText="User name"
- placeholder="Enter user name..."
-/>
-
<script>
- import { TextInput } from "carbon-components-svelte";
-</script>
-
-<TextInput disabled labelText="User name" placeholder="Enter user name..." />
-
<script>
- import { TextInputSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextInputSkeleton />
-
<script>
- import { TextInputSkeleton } from "carbon-components-svelte";
-</script>
-
-<TextInputSkeleton hideLabel />
-
v0.15.0 <script>
- import { Tile } from "carbon-components-svelte";
-</script>
-
-<Tile>Content</Tile>
-
<script>
- import { Tile } from "carbon-components-svelte";
-</script>
-
-<Tile light>Content</Tile>
-
v0.15.0 <script>
- import {
- TimePicker,
- TimePickerSelect,
- SelectItem,
- } from "carbon-components-svelte";
-</script>
-
-<TimePicker labelText="Cron job" placeholder="hh:mm">
- <TimePickerSelect value="PM">
- <SelectItem value="am" text="AM" />
- <SelectItem value="pm" text="PM" />
- </TimePickerSelect>
- <TimePickerSelect value="PDT">
- <SelectItem value="pdt" text="PDT" />
- <SelectItem value="gmt" text="GMT" />
- </TimePickerSelect>
-</TimePicker>
-
<script>
- import {
- TimePicker,
- TimePickerSelect,
- SelectItem,
- } from "carbon-components-svelte";
-</script>
-
-<TimePicker light labelText="Cron job" placeholder="hh:mm">
- <TimePickerSelect value="PM">
- <SelectItem value="am" text="AM" />
- <SelectItem value="pm" text="PM" />
- </TimePickerSelect>
- <TimePickerSelect value="PDT">
- <SelectItem value="pdt" text="PDT" />
- <SelectItem value="gmt" text="GMT" />
- </TimePickerSelect>
-</TimePicker>
-
<script>
- import {
- TimePicker,
- TimePickerSelect,
- SelectItem,
- } from "carbon-components-svelte";
-</script>
-
-<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
- <TimePickerSelect value="PM" disabled>
- <SelectItem value="am" text="AM" />
- <SelectItem value="pm" text="PM" />
- </TimePickerSelect>
- <TimePickerSelect value="PDT" disabled>
- <SelectItem value="pdt" text="PDT" />
- <SelectItem value="gmt" text="GMT" />
- </TimePickerSelect>
-</TimePicker>
-
v0.15.0 <script>
- import { ToastNotification } from "carbon-components-svelte";
-</script>
-
-<ToastNotification />
-
<script>
- import { ToastNotification } from "carbon-components-svelte";
-</script>
-
-<ToastNotification
- hideCloseButton
- kind="warning"
- title="Upcoming scheduled maintenance"
-/>
-
<script>
- import { ToastNotification } from "carbon-components-svelte";
-</script>
-
-<ToastNotification kind="error" />
-<ToastNotification kind="info" />
-<ToastNotification kind="info-square" />
-<ToastNotification kind="success" />
-<ToastNotification kind="warning" />
-<ToastNotification kind="warning-alt" />
-
<script>
- import { ToastNotification } from "carbon-components-svelte";
-</script>
-
-<ToastNotification lowContrast kind="error" />
-<ToastNotification lowContrast kind="info" />
-<ToastNotification lowContrast kind="info-square" />
-<ToastNotification lowContrast kind="success" />
-<ToastNotification lowContrast kind="warning" />
-<ToastNotification lowContrast kind="warning-alt" />
-
v0.15.0 <script>
- import { Toggle } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" />
-
<script>
- import { Toggle } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" toggled />
-
<script>
- import { Toggle } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
-
<script>
- import { Toggle } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" disabled />
-
<script>
- import { ToggleSkeleton } from "carbon-components-svelte";
-</script>
-
-<ToggleSkeleton />
-
v0.15.0 <script>
- import { ToggleSmall } from "carbon-components-svelte";
-</script>
-
-<ToggleSmall labelText="Push notifications" />
-
<script>
- import { ToggleSmall } from "carbon-components-svelte";
-</script>
-
-<ToggleSmall labelText="Push notifications" toggled />
-
<script>
- import { ToggleSmall } from "carbon-components-svelte";
-</script>
-
-<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
-
<script>
- import { ToggleSmall } from "carbon-components-svelte";
-</script>
-
-<ToggleSmall labelText="Push notifications" disabled />
-
<script>
- import { ToggleSmallSkeleton } from "carbon-components-svelte";
-</script>
-
-<ToggleSmallSkeleton />
-
v0.15.0 <script>
- import { Tooltip } from "carbon-components-svelte";
-</script>
-
-<Tooltip>
- <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-
<script>
- import { Tooltip } from "carbon-components-svelte";
-</script>
-
-<Tooltip triggerText="Resource list">
- <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-
<script>
- import { Tooltip } from "carbon-components-svelte";
-</script>
-
-<Tooltip triggerText="Top" direction="top">
- <p>Top</p>
-</Tooltip>
-<Tooltip triggerText="Right" direction="right">
- <p>Right</p>
-</Tooltip>
-<Tooltip triggerText="Bottom" direction="bottom">
- <p>Bottom</p>
-</Tooltip>
-<Tooltip triggerText="Left" direction="left">
- <p>Left</p>
-</Tooltip>
-
<script>
- import { Tooltip, Link, Button } from "carbon-components-svelte";
-</script>
-
-<Tooltip triggerText="Resource list">
- <p>Resources are provisioned based on your account's organization.</p>
- <div class="bx--tooltip__footer">
- <Link href="/">Learn more</Link>
- <Button size="small">Manage</Button>
- </div>
-</Tooltip>
-
<script>
- import { Tooltip } from "carbon-components-svelte";
- import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
-</script>
-
-<Tooltip triggerText="Resource list" icon={Catalog16}>
- <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-
<script>
- import { Tooltip } from "carbon-components-svelte";
-</script>
-
-<Tooltip triggerText="Resource list">
- <div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;" />
- <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-
v0.15.0 <script>
- import { TooltipDefinition } from "carbon-components-svelte";
-</script>
-
-<TooltipDefinition
- tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
->
- Armonk
-</TooltipDefinition>
-
<script>
- import { TooltipDefinition } from "carbon-components-svelte";
-</script>
-
-<TooltipDefinition
- direction="top"
- align="start"
- tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
->
- Armonk
-</TooltipDefinition>
-
v0.15.0 <script>
- import { TooltipIcon } from "carbon-components-svelte";
- import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
-</script>
-
-<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
- <Carbon24 />
-</TooltipIcon>
-
<script>
- import { TooltipIcon } from "carbon-components-svelte";
- import Filter20 from "carbon-icons-svelte/lib/Filter20";
-</script>
-
-<TooltipIcon tooltipText="Top start" direction="top" align="start">
- <Filter20 />
-</TooltipIcon>
-<TooltipIcon tooltipText="Right end" direction="right" align="end">
- <Filter20 />
-</TooltipIcon>
-<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start">
- <Filter20 />
-</TooltipIcon>
-<TooltipIcon tooltipText="Left start" direction="left" align="start">
- <Filter20 />
-</TooltipIcon>
-
v0.15.0 <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>
-
<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>
-
<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>
-
v0.15.0 <script>
- import { UnorderedList, ListItem } from "carbon-components-svelte";
-</script>
-
-<UnorderedList>
- <ListItem>Unordered list item</ListItem>
- <ListItem>Unordered list item</ListItem>
- <ListItem>Unordered list item</ListItem>
-</UnorderedList>
-
<script>
- import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
-</script>
-
-<UnorderedList>
- <ListItem>
- <Link href="#">Unordered list item</Link>
- </ListItem>
- <ListItem>
- <Link href="#">Unordered list item</Link>
- </ListItem>
- <ListItem>
- <Link href="#">Unordered list item</Link>
- </ListItem>
-</UnorderedList>
-
<script>
- import { UnorderedList, ListItem } from "carbon-components-svelte";
-</script>
-
-<UnorderedList>
- <ListItem>
- Unordered list level 1
- <UnorderedList nested>
- <ListItem>Unordered list level 2</ListItem>
- <ListItem>
- Unordered list level 3
- <UnorderedList nested>
- <ListItem>Unordered list level 3</ListItem>
- <ListItem>Unordered list level 3</ListItem>
- </UnorderedList>
- </ListItem>
- </UnorderedList>
- </ListItem>
- <ListItem>Unordered list level 1</ListItem>
- <ListItem>Unordered list level 1</ListItem>
-</UnorderedList>
-
Confirm changes
v0.15.0 carbon-components-svelte is a
- Svelte
- component library that implements the Carbon Design System, an
- open source design system
- by IBM.
A design system can facilitate frontend development and prototyping - because it is encourages reuse, consistency, and extensibility.
yarn add -D carbon-components-svelte
The broader Carbon Svelte effort extends to the icons, pictograms, and - data visualization libraries.