Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

SelectTree

A tree-like data structure is presented in the drop-down box for selection

Common usage

Selected node

Demo

<SelectTree TValue="TreeFoo" Items="Items" />

@code {
    private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();
}

Disabled

Disabled the component by set IsDisabled to true

Demo

<div class="row">
    <div class="col-12 col-sm-6">
        <SelectTree TValue="TreeFoo" Color="Color.Primary" Items="Items" IsDisabled="true"></SelectTree>
    </div>
</div>

@code {
    private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();
}

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 Tree

Demo

Sub Menu Three

<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">
        <Display Value="Model.Text" />
    </div>
</div>

@code {
    private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();

    [NotNull]
    private TreeFoo? Model { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        Model = new TreeFoo()
        {
            Text = "Sub Menu Three",
            Id = "1090",
            ParentId = "1050",
            Icon = "fa-solid fa-font-awesome",
            IsActive = true
        };
    }
}

Validation

validate the value when submit the form. Inside ValidateForm

Demo

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<SelectTrees> Localizer

<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["SelectTreesClientValidationButtonText"]</Button>
        </div>
    </div>
</ValidateForm>

@code {
    [NotNull]
    private TreeFoo? Model { get; set; }

    private TreeFoo BindModel { get; set; } = new TreeFoo();

    [NotNull]
    private List<TreeViewItem<string>>? BindItems { get; set; }

    /// <summary>
    /// OnInitialized
    /// </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" }
                        }
                    }
                }
            }
        };
    }
}

Edit

By setting IsEdit="true" you can edit the input textbox

Demo

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <SelectTree Items="Items" @bind-Value="@Value" IsEdit="true"></SelectTree>
    </div>
    <div class="col-12 col-sm-6">
        <Display Value="@Value" />
    </div>
</div>

@code {
    private List<TreeViewItem<string>> Items { get; } = new List<TreeViewItem<string>>()
    {
        new TreeViewItem<string>("101") { Text = "Text 101" },
        new TreeViewItem<string>("102") { Text = "Text 102", Items = new List<TreeViewItem<string>>()
        {
            new TreeViewItem<string>("2021") { Text = "Text 2021" },
            new TreeViewItem<string>("2022") { Text = "Text 2022" }
        }},
    };

    [NotNull]
    private string? Value { get; set; }
}

IsPopover

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

<div class="row">
    <div class="col-12 col-sm-6 overflow-hidden">
        <SelectTree Items="Items" IsPopover="true" />
    </div>
</div>

@code {
    private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();
}

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

SelectTree

A tree-like data structure is presented in the drop-down box for selection

Demo

Demo

Demo

Demo

Demo

Demo

Bootstrap Blazor Component library updated to 7.4.5-beta01