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

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