Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Transfer 穿梭框

Demo

可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

Demo

在数据很多的情况下,可以对数据进行搜索和过滤。

Demo

组件数据发生变化时,双向绑定 bind_Value 值同步变化

Demo

Transfer 组件为泛型组件,支持三种绑定类型 string IEnumerable<string> IEnumerable<SelectedItem> 本例中双向绑定 SelectedValue 类型为 IEnumerable<SelectedItem>

Value:备选 01;备选 02

组件数据发生变化时,双向绑定 bind_Value 值同步变化

Demo

Transfer 组件内置于 ValidateForm 组件即开启客户端验证,本例中组件双向绑定 Model.Hobby 类型为 IEnumerable<string>

Hobby:

设置 IsDisabled 属性值为 true 时,组件禁止输入

Demo

Attributes

Loading...

Event

Loading...
@page "/transfers"

<h3>Transfer 穿梭框</h3>

<Block Title="基础用法" Introduction="" Name="Normal">
    <Transfer TValue="string" Items="@Items" OnSelectedItemsChanged="@OnSelectedItemsChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="可自定义" Introduction="可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。" Name="Customer">
    <Transfer TValue="string" Items="@Items1"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边" />
</Block>

<Block Title="可搜索" Introduction="在数据很多的情况下,可以对数据进行搜索和过滤。" Name="Search">
    <Transfer TValue="string" Items="@Items2"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边"
              LeftPannelSearchPlaceHolderString="请输入" RightPannelSearchPlaceHolderString="请输入"
              ShowSearch="true" />
</Block>

<Block Title="双向绑定" Introduction="组件数据发生变化时,双向绑定 <code>bind_Value</code> 值同步变化" Name="Bind">
    <p><code>Transfer</code> 组件为泛型组件,支持三种绑定类型 <code>string</code> <code>IEnumerable&lt;string&gt;</code> <code>IEnumerable&lt;SelectedItem&gt;</code> 本例中双向绑定 <code>SelectedValue</code> 类型为 <code>IEnumerable&lt;SelectedItem&gt;</code></p>
    <Transfer Items="@Items3" @bind-Value="@SelectedValue" />
    <div class="mb-3">Value:@string.Join(";", SelectedValue.Select(i => i.Text))</div>
    <Button Text="增加" OnClick="@OnAddItem" />
</Block>

<Block Title="客户端验证" Introduction="组件数据发生变化时,双向绑定 <code>bind_Value</code> 值同步变化" Name="Validate">
    <p><code>Transfer</code> 组件内置于 <code>ValidateForm</code> 组件即开启客户端验证,本例中组件双向绑定 <code>Model.Hobby</code> 类型为 <code>IEnumerable&lt;string&gt;</code></p>
    <ValidateForm Model="@Model">
        <div class="row g-3">
            <div class="col-12 col-sm-8">
                <Transfer Items="@Items5" @bind-Value="@Model.Hobby" />
            </div>
            <div class="col-12 col-sm-4 align-items-end">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
    </ValidateForm>
    <div>Hobby: @string.Join(",", Model.Hobby)</div>
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时,组件禁止输入" Name="Disable">
    <Transfer TValue="string" Items="@Items4" IsDisabled="true"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边"
              LeftPannelSearchPlaceHolderString="请输入" RightPannelSearchPlaceHolderString="请输入"
              ShowSearch="true" />
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
// 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 BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Transfers : ComponentBase
    {
        /// <summary>
        /// 
        /// </summary>
        [NotNull]
        private IEnumerable<SelectedItem>? Items { get; set; }

        [NotNull]
        private IEnumerable<SelectedItem>? Items1 { get; set; }

        [NotNull]
        private IEnumerable<SelectedItem>? Items2 { get; set; }

        [NotNull]
        private List<SelectedItem>? Items3 { get; set; }

        [NotNull]
        private IEnumerable<SelectedItem>? Items4 { get; set; }

        [NotNull]
        private IEnumerable<SelectedItem>? Items5 { get; set; }

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

        private IEnumerable<SelectedItem> SelectedValue { get; set; } = Enumerable.Empty<SelectedItem>();

        private Foo Model { get; set; } = new();

        /// <summary>
        /// OnInitializedAsync 方法
        /// </summary>
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            // 模拟异步加载数据源
            await Task.Delay(100);

            Items = Enumerable.Range(1, 15).Select(i => new SelectedItem()
            {
                Text = $"备选 {i:d2}",
                Value = i.ToString()
            });

            Items1 = Enumerable.Range(1, 15).Select(i => new SelectedItem()
            {
                Text = $"数据 {i:d2}",
                Value = i.ToString()
            });

            Items2 = Enumerable.Range(1, 15).Select(i => new SelectedItem()
            {
                Text = $"数据 {i:d2}",
                Value = i.ToString()
            });

            Items3 = Enumerable.Range(1, 15).Select(i => new SelectedItem()
            {
                Text = $"备选 {i:d2}",
                Value = i.ToString()
            }).ToList();

            SelectedValue = Items3.Take(2);

            Items4 = Enumerable.Range(1, 15).Select(i => new SelectedItem()
            {
                Text = $"数据 {i:d2}",
                Value = i.ToString()
            });

            Items5 = Enumerable.Range(1, 15).Select(i => new SelectedItem()
            {
                Text = $"数据 {i:d2}",
                Value = i.ToString()
            });
        }

        private void OnAddItem()
        {
            var count = Items3.Count + 1;
            Items3.Add(new SelectedItem(count.ToString(), $"备选 {count:d2}"));
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="items"></param>
        private Task OnSelectedItemsChanged(IEnumerable<SelectedItem> items)
        {
            Trace?.Log(string.Join(" ", items.Where(i => i.Active).Select(i => i.Text)));
            return Task.CompletedTask;
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Items",
                Description = "组件绑定数据项集合",
                Type = "IEnumerable<SelectedItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "LeftButtonText",
                Description = "左侧按钮显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "LeftPanelText",
                Description = "左侧面板 Header 显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "列表 1"
            },
            new AttributeItem() {
                Name = "RightButtonText",
                Description = "右侧按钮显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "RightPanelText",
                Description = "右侧面板 Header 显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "列表 2"
            },
            new AttributeItem() {
                Name = "ShowSearch",
                Description = "是否显示搜索框",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "LeftPannelSearchPlaceHolderString",
                Description = "左侧面板中的搜索框 placeholder 字符串",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "RightPannelSearchPlaceHolderString",
                Description = "右侧面板中的搜索框 placeholder 字符串",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnItemsChanged",
                Description="组件绑定数据项集合选项变化时回调方法",
                Type ="Action<IEnumerable<SelectedItem>>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload