@page "/inputs"

<h3>Input 输入框</h3>

<h4>通过鼠标或键盘输入字符</h4>

<Block Title="基础用法" Introduction="提供基本的文本录入组件" CodeFile="input.1.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <label class="control-label">基本用法</label>
                <BootstrapInput TValue="string" placeholder="请输入 ..."></BootstrapInput>
            </div>
        </div>
    </div>
</Block>

<Block Title="单向绑定数据" Introduction="显示组件内变量值" CodeFile="input.2.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <label class="control-label">单向绑定</label>
                <BootstrapInput placeholder="请输入 ..." Value="@InputValue"></BootstrapInput>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="绑定组件内变量，数据自动同步" CodeFile="input.3.html">
    <p><code>BootstrapInput</code> 组件开启双向绑定时，会根据绑定的 <code>Model</code> 属性值去自动获取 <code>DisplayName</code> 标签值并且显示为前置 <code>Label</code>，通过 <code>DisplayText</code> 属性可以自定义显示前置标签，或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
    <Alert ShowBar="true">特别注意：所有表单组件如果内置到 <code>EditForm</code> 中使用时，即使 <code>ShowLabel</code> 设置为 <code>false</code> 也是会显示前置标签</Alert>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <BootstrapInput placeholder="请输入 ..." @bind-Value="@BindValue" DisplayText="双向绑定示例">
                </BootstrapInput>
            </div>
            <div class="form-group col-12">
                <div>绑定数值: @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">
                <BootstrapInput placeholder="请输入 ..." @bind-Value="@BindValue" DisplayText="自定义标签" ShowLabel="true">
                </BootstrapInput>
            </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">
                <BootstrapInput placeholder="请输入 ..." @bind-Value="@BindValue" ShowLabel="true">
                </BootstrapInput>
            </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">
                <BootstrapInput placeholder="请输入 ..." @bind-Value="@BindValue" ShowLabel="false">
                </BootstrapInput>
            </div>
        </div>
    </div>
</Block>

<Block Title="客户端验证" Introduction="根据自定义验证规则进行数据有效性检查并自动提示" CodeFile="input.4.html">
    <ValidateForm class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group col-12">
                <BootstrapInput maxlength="5" placeholder="请输入 ..." @bind-Value="@Model.Name">
                    <RequiredValidator />
                    <StringLengthValidator Length="5" />
                </BootstrapInput>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="密码框" Introduction="通过设置属性 <code>type</code> 值为 <code>password</code> 使输入文字后以 <code>*</code> 进行屏蔽的密码输入框" CodeFile="input.5.html">
    <p>为了支持更多的文本框属性本组件可以直接写入 <code>type="email"</code> <code>type="number"</code> <code>type="phone"</code> 等 <code>html5</code> 新标准支持的全部属性值，组件未设置 <code>type</code> 值时使用默认的 <code>type="text"</code></p>
    <BootstrapInput TValue="string" type="password" maxlength="5" placeholder="请输入 ..." style="width: 120px;">
    </BootstrapInput>
</Block>

<Block Title="泛型绑定" Introduction="<code>BootstrapInput</code> 组件双向绑定值是泛型的，本例中双向绑定一个 double 类型数值" CodeFile="input.6.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput placeholder="请输入 ..." type="number" FormatString="0.00" @bind-Value="@BindDoubleValue" DisplayText="请输入数字">
                </BootstrapInput>
            </div>
            <div class="form-group col-12 col-sm-6">
                <div>绑定数值: @BindDoubleValue.ToString("0.00")</div>
            </div>
        </div>
    </div>
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入" CodeFile="input.7.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput TValue="string" IsDisabled="true" />
            </div>
        </div>
    </div>
</Block>

<Block Title="自定义格式" Introduction="设置 <code>FormatString</code> 属性值为 <code>yyyy-MM-dd</code> 时，组件显示的时间格式为年月日" CodeFile="input.8.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">FormatString</code></div>
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput TValue="DateTime" Value="DateTime.Now" FormatString="yyyy-MM-dd" IsDisabled="true" />
            </div>
            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">Formatter</code></div>
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput TValue="DateTime" Value="DateTime.Now" Formatter="@DateTimeFormatter" IsDisabled="true" />
            </div>
        </div>
    </div>
    <p class="mt-3"><code>BootstrapInput</code> 组件绑定 <code>byte[]</code> 数组，格式化成 <code>base64</code> 编码字符串示例</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">Formatter</code></div>
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput TValue="byte[]" Value="@ByteArray" Formatter="@ByteArrayFormatter" IsDisabled="true" />
            </div>
        </div>
    </div>
</Block>

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

@code {
    private byte[] ByteArray { get; set; } = new byte[] { 0x01, 0x12, 0x34, 0x56 };

    private string ByteArrayFormatter(byte[] source) => Convert.ToBase64String(source);

    private string InputValue => "数据值";

    [System.ComponentModel.DisplayName("标签值")]
    private string BindValue { get; set; } = "绑定值";

    private double BindDoubleValue { get; set; } = 1.0;

    private FooModel Model { get; set; } = new FooModel();

    private string DateTimeFormatter(DateTime source) => source.ToString("yyyy-MM-dd");

    private class FooModel
    {
        [System.ComponentModel.DisplayName("姓名")]
        public string Name { get; set; } = "张三";
    }

    private IEnumerable<AttributeItem> GetAttributes()
    {
        return new AttributeItem[]
        {
            new AttributeItem() {
                Name = "ChildContent",
                Description = "验证控件",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示前置标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = "前置标签显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FormatString",
                Description = "数值格式化字符串",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Formatter",
                Description = "TableHeader 实例",
                Type = "RenderFragment<TItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "type",
                Description = "控件类型",
                Type = "string",
                ValueList = "text / number / email / url / password",
                DefaultValue = "text"
            },
            new AttributeItem()
            {
                Name = "IsDisabled",
                Description = "是否禁用 默认为 fasle",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            }
        };
    }
}

正在加载 ...