Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Input 输入框

通过鼠标或键盘输入字符

基础用法

提供基本的文本录入组件

Demo
基本用法

单向绑定数据

显示组件内变量值

Demo
单向绑定

双向绑定数据

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

Demo

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

自定义标签

设置 DisplayText 值为 自定义标签

占位

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

不占位

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

客户端验证

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

Demo

密码框

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

Demo

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

泛型绑定

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

Demo
绑定数值: 000

禁用

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

Demo

自定义格式

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

Demo
设置 FormatString
设置 Formatter

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

设置 Formatter

Attributes

Loading...
@page "/inputs"
@inject IStringLocalizer<Inputs> Localizer

<h3>Input 输入框</h3>

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

<Block Title="基础用法" Introduction="提供基本的文本录入组件">
    <div class="row">
        <div class="col-auto col-form-label">
            <span>基本用法</span>
        </div>
        <div class="col-6">
            <BootstrapInput placeholder="@PlaceHolderText" TValue="string" />
        </div>
    </div>
</Block>

<Block Title="单向绑定数据" Introduction="显示组件内变量值">
    <div class="row">
        <div class="col-auto col-form-label">
            <span>单向绑定</span>
        </div>
        <div class="col-6">
            <BootstrapInput placeholder="@PlaceHolderText" Value="@Model.Name" />
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="绑定组件内变量,数据自动同步">
    <p><code>BootstrapInput</code> 组件开启双向绑定时,会根据绑定的 <code>Model</code> 属性值去自动获取 <code>Display/DisplayName</code> 标签值并且显示为前置 <code>Label</code>,通过 <code>DisplayText</code> 属性可以自定义显示前置标签,或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
    <div class="form-inline">
        <div class="row">
            <Divider Text="自定义标签" />
            <div class="form-group col-12">
                <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
            </div>
            <div class="form-group col-12">
                <BootstrapInput placeholder="@PlaceHolderText" @bind-Value="@Model.Name" DisplayText="自定义标签" ShowLabel="true" />
            </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="@PlaceHolderText" @bind-Value="@Model.Name" ShowLabel="true" />
            </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="@PlaceHolderText" @bind-Value="@Model.Name" />
            </div>
        </div>
    </div>
</Block>

<Block Title="客户端验证" Introduction="根据自定义验证规则进行数据有效性检查并自动提示">
    <Tips>使用双向绑定时会自动寻找资源文件中 <code>Key</code> 值为 <code>{FieldName}.PlaceHolder</code> 对应值作为 <code>placeholder</code> 显示,本例中 <code>placeholder</code> 值为资源文件中 <code>Name.PlaceHolder</code> 键对应值 <code>required/不可为空</code></Tips>
    <ValidateForm class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group col-12">
                <BootstrapInput maxlength="5" @bind-Value="@Model.Name" />
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="密码框" Introduction="通过设置属性 <code>type</code> 值为 <code>password</code> 使输入文字后以 <code>*</code> 进行屏蔽的密码输入框">
    <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" placeholder="@PlaceHolderText" type="password" maxlength="5" style="width: 200px;" />
</Block>

<Block Title="泛型绑定" Introduction="<code>BootstrapInput</code> 组件双向绑定值是泛型的,本例中双向绑定一个 int 类型数值">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput FormatString="000" step="1" placeholder="@PlaceHolderText" @bind-Value="@Model.Count" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <div>绑定数值: @Model.Count.ToString("000")</div>
            </div>
        </div>
    </div>
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时,组件禁止输入">
    <div class="row">
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" IsDisabled="true" />
        </div>
    </div>
</Block>

<Block Title="自定义格式" Introduction="设置 <code>FormatString</code> 属性值为 <code>yyyy-MM-dd</code> 时,组件显示的时间格式为年月日">
    <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 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 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 Value="@ByteArray" Formatter="@ByteArrayFormatter" IsDisabled="true" />
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class Inputs
    {
        private string? PlaceHolderText { get; set; }

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

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

        private Foo Model { get; set; } = new Foo() { Name = "张三" };

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

        /// <summary>
        /// 
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            PlaceHolderText = Localizer["PlaceHolder"];
        }

        private static IEnumerable<AttributeItem> GetAttributes() => new[]
        {
            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"
            }
        };
    }
}

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