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): add full examples

Browse source
This commit is contained in:
Eric Y Liu 2021-07-03 04:06:23 -07:00
commit 0cc3ede6e4
4 changed files with 105 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,74 +5,12 @@
### Unordered
<RecursiveList
items={[
{
text: "Item 1",
items: [
{
text: "Link",
href: "/",
items: [
{
html: "<h5>Hello world</h5>",
},
],
},
],
},
{
text: "Item 1",
}
]}
/>
<FileSource src="/framed/RecursiveList/RecursiveList" />
### Ordered
<RecursiveList
type="ordered"
items={[
{
text: "Item 1",
items: [
{
text: "Link",
href: "/",
items: [
{
html: "<h5>Hello world</h5>",
},
],
},
],
},
{
text: "Item 1",
}
]}
/>
<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />
### Ordered (native styles)
<RecursiveList
type="ordered-native"
items={[
{
text: "Item 1",
items: [
{
text: "Link",
href: "/",
items: [
{
html: "<h5>Hello world</h5>",
},
],
},
],
},
{
text: "Item 1",
}
]}
/>
<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />

34
docs/src/pages/framed/RecursiveList/RecursiveList.svelte Normal file
View file

@ -0,0 +1,34 @@
<script>
import { RecursiveList } from "carbon-components-svelte";
const children = [
{
text: "Item 1",
children: [
{
text: "Link",
href: "/",
children: [
{
html: "<h5>Hello world</h5>",
children: [{ text: "Item 1a" }],
},
],
},
],
},
{
text: "Item 2",
children: [
{
text: "Item 2 content",
},
],
},
{
text: "Item 3",
},
];
</script>
<RecursiveList children="{children}" />

34
docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte Normal file
View file

@ -0,0 +1,34 @@
<script>
import { RecursiveList } from "carbon-components-svelte";
const children = [
{
text: "Item 1",
children: [
{
text: "Link",
href: "/",
children: [
{
html: "<h5>Hello world</h5>",
children: [{ text: "Item 1a" }],
},
],
},
],
},
{
text: "Item 2",
children: [
{
text: "Item 2 content",
},
],
},
{
text: "Item 3",
},
];
</script>
<RecursiveList type="ordered" children="{children}" />

34
docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte Normal file
View file

@ -0,0 +1,34 @@
<script>
import { RecursiveList } from "carbon-components-svelte";
const items = [
{
text: "Item 1",
items: [
{
text: "Link",
href: "/",
items: [
{
html: "<h5>Hello world</h5>",
items: [{ text: "Item 1a" }],
},
],
},
],
},
{
text: "Item 2",
items: [
{
text: "Item 2 content",
},
],
},
{
text: "Item 3",
},
];
</script>
<RecursiveList type="ordered-native" items="{items}" />