mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
8ddf2def8b* chore(deps-dev): upgrade carbon-components to v10.36.0 * feat(structured-list): add condensed, flush props * fix(structured-list): deprecate the border prop * fix(code-snippet): set min/max height for multi-line code snippet #656 Fixes #656 * fix(image-loader): make SSR compatible using a window type check guard * docs(tag): add separate disabled example for filterable/interactive tags * docs: update number of supported chart types * feat(side-nav): support rail variant * feat(ui-shell): add isSelected prop to HeaderNavItem * fix(ui-shell): default isSelected to false in SideNavMenuItem * fix(text-area): forward missing keydown event #665 Fixes #665 * feat: forward keyup event to components with inputs * feat(checkbox): make labelText slottable #563 Closes #563 * feat: make labelText slottable Related #563 * docs(component-api): account for undefined type * docs(ui-shell): link to correct rail source * fix(ui-shell): default isSelected in HeaderNavItem to false
185 lines
No EOL
7.4 KiB
Text
185 lines
No EOL
7.4 KiB
Text
---
|
|
components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "StructuredListHead", "StructuredListCell", "StructuredListRow", "StructuredListInput"]
|
|
---
|
|
|
|
<script>
|
|
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
|
|
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
### Default (read-only)
|
|
|
|
<StructuredList>
|
|
<StructuredListHead>
|
|
<StructuredListRow head>
|
|
<StructuredListCell head>Column A</StructuredListCell>
|
|
<StructuredListCell head>Column B</StructuredListCell>
|
|
<StructuredListCell head>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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListBody>
|
|
</StructuredList>
|
|
|
|
### Condensed variant
|
|
|
|
<StructuredList condensed>
|
|
<StructuredListHead>
|
|
<StructuredListRow head>
|
|
<StructuredListCell head>Column A</StructuredListCell>
|
|
<StructuredListCell head>Column B</StructuredListCell>
|
|
<StructuredListCell head>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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListBody>
|
|
</StructuredList>
|
|
|
|
### Flush
|
|
|
|
<StructuredList flush>
|
|
<StructuredListHead>
|
|
<StructuredListRow head>
|
|
<StructuredListCell head>Column A</StructuredListCell>
|
|
<StructuredListCell head>Column B</StructuredListCell>
|
|
<StructuredListCell head>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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</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. Aenean posuere
|
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
|
vulputate nisl a porttitor interdum.
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListBody>
|
|
</StructuredList>
|
|
|
|
### Selectable rows
|
|
|
|
<StructuredList selection selected="row-1-value">
|
|
<StructuredListHead>
|
|
<StructuredListRow head>
|
|
<StructuredListCell head>ColumnA</StructuredListCell>
|
|
<StructuredListCell head>ColumnB</StructuredListCell>
|
|
<StructuredListCell head>ColumnC</StructuredListCell>
|
|
<StructuredListCell head>{''}</StructuredListCell>
|
|
</StructuredListRow>
|
|
</StructuredListHead>
|
|
<StructuredListBody>
|
|
{#each [1, 2, 3] as item}
|
|
<StructuredListRow label for="row-{item}">
|
|
<StructuredListCell>Row {item}</StructuredListCell>
|
|
<StructuredListCell>Row {item}</StructuredListCell>
|
|
<StructuredListCell>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
|
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>
|
|
<StructuredListInput
|
|
id="row-{item}"
|
|
value="row-{item}-value"
|
|
title="row-{item}-title"
|
|
name="row-{item}-name"
|
|
/>
|
|
<StructuredListCell>
|
|
<CheckmarkFilled16
|
|
class="bx--structured-list-svg"
|
|
aria-label="select an option"
|
|
title="select an option"
|
|
/>
|
|
</StructuredListCell>
|
|
</StructuredListRow>
|
|
{/each}
|
|
</StructuredListBody>
|
|
</StructuredList>
|
|
|
|
### Skeleton
|
|
|
|
<StructuredListSkeleton rows={3} /> |