
InputNumber 组件
仅允许输入标准的数字值,支持自定义范围及其他高级功能
基础用法
Number
数值类型显示文本框,移动端自动弹出数字键盘
Demo
区间限制用法
设置 Max
Min
来控制数值区间范围 1-10
Demo
控制按钮
设置 ShowButton
参数来控制是否显示增加或减少的按钮
Demo
本例设置了最大值 10 最小值 0
自定义步长
设置 Step
参数来控制增加或减少的步长
Demo
步长默认为 1
步长设置为 10
步长设置为 0.1
颜色
设置 Color
参数来自定义按钮颜色
Demo
显示按钮
无按钮
数据类型
本组件采用泛型支持 int short long float double decimal
基础数据类型
Demo
禁用
设置 IsDisabled
属性值为 true
时,组件禁止输入
Demo
显示标签
组件双向绑定时会根据条件自动判断是否显示标签文字
Demo
Attributes
Loading...
@page "/inputnumbers"
<h3>InputNumber 组件</h3>
<h4>仅允许输入标准的数字值,支持自定义范围及其他高级功能</h4>
<Block Title="基础用法" Introduction="<code>Number</code> 数值类型显示文本框,移动端自动弹出数字键盘">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="@BindValue" />
</div>
</Block>
<Block Title="区间限制用法" Introduction="设置 <code>Max</code> <code>Min</code> 来控制数值区间范围 1-10">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="@BindValue" Max="10" Min="1" />
</div>
</Block>
<Block Title="控制按钮" Introduction="设置 <code>ShowButton</code> 参数来控制是否显示增加或减少的按钮">
<p>本例设置了最大值 10 最小值 0</p>
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="@BindValue" Max="10" Min="0" />
</div>
</Block>
<Block Title="自定义步长" Introduction="设置 <code>Step</code> 参数来控制增加或减少的步长">
<div class="demo-inputnumber">
<p>步长默认为 1</p>
<BootstrapInputNumber ShowButton="true" Value="5" Color="Color.Danger" />
</div>
<div class="demo-inputnumber mt-3">
<p>步长设置为 10</p>
<BootstrapInputNumber ShowButton="true" Value="10" Step="10" Color="Color.Success" />
</div>
<div class="demo-inputnumber mt-3">
<p>步长设置为 0.1</p>
<BootstrapInputNumber ShowButton="true" Value="0.5" Step="0.1" Formatter="@Formatter" Color="Color.Warning" />
</div>
</Block>
<Block Title="颜色" Introduction="设置 <code>Color</code> 参数来自定义按钮颜色">
<p>显示按钮</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="10" Color="Color.None" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Primary" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Success" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Info" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Warning" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Danger" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Dark" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Secondary" />
</div>
</div>
</div>
</div>
<p class="mt-3">无按钮</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="10" Color="Color.None" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="10" Color="Color.Primary" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="10" Color="Color.Success" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="10" Color="Color.Info" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="10" Color="Color.Warning" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="10" Color="Color.Danger" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="10" Color="Color.Dark" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="10" Color="Color.Secondary" />
</div>
</div>
</div>
</div>
</Block>
<Block Title="数据类型" Introduction="本组件采用泛型支持 <code>int short long float double decimal</code> 基础数据类型">
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="@BindShortValue" DisplayText="Short" ShowLabel="true" ShowButton="true" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="@BindLongValue" DisplayText="Long" ShowLabel="true" ShowButton="true" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="@BindFloatValue" DisplayText="Float" ShowLabel="true" ShowButton="true" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="@BindValue" DisplayText="Int" ShowLabel="true" ShowButton="true" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="@BindDoubleValue" DisplayText="Double" ShowLabel="true" ShowButton="true" />
</div>
</div>
<div class="form-group col-12 col-sm-6">
<div class="demo-inputnumber">
<BootstrapInputNumber Value="@BindDecimalValue" DisplayText="Decimal" ShowLabel="true" ShowButton="true" />
</div>
</div>
</div>
</div>
</Block>
<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时,组件禁止输入">
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<BootstrapInputNumber Value="10" IsDisabled="true" />
</div>
<div class="form-group col-12 col-sm-6">
<BootstrapInputNumber Value="20" IsDisabled="true" ShowButton="true" />
</div>
</div>
</div>
</Block>
<Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
<p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
<Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<ValidateForm class="form-inline" Model="@Model">
<div class="row">
<div class="form-group col-12">
<BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="true" />
</div>
</div>
</ValidateForm>
<Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="false" />
</div>
</div>
</div>
<Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="true" DisplayText="自定义" />
</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.Collections.Generic;
using System.ComponentModel;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class InputNumbers
{
/// <summary>
///
/// </summary>
public int BindValue { get; set; } = 5;
/// <summary>
///
/// </summary>
public sbyte BindSByteValue { get; set; } = 10;
/// <summary>
///
/// </summary>
public byte BindByteValue { get; set; } = 10;
/// <summary>
///
/// </summary>
public long BindLongValue { get; set; } = 10;
/// <summary>
///
/// </summary>
public short BindShortValue { get; set; } = 10;
/// <summary>
///
/// </summary>
public double BindDoubleValue { get; set; } = 10;
/// <summary>
///
/// </summary>
public float BindFloatValue { get; set; } = 10;
/// <summary>
///
/// </summary>
public decimal BindDecimalValue { get; set; } = 10;
private Foo Model { get; set; } = new Foo() { Count = 10 };
private static string Formatter(double val) => val.ToString("0.0");
private static IEnumerable<AttributeItem> GetAttributes()
{
return new AttributeItem[]
{
new AttributeItem() {
Name = "Value",
Description = "当前值",
Type = "sbyte|byte|int|long|short|float|double|decimal",
ValueList = " — ",
DefaultValue = "0"
},
new AttributeItem() {
Name = "Max",
Description = "可允许最大值",
Type = "string",
ValueList = " - ",
DefaultValue = " - "
},
new AttributeItem()
{
Name = "Min",
Description = "可允许最小值",
Type = "string",
ValueList = " - ",
DefaultValue = " - "
},
new AttributeItem()
{
Name = "Step",
Description = "步长",
Type = "int|long|short|float|double|decimal",
ValueList = " - ",
DefaultValue = "1"
},
new AttributeItem()
{
Name = "IsDisabled",
Description = "是否禁用 默认为 fasle",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowLabel",
Description = "是否显示前置标签",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "DisplayText",
Description = "前置标签显示文本",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
}
};
}
}
}