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的值：4/26/2024 1:38:17 AM
date2的值：4/26/2024 1:38:17 AM +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;
}文档