mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 20:09:35 +00:00
569d7021cb* docs: fix "no-op" typo * docs: add carbon-preprocess-svelte * docs: use lg size for outbound link to source code * docs: update copy * docs: default to white theme * docs(recursive-list): simplify copy * docs(recursive-list): simplify copy * docs: apply noGutter to installation code snippets
34 lines
No EOL
1.1 KiB
Text
34 lines
No EOL
1.1 KiB
Text
<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 tree structured data.
|
|
|
|
A child node can render text, a link, HTML content, 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" /> |