Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

CheckboxList 多选框组

控件用于创建多选的复选框组

基础用法

通过数据绑定展现复选框组

Demo

使用说明:

  • 通过 bind-Value 设置双向绑定数据值
  • 通过 Items 设置候选数据源
  • 通过 OnSelectedChanged 回调方法获取改变项实例

客户端验证

内置于 ValidateForm 中使用

Demo

可以通过改变窗口大小,体验自适应布局

本例中绑定模型 BindItemName 字段,通过勾选项自动更改模型数据

由于内置于 ValidateForm 表单内,本例中增加了 RequiredAttribute 必选要求验证,当取消所有选项后提示验证结果

张三,李四

双向绑定集合

绑定值为集合

Demo

TValue 设置为 IEnumerable<int> 泛型集合,绑定集合的 ValueField 指定字段必须与泛型类型一致

9,10

TValue 设置为 IEnumerable<string> 泛型集合

13,15

双向绑定枚举

绑定值为枚举

Demo

CheckboxList 绑定一个枚举集合时,Items 不需要指定,Items 会被自动设置成枚举里面所有的值,如果需要绑定部分值时,请自行提供枚举集合 Items

Middel,Primary

无边框

通过设置 ShowBorder=false 不显示边框

Demo

当验证失败时显示红色边框

禁用

通过设置 IsDisabled=true 禁用

Demo

Attributes

Loading...

事件 Events

Loading...
@page "/checkboxlists"

<h3>CheckboxList 多选框组</h3>

<h4>控件用于创建多选的复选框组</h4>

<Block Title="基础用法" Introduction="通过数据绑定展现复选框组">
    <p>使用说明:</p>
    <ul class="ul-demo">
        <li>通过 <code>bind-Value</code> 设置双向绑定数据值</li>
        <li>通过 <code>Items</code> 设置候选数据源</li>
        <li>通过 <code>OnSelectedChanged</code> 回调方法获取改变项实例</li>
    </ul>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <CheckboxList @bind-Value="@Value1" Items="@Items1" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]"
                              OnSelectedChanged="@OnSelectedChanged"></CheckboxList>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" />
</Block>

<Block Title="客户端验证" Introduction="内置于 ValidateForm 中使用">
    <p>可以通过改变窗口大小,体验自适应布局</p>
    <p>本例中绑定模型 <code>BindItem</code> 的 <code>Name</code> 字段,通过勾选项自动更改模型数据</p>
    <p>由于内置于 <code>ValidateForm</code> 表单内,本例中增加了 <code>RequiredAttribute</code> 必选要求验证,当取消所有选项后提示验证结果</p>
    <ValidateForm Model="@Dummy">
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-12">
                    <CheckboxList @bind-Value="@Dummy.Name" Items="@Items2" />
                </div>
                <div class="form-group col-12">
                    <label class="control-label">@Localizer["Foo.BindValue"]</label>
                    <div class="form-control flex-fill">@Dummy.Name</div>
                </div>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="双向绑定集合" Introduction="绑定值为集合">
    <p>TValue 设置为 <code>IEnumerable&lt;int&gt;</code> 泛型集合,绑定集合的 <code>ValueField</code> 指定字段必须与泛型类型一致</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <CheckboxList TValue="IEnumerable<int>" Items="@Items3" @bind-Value="@Value2" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
            </div>
            <div class="form-group col-12">
                <label class="control-label">@Localizer["Foo.BindValue"]</label>
                <div class="form-control">@(string.Join(",", Value2))</div>
            </div>
        </div>
    </div>
    <p class="mt-3">TValue 设置为 <code>IEnumerable&lt;string&gt;</code> 泛型集合</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <CheckboxList TValue="IEnumerable<string>" Items="@Items4" @bind-Value="@Value3" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
            </div>
            <div class="form-group col-12">
                <label class="control-label">@Localizer["Foo.BindValue"]</label>
                <div class="form-control flex-fill">@(string.Join(",", Value3))</div>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定枚举" Introduction="绑定值为枚举">
    <p>当 <code>CheckboxList</code> 绑定一个枚举集合时,<code>Items</code> 不需要指定,<code>Items</code> 会被自动设置成枚举里面所有的值,如果需要绑定部分值时,请自行提供枚举集合 <code>Items</code></p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <CheckboxList @bind-Value="@SelectedEnumValues" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
            </div>
            <div class="form-group col-12">
                <label class="control-label">@Localizer["Foo.BindValue"]</label>
                <div class="form-control">@(string.Join(",", SelectedEnumValues))</div>
            </div>
        </div>
    </div>
</Block>

<Block Title="无边框" Introduction="通过设置 <code>ShowBorder=false</code> 不显示边框">
    <p>当验证失败时显示红色边框</p>
    <ValidateForm Model="@Dummy">
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-12">
                    <CheckboxList @bind-Value="@Dummy.Name" ShowBorder="false" Items="@Items2" />
                </div>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="禁用" Introduction="通过设置 <code>IsDisabled=true</code> 禁用">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <CheckboxList @bind-Value="@Dummy.Name" IsDisabled="true" ShowBorder="false" Items="@Items2" />
            </div>
        </div>
    </div>
</Block>

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

<EventTable Items="@GetEvents()" />
根据相关法律政策,该内容无法显示

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload