Bootstrap Blazor - 企业级 UI 组件库

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

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

Short

Int

Long

Float

Double

Decimal

禁用

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

Demo

显示标签

组件双向绑定时会根据条件自动判断是否显示标签文字

Demo

前置标签显式规则与 BootstrapInput 组件一致 [传送门]

双向绑定显示标签

双向绑定不显示标签

自定义 DisplayText

自定义

Attributes

@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="@BindFloatValue" Color="Color.Danger" FormatString="#.##" />
                </div>
            </div>
            <div class="form-group col-12 col-sm-6">
                <div class="demo-inputnumber">
                    <BootstrapInputNumber Value="@BindDoubleValue" Color="Color.Dark" FormatString="#.##" />
                </div>
            </div>
            <div class="form-group col-12 col-sm-6">
                <div class="demo-inputnumber">
                    <BootstrapInputNumber Value="@BindDecimalValue" Color="Color.Secondary" FormatString="#.##" />
                </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="@BindValue" DisplayText="Int" 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" FormatString="#.##" />
                </div>
            </div>
            <div class="form-group col-12 col-sm-6">
                <div class="demo-inputnumber">
                    <BootstrapInputNumber Value="@BindDoubleValue" DisplayText="Double" ShowLabel="true" ShowButton="true" FormatString="#.##" />
                </div>
            </div>
            <div class="form-group col-12 col-sm-6">
                <div class="demo-inputnumber">
                    <BootstrapInputNumber Value="@BindDecimalValue" DisplayText="Decimal" ShowLabel="true" ShowButton="true" FormatString="#.##" />
                </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 = " — "
                }
            };
        }
    }
}