mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 19:01:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update examples, update README documentation (#772)

Browse source 
* chore(examples): update example set-ups

* chore: update readme docs
This commit is contained in:
Eric 2021-07-29 15:51:34 -07:00 • committed by GitHub
commit 0315a17d4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
97 changed files with 6778 additions and 15821 deletions
Download patch file Download diff file Expand all files Collapse all files

27
examples/sapper/src/routes/_error.svelte
View file

@ -2,22 +2,17 @@
export let status;
export let error;
import { Row, Column, Link } from "carbon-components-svelte";
const dev = process.env.NODE_ENV === "development";
</script>
<Row>
<Column lg="{16}">
<h1>{status}</h1>
<div>
{error.message}
<Link inline href="/">Return home</Link>
</div>
{#if dev && error.stack}
<div>
<pre>{error.stack}</pre>
</div>
{/if}
</Column>
</Row>
<svelte:head>
<title>{status}</title>
</svelte:head>
<h1>{status}</h1>
<p>{error.message}</p>
{#if dev && error.stack}
<pre>{error.stack}</pre>
{/if}

27
examples/sapper/src/routes/_layout.svelte
View file

@ -1,28 +1,5 @@
<script>
export let segment = undefined;
import {
Content,
Breadcrumb,
BreadcrumbItem,
Grid,
Row,
Column,
Tabs,
TabContent,
Tab,
Select,
SelectItem,
} from "carbon-components-svelte";
import Header from "../components/Header.svelte";
import Theme from "../components/Theme.svelte";
import "carbon-components-svelte/css/white.css";
</script>
<Theme persist theme="g10">
<Header segment="{segment}" />
<Content style="background: none; padding: 1rem">
<Grid>
<slot />
</Grid>
</Content>
</Theme>
<slot />

84
examples/sapper/src/routes/index.svelte
View file

@ -1,85 +1,5 @@
<script>
import {
Content,
Breadcrumb,
BreadcrumbItem,
Grid,
Row,
Column,
Tabs,
TabContent,
Tab,
Select,
SelectItem,
} from "carbon-components-svelte";
import { getContext } from "svelte";
const { carbon_theme } = getContext("Theme");
import { Button } from "carbon-components-svelte";
</script>
<Row>
<Column lg="{16}">
<Breadcrumb noTrailingSlash aria-label="Page navigation">
<BreadcrumbItem href="/">Getting started</BreadcrumbItem>
</Breadcrumb>
<h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
</Column>
</Row>
<Row>
<Column noGutter>
<Tabs aria-label="Tab navigation">
<Tab label="About" />
<Tab label="Design" />
<Tab label="Develop" />
<div slot="content" class="tabbed-content">
<Grid as fullWidth let:props>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<Select
labelText="Carbon theme"
bind:selected="{$carbon_theme}"
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
<p>
Carbon is IBM’s open-source design system for digital products
and experiences. With the IBM Design Language as its
foundation, the system consists of working code, design tools
and resources, human interface guidelines, and a vibrant
community of contributors.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Rapidly build beautiful and accessible experiences. The Carbon
kit contains all resources you need to get started.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Carbon provides styles and components in Vanilla, React,
Angular, Vue and Svelte for anyone building on the web.
</p>
</Column>
</Row>
</TabContent>
</Grid>
</div>
</Tabs>
</Column>
</Row>
<Button>Primary button</Button>