Enterprise-level component library based on Bootstrap and Blazor树状选择器 SelectTree
下拉框内呈现树状数据结构，供选择
普通用法
选中节点
Demo
Select disables the drop-down box
Selector unavailable state
Demo
Select two-way binding
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 .
Demo
Select client validation
When the drop-down box is not selected, it is blocked when the submit button is clicked.
Demo
The label is displayed
When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions
Demo
The pre-label explicit rules are consistent with the BootstrapInput component of the of the [The portal]
Bidirectional binding displays labels
Bidirectional bindings show that bidirectional bindings do not display labels
Customize DisplayText
Popover dropdown menu
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>下拉框内呈现树状数据结构，供选择</h4>
<DemoBlock Title="普通用法" Introduction="选中节点" Name="Normal">
<SelectTree TValue="TreeFoo" Items="Items" />
</DemoBlock>
<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Disable">
<div class="row g-3">
<div class="col-12 col-sm-6">
<SelectTree TValue="TreeFoo" Color="Color.Primary" Items="Items" IsDisabled="true"></SelectTree>
</div>
<div class="col-12 col-sm-6">
<SelectTree TValue="TreeFoo" Color="Color.Success" Items="Items" IsDisabled="true"></SelectTree>
</div>
<div class="col-12 col-sm-6">
<SelectTree TValue="TreeFoo" Color="Color.Danger" Items="Items" IsDisabled="true"></SelectTree>
</div>
<div class="col-12 col-sm-6">
<SelectTree TValue="TreeFoo" Color="Color.Warning" Items="Items" IsDisabled="true"></SelectTree>
</div>
<div class="col-12 col-sm-6">
<SelectTree TValue="TreeFoo" Color="Color.Info" Items="Items" IsDisabled="true"></SelectTree>
</div>
<div class="col-12 col-sm-6">
<SelectTree TValue="TreeFoo" Color="Color.Secondary" Items="Items" IsDisabled="true"></SelectTree>
</div>
<div class="col-12 col-sm-6">
<SelectTree TValue="TreeFoo" Color="Color.Dark" Items="Items" IsDisabled="true"></SelectTree>
</div>
</div>
</DemoBlock>
<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" 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" />
</div>
</div>
</DemoBlock>
<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" 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">@Localizer["ButtonText2"]</Button>
</div>
</div>
</ValidateForm>
</DemoBlock>
<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="DispalyLabel">
<p>@((MarkupString)Localizer["P3"].Value)</p>
<Divider Text="@Localizer["Divider1"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<ValidateForm Model="Model">
<div class="row g-3">
<div class="col-12">
<SelectTree Color="Color.Primary" Items="Items" @bind-Value="Model" />
</div>
</div>
</ValidateForm>
<Divider Text="@Localizer["Divider2"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
<div class="row g-3">
<div class="col-12">
<SelectTree Color="Color.Primary" Items="Items" @bind-Value="Model" />
</div>
</div>
<Divider Text="@Localizer["Divider3"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<div class="row g-3">
<div class="col-12">
<SelectTree Color="Color.Primary" Items="Items" @bind-Value="Model" DisplayText="@Localizer["SelectText"]" ShowLabel="true" />
</div>
</div>
</DemoBlock>
<DemoBlock Title="@Localizer["PopoverTitle"]" Introduction="@Localizer["PopoverIntro"]" Name="Popover">
<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/
using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class SelectTrees
{
private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();
private List<TreeViewItem<string>> BindItems { get; } = 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" },
new TreeViewItem<string>("文件二") { Text = "文件二", Icon = "fa-solid fa-file" }
}
}
}
}
};
private TreeFoo Model { get; set; } = new TreeFoo();
private TreeFoo BindModel { get; set; } = new TreeFoo() { Text = "" };
[Inject]
[NotNull]
private IStringLocalizer<Selects>? Localizer { get; set; }
}
