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

chore(examples): add rollup set-up

Browse source
This commit is contained in:
Eric Liu 2020-09-07 15:35:20 -07:00
commit c1b98ced95
11 changed files with 889 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

96
examples/rollup/src/App.svelte Normal file
View file

@ -0,0 +1,96 @@
<script>
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";
let theme = "g10";
</script>
<style lang="scss" global>
@import "carbon-components-svelte/css/all";
</style>
<Theme persist bind:theme>
<Header />
<Content style="background: none; padding: 1rem">
<Grid>
<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="{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>
</Grid>
</Content>
</Theme>