test/BootstrapBlazor3
1
0
Fork 0
mirror of https://gitee.com/LongbowEnterprise/BootstrapBlazor.git synced 2024-12-04 21:20:16 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

!1649 feat(#I434SC): add loading for Search component

Browse Source 
* feat: 增加 Search 组件搜索时 loading 样式
* feat: 重构 AutoComplete 组件移动样式
This commit is contained in:
Argo 2021-07-30 04:23:17 +00:00
parent 3d9c3b9e34
commit f821650298
6 changed files with 83 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/BootstrapBlazor/Components/AutoComplete/AutoComplete.css Normal file
View File

@ -0,0 +1,52 @@
.auto-complete {
position: relative;
}
.auto-complete input {
padding-right: 30px;
}
.auto-complete .select-dropdown {
position: absolute;
top: 40px;
left: 0;
right: 0;
display: none;
z-index: 2;
}
.auto-complete .select-dropdown .dropdown-list {
max-height: 300px;
overflow: auto;
padding: 6px 0;
list-style: none;
margin: 0;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176);
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
.auto-complete .select-dropdown .dropdown-list .dropdown-item {
padding: 6px 20px;
}
.auto-complete.is-complete .select-dropdown {
display: block;
}
.auto-complete .fa-spin {
position: absolute;
top: 10.5px;
right: 8px;
display: none;
}
.auto-complete.is-loading .fa-spin {
display: inline-block;
}
.search .auto-complete .fa-spin {
position: unset;
display: inline-block;
}

2
src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor
View File

@ -7,7 +7,7 @@
}
<div class="@ClassString">
<input @attributes="AdditionalAttributes" class="@ClassName" autocomplete="off" type="text" placeholder="@PlaceHolder" @bind-value="@CurrentValueAsString" @bind-value:event="oninput" @onblur="@OnBlur" @onkeyup="@OnKeyUp" />
<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-fw fa-spinner fa-spin"></i>
<div class="select-dropdown">
<ul class="dropdown-list">
@if (FilterItems.Any())

13
src/BootstrapBlazor/Components/Search/Search.razor
View File

@ -5,14 +5,11 @@
<div class="@ClassString">
<div class="input-group">
<input @attributes="AdditionalAttributes" class="@ClassName" autocomplete="off" type="text" placeholder="@PlaceHolder" @bind-value="@CurrentValueAsString" @bind-value:event="oninput" @onblur="@OnBlur" @onkeyup="@OnKeyUp" />
<div class="input-group-append">
<i class="fa fa-spinner fa-spin fa-fw"></i>
@if (ShowClearButton)
{
<Button Color="@ClearButtonColor" Text="@ClearButtonText" Icon="@ClearButtonIcon" OnClick="@OnClearClick" />
}
<Button Color="@SearchButtonColor" Text="@SearchButtonText" Icon="@SearchButtonIcon" OnClick="@OnSearchClick" />
</div>
@if (ShowClearButton)
{
<Button Color="@ClearButtonColor" Text="@ClearButtonText" Icon="@ClearButtonIcon" OnClick="@OnClearClick" />
}
<Button Color="@SearchButtonColor" Text="@SearchButtonText" Icon="@ButtonIcon" OnClick="@OnSearchClick" />
</div>
<div class="select-dropdown">
<ul class="dropdown-list">

28
src/BootstrapBlazor/Components/Search/Search.razor.cs
View File

@ -16,6 +16,11 @@ namespace BootstrapBlazor.Components
/// </summary>
public partial class Search
{
[NotNull]
private string? ButtonIcon { get; set; }
private bool IsClear { get; set; }
/// <summary>
/// 获得/设置 是否显示清除按钮 默认为 false 不显示
/// </summary>
@ -26,7 +31,7 @@ namespace BootstrapBlazor.Components
/// Clear button icon
/// </summary>
[Parameter]
public string ClearButtonIcon { get; set; } = "fa fa-trash";
public string ClearButtonIcon { get; set; } = "fa fa-fw fa-trash";
/// <summary>
/// Clear button text
@ -50,7 +55,13 @@ namespace BootstrapBlazor.Components
/// 获得/设置 搜索按钮图标
/// </summary>
[Parameter]
public string SearchButtonIcon { get; set; } = "fa fa-search";
public string SearchButtonIcon { get; set; } = "fa fa-fw fa-search";
/// <summary>
/// 获得/设置 正在搜索按钮图标
/// </summary>
[Parameter]
public string SeachButtonLoadingIcon { get; set; } = "fa fa-fw fa-spinner fa-spin";
/// <summary>
/// 获得/设置 搜索按钮文字
@ -83,6 +94,7 @@ namespace BootstrapBlazor.Components
base.OnInitialized();
SearchButtonText ??= Localizer[nameof(SearchButtonText)];
ButtonIcon = SearchButtonIcon;
}
/// <summary>
@ -91,7 +103,12 @@ namespace BootstrapBlazor.Components
/// <returns></returns>
protected async Task OnSearchClick()
{
if (OnSearch != null) await OnSearch(CurrentValueAsString);
if (OnSearch != null)
{
ButtonIcon = SeachButtonLoadingIcon;
await OnSearch(CurrentValueAsString);
ButtonIcon = SearchButtonIcon;
}
}
/// <summary>
@ -100,7 +117,10 @@ namespace BootstrapBlazor.Components
/// <returns></returns>
protected async Task OnClearClick()
{
if (OnClear != null) await OnClear(CurrentValueAsString);
if (OnClear != null)
{
await OnClear(CurrentValueAsString);
}
CurrentValueAsString = "";
}

2
src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css vendored
View File

File diff suppressed because one or more lines are too long

60
src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css vendored
View File

@ -727,66 +727,6 @@ input:disabled,
}
/*end circle*/
/*auto complete*/
.auto-complete {
position: relative;
}
.auto-complete input {
padding-right: 30px;
}
.auto-complete .select-dropdown {
position: absolute;
top: 40px;
left: 0;
right: 0;
display: none;
z-index: 2;
}
.auto-complete .select-dropdown .dropdown-list {
max-height: 300px;
overflow: auto;
padding: 6px 0;
list-style: none;
margin: 0;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176);
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
.auto-complete .select-dropdown .dropdown-list .dropdown-item {
padding: 6px 20px;
}
.auto-complete.is-complete .select-dropdown {
display: block;
}
.auto-complete .fa-spin {
position: absolute;
top: 10.5px;
right: 8px;
display: none;
}
.auto-complete.is-loading .fa-spin {
display: block;
}
/*end complete*/
/*search*/
.search .input-group-append {
position: relative;
}
.search .auto-complete .fa-spin {
left: -26px;
}
/*end search*/
/*listview*/
.listview {
border: 1px solid rgba(0,0,0,.125);