mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
ae27bedf4c* feat(recursive-list): add RecursiveList * feat(recursive-list): rename items prop to children * docs(recursive-list): add full examples * test(recursive-list): add types test * refactor(recursive-list): remove superfluous nested prop * docs(recursive-list): update docs * fix(recursive-list): remove nested prop from type test * fix(recursive-list): explicitly type restProps
88 lines
No EOL
2.3 KiB
Text
88 lines
No EOL
2.3 KiB
Text
---
|
|
components: ["OrderedList", "ListItem"]
|
|
---
|
|
|
|
<script>
|
|
import { InlineNotification, OrderedList, ListItem, Link } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
|
|
<div class="body-short-01">
|
|
To render data formatted as a tree structure, use the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component.
|
|
</div>
|
|
</InlineNotification>
|
|
|
|
### Default
|
|
|
|
<OrderedList>
|
|
<ListItem>Ordered list item</ListItem>
|
|
<ListItem>Ordered list item</ListItem>
|
|
<ListItem>Ordered list item</ListItem>
|
|
</OrderedList>
|
|
|
|
### With links
|
|
|
|
<OrderedList>
|
|
<ListItem>
|
|
<Link href="#">Ordered list item</Link>
|
|
</ListItem>
|
|
<ListItem>
|
|
<Link href="#">Ordered list item</Link>
|
|
</ListItem>
|
|
<ListItem>
|
|
<Link href="#">Ordered list item</Link>
|
|
</ListItem>
|
|
</OrderedList>
|
|
|
|
### Nested
|
|
|
|
<OrderedList>
|
|
<ListItem>
|
|
Ordered list level 1
|
|
<OrderedList nested>
|
|
<ListItem>Ordered list level 2</ListItem>
|
|
<ListItem>
|
|
Ordered list level 3
|
|
<OrderedList nested>
|
|
<ListItem>Ordered list level 3</ListItem>
|
|
<ListItem>Ordered list level 3</ListItem>
|
|
</OrderedList>
|
|
</ListItem>
|
|
</OrderedList>
|
|
</ListItem>
|
|
<ListItem>Ordered list level 1</ListItem>
|
|
<ListItem>Ordered list level 1</ListItem>
|
|
</OrderedList>
|
|
|
|
### Native list styles
|
|
|
|
Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text.
|
|
|
|
<OrderedList native>
|
|
<ListItem>
|
|
Ordered list level 1
|
|
<OrderedList nested>
|
|
<ListItem>Ordered list level 2</ListItem>
|
|
<ListItem>
|
|
Ordered list level 3
|
|
<OrderedList nested>
|
|
<ListItem>Ordered list level 3</ListItem>
|
|
<ListItem>Ordered list level 3</ListItem>
|
|
</OrderedList>
|
|
</ListItem>
|
|
</OrderedList>
|
|
</ListItem>
|
|
<ListItem>Ordered list level 1</ListItem>
|
|
<ListItem>Ordered list level 1</ListItem>
|
|
</OrderedList>
|
|
|
|
### Expressive styles
|
|
|
|
Set `expressive` to `true` to use Carbon's expressive typesetting.
|
|
|
|
<OrderedList expressive>
|
|
<ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
|
|
<ListItem>Ordered list item</ListItem>
|
|
<ListItem>Ordered list item</ListItem>
|
|
</OrderedList> |