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:
Eric Liu 2021-07-05 08:43:48 -07:00 committed by GitHub
commit ae27bedf4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 334 additions and 6 deletions

View 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" />