Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Input 输入框

通过鼠标或键盘输入字符

提供基本的文本录入组件

Demo

可通过设置 IsAutoFocus 是否自动获取焦点,多个文本框设置自动获取焦点时最后执行的组件将会获得焦点

基本用法

通过设置 Color 更改文本框边框颜色

Demo

使用 OnEnterAsync OnEscAsync 回调委托对 Enter ESC 按键进行回调响应

Demo
基本用法
请按键盘 Enter 或者 Esc 进行测试

显示组件内变量值

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

使用 BootstrapPassword 组件

Demo
基本用法

使用 BootstrapPassword 组件

Demo
基本用法

Attributes

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

<h3>Input 输入框</h3>

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

<Block Title="基础用法" Introduction="提供基本的文本录入组件">
    <p>可通过设置 <code>IsAutoFocus</code> 是否自动获取焦点,多个文本框设置自动获取焦点时最后执行的组件将会获得焦点</p>
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>基本用法</span>
        </div>
        <div class="col-6">
            <BootstrapInput placeholder="@PlaceHolderText" TValue="string" IsAutoFocus="true" />
        </div>
    </div>
</Block>

<Block Title="颜色" Introduction="通过设置 <code>Color</code> 更改文本框边框颜色">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Primary" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Info" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Warning" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Danger" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Secondary" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Dark" />
        </div>
    </div>
</Block>

<Block Title="键盘响应" Introduction="使用 <code>OnEnterAsync</code> <code>OnEscAsync</code> 回调委托对 <kbd>Enter</kbd> <kbd>ESC</kbd> 按键进行回调响应">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>基本用法</span>
        </div>
        <div class="col-6">
            <BootstrapInput TValue="string" placeholder="@PlaceHolderText" OnEnterAsync="OnEnterAsync" OnEscAsync="OnEscAsync" />
        </div>
        <div class="col-12">
            <div>请按键盘 <kbd>Enter</kbd> 或者 <kbd>Esc</kbd> 进行测试</div>
        </div>
    </div>
    <BlockLogger class="mt-3" @ref="Trace" />
</Block>

<Block Title="单向绑定数据" Introduction="显示组件内变量值">
    <div class="row g-3">
        <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="row g-3">
        <Divider Text="自定义标签" />
        <div class="col-12">
            <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
        </div>
        <div class="col-12">
            <BootstrapInput placeholder="@PlaceHolderText" @bind-Value="@Model.Name" DisplayText="自定义标签" ShowLabel="true" />
        </div>
        <Divider Text="占位" />
        <div class="col-12">
            <p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
        </div>
        <div class="col-12">
            <BootstrapInput placeholder="@PlaceHolderText" @bind-Value="@Model.Name" ShowLabel="true" />
        </div>
        <Divider Text="不占位" />
        <div class="col-12">
            <p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
        </div>
        <div class="col-12">
            <BootstrapInput placeholder="@PlaceHolderText" @bind-Value="@Model.Name" />
        </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 Model="@Model">
        <BootstrapInput maxlength="5" @bind-Value="@Model.Name" />
    </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="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInput FormatString="000" step="1" placeholder="@PlaceHolderText" @bind-Value="@Model.Count" />
        </div>
        <div class="col-12 col-sm-6">
            <div class="col-form-label">绑定数值: @Model.Count.ToString("000")</div>
        </div>
    </div>
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时,组件禁止输入">
    <BootstrapInput TValue="string" IsDisabled="true" />
</Block>

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

<Block Title="密码框" Introduction="使用 <code>BootstrapPassword</code> 组件">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>基本用法</span>
        </div>
        <div class="col-6">
            <BootstrapPassword placeholder="@PlaceHolderText" />
        </div>
    </div>
</Block>

<Block Title="密码框" Introduction="使用 <code>BootstrapPassword</code> 组件">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>基本用法</span>
        </div>
        <div class="col-6">
            <BootstrapPassword placeholder="@PlaceHolderText" />
        </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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

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");

        [NotNull]
        private BlockLogger? Trace { get; set; }

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

            PlaceHolderText = Localizer["PlaceHolder"];
        }

        private Task OnEnterAsync(string val)
        {
            Trace.Log($"Enter 按键触发 当前文本框值: {val}");
            return Task.CompletedTask;
        }

        private Task OnEscAsync(string val)
        {
            Trace.Log($"Esc 按键触发 当前文本框值: {val}");
            return Task.CompletedTask;
        }

        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 = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            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 = "OnEnterAsync",
                Description = "用户按下 Enter 键回调委托",
                Type = "Func<TValue, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnEscAsync",
                Description = "用户按下 Esc 键回调委托",
                Type = "Func<TValue, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "IsDisabled",
                Description = "是否禁用 默认为 fasle",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
                Name = "IsAutoFocus",
                Description = "是否自动获取焦点 默认为 fasle",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload