mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
137 lines
No EOL
5 KiB
Text
137 lines
No EOL
5 KiB
Text
---
|
|
components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "StructuredListHead", "StructuredListCell", "StructuredListRow", "StructuredListInput"]
|
|
---
|
|
|
|
<script>
|
|
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
|
|
import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default (read-only)
|
|
|
|
<StructuredList>
|
|
<StructuredListHead>
|
|
<StructuredListRow>
|
|
<StructuredListCell>Column A</StructuredListCell>
|
|
<StructuredListCell>Column B</StructuredListCell>
|
|
<StructuredListCell>Column C</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListHead>
|
|
<StructuredListBody>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
|
<StructuredListCell>Row 1</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
|
<StructuredListCell>Row 2</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
|
<StructuredListCell>Row 3</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListBody>
|
|
</StructuredList>
|
|
|
|
## Condensed variant
|
|
|
|
<StructuredList condensed>
|
|
<StructuredListHead>
|
|
<StructuredListRow>
|
|
<StructuredListCell>Column A</StructuredListCell>
|
|
<StructuredListCell>Column B</StructuredListCell>
|
|
<StructuredListCell>Column C</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListHead>
|
|
<StructuredListBody>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
|
<StructuredListCell>Row 1</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
|
<StructuredListCell>Row 2</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
|
<StructuredListCell>Row 3</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListBody>
|
|
</StructuredList>
|
|
|
|
## Flush
|
|
|
|
<StructuredList flush>
|
|
<StructuredListHead>
|
|
<StructuredListRow>
|
|
<StructuredListCell>Column A</StructuredListCell>
|
|
<StructuredListCell>Column B</StructuredListCell>
|
|
<StructuredListCell>Column C</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListHead>
|
|
<StructuredListBody>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
|
<StructuredListCell>Row 1</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
|
<StructuredListCell>Row 2</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
<StructuredListRow>
|
|
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
|
<StructuredListCell>Row 3</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
magna, finibus id tortor sed, aliquet bibendum augue.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListBody>
|
|
</StructuredList>
|
|
|
|
## Selectable rows
|
|
|
|
<FileSource src="/framed/StructuredList/ProgrammaticStructuredList" />
|
|
|
|
## Skeleton
|
|
|
|
<StructuredListSkeleton />
|
|
|
|
## Skeleton (custom count)
|
|
|
|
By default, the skeleton will render 5 rows. You can customize the number of rows by passing a `count` prop.
|
|
|
|
<StructuredListSkeleton count={3} /> |