Treeview
A tree view widget presents a hierarchical list.
setup
Import the TreeView component in a script tag.
Svelte Copy
import { TreeView } from "@mgisolutions/design-system/svelte";
let tree = [
{
name: "Food",
value: 1,
opened: true,
checked: true,
href: "https://google.com",
children: [
{
name: "Vegetable",
value: 2,
opened: true,
checked: true,
href: "https://google.com",
children: [
{
name: "Salad",
value: 3,
opened: true,
checked: true,
href: "https://google.com",
},
{
name: "Mushroom",
value: 4,
opened: true,
checked: true,
href: "https://google.com",
},
],
},
{
name: "Chicken",
value: 5,
opened: true,
checked: true,
href: "https://google.com",
},
{
name: "Beef",
value: 6,
opened: true,
checked: true,
href: "https://google.com",
},
{
name: "Pork",
value: 7,
opened: true,
checked: true,
href: "https://google.com",
},
],
},
{
name: "Juice",
value: 12,
opened: true,
checked: true,
href: "https://google.com",
children: [
{
name: "Orange",
value: 18,
opened: true,
checked: true,
href: "https://google.com",
},
{
name: "Mango",
value: 16,
opened: true,
checked: true,
href: "https://google.com",
},
{
name: "Logan",
value: 10,
opened: true,
checked: true,
href: "https://google.com",
},
{
name: "Dragon Fruit",
value: 14,
opened: true,
checked: true,
href: "https://google.com",
},
],
},
];
basic usage
Basic usage TreeView
Demonstrate
Food
Vegetable
Salad
Mushroom
Chicken
Beef
Pork
Juice
Orange
Mango
Logan
Dragon Fruit
Svelte Copy
<TreeView data={tree} />
isLink
Component Data
- props
| Name | Description | Type | Default |
|---|---|---|---|
| data | The value of treeview | export interface ITreeView { name: string, value?: boolean, opened?: boolean, href?: string, children?: ITreeView[] } | null |
| isLink | If set, then label can click to redirect | boolean | false |