mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
RecursiveList (#717)
* 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
This commit is contained in:
parent
870c2c2ae8
commit
ae27bedf4c
17 changed files with 334 additions and 6 deletions
34
docs/src/pages/components/RecursiveList.svx
Normal file
34
docs/src/pages/components/RecursiveList.svx
Normal file
|
@ -0,0 +1,34 @@
|
|||
<script>
|
||||
import { InlineNotification, RecursiveList } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) to render the [UnorderedList](/components/UnorderedList) and [OrderedList](/components/OrderedList) components with data formatted as a tree structure. This is especially useful when the depth of the tree is unknown.
|
||||
|
||||
A child node can render text (`text`), a link (`href`), HTML content (`html`), and other `children`.
|
||||
|
||||
<InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton>
|
||||
<div class="body-short-01">
|
||||
HTML content provided via the <code>html</code> prop is not sanitized.
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Unordered
|
||||
|
||||
The `children` prop accepts an array of child nodes.
|
||||
|
||||
By default, the list type is unordered.
|
||||
|
||||
<FileSource src="/framed/RecursiveList/RecursiveList" />
|
||||
|
||||
### Ordered
|
||||
|
||||
Set `type` to `"ordered"` to use the ordered list variant.
|
||||
|
||||
<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />
|
||||
|
||||
### Ordered (native styles)
|
||||
|
||||
Set `type` to `"ordered-native"` to use the native styles for an ordered list.
|
||||
|
||||
<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
|
Loading…
Add table
Add a link
Reference in a new issue