doc: 完善 Input 组件客户端验证说明

This commit is contained in:
Argo-PD 2020-03-26 00:19:20 +08:00
parent 4e54a23aad
commit cc18f4ace7
4 changed files with 23 additions and 8 deletions

View File

@ -1,6 +1,6 @@
@page "/alerts"
<Block Title="Alerts 警告框" Introduction="提供各种颜色的警告信息框">
<Block Title="Alert 警告框" Introduction="提供各种颜色的警告信息框">
<CardBodyTemplate>
<Alert Color="Color.Primary">主要的警告框</Alert>
<Alert Color="Color.Secondary">次要的警告框</Alert>

View File

@ -1,6 +1,6 @@
@page "/inputs"
<Block Title="Inputs 文本输入框" Introduction="提供基本的文本录入组件">
<Block Title="Input 文本输入框" Introduction="提供基本的文本录入组件">
<CardBodyTemplate>
<div class="form-inline">
<div class="row">
@ -52,7 +52,7 @@
</CardBodyTemplate>
<CodeTemplate>
<pre>
&lt;BootstrapInput TItem="string" placeholder="请输入 ..." Value="@@BindValue"&gt;&lt;/BootstrapInput&gt;
&lt;BootstrapInput TItem="string" placeholder="请输入 ..." @@bind-Value="@@BindValue"&gt;&lt;/BootstrapInput&gt;
</pre>
</CodeTemplate>
</Block>
@ -73,8 +73,14 @@
</CardBodyTemplate>
<CodeTemplate>
<pre>
&lt;BootstrapInput TItem="string" placeholder="请输入 ..." Value="@@BindValue"&gt;&lt;/BootstrapInput&gt;
&lt;ValidateForm class="form-inline" Model="@Model"&gt;
&lt;BootstrapInput TItem="string" maxlength="5" placeholder="请输入 ..." @@bind-Value="@@BindValue"&gt;
&lt;RequiredValidator /&gt;
&lt;StringLengthValidator Length="5" /&gt;
&lt;/BootstrapInput&gt;
&lt;/ValidateForm&gt;
</pre>
<p>控件放置于 <code class="highlight">ValidateForm</code> 组件内,通过设置 <code>Model</code> 属性获得 <code>Select</code> 组件绑定的字段值如 <code>@@bind-Value="@@Model.Name"</code></p>
</CodeTemplate>
</Block>
@ -103,6 +109,13 @@
Type = "string",
ValueList = "text / number / email / url",
DefaultValue = "text"
},
new AttributeItem() {
Name = "ChildContent",
Description = "验证控件",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
}
};
}

View File

@ -1,6 +1,6 @@
@page "/selects"
<Block Title="Selects 下拉选择框" Introduction="提供各种颜色的下拉选择框">
<Block Title="Select 下拉选择框" Introduction="提供各种颜色的下拉选择框">
<CardBodyTemplate>
<div class="form-inline">
<div class="row">

View File

@ -243,6 +243,10 @@ section {
margin-bottom: 2px;
}
.content p {
line-height: 2;
}
.content code {
line-height: 1.8;
font-size: 0.75rem;
@ -255,10 +259,8 @@ section {
display: block;
}
.content code.highlight {
border: none;
.content code.highlight, .content p code {
display: inline-block;
line-height: 1.5;
padding: 0px 8px;
background-color: #e9ecef;
margin: 0;