
SelectTree
A tree-like data structure is presented in the drop-down box for selection
Selected node
Demo
Disabled the component by set IsDisabled
to true
Demo
The values in the text box change as you change the drop-down option by binding the Model.Name property to the component with Select Tree
Demo
validate the value when submit the form. Inside ValidateForm
Demo
Set IsPopover
to true, use popover render UI prevent The dropdown menu cannot be fully displayed because the parent container is set to overflow: hidden
Demo
@page "/select-trees"
<h3>SelectTree</h3>
<h4>A tree-like data structure is presented in the drop-down box for selection</h4>
<DemoBlock Title="Common usage" Introduction="Selected node" Name="Normal">
<SelectTree TValue="TreeFoo" Items="Items" />
</DemoBlock>
<DemoBlock Title="Disabled" Introduction="Disabled the component by set <code>IsDisabled</code> to true" Name="Disable">
<div class="row">
<div class="col-12 col-sm-6">
<SelectTree TValue="TreeFoo" Color="Color.Primary" Items="Items" IsDisabled="true"></SelectTree>
</div>
</div>
</DemoBlock>
<DemoBlock Title="Select two-way binding" Introduction="The values in the text box change as you change the drop-down option by binding the Model.Name property to the component with Select Tree" Name="Binding">
<div class="row g-3">
<div class="col-12 col-sm-6">
<SelectTree Items="Items" @bind-Value="Model"></SelectTree>
</div>
<div class="col-12 col-sm-6">
<BootstrapInput readonly @bind-Value="Model.Text" PlaceHolder="Please select ..." />
</div>
</div>
</DemoBlock>
<DemoBlock Title="Validation" Introduction="validate the value when submit the form. Inside <code>ValidateForm</code>" Name="ClientValidation">
<ValidateForm Model="BindModel">
<div class="row g-3">
<div class="col-12 col-sm-6">
<SelectTree TValue="string" @bind-Value="BindModel.Text" ShowIcon="true" Items="BindItems" />
</div>
<div class="col-12 col-sm-6 align-self-end">
<Button ButtonType="ButtonType.Submit">提交</Button>
</div>
</div>
</ValidateForm>
</DemoBlock>
<DemoBlock Title="IsPopover" Introduction="Set <code>IsPopover</code> to <b>true</b>, use popover render UI prevent The dropdown menu cannot be fully displayed because the parent container is set to <code>overflow: hidden</code>" Name="IsPopover">
<div class="row">
<div class="col-12 col-sm-6 overflow-hidden">
<SelectTree Items="Items" IsPopover="true" />
</div>
</div>
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class SelectTrees
{
[Inject]
[NotNull]
private IStringLocalizer<SelectTrees>? Localizer { get; set; }
private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();
[NotNull]
private List<TreeViewItem<string>>? BindItems { get; set; }
[NotNull]
private TreeFoo? Model { get; set; }
private TreeFoo BindModel { get; set; } = new TreeFoo();
/// <summary>
/// <inheritdoc/>
/// </summary>
protected override void OnInitialized()
{
Model = new TreeFoo()
{
Text = "Sub Menu Three",
Id = "1090",
ParentId = "1050",
Icon = "fa-solid fa-font-awesome",
IsActive = true
};
BindItems = new List<TreeViewItem<string>>()
{
new TreeViewItem<string>("目录一")
{
Text ="目录一",
Icon = "fa-solid fa-folder",
ExpandIcon = "fa-solid fa-folder-open",
Items = new List<TreeViewItem<string>>()
{
new TreeViewItem<string>("子目录一")
{
Text ="子目录一",
Icon = "fa-solid fa-folder",
ExpandIcon = "fa-solid fa-folder-open",
Items = new List<TreeViewItem<string>>()
{
new TreeViewItem<string>("文件一") { Text = "文件一", Icon = "fa-solid fa-file", IsActive = true },
new TreeViewItem<string>("文件二") { Text = "文件二", Icon = "fa-solid fa-file" }
}
}
}
}
};
}
}