mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
f2a3f8d2e1* chore(deps-dev): bump devDependencies * docs: update number of available carbon icons * feat(notification): distinguish dispatched close event between click/timeout * fix(notification): prevent class from being overriden by $$restProps * docs(notification): improve example body copy * fix(notification): remove notificationType prop * refactor(notification): resolve svelte file in imports * fix(notification): prevent class from being overridden by $$restProps * feat(notification): update TS signature for dispatched close event * docs: update contributing * fix(loading): adjust spinner styles * feat(tag): support custom icon variant * feat(tile): add optional expand/collapse icon labels to ExpandableTile * feat(code-snippet): support disabled state for single and multi-line types * fix(code-snippet): remove impossible class directive * fix(code-snippet): showMoreLess button size should be "field", not "small" * fix(password-input): disable visibility button - set default values for tooltipAlignment, tooltipPosition * fix(text-input): add missing warning field wrapper class * feat(button): infer hasIconOnly using $$slots API - requires Svelte version >=3.25 * docs(button): add danger tertiary, icon-only example * feat(button): set default values for tooltip alignment, position * docs: document dynamic theming * fix(modal): correctly set class props #482 * fix(form): forward submit event in FluidForm #487 * feat(dropdown): support warning state * feat(multi-select): support warning state * fix(multi-select): prevent dropdown from opening if disabled * feat(number-input): support warning state * chore(deps-dev): upgrade devDependencies * docs: bump @carbon/themes, carbon-components * refactor(data-table): co-locate DataTableSkeleton with DataTable * docs: update number of pictograms * fix(password-input): add missing "bx--btn" class to visibility toggle * docs: increase z-index for component preview
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="50+ 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="6000+ 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="700+ 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>
|