
Input 输入框
通过鼠标或键盘输入字符
基础用法
提供基本的文本录入组件
Demo
基本用法
单向绑定数据
显示组件内变量值
Demo
单向绑定
双向绑定数据
绑定组件内变量,数据自动同步
Demo
BootstrapInput
组件开启双向绑定时,会根据绑定的 Model
属性值去自动获取 Display/DisplayName
标签值并且显示为前置 Label
,通过 DisplayText
属性可以自定义显示前置标签,或者通过 ShowLabel
属性关闭前置标签是否显示
自定义标签
设置 DisplayText
值为 自定义标签
占位
无论是否设置 DisplayText
值,当 ShowLabel
为 true
时均显示
不占位
无论是否设置 DisplayText
值,当 ShowLabel
为 false
时均不显示
客户端验证
根据自定义验证规则进行数据有效性检查并自动提示
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"
}
};
}
}