Bootstrap Blazor - 一套企业级 UI 组件库

Transfer 穿梭框

基础用法

Demo

候选项列表

备选 01备选 02备选 03备选 04备选 05备选 06备选 07备选 08备选 09备选 10备选 11备选 12备选 13备选 14备选 15备选 16备选 17备选 18备选 19备选 20

已选项列表

<Transfer @bind-Items="@Items" OnItemsChanged="@OnItemsChanged"
          LeftPanelText="候选项列表" RightPanelText="已选项列表" />

@code{
    private IEnumerable<SelectedItem>? Items { get; set; }

   protected override void OnInitialized()
   {
       base.OnInitialized();

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

可自定义

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

Demo

左侧列表

备选 01备选 02备选 03备选 04备选 05备选 06备选 07备选 08备选 09备选 10备选 11备选 12备选 13备选 14备选 15备选 16备选 17备选 18备选 19备选 20

右侧列表

<Transfer Items="@Items"
          LeftPanelText="左侧列表" RightPanelText="右侧列表"
          LeftButtonText="到左边" RightButtonText="到右边" />

可搜索

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

Demo

左侧列表

备选 01备选 02备选 03备选 04备选 05备选 06备选 07备选 08备选 09备选 10备选 11备选 12备选 13备选 14备选 15备选 16备选 17备选 18备选 19备选 20

右侧列表

<Transfer Items="@Items"
          LeftPanelText="左侧列表" RightPanelText="右侧列表"
          LeftButtonText="到左边" RightButtonText="到右边"
          ShowSearch="true" />

双向绑定

组件数据发生变化时，更新绑定数据源 Items

Demo

本例中 Transfer 组件双向绑定数据源 Item1，左右移动数据后，源集合中 Active = false 的为左侧面板中数据集合，Active = true 的为右侧面板中数据集合

左侧列表

数据 01数据 02数据 03数据 04数据 05数据 06数据 07数据 08数据 09数据 10数据 11数据 12数据 13数据 14数据 15数据 16数据 17数据 18数据 19数据 20

右侧列表

<Transfer @bind-Items="@Items1"
            LeftPanelText="左侧列表" RightPanelText="右侧列表"
            LeftButtonText="到左边" RightButtonText="到右边" />

禁用

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

Demo

左侧列表

备选 01备选 02备选 03备选 04备选 05备选 06备选 07备选 08备选 09备选 10备选 11备选 12备选 13备选 14备选 15备选 16备选 17备选 18备选 19备选 20

右侧列表

<Transfer Items="@Items" IsDisabled="true"
            LeftPanelText="左侧列表" RightPanelText="右侧列表"
            LeftButtonText="到左边" RightButtonText="到右边"
            LeftPannelSearchPlaceHolderString="请输入" RightPannelSearchPlaceHolderString="请输入"
            ShowSearch="true" />

Transfer 穿梭框

基础用法

Demo

可自定义

Demo

可搜索

Demo

双向绑定

Demo

禁用

Demo

Attributes 属性

事件 Events