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

docs: move reactive label to component prop name column

Browse source
This commit is contained in:
Eric Liu 2020-11-20 09:39:25 -08:00
commit f1800bf332
2 changed files with 10 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -1,8 +1,8 @@
# carbon-components-svelte # carbon-components-svelte
> `carbon-components-svelte` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM. carbon-components-svelte is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
> A design system can facilitate frontend development and prototyping because it encourages reuse, consistency, and extensibility. A design system can facilitate frontend development and prototyping because it encourages reuse, consistency, and extensibility.
[![NPM][npm]][npm-url] [![NPM][npm]][npm-url]
[![Build][build]][build-badge] [![Build][build]][build-badge]
@ -16,7 +16,7 @@
Install `carbon-components-svelte` as a development dependency. Install `carbon-components-svelte` as a development dependency.
```bash ```sh
yarn add -D carbon-components-svelte yarn add -D carbon-components-svelte
# OR # OR
npm i -D carbon-components-svelte npm i -D carbon-components-svelte

15
docs/src/components/ComponentApi.svelte
View file

@ -92,6 +92,13 @@
<StructuredListRow> <StructuredListRow>
<StructuredListCell noWrap> <StructuredListCell noWrap>
<InlineSnippet code="{prop.name}" /> <InlineSnippet code="{prop.name}" />
{#if prop.reactive}
<div
style="white-space: nowrap; margin-top: var(--cds-spacing-03)"
>
<Tag type="cyan">Reactive</Tag>
</div>
{/if}
</StructuredListCell> </StructuredListCell>
<StructuredListCell> <StructuredListCell>
{#each prop.type.split(' | ') as type, i (type)} {#each prop.type.split(' | ') as type, i (type)}
@ -125,14 +132,6 @@
{/if} {/if}
</div> </div>
{/each} {/each}
{#if prop.reactive}
<div
style="white-space: nowrap; margin-left: calc(-1 * var(--cds-spacing-03)); margin-top: var(--cds-spacing-05)"
>
<Tag type="green">Reactive</Tag>
</div>
{/if}
</StructuredListCell> </StructuredListCell>
<StructuredListCell><code>{prop.value}</code></StructuredListCell> <StructuredListCell><code>{prop.value}</code></StructuredListCell>
<StructuredListCell> <StructuredListCell>