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

docs(treeview): update examples

Browse source
This commit is contained in:
Eric Liu 2024-10-20 15:30:56 -07:00
commit efddbbd3cc
12 changed files with 82 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/framed/TreeView/TreeView.svelte
View file

@ -3,16 +3,16 @@
let activeId = "";
let selectedIds = [];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -24,12 +24,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -40,14 +40,14 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"

14
docs/src/pages/framed/TreeView/TreeViewActive.svelte
View file

@ -3,16 +3,16 @@
let activeId = 0;
let selectedIds = [];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -24,12 +24,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -40,14 +40,14 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"

14
docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
View file

@ -3,16 +3,16 @@
let treeview = null;
let expandedIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -24,12 +24,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -40,7 +40,7 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
@ -53,7 +53,7 @@
bind:this="{treeview}"
bind:expandedIds
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
/>
<style>

14
docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
View file

@ -3,18 +3,18 @@
let treeview = null;
let expandedIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 14];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
disabled: true,
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
disabled: true,
children: [
nodes: [
{ id: 3, text: "Apache Spark", disabled: true },
{ id: 4, text: "Hadoop", disabled: true },
],
@ -26,12 +26,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -42,7 +42,7 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
@ -61,7 +61,7 @@
bind:this="{treeview}"
bind:expandedIds
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
/>
<style>

14
docs/src/pages/framed/TreeView/TreeViewCompact.svelte
View file

@ -3,16 +3,16 @@
let activeId = 0;
let selectedIds = [];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -24,12 +24,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -40,7 +40,7 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
@ -48,7 +48,7 @@
<TreeView
size="compact"
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"

14
docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
View file

@ -2,16 +2,16 @@
import { TreeView, Button } from "carbon-components-svelte";
let treeview = null;
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -23,12 +23,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -39,7 +39,7 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
@ -51,7 +51,7 @@
<TreeView
bind:this="{treeview}"
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
/>
<style>

14
docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
View file

@ -2,16 +2,16 @@
import { TreeView, Button } from "carbon-components-svelte";
let treeview = null;
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -23,12 +23,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -39,7 +39,7 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
@ -57,7 +57,7 @@
<TreeView
bind:this="{treeview}"
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
/>
<style>

14
docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
View file

@ -4,16 +4,16 @@
let activeId = 1;
let selectedIds = [];
let expandedIds = [1, 2, 14];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -25,12 +25,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -41,14 +41,14 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
bind:activeId
bind:selectedIds
bind:expandedIds

14
docs/src/pages/framed/TreeView/TreeViewIcons.svelte
View file

@ -8,18 +8,18 @@
let activeId = 1;
let selectedIds = [];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
{
id: 1,
text: "Analytics",
icon: Analytics,
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
icon: Analytics,
children: [
nodes: [
{ id: 3, text: "Apache Spark", icon: Analytics },
{ id: 4, text: "Hadoop", icon: Analytics },
],
@ -32,13 +32,13 @@
id: 7,
text: "Blockchain",
icon: Blockchain,
children: [{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain }],
nodes: [{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain }],
},
{
id: 9,
text: "Databases",
icon: DataBase,
children: [
nodes: [
{
id: 10,
text: "IBM Cloud Databases for Elasticsearch",
@ -62,7 +62,7 @@
text: "Integration",
icon: SignalStrength,
disabled: true,
children: [
nodes: [
{
id: 15,
text: "IBM API Connect",
@ -76,7 +76,7 @@
<TreeView
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"

14
docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
View file

@ -3,16 +3,16 @@
let activeId = 0;
let selectedIds = [0, 7, 9];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -24,12 +24,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -40,14 +40,14 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
<TreeView
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
bind:activeId
bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}"

10
docs/src/pages/framed/TreeView/TreeViewShowNode.svelte
View file

@ -5,16 +5,16 @@
const nodeBlockchain = { id: 8, text: "IBM Blockchain Platform" };
let treeview = null;
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [nodeSpark, { id: 4, text: "Hadoop" }],
nodes: [nodeSpark, { id: 4, text: "Hadoop" }],
},
{ id: 5, text: "IBM Cloud SQL Query" },
{ id: 6, text: "IBM Db2 Warehouse on Cloud" },
@ -23,7 +23,7 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
];
</script>
@ -45,5 +45,5 @@
<TreeView
bind:this="{treeview}"
labelText="Cloud Products"
children="{children}"
nodes="{nodes}"
/>

14
docs/src/pages/framed/TreeView/TreeViewSlot.svelte
View file

@ -3,16 +3,16 @@
let activeId = 0;
let selectedIds = [0, 7, 9];
let children = [
let nodes = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
children: [
nodes: [
{
id: 2,
text: "IBM Analytics Engine",
children: [
nodes: [
{ id: 3, text: "Apache Spark" },
{ id: 4, text: "Hadoop" },
],
@ -24,12 +24,12 @@
{
id: 7,
text: "Blockchain",
children: [{ id: 8, text: "IBM Blockchain Platform" }],
nodes: [{ id: 8, text: "IBM Blockchain Platform" }],
},
{
id: 9,
text: "Databases",
children: [
nodes: [
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
@ -40,7 +40,7 @@
id: 14,
text: "Integration",
disabled: true,
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
nodes: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
</script>
@ -49,7 +49,7 @@
labelText="Cloud Products"
activeId="{activeId}"
selectedIds="{selectedIds}"
children="{children}"
nodes="{nodes}"
let:node
>
<span