Bootstrap Blazor enterprise-level UI component library

Basic usage

Basic tree structure display

Demo

By setting the OnTreeItemClick property to monitor the event when the tree control node is clicked, the following log displays the data of the selected node when the tree control node is clicked

导航一
导航二
- 子菜单一
- 子菜单二
  - 孙菜单一
  - 孙菜单二
    - 曾孙菜单一
      - 曾曾孙菜单一
      - 曾曾孙菜单二
      - 曾曾孙菜单三
    - 曾孙菜单二
    - 曾孙菜单三
  - 孙菜单三
- 子菜单三
导航三

<Tree Items="@Items" OnTreeItemClick="@OnTreeItemClick" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private List<TreeItem> Items { get; set; } = TreeDataFoo.GetTreeItems();

    private Task OnTreeItemClick(TreeItem item)
    {
        Trace.Log($"TreeItem: {item.Text} clicked");
        return Task.CompletedTask;
    }
}

Checkbox

Suitable for use when you need to select a level

Demo

By setting the OnTreeItemChecked property to monitor the event when the tree control node is checked, when the check box in front of the tree control node is selected, the following log displays the data of the selected node

<Tree Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" />
<BlockLogger @ref="TraceChecked" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? TraceChecked { get; set; }

    private List<TreeItem> CheckedItems { get; set; } = GetCheckedItems();

    private static List<TreeItem> GetCheckedItems()
    {
        var ret = TreeDataFoo.GetTreeItems();
        ret[1].Items[1].Checked = true;
        return ret;
    }

    private Task OnTreeItemChecked(List<TreeItem> items)
    {
        TraceChecked.Log($"Currently selected {items.Count} item");
        return Task.CompletedTask;
    }
}

Single box

For single-select nodes

Demo

Show the Radio component in front of the node by setting the ShowRadio property

<Tree Items="@CheckedItems" ShowRadio="true" />

@code {
    private List<TreeItem> CheckedItems { get; set; } = GetCheckedItems();

    private static List<TreeItem> GetCheckedItems()
    {
        var ret = TreeDataFoo.GetTreeItems();
        ret[1].Items[1].Checked = true;
        return ret;
    }
}

disabled state

Some nodes of the Tree can be set to disabled state

Demo

By setting the Disabled property of the data source TreeItem object, you can control whether this node can be checked or not. When set to false, it will not affect the node expansion. /shrink function

<Tree Items="@DisabledItems" ShowCheckbox="true" />

@code {
    private List<TreeItem> DisabledItems { get; set; } = GetDisabledItems();

    private static List<TreeItem> GetDisabledItems()
    {
        var ret = TreeDataFoo.GetTreeItems();
        ret[1].Items[1].IsDisabled = true;
        return ret;
    }
}

Accordion mode

For nodes of the same level, only one can be expanded at a time

Demo

Enable the accordion effect by setting the IsAccordion property of the Tree component

<Tree Items="@Items" ShowCheckbox="true" IsAccordion="true" />

@code {
    private List<TreeItem> Items { get; set; } = TreeDataFoo.GetTreeItems();
}

Expanded by default and selected by default

Some nodes of Tree can be set to be expanded or selected by default

Demo

By setting the IsCollapsed property of the TreeItem object, you can control whether this node is in the expanded state by default. In this example, navigation two is in the expanded state by default, and the rest Node defaults to contracted state

<Tree Items="@ExpandItems" ShowCheckbox="true" />

@code {
    private List<TreeItem> ExpandItems { get; set; } = GetExpandItems();

    private static List<TreeItem> GetExpandItems()
    {
        var ret = TreeDataFoo.GetTreeItems();
        ret[1].IsCollapsed = false;
        return ret;
    }
}

show icon

Control whether the component displays the icon by setting ShowIcon

Demo

By setting the ShowIcon property of the TreeItem object, you can control whether this node displays the icon or not

<Tree Items="@GetIconItems()" ShowIcon="true" ShowCheckbox="true" />

@code {
    private static List<TreeItem> GetIconItems() => TreeDataFoo.GetTreeItems();
}

Click on the node to expand and contract

By setting ClickToggleNode to control whether to expand and contract when the node is clicked

Demo

By setting the ClickToggleNode property of the TreeItem object, you can control whether this node can be expanded and contracted by clicking

<Tree Items="@Items" ShowIcon="true" ShowCheckbox="true" ClickToggleNode="true" />

@code {
    private List<TreeItem> Items { get; set; } = TreeDataFoo.GetTreeItems();
}

The Tree component is built into the validation form

Tree can be enabled inside the component Checkbox will be displayed when it is built into the validation form DisplayName This function needs to be disabled in the tree component

Demo

Show Checkbox built into validation component ValidateForm by setting ShowCheckbox property does not show DisplayName

@inject IStringLocalizer<Foo> LocalizerFoo

<ValidateForm Model="@Model">
    <Tree Items="@Items" OnTreeItemClick="@OnTreeItemClick" ShowCheckbox="true" />
</ValidateForm>

@code {
    private List<TreeItem> Items { get; set; } = TreeDataFoo.GetTreeItems();

    private Foo Model => Foo.Generate(LocalizerFoo);

    private Task OnTreeItemClick(TreeItem item)
    {
        return Task.CompletedTask;
    }
}

lazy loading

Dynamically add child nodes when expanding a node

Demo

By setting the node HasChildNode to control whether to display the small arrow picture of the node. Add nodes through Tree's OnExpandNode delegate

导航一
导航二
- 子菜单一
- lazy loading
  - 孙菜单一
  - 孙菜单二
    - 曾孙菜单一
      - 曾曾孙菜单一
      - 曾曾孙菜单二
      - 曾曾孙菜单三
    - 曾孙菜单二
    - 曾孙菜单三
  - 孙菜单三
- lazy loading delay
导航三

<Tree ClickToggleNode="true" Items="@GetLazyItems()" OnExpandNode="OnExpandNode" />

@code {
    private static List<TreeItem> GetLazyItems()
    {
        var ret = TreeDataFoo.GetTreeItems();
        ret[1].Items[0].IsCollapsed = false;
        ret[1].Items[1].Text = "lazy loading";
        ret[1].Items[1].HasChildNode = true;
        ret[1].Items[2].Text = "lazy loading delay";
        ret[1].Items[2].HasChildNode = true;
        ret[1].Items[2].Key = "Delay";

        return ret;
    }

    private static async Task OnExpandNode(TreeItem item)
    {
        if (!item.Items.Any() && item.HasChildNode && !item.ShowLoading)
        {
            item.ShowLoading = true;
            if (item.Key?.ToString() == "Delay")
            {
                await Task.Delay(800);
            }
            item.Items.AddRange(new TreeItem[]
            {
                    new TreeItem()
                    {
                        Text = "lazy loading child node 1",
                        HasChildNode = true
                    },
                    new TreeItem() { Text = "lazy loading child node 2" }
            });
            item.ShowLoading = false;
        }
    }
}

custom node

Implement your own node template by setting TreeItem Template

Demo

导航二
- 子菜单一
- 子菜单二
  - 孙菜单一
  - 孙菜单二
    - 曾孙菜单一
      - 曾曾孙菜单一
      - 曾曾孙菜单二
      - 曾曾孙菜单三
    - 曾孙菜单二
    - 曾孙菜单三
  - 孙菜单三
- 子菜单三
导航三

@using Microsoft.AspNetCore.Components.Rendering;

<Tree ClickToggleNode="true" Items="GetTemplateItems()" />

@code {
    private static List<TreeItem> GetTemplateItems()
    {
        var ret = TreeDataFoo.GetTreeItems();
        ret[0].Template = BootstrapDynamicComponent.CreateComponent<CustomerTreeItem>().Render();
        return ret;
    }

    private class CustomerTreeItem : ComponentBase
    {
        [Inject]
        [NotNull]
        private ToastService? ToastService { get; set; }

        /// <summary>
        /// BuildRenderTree
        /// </summary>
        /// <param name="builder"></param>
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenComponent<Button>(0);
            builder.AddAttribute(1, nameof(Button.Icon), "fa-solid fa-font-awesome");
            builder.AddAttribute(2, nameof(Button.Text), "Click");
            builder.AddAttribute(3, nameof(Button.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, e =>
            {
                ToastService.Warning("Custom TreeItem", "Test the TreeItem button click event");
            }));
            builder.CloseComponent();
        }
    }
}

node color

Implement your own node style by setting TreeItem CssClass

Demo

导航一
导航二
- 子菜单一
- 子菜单二
  - 孙菜单一
  - 孙菜单二
    - 曾孙菜单一
      - 曾曾孙菜单一
      - 曾曾孙菜单二
      - 曾曾孙菜单三
    - 曾孙菜单二
    - 曾孙菜单三
  - 孙菜单三
- 子菜单三
导航三

<Tree ClickToggleNode="true" Items="GetColorItems()" />

@code {
    private static List<TreeItem> GetColorItems()
    {
        var ret = TreeDataFoo.GetTreeItems();
        ret[0].CssClass = "text-primary";
        ret[1].CssClass = "text-success";
        ret[2].CssClass = "text-danger";
        return ret;
    }
}

Get all selected nodes

Get all nodes by setting the OnTreeItemChecked callback delegate

Demo

<Tree ShowCheckbox="true" Items="@Items" OnTreeItemChecked="@OnTreeItemChecked" />
<BlockLogger @ref="TraceCheckedItems" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? TraceCheckedItems { get; set; }

    private List<TreeItem> Items { get; set; } = TreeDataFoo.GetTreeItems();

    private Task OnTreeItemChecked(List<TreeItem> items)
    {
        TraceCheckedItems.Log($"Currently selected {items.Count} item");
        return Task.CompletedTask;
    }
}

loading skeleton screen

By setting ShowSkeleton, the component displays the skeleton screen when the data is loaded asynchronously

Demo

导航一
导航二
- 子菜单一
- 子菜单二
  - 孙菜单一
  - 孙菜单二
    - 曾孙菜单一
      - 曾曾孙菜单一
      - 曾曾孙菜单二
      - 曾曾孙菜单三
    - 曾孙菜单二
    - 曾孙菜单三
  - 孙菜单三
- 子菜单三
导航三

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Trees> Localizer

<Button Text="@Localizer["TreesShowSkeletonButtonText"]" IsAsync="true" Icon="fa-solid fa-font-awesome" OnClick="OnLoadAsyncItems" />
<Tree Items="@AsyncItems" ShowSkeleton="true" class="mt-3" />

@code {
    private List<TreeItem>? AsyncItems { get; set; }

    /// <summary>
    /// OnInitializedAsync 方法
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        await OnLoadAsyncItems();
    }

    private async Task OnLoadAsyncItems()
    {
        AsyncItems = null;
        await Task.Delay(2000);
        AsyncItems = TreeDataFoo.GetTreeItems();
    }
}

Tree tree control

Present information in a clear hierarchy that can be expanded or collapsed

Tips

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

TreeItem property

Bootstrap Blazor Component library updated to 7.4.4-beta01