mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(recursive-list): update docs

Browse source
This commit is contained in:
Eric Y Liu 2021-07-03 04:50:24 -07:00
commit f43646fe6d
8 changed files with 65 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/src/pages/components/OrderedList.svx
View file

@ -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>

20
docs/src/pages/components/RecursiveList.svx
View file

@ -1,16 +1,34 @@
<script>
import { RecursiveList } from "carbon-components-svelte";
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" />

8
docs/src/pages/components/UnorderedList.svx
View file

@ -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>

16
docs/src/pages/framed/RecursiveList/RecursiveList.svelte
View file

@ -6,14 +6,8 @@
text: "Item 1",
children: [
{
text: "Link",
href: "/",
children: [
{
html: "<h5>Hello world</h5>",
children: [{ text: "Item 1a" }],
},
],
text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }],
},
],
},
@ -21,7 +15,11 @@
text: "Item 2",
children: [
{
text: "Item 2 content",
href: "https://svelte.dev/",
},
{
href: "https://svelte.dev/",
text: "Link with custom text",
},
],
},

16
docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte
View file

@ -6,14 +6,8 @@
text: "Item 1",
children: [
{
text: "Link",
href: "/",
children: [
{
html: "<h5>Hello world</h5>",
children: [{ text: "Item 1a" }],
},
],
text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }],
},
],
},
@ -21,7 +15,11 @@
text: "Item 2",
children: [
{
text: "Item 2 content",
href: "https://svelte.dev/",
},
{
href: "https://svelte.dev/",
text: "Link with custom text",
},
],
},

24
docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte
View file

@ -1,27 +1,25 @@
<script>
import { RecursiveList } from "carbon-components-svelte";
const items = [
const children = [
{
text: "Item 1",
items: [
children: [
{
text: "Link",
href: "/",
items: [
{
html: "<h5>Hello world</h5>",
items: [{ text: "Item 1a" }],
},
],
text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }],
},
],
},
{
text: "Item 2",
items: [
children: [
{
text: "Item 2 content",
href: "https://svelte.dev/",
},
{
href: "https://svelte.dev/",
text: "Link with custom text",
},
],
},
@ -31,4 +29,4 @@
];
</script>
<RecursiveList type="ordered-native" items="{items}" />
<RecursiveList type="ordered-native" children="{children}" />

4
src/RecursiveList/RecursiveList.svelte
View file

@ -15,9 +15,6 @@
*/
export let type = "unordered";
/** Set to `true` to use the nested variant */
export let nested = false;
import UnorderedList from "../UnorderedList/UnorderedList.svelte";
import OrderedList from "../OrderedList/OrderedList.svelte";
import RecursiveListItem from "./RecursiveListItem.svelte";
@ -26,7 +23,6 @@
<svelte:component
this="{type === 'unordered' ? UnorderedList : OrderedList}"
native="{type === 'ordered-native'}"
nested="{nested}"
{...$$restProps}
>
{#each children as child}

16
tests/RecursiveList.test.svelte
View file

@ -6,14 +6,8 @@
text: "Item 1",
children: [
{
text: "Link",
href: "/",
children: [
{
html: "<h5>Hello world</h5>",
children: [{ text: "Item 1a" }],
},
],
text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }],
},
],
},
@ -21,7 +15,11 @@
text: "Item 2",
children: [
{
text: "Item 2 content",
href: "https://svelte.dev/",
},
{
href: "https://svelte.dev/",
text: "Link with custom text",
},
],
},