ExpansionPanel component

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 25 Oct 2024 15:55 by Charles

improwise

Created on: 05 Jan 2022 12:18

Category: UI for Blazor

Type: Feature Request

ExpansionPanel component

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

Duplicated Items

7 comments

Charles

Posted on: 25 Oct 2024 15:54

While I'm looking more for an Accordion type control, this will accomplish the same purpose. Voted +1

Antonio Vidal

Posted on: 23 Apr 2024 22:51

A component like ExpasionPanel would also be very useful for me. Please prioritize its availability. Thanks!

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>