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 May 2023 13:24 by Eric

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

ExpansionPanel

3 comments

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>