Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Toggle 开关

提供最普通的开关应用,值为 true false

基础用法

点击按钮切换状态

Demo

点击第一个开关有值输出日志

禁用状态

开关不可用状态。

Demo

双向绑定数据

绑定组件内变量,数据自动同步

Demo

Switch 组件开启双向绑定时,会根据绑定的 Model 属性值去自动获取 DisplayName 标签值并且显示为前置 Label,通过 DisplayText 属性可以自定义显示前置标签,或者通过 ShowLabel 属性关闭前置标签是否显示

绑定数值: False
自定义标签

设置 DisplayText 值为 自定义标签

占位

无论是否设置 DisplayText 值,当 ShowLabeltrue 时均显示

不占位

无论是否设置 DisplayText 值,当 ShowLabelfalse 时均不显示

Attributes

Loading...

事件 Events

Loading...
@page "/toggles"

<h3>Toggle 开关</h3>

<h4>提供最普通的开关应用,值为 <code>true</code> <code>false</code></h4>

<Block Title="基础用法" Introduction="点击按钮切换状态">
    <p>点击第一个开关有值输出日志</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="@BindValue" ValueChanged="@OnValueChanged" OnText="开启" OffText="关闭" Color="Color.Primary"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Secondary"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Danger"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Warning"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Info"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Dark"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="false" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用状态" Introduction="开关不可用状态。">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Primary"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Secondary"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Danger"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Warning"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Info"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Dark"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="false" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="绑定组件内变量,数据自动同步">
    <p><code>Switch</code> 组件开启双向绑定时,会根据绑定的 <code>Model</code> 属性值去自动获取 <code>DisplayName</code> 标签值并且显示为前置 <code>Label</code>,通过 <code>DisplayText</code> 属性可以自定义显示前置标签,或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="双向绑定示例"></Toggle>
            </div>
            <div class="form-group col-12">
                <div>绑定数值: @Model.BindValue</div>
            </div>
            <Divider Text="自定义标签" />
            <div class="form-group col-12">
                <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
            </div>
            <div class="form-group col-12">
                <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="自定义标签" ShowLabel="true"></Toggle>
            </div>
            <Divider Text="占位" />
            <div class="form-group col-12">
                <p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
            </div>
            <div class="form-group col-12">
                <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" ShowLabel="true"></Toggle>
            </div>
            <Divider Text="不占位" />
            <div class="form-group col-12">
                <p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
            </div>
            <div class="form-group col-12">
                <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="不显示" ShowLabel="false"></Toggle>
            </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