Tree Item
Represents a tree-item custom element. Read more about vwc-tree-view.
- Type:
string - Default:
undefined
<script setup lang="ts">import { VTreeItem, VTreeView } from '@vonage/vivid-api-vue';</script>
<template> <VTreeView> <VTreeItem text="Tree Item" /> </VTreeView></template><vwc-tree-view> <vwc-tree-item text="Tree Item"></vwc-tree-item></vwc-tree-view>Use the icon slot to set an icon to the tree item. Check out the vivid icons gallery for a list of available icons.
- Type:
string - Default:
undefined
<script setup lang="ts">import { VTreeItem, VTreeView, VIcon } from '@vonage/vivid-api-vue';</script>
<template> <VTreeView> <VTreeItem text="Tree Item" ><template #icon><VIcon name="chat-line" /></template ></VTreeItem> </VTreeView></template><vwc-tree-view> <vwc-tree-item text="Tree Item"> <vwc-icon slot="icon" name="chat-line"></vwc-icon> </vwc-tree-item></vwc-tree-view>Add the selected attribute to select the tree item.
- Type:
boolean - Default:
false
<script setup lang="ts">import { VTreeItem, VTreeView } from '@vonage/vivid-api-vue';</script>
<template> <VTreeView> <VTreeItem text="Tree Item" selected /> </VTreeView></template><vwc-tree-view> <vwc-tree-item text="Tree Item" selected></vwc-tree-item></vwc-tree-view>Add the disabled attribute to disable the tree item.
- Type:
boolean - Default:
false
<script setup lang="ts">import { VTreeItem, VTreeView } from '@vonage/vivid-api-vue';</script>
<template> <VTreeView> <VTreeItem text="Tree Item" disabled /> </VTreeView></template><vwc-tree-view> <vwc-tree-item text="Tree Item" disabled></vwc-tree-item></vwc-tree-view>Use the expanded attribute to set the tree-item’s open state.
- Type:
boolean - Default:
false
<script setup lang="ts">import { VTreeItem, VTreeView } from '@vonage/vivid-api-vue';</script>
<template> <VTreeView> <VTreeItem text="Tree Item" expanded> <template #item><VTreeItem text="Tree Item 1 - 1" /></template> </VTreeItem> </VTreeView></template><vwc-tree-view> <vwc-tree-item text="Tree Item" expanded> <vwc-tree-item slot="item" text="Tree Item 1 - 1"></vwc-tree-item> </vwc-tree-item></vwc-tree-view><script setup lang="ts">import { VTreeItem, VTreeView } from '@vonage/vivid-api-vue';</script>
<template> <VTreeView> <VTreeItem text="Tree Item 1"> <template #item><VTreeItem text="Tree Item 1 - 1" /></template> </VTreeItem> <VTreeItem text="Tree Item 2" /> </VTreeView></template><vwc-tree-view> <vwc-tree-item text="Tree Item 1"> <vwc-tree-item slot="item" text="Tree Item 1 - 1"></vwc-tree-item> </vwc-tree-item> <vwc-tree-item text="Tree Item 2"></vwc-tree-item></vwc-tree-view>Set the icon slot to show an icon before the tree item’s text.
If set, the icon attribute is ignored.
<script setup lang="ts">import { VIcon, VTreeItem, VTreeView } from '@vonage/vivid-api-vue';</script>
<template> <VTreeView> <VTreeItem text="Tree Item"> <template #icon><VIcon name="check-circle-solid" connotation="success" /></template> </VTreeItem> </VTreeView></template><vwc-tree-view> <vwc-tree-item text="Tree Item"> <vwc-icon slot="icon" name="check-circle-solid" connotation="success"></vwc-icon> </vwc-tree-item></vwc-tree-view>