!3536 fix(#I61B4Z): trigger collapse when click on Select component in the HeaderTemplate

* chore: bump version 7.0.1
* revert: 使用 bs collapse
* doc: 更新示例
* fix: 移除客户端收缩机制改用服务器端
This commit is contained in:
Argo 2022-11-16 04:37:07 +00:00
parent 24b034281a
commit 60d41b8a75
6 changed files with 48 additions and 47 deletions

View File

@ -139,6 +139,14 @@
<Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
<HeaderTemplate>
@Localizer["CollapsibleHeaderTemplate"]
<Select TValue="string">
<Options>
<SelectOption Text="Test1" Value="" />
<SelectOption Text="Test2" Value="1" />
<SelectOption Text="Test3" Value="2" />
<SelectOption Text="Test4" Value="3" />
</Options>
</Select>
</HeaderTemplate>
<BodyTemplate>
@Localizer["CollapsibleBody"]

View File

@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<Version>7.0.1-beta08</Version>
<Version>7.0.1</Version>
</PropertyGroup>
<ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

View File

@ -3,33 +3,29 @@
--bs-card-inner-border-radius: calc(var(--bs-border-radius) - 1px);
--bb-card-shadow: var(--bb-shadow);
--bb-card-hover-shadow: var(--bb-hover-shadow);
--bb-card-collapse-bar-margin-right: .5rem;
--bb-card-header-tag-height: 21px;
}
.card .card-collapse {
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
}
.card-header {
border-bottom-width: 0;
display: flex;
align-items: center;
}
.card .card-collapse .card-collapse-body {
display: flex;
flex: 1;
align-items: center;
margin-left: .5rem;
}
.card .card-collapse-arrow {
.card-header .card-collapse-arrow {
margin-right: var(--bb-card-collapse-bar-margin-right);
transition: transform .3s linear;
}
.card .card-header {
border-bottom-width: 0;
.card-header .card-collapse-bar {
cursor: pointer;
margin-right: var(--bb-card-collapse-bar-margin-right);
}
.card .card-header + .card-body {
border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header .tag {
line-height: var(--bb-card-header-tag-height);
}
.card-shadow {
box-shadow: var(--bb-card-shadow);
@ -44,14 +40,14 @@
transform: rotate( 90deg);
}
.card-header .tag {
line-height: 21px;
.card-body {
border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.is-collapsable .card-body {
.is-collapsable > .card-body {
padding: 0;
}
.is-collapsable .card-body-wrapper {
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}
.is-collapsable > .card-body > .card-body-wrapper {
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

View File

@ -7,16 +7,28 @@
<div class="card-header">
@if (IsCollapsible)
{
<div class="card-collapse" data-bs-toggle="collapse" data-bs-target="#@Id" aria-expanded="@ExpandedString">
<div class="card-collapse-bar" data-bs-toggle="collapse" data-bs-target="#@Id" aria-expanded="@ExpandedString">
<i class="@ArrowClassString"></i>
<div class="card-collapse-body">
@RenderHeader
</div>
@if (!string.IsNullOrEmpty(HeaderText))
{
<span class="card-title">@HeaderText</span>
}
</div>
if (HeaderTemplate != null)
{
@HeaderTemplate
}
}
else
{
@RenderHeader
if (!string.IsNullOrEmpty(HeaderText))
{
<span class="card-title">@HeaderText</span>
}
if (HeaderTemplate != null)
{
@HeaderTemplate
}
}
</div>
}

View File

@ -117,19 +117,4 @@ public partial class Card
CollapseIcon ??= "fa-solid fa-circle-chevron-right";
}
/// <summary>
/// 渲染 Header 方法
/// </summary>
protected RenderFragment RenderHeader => builder =>
{
if (HeaderTemplate != null)
{
builder.AddContent(0, HeaderTemplate);
}
else
{
builder.AddContent(1, HeaderText);
}
};
}

File diff suppressed because one or more lines are too long