Input 支持以下type属性:
type="text"
type="password"
type="email"
type="tel"
支持 几个修饰符,这些修饰符会影响:
- Color
- Size
- IsRounded
- IsHovered
- IsFocused
- IsLoading
- IsStatic
- disabled 和 readonly
Input支持Icon,请参考通用控件
Input 支持以下type属性:
type="text"
type="password"
type="email"
type="tel"
支持 几个修饰符,这些修饰符会影响:
Input支持Icon,请参考通用控件
<Input Color="Color.Primary" placeholder="Primary input" TValue="string"/><br><br>
<Input Color="Color.Link" placeholder="Link input" TValue="string"/><br><br>
<Input Color="Color.Info" placeholder="Info input" TValue="string"/><br><br>
<Input Color="Color.Success" placeholder="Success input" TValue="string"/><br><br>
<Input Color="Color.Warning" placeholder="Warning input" TValue="string"/><br><br>
<Input Color="Color.Danger" placeholder="Danger input" TValue="string"/><br><br>
<Input IsSmall placeholder="Small input" TValue="string"/><br><br>
<Input placeholder="Normal input" TValue="string"/><br><br>
<Input IsMedium placeholder="Medium input" TValue="string"/><br><br>
<Input IsLarge placeholder="Large input" TValue="string"/><br><br>
<Input IsRounded placeholder="Rounded input" TValue="string"/><br><br>
<Input IsHovered placeholder="Hovered input" TValue="string"/><br><br>
<Input IsFocused placeholder="Focused input" TValue="string"/><br><br>
<Control IsLoading>
<Input placeholder="Loading input" TValue="string"/>
</Control><br><br>
<Input readonly placeholder="Readonly input" TValue="string"/><br><br>
<Input disabled placeholder="Disabled input" TValue="string"/><br><br>
<Content>
<Field>
<Label>输入框:</Label>
<Control IsLoading>
<Input @bind-Value="val" placeholder="输入数据,移开光标">
</Control>
</Field>
<Field>
<Label>Val的值:</Label>
<Control>
<Input Value="val" IsStatic />
</Control>
</Field>
</Content>
@code{
string val = "";
}
绑定事件默认是onchange,可以使用BindEvent属性设置成oninput
<Content>
<Field>
<Label>输入框:</Label>
<Control>
<Input @bind-Value="val" BindEvent="oninput" placeholder="输入数据,移开光标">
</Control>
</Field>
<Field>
<Label>Val的值:</Label>
<Control>
<Input Value="val" IsStatic />
</Control>
</Field>
<Field>
<Control>
<Button Color="Color.Info" @onclick="setNewValue">设置新值</Button>
</Control>
</Field>
</Content>
@code{
string val = "";
void setNewValue()
{
val = Guid.NewGuid().ToString("N");
}
}
Input绑定数字类型的时候,会有输入验证,如果不能转换成对应的数字类型,会返回原值。
如何想接受空值,请使用对应的可空类型,下面例子中,i2对应的输入框可以清空
i1的值:23
i2的值:4
<Content>
<Field>
<Control>
<Input @bind-Value="i1" Color="Color.Primary">
</Control>
</Field>
<Field>
<Control>
<Input @bind-Value="i2" Color="Color.Danger">
</Control>
</Field>
<p>i1的值:<span>@i1</span></p>
<p>i2的值:<span>@i2</span></p>
</Content>
@code{
int i1 = 23;
int? i2 = 4;
}
格式化是基于 ToString(format) 来实现的,所以 Format 参数和 ToString 的参数一致
dbl1的值:0.23
int1的值:12345
<Content>
<p>dbl1的值:@dbl1</p>
<Field>
<Control>
<Input @bind-Value="dbl1" Format="P"/><br>
</Control>
</Field>
<Field>
<Control>
<Input @bind-Value="dbl1" Format="0.000"/>
</Control>
</Field>
<p>int1的值:@int1</p>
<Field>
<Control>
<Input @bind-Value="int1" Format="0000000"/>
</Control>
</Field>
<Field>
<Control>
<Input @bind-Value="int1" Format="N1"/>
</Control>
</Field>
<Field>
<Control>
<Input @bind-Value="int1" Format="C"/>
</Control>
</Field>
</Content>
@code{
private double dbl1 = 0.23;
private int int1 = 12345;
}
在绑定DateTime和DateTimeOffset以及他们的可空类型的时候,可以使用Format属性设置显示格式
date1的值:12/6/2024 1:37:16 PM
date2的值:12/6/2024 1:37:16 PM +08:00
<Content>
<Field>
<Control>
<Input @bind-Value="date1" Format="yyyy-MM-dd" Color="Color.Primary">
</Control>
</Field>
<Field>
<Control>
<Input TValue="DateTimeOffset" @bind-Value="date2" Format="yyyy-MM-dd HH:mm">
</Control>
</Field>
<p>date1的值:<span>@date1</span></p>
<p>date2的值:<span>@date2</span></p>
</Content>
@code{
DateTime date1 = DateTime.Now;
DateTimeOffset date2 = DateTimeOffset.Now;
}
文档