Unplanned
Last Updated: 15 Feb 2024 18:23 by Fabien
improwise
Created on: 05 Jan 2022 12:18
Category: UI for Blazor
Type: Feature Request
31
ExpansionPanel component

I'd like to have an ExpansionPanel component where I can declare my desired panel instances and their content in the markup.

Similar to https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/

5 comments
Fabien
Posted on: 15 Feb 2024 18:23

Until this component is implemented, the <details> and <summary> HTML 5 elements can be used to quickly cover simple cases:

<details>: The Details disclosure element - HTML: HyperText Markup Language | MDN (mozilla.org)

Fabien
Posted on: 15 Feb 2024 17:50

I also need that component :(

It's such a pity that it still doesn't exist. Has this really been in Unplanned status for all that time?

Eric
Posted on: 25 May 2023 13:24
Seems like adding this component should be a no-brainer.
ZwapSharp
Posted on: 13 Sep 2022 10:03

In the meantime I created this:

 

ExpansionPanel.razor:

<div class="collapsable">
    <TelerikButton FillMode="flat" OnClick="@(() => Collapsed = !Collapsed)" Icon="@(Collapsed ? "chevron-right": "chevron-down")" />
    <strong>@Title</strong>
</div>
@if (!Collapsed)
{
    <div class="collapsable-panel">
        @ChildContent
    </div>
}
 
@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    
    [Parameter]
    public bool Collapsed { get; set; }
    
    [Parameter]
    public string Title { get; set; }
}
<style>
    .collapsable-panel {
        border: 1px solid #eee;
        background-color: white;
        overflow: hidden;
    }
    
    .collapsable .title {
        display: table-cell
    }
    
    .collapsable .value {
        display: table-cell;
        text-align: right;
    }    

</style>

 

Usage:

<Collapsable Title="My title" Collapsed="true">
Contents
</Collapsable>
ZwapSharp
Posted on: 12 Sep 2022 14:59

I agree,

I have looked at the PanelBar component, but it (to my knowledge) doesnt take @ChildContent.

I would like to have onw that doesnt need backing data.

Please find inspiration on : Expansion Panels - MudBlazor

Something like:

<MudExpansionPanels MultiExpansion="true">
    <MudExpansionPanel Text="Panel One">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three">
        Panel Three Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Four">
        Panel Four Content
    </MudExpansionPanel>
</MudExpansionPanels>