BulmaRazor

NumberInput 计数器

仅允许输入标准的数字值，可定义范围

基础用法

视图
代码


<NumberInput style="width:180px" TValue="int" @bind-Value="num" Min="1" Max="10"></NumberInput>
@code {
    private int num = 1;
}

尺寸

额外提供了 Large、Medium、Small 三种尺寸的数字输入框

视图
代码

<Columns>

    <Column>
        <NumberInput IsLarge TValue="int" @bind-Value="num1"></NumberInput>
    </Column>
    <Column>
        <NumberInput IsMedium TValue="int" @bind-Value="num2"></NumberInput>
    </Column>
    <Column>
        <NumberInput TValue="int" @bind-Value="num3"></NumberInput>
    </Column>
    <Column>
        <NumberInput IsSmall TValue="int" @bind-Value="num4"></NumberInput>
    </Column>
</Columns>

@code {
    private int num1 = 1;
    private int num2 = 1;
    private int num3 = 1;
    private int num4 = 1;
}

颜色

可以使用Color属性改变颜色，IsOutlined可以呈现轮廓颜色

视图
代码

<Columns IsMultiline>

    <Column>
        <NumberInput Color="Color.Primary" TValue="int" @bind-Value="num1"></NumberInput>
    </Column>
    <Column>
        <NumberInput Color="Color.Info" TValue="int" @bind-Value="num1"></NumberInput>
    </Column>
    <Column>
        <NumberInput Color="Color.Warning" TValue="int" @bind-Value="num1"></NumberInput>
    </Column>
    <Column>
        <NumberInput Color="Color.Link" TValue="int" @bind-Value="num1"></NumberInput>
    </Column>
    <Column>
        <NumberInput IsOutlined Color="Color.Danger" TValue="int" @bind-Value="num1"></NumberInput>
    </Column>
    <Column>
        <NumberInput IsOutlined Color="Color.Success" TValue="int" @bind-Value="num1"></NumberInput>
    </Column>
    <Column>
        <NumberInput IsOutlined Color="Color.Dark" TValue="int" @bind-Value="num1"></NumberInput>
    </Column>
</Columns>

@code {
    private int num1 = 1;
}

禁用状态

Disabled属性接受一个Boolean，设置为true即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置Min属性和Max属性。

视图
代码

<NumberInput style="width:180px" TValue="int" @bind-Value="num" Disabled></NumberInput>

@code {
    private int num = 1;
}

步长

允许设置Step属性定义递增递减的步长控制

视图
代码

<NumberInput style="width:180px" TValue="int" @bind-Value="num" Step="2"></NumberInput>

@code {
    private int num = 5;
}

严格步长

IsStrictStep属性接受一个bool。如果这个属性被设置为true，则只能输入步数的倍数。

视图
代码

<NumberInput style="width:180px" TValue="int" @bind-Value="num" Step="2" IsStrictStep></NumberInput>

@code {
    private int num = 2;
}

精度

设置 Precision 属性可以控制数值精度，接收一个 Int。

Precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。

视图
代码

<Columns>
    <Column>
        <NumberInput style="width:180px" TValue="double" @bind-Value="num1" Precision="2" Step="0.1" Min="1" Max="10"></NumberInput>
    </Column>
    <Column>
        <NumberInput style="width:180px" TValue="double" @bind-Value="num2" Precision="2" Step="0.01" Min="1" Max="10"></NumberInput>
    </Column>
</Columns>

@code {
    private double num1 = 1;
    private double num2 = 1;
}

文档