SusTreeView

可展开的层级结构 —— 由嵌套 Items 驱动的技能 / 制作 / 文件夹树。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Model	Prop<string>	""	v-model
Disabled	Prop<bool>	false	v-model
Density	Prop<string>	"default"	v-model
OpenAll	Prop<bool>	false	v-model

插槽

没有插槽。

事件

名称	字段	载荷
Change	OnChange	string
Toggle	OnToggle	string

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-tree-view
• sus-tree-view__item
• sus-tree-view__item--disabled
• sus-tree-view__item--selected
• sus-tree-view__item-icon
• sus-tree-view__label
• sus-tree-view__root
• sus-tree-view__spacer
• sus-tree-view__toggle
• sus-tree-view--dense
• sus-tree-view--disabled

用法

Items 在代码中设置（List<TreeViewItem>，可带可选的 Children）。

var tree = new SusTreeView();
tree.Items.Value = new List<SusTreeView.TreeViewItem>
{
    new()
    {
        Title = "Combat",
        Value = "combat",
        Children = new List<SusTreeView.TreeViewItem>
        {
            new() { Title = "Strike", Value = "strike" },
            new() { Title = "Guard", Value = "guard" },
        }
    },
    new()
    {
        Title = "Craft",
        Value = "craft",
        Children = new List<SusTreeView.TreeViewItem>
        {
            new() { Title = "Forge", Value = "forge" },
            new() { Title = "Alchemy", Value = "alchemy" },
        }
    },
};
tree.Model.Value = "strike";
tree.OnChange += value => { /* selection */ };
tree.OnToggle += value => { /* expand/collapse key */ };

<template>
  <sus:SusTreeView :Model="Selected.Value"
                   :Density="Density.Value"
                   :OpenAll="OpenAll.Value"
                   :Disabled="Disabled.Value"
                   @change="OnChange"
                   @toggle="OnToggle" />
</template>

<script>
public Prop<string> Selected = new("");
public Prop<string> Density = new("default");
public Prop<bool> OpenAll = new(false);
public Prop<bool> Disabled = new(false);
void OnChange(string value) { Selected.Value = value; }
void OnToggle(string value) { /* … */ }
// Populate Items in code.
</script>

Prop	Role
Items	嵌套的 List<TreeViewItem>
Model	选中项的键（Value 或 Title）
OpenAll	展开所有分支
Density	default · compact（紧凑行）
Disabled	阻止选择 / 展开切换

备注

• 项字段：Title、Value、Disabled、Children。
• 键：若设置了 Value 则使用 Value，否则使用 Title。
• 点击展开箭头可展开/折叠；点击行会选中并触发 OnChange。