mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
a53bddf8f6* chore(deps-dev): pin sveld dependency to v0.3.0 * docs: escape HTML in component prop descriptions * docs(ordered-list): describe use case for using native styles #418 * docs: update count for icons, charts packages * docs(readme): update description, links
123 lines
3.2 KiB
Svelte
123 lines
3.2 KiB
Svelte
<script>
|
|
import {
|
|
Content,
|
|
Grid,
|
|
Row,
|
|
Column,
|
|
CodeSnippet,
|
|
Link,
|
|
} from "carbon-components-svelte";
|
|
import TileCard from "../components/TileCard.svelte";
|
|
import { metatags } from "@sveltech/routify";
|
|
import copy from "clipboard-copy";
|
|
|
|
metatags.title = "Carbon Components Svelte";
|
|
metatags.description =
|
|
"The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts.";
|
|
|
|
const installYarn = "yarn add -D carbon-components-svelte";
|
|
const installNpm = "npm i -D carbon-components-svelte";
|
|
</script>
|
|
|
|
<Content>
|
|
<Grid>
|
|
<Row>
|
|
<Column>
|
|
<h1>Carbon Components Svelte</h1>
|
|
<p class="big-paragraph">
|
|
Carbon Components Svelte is a
|
|
<Link
|
|
inline
|
|
class="big-link"
|
|
href="https://github.com/sveltejs/svelte"
|
|
>
|
|
Svelte
|
|
</Link>
|
|
component library that implements the Carbon Design System, an
|
|
<Link
|
|
inline
|
|
class="big-link"
|
|
href="https://www.carbondesignsystem.com/"
|
|
>
|
|
open source design system
|
|
</Link>
|
|
by IBM.
|
|
</p>
|
|
<p>
|
|
Design systems facilitate design and development through reuse,
|
|
consistency, and extensibility.
|
|
</p>
|
|
</Column>
|
|
</Row>
|
|
<Row style="margin-bottom: var(--cds-layout-02)">
|
|
<Column>
|
|
<h3>Install</h3>
|
|
<h4>Installing with yarn:</h4>
|
|
<CodeSnippet
|
|
code="{installYarn}"
|
|
on:click="{() => {
|
|
copy(installYarn);
|
|
}}"
|
|
/>
|
|
|
|
<h4>Using npm:</h4>
|
|
|
|
<CodeSnippet
|
|
code="{installNpm}"
|
|
on:click="{() => {
|
|
copy(installNpm);
|
|
}}"
|
|
/>
|
|
</Column>
|
|
</Row>
|
|
<Row>
|
|
<Column>
|
|
<h3>Portfolio</h3>
|
|
<p>
|
|
The broader Carbon Svelte effort includes libraries for icons,
|
|
pictograms, and data visualization.
|
|
</p>
|
|
</Column>
|
|
</Row>
|
|
<Row noGutter>
|
|
<Column xlg="{5}" lg="{8}" md="{4}">
|
|
<TileCard
|
|
borderRight
|
|
borderBottom
|
|
title="Carbon Components Svelte"
|
|
subtitle="100+ components"
|
|
target="_blank"
|
|
href="https://github.com/IBM/carbon-components-svelte"
|
|
/>
|
|
</Column>
|
|
<Column xlg="{5}" lg="{8}" md="{4}">
|
|
<TileCard
|
|
borderBottom
|
|
title="Carbon Icons Svelte"
|
|
subtitle="5800+ icons"
|
|
target="_blank"
|
|
href="https://github.com/IBM/carbon-icons-svelte"
|
|
/>
|
|
</Column>
|
|
</Row>
|
|
<Row noGutter>
|
|
<Column xlg="{5}" lg="{8}" md="{4}">
|
|
<TileCard
|
|
borderRight
|
|
title="Carbon Pictograms Svelte"
|
|
subtitle="600+ pictograms"
|
|
target="_blank"
|
|
href="https://github.com/IBM/carbon-pictograms-svelte"
|
|
/>
|
|
</Column>
|
|
<Column xlg="{5}" lg="{8}" md="{4}">
|
|
<TileCard
|
|
title="Carbon Charts Svelte"
|
|
subtitle="16 chart types, powered by d3"
|
|
target="_blank"
|
|
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
|
|
/>
|
|
</Column>
|
|
</Row>
|
|
</Grid>
|
|
</Content>
|