!3535 feat(#I61CMJ): update card-body css

* chore: Table 组件适配 Card 收缩样式
* feat: 更新可收缩 Card 内容样式
This commit is contained in:
Argo 2022-11-15 12:17:14 +00:00
parent f287028c40
commit 24b034281a
9 changed files with 41 additions and 34 deletions

View File

@ -47,3 +47,11 @@
.card-header .tag {
line-height: 21px;
}
.is-collapsable .card-body {
padding: 0;
}
.is-collapsable .card-body-wrapper {
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

View File

@ -21,7 +21,16 @@
</div>
}
<div class="@BodyClassName" id="@Id">
@BodyTemplate
@if (IsCollapsible)
{
<div class="card-body-wrapper">
@BodyTemplate
</div>
}
else
{
@BodyTemplate
}
</div>
@if (FooterTemplate != null)
{

View File

@ -16,11 +16,12 @@ public partial class Card
.AddClass("text-center", IsCenter)
.AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None)
.AddClass("card-shadow", IsShadow)
.AddClass("is-collapsable", IsCollapsible)
.AddClassFromAttributes(AdditionalAttributes)
.Build();
/// <summary>
///
/// 获得 收缩图标样式
/// </summary>
protected string? ArrowClassString => CssBuilder.Default("card-collapse-arrow")
.AddClass(CollapseIcon)

View File

@ -620,15 +620,6 @@ form .table .table-cell > textarea {
padding: .275rem .5rem;
}
.table-search .card-body {
--bs-card-spacer-x: 0;
--bs-card-spacer-y: 0;
}
.table-search .card-body > .groupbox {
margin: var(--bb-table-search-body-margin);
}
.table-search-collapse {
flex: 1;
display: flex;

View File

@ -834,7 +834,7 @@ RenderFragment<TItem> RenderRowExtendButtons => item =>
</td>;
RenderFragment RenderSearch =>
@<div class="card">
@<div class="card is-collapsable">
<div class="card-header">
<div class="d-flex">
<div class="table-search-collapse" data-bs-toggle="collapse" data-bs-target="#@TopSearchBodyId" aria-expanded="@TopSearchCollapsedString">
@ -884,21 +884,23 @@ RenderFragment RenderSearch =>
</div>
</div>
<div class="@TopSearchBodyClassString" id="@TopSearchBodyId">
@if(CustomerSearchModel != null && CustomerSearchTemplate != null)
{
@CustomerSearchTemplate(CustomerSearchModel)
}
else if(SearchTemplate != null)
{
@SearchTemplate(SearchModel)
}
else
{
<CascadingValue Value="true" IsFixed="true" Name="IsSearch">
<EditorForm Model="SearchModel" Items="GetSearchColumns()" ItemsPerRow="SearchDialogItemsPerRow" RowType="SearchDialogRowType" LabelAlign="SearchDialogLabelAlign">
</EditorForm>
</CascadingValue>
}
<div class="card-body-wrapper">
@if(CustomerSearchModel != null && CustomerSearchTemplate != null)
{
@CustomerSearchTemplate(CustomerSearchModel)
}
else if(SearchTemplate != null)
{
@SearchTemplate(SearchModel)
}
else
{
<CascadingValue Value="true" IsFixed="true" Name="IsSearch">
<EditorForm Model="SearchModel" Items="GetSearchColumns()" ItemsPerRow="SearchDialogItemsPerRow" RowType="SearchDialogRowType" LabelAlign="SearchDialogLabelAlign">
</EditorForm>
</CascadingValue>
}
</div>
</div>
</div>;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -79,10 +79,6 @@ export class Table extends BlazorComponent {
break
}
}
// if ($.browser.versions.mobile) {
// fs.remove();
// }
}
// 尝试自适应高度