如何在可重用的Razor组件中使用引导手风琴分离崩溃?

Question

我正在使用Accordion从bootstrap显示和隐藏信息。在这里，信息被存储。每个手风琴的信息是不同的，但设置是相同的。

因为我有多个手风琴，所以我把它变成了一个可重用的组件，使用Razor (Blazor)。

我现在的问题是，我想让每个手风琴都能独立运作，这意味着当我打开一个手风琴时，其他手风琴保持关闭状态，当我关闭一个手风琴时，其他手风琴保持打开状态，等等。

目前的情况是，因为它是一个可重用的组件，当我打开/关闭一个组件时，所有其他组件都做同样的事情。

下面是我当前的代码:

<div class=@FormListClass>
@foreach (var trackingFormShareable in TrackingFormShareables)
{
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
@trackingFormShareable.TrackingFormName
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne" data-bs-parent="#accordion">
<div class="accordion-body">
@foreach (var courseItem in trackingFormShareable.CourseItems)
{
<CourseItemTrackingDetails ClickedCourseItem='_clickedCourseItem' IsFolded='@(CurrentCourseItemId != null)' TrackingCourseItemShareable=courseItem></CourseItemTrackingDetails>
}
</div>
</div>
</div>
</div>
}
</div>

有人知道怎么做这个(更好)吗?

Answer 1

您的<button>被硬编码为针对相同的div (data-bs-target="#panelsStayOpen-collapseOne")。任何时候你点击按钮，它都在与所有组件对话，因为它们有相同的id。

为按钮属性data-bs-target和div属性id生成唯一字符串

有人知道怎么做这个(更好)吗?

blazor方法是依靠blazor来折叠卡片，而不是引导。您可以将每个<div class="accordion-item">移动到它自己的组件中，从而赋予它自己的状态。然后按钮使用c#来隐藏/显示它的主体。

<button class="accordion-button" @onclick="() => _show = !_show" type="button" >
@trackingFormShareable.TrackingFormName
</button>
...
@if (_show)
{
<div class="accordion-body">
...
</div>
}
@code
{
private bool _show = false;
}

Answer 2

您可以构建一个简单的组件来封装手风琴功能，并在组件中构建折叠/展开功能。

下面是实现它的一种方法:

BootstrapAccordion.razor

<div class="accordion-item">
<h2 class="accordion-header">
<button class="@this.buttonCss" type="button" @onclick=this.ToggleContent>
@this.Header
</button>
</h2>
@if (hideContent)
{
<div class="accordion-collapse collapse show">
<div class="accordion-body">
@this.ChildContent
</div>
</div>
}
</div>
@code {
[Parameter, EditorRequired] public string? Header { get; set; }
[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
[Parameter] public bool DefaultClosed { get; set; }
private bool hideContent;
private string buttonCss => this.hideContent ? "accordion-button collapsed" : "accordion-button";
protected override void OnInitialized()
=> hideContent = this.DefaultClosed;
private void ToggleContent()
=>  hideContent = !hideContent;
}

然后是演示页面:

@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<BootstrapAccordion Header="Hello Blazor">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</BootstrapAccordion>