Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Switch 开关

提供最普通的开关应用

基础用法

点击按钮切换状态

Demo

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

开启
开启
开启
开启
开启
开启

禁用状态

通过设置 IsDisabled 属性控制组件不可用状态

Demo
关闭

开关颜色

通过设置 OnColor OffColor 属性值,设置开关状态颜色

Demo
关闭

双向绑定

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

Demo

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

前置标签显式规则与 BootstrapInput 组件一致 [传送门]

关闭
绑定数值: False
自定义标签

设置 DisplayText 值为 自定义标签

关闭
占位

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

关闭
不占位

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

关闭

显示内置文字

通过设置 ShowInnerText 属性控制组件显示内置文字

Demo

通过设置 OnInnerText OffInnerText 属性更改内置文字,默认情况下建议使用一个汉字,可自定义组件宽度来增加内置文字数量

Attributes

Loading...

事件 Events

Loading...
@page "/switchs"

<h3>Switch 开关</h3>

<h4>提供最普通的开关应用</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">
                <Switch ValueChanged="@OnValueChanged" Value="@BindValue" OnColor="Color.Secondary" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Warning" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Info" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Dark" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用状态" Introduction="通过设置 <code>IsDisabled</code> 属性控制组件不可用状态">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
</Block>

<Block Title="开关颜色" Introduction="通过设置 <code>OnColor</code> <code>OffColor</code> 属性值,设置开关状态颜色">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch OnColor="Color.Danger" OffColor="Color.Success" OnText="开启" OffText="关闭"></Switch>
            </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>
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="双向绑定示例"></Switch>
            </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">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="自定义标签" ShowLabel="true"></Switch>
            </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">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" ShowLabel="true"></Switch>
            </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">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="不显示" ShowLabel="false"></Switch>
            </div>
        </div>
    </div>
</Block>

<Block Title="显示内置文字" Introduction="通过设置 <code>ShowInnerText</code> 属性控制组件显示内置文字">
    <p>通过设置 <code>OnInnerText</code> <code>OffInnerText</code> 属性更改内置文字,默认情况下建议使用一个汉字,可自定义组件宽度来增加内置文字数量</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <label class="control-label">默认文字:</label>
                <Switch OnColor="Color.Primary" ShowInnerText="true" />
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <label class="control-label">自定义文字:</label>
                <Switch OnColor="Color.Primary" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </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