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:
Eric Liu
GitHub
parent
870c2c2ae8
commit
ae27bedf4c
17 changed files with 334 additions and 6 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 168,
|
||||
"total": 169,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -7865,6 +7865,42 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "label" }
|
||||
},
|
||||
{
|
||||
"moduleName": "RecursiveList",
|
||||
"filePath": "src/RecursiveList/RecursiveList.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "children",
|
||||
"kind": "let",
|
||||
"description": "Specify the children to render",
|
||||
"type": "Array<RecursiveListNode & { children?: RecursiveListNode[]; }>",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"kind": "let",
|
||||
"description": "Specify the type of list to render",
|
||||
"type": "\"unordered\" | \"ordered\" | \"ordered-native\"",
|
||||
"value": "\"unordered\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"events": [],
|
||||
"typedefs": [
|
||||
{
|
||||
"type": "{ text?: string; href?: string; html?: string; }",
|
||||
"name": "RecursiveListNode",
|
||||
"ts": "interface RecursiveListNode { text?: string; href?: string; html?: string; }"
|
||||
}
|
||||
],
|
||||
"rest_props": { "type": "Element", "name": "ul | ol" }
|
||||
},
|
||||
{
|
||||
"moduleName": "Row",
|
||||
"filePath": "src/Grid/Row.svelte",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
import Footer from "../components/Footer.svelte";
|
||||
|
||||
const deprecated = ["ToggleSmall", "Icon"];
|
||||
const new_components = ["ProgressBar"];
|
||||
const new_components = ["ProgressBar", "RecursiveList"];
|
||||
|
||||
let isOpen = false;
|
||||
let isSideNavOpen = true;
|
||||
|
|
|
|||
|
|
@ -3,10 +3,16 @@ components: ["OrderedList", "ListItem"]
|
|||
---
|
||||
|
||||
<script>
|
||||
import { OrderedList, ListItem, Link } from "carbon-components-svelte";
|
||||
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>
|
||||
|
|
|
|||
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" />
|
||||
|
|
@ -3,10 +3,16 @@ components: ["UnorderedList", "ListItem"]
|
|||
---
|
||||
|
||||
<script>
|
||||
import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
|
||||
import { InlineNotification, UnorderedList, 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#unordered">RecursiveList</Link> component.
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default
|
||||
|
||||
<UnorderedList>
|
||||
|
|
|
|||
32
docs/src/pages/framed/RecursiveList/RecursiveList.svelte
Normal file
32
docs/src/pages/framed/RecursiveList/RecursiveList.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { RecursiveList } from "carbon-components-svelte";
|
||||
|
||||
const children = [
|
||||
{
|
||||
text: "Item 1",
|
||||
children: [
|
||||
{
|
||||
text: "Item 1a",
|
||||
children: [{ html: "<h5>HTML content</h5>" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Item 2",
|
||||
children: [
|
||||
{
|
||||
href: "https://svelte.dev/",
|
||||
},
|
||||
{
|
||||
href: "https://svelte.dev/",
|
||||
text: "Link with custom text",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Item 3",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<RecursiveList children="{children}" />
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { RecursiveList } from "carbon-components-svelte";
|
||||
|
||||
const children = [
|
||||
{
|
||||
text: "Item 1",
|
||||
children: [
|
||||
{
|
||||
text: "Item 1a",
|
||||
children: [{ html: "<h5>HTML content</h5>" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Item 2",
|
||||
children: [
|
||||
{
|
||||
href: "https://svelte.dev/",
|
||||
},
|
||||
{
|
||||
href: "https://svelte.dev/",
|
||||
text: "Link with custom text",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Item 3",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<RecursiveList type="ordered" children="{children}" />
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { RecursiveList } from "carbon-components-svelte";
|
||||
|
||||
const children = [
|
||||
{
|
||||
text: "Item 1",
|
||||
children: [
|
||||
{
|
||||
text: "Item 1a",
|
||||
children: [{ html: "<h5>HTML content</h5>" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Item 2",
|
||||
children: [
|
||||
{
|
||||
href: "https://svelte.dev/",
|
||||
},
|
||||
{
|
||||
href: "https://svelte.dev/",
|
||||
text: "Link with custom text",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Item 3",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<RecursiveList type="ordered-native" children="{children}" />
|
||||
Loading…
Add table
Add a link
Reference in a new issue