基于 Bootstrap 和 Blazor 的企业级组件库

star nuget master download license repo commit

Input 输入框

通过鼠标或键盘输入字符

基础用法

提供基本的文本录入组件

Demo

单向绑定数据

显示组件内变量值

Demo

双向绑定数据

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

Demo

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

绑定数值: 绑定值
自定义标签

设置 DisplayText 值为 自定义标签

占位

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

不占位

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

客户端验证

根据自定义验证规则进行数据有效性检查并自动提示

Demo

密码框

通过设置属性 type 值为 password 使输入文字后以 * 进行屏蔽的密码输入框

Demo

为了支持更多的文本框属性本组件可以直接写入 type="email" type="number" type="phone"html5 新标准支持的全部属性值,组件未设置 type 值时使用默认的 type="text"

泛型绑定

BootstrapInput 组件双向绑定值是泛型的,本例中双向绑定一个 double 类型数值

Demo
绑定数值: 1.00

禁用

设置 IsDisabled 属性值为 true 时,组件禁止输入

Demo

自定义格式

设置 FormatString 属性值为 yyyy-MM-dd 时,组件显示的时间格式为年月日

Demo
设置 FormatString
设置 Formatter

BootstrapInput 组件绑定 byte[] 数组,格式化成 base64 编码字符串示例

设置 Formatter

Attributes 属性

Loading...
@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"
            }
        };
    }
}

正在加载 ...

An error has occurred. This application may no longer respond until reloaded. Reload