feat: 增加 Select 组件禁用功能演示

This commit is contained in:
Argo-PD 2020-03-25 16:33:34 +08:00
parent e4b734de26
commit 405ca48f31
2 changed files with 47 additions and 6 deletions

View File

@ -42,6 +42,47 @@
</CodeTemplate>
</Block>
<Block Title="禁用下拉框" Introduction="选择器不可用状态">
<CardBodyTemplate>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<Select TItem="string" Color="Color.Primary" Items="@Items" IsDisabled="true"></Select>
</div>
<div class="form-group col-12 col-sm-6">
<Select TItem="string" Color="Color.Success" Items="@Items" IsDisabled="true"></Select>
</div>
<div class="form-group col-12 col-sm-6">
<Select TItem="string" Color="Color.Danger" Items="@Items" IsDisabled="true"></Select>
</div>
<div class="form-group col-12 col-sm-6">
<Select TItem="string" Color="Color.Warning" Items="@Items" IsDisabled="true"></Select>
</div>
<div class="form-group col-12 col-sm-6">
<Select TItem="string" Color="Color.Info" Items="@Items" IsDisabled="true"></Select>
</div>
<div class="form-group col-12 col-sm-6">
<Select TItem="string" Color="Color.Secondary" Items="@Items" IsDisabled="true"></Select>
</div>
<div class="form-group col-12 col-sm-6">
<Select TItem="string" Color="Color.Dark" Items="@Items" IsDisabled="true"></Select>
</div>
</div>
</div>
</CardBodyTemplate>
<CodeTemplate>
<pre>
&lt;Select Items="@@Items" IsDisabled="true" TItem="string" Color="Color.Primary"&gt;&lt;/Select&gt;
&lt;Select Items="@@Items" IsDisabled="true" TItem="string" Color="Color.Success"&gt;&lt;/Select&gt;
&lt;Select Items="@@Items" IsDisabled="true" TItem="string" Color="Color.Danger"&gt;&lt;/Select&gt;
&lt;Select Items="@@Items" IsDisabled="true" TItem="string" Color="Color.Warning"&gt;&lt;/Select&gt;
&lt;Select Items="@@Items" IsDisabled="true" TItem="string" Color="Color.Info"&gt;&lt;/Select&gt;
&lt;Select Items="@@Items" IsDisabled="true" TItem="string" Color="Color.Secondary"&gt;&lt;/Select&gt;
&lt;Select Items="@@Items" IsDisabled="true" TItem="string" Color="Color.Dark"&gt;&lt;/Select&gt;
</pre>
</CodeTemplate>
</Block>
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
<EventTable Items="@GetEvents()" />

View File

@ -22,14 +22,14 @@ namespace BootstrapBlazor.Components
/// 获得 样式集合
/// </summary>
protected string InputClassName => CssBuilder.Default("form-control form-select-input")
.AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None)
.AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled)
.Build();
/// <summary>
/// 获得 样式集合
/// </summary>
protected string ArrowClassName => CssBuilder.Default("form-select-append")
.AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None)
.AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled)
.Build();
/// <summary>
@ -51,7 +51,7 @@ namespace BootstrapBlazor.Components
/// <summary>
/// 当前选择项实例
/// </summary>
protected SelectedItem? SelectedItem { get; set; }
public SelectedItem? SelectedItem { get; set; }
/// <summary>
/// 获得 按钮 disabled 属性
@ -111,8 +111,8 @@ namespace BootstrapBlazor.Components
protected string ActiveItem(SelectedItem item)
{
return CssBuilder.Default("dropdown-item")
.AddClass("active", () => item.Value == SelectedItem?.Value)
.Build();
.AddClass("active", () => item.Value == SelectedItem?.Value)
.Build();
}
}
}