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(structured-list): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:48:04 -07:00
commit 13ed961d86
1 changed files with 26 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

70
docs/src/pages/components/StructuredList.svx
View file

@ -3,13 +3,17 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
--- ---
<script> <script>
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte"; import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell, StructuredListRow, StructuredListInput } from "carbon-components-svelte";
import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte"; import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`StructuredList` provides a semantic way to display tabular data with support for selection, keyboard navigation, and various layout options.
## Default (read-only) ## Default (read-only)
Create a basic structured list with headers and rows.
<StructuredList> <StructuredList>
<StructuredListHead> <StructuredListHead>
<StructuredListRow head> <StructuredListRow head>
@ -20,40 +24,27 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
</StructuredListHead> </StructuredListHead>
<StructuredListBody> <StructuredListBody>
<StructuredListRow> <StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell> <StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell> <StructuredListCell>Row 1</StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui <StructuredListCell>Row 1</StructuredListCell>
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow> </StructuredListRow>
<StructuredListRow> <StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell> <StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell> <StructuredListCell>Row 2</StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui <StructuredListCell>Row 2</StructuredListCell>
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow> </StructuredListRow>
<StructuredListRow> <StructuredListRow>
<StructuredListCell noWrap>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell> <StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell> <StructuredListCell>Row 3</StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui <StructuredListCell>Row 3</StructuredListCell>
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow> </StructuredListRow>
</StructuredListBody> </StructuredListBody>
</StructuredList> </StructuredList>
## Condensed variant ## Condensed variant
Use the condensed variant for more compact rows.
<StructuredList condensed> <StructuredList condensed>
<StructuredListHead> <StructuredListHead>
<StructuredListRow head> <StructuredListRow head>
@ -64,39 +55,26 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
</StructuredListHead> </StructuredListHead>
<StructuredListBody> <StructuredListBody>
<StructuredListRow> <StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell> <StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell> <StructuredListCell>Row 1</StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui <StructuredListCell>Row 1</StructuredListCell>
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow> </StructuredListRow>
<StructuredListRow> <StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell> <StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell> <StructuredListCell>Row 2</StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui <StructuredListCell>Row 2</StructuredListCell>
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow> </StructuredListRow>
<StructuredListRow> <StructuredListRow>
<StructuredListCell noWrap>Row 3</StructuredListCell>
<StructuredListCell>Row 3</StructuredListCell> <StructuredListCell>Row 3</StructuredListCell>
<StructuredListCell> <StructuredListCell>Row 3</StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui <StructuredListCell>Row 3</StructuredListCell>
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow> </StructuredListRow>
</StructuredListBody> </StructuredListBody>
</StructuredList> </StructuredList>
## Flush ## Flush variant
Use the flush variant to remove padding from the list.
<StructuredList flush> <StructuredList flush>
<StructuredListHead> <StructuredListHead>
@ -142,6 +120,8 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
## Selectable rows ## Selectable rows
Enable row selection with the `selection` prop and `StructuredListInput` components.
<StructuredList selection selected="row-1-value"> <StructuredList selection selected="row-1-value">
<StructuredListHead> <StructuredListHead>
<StructuredListRow head> <StructuredListRow head>
@ -182,4 +162,6 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
## Skeleton ## Skeleton
Show a loading state with the skeleton variant.
<StructuredListSkeleton rows={3} /> <StructuredListSkeleton rows={3} />