@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()" />

根据相关法律政策,该内容无法显示