Duplicated
Last Updated: 02 Mar 2020 12:53 by ADMIN
Kelly
Created on: 22 Jan 2020 06:28
Category: UI for Blazor
Type: Feature Request
0
Expansion Panel

Would be nice to have an Expansion Panel like this one:

https://material-ui.com/components/expansion-panels/

 

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
5 comments
Kelly
Posted on: 24 Jan 2020 13:22
Sounds good. Thank you Marin for the excellent support!
ADMIN
Marin Bratanov
Posted on: 24 Jan 2020 09:27

Hello Kelly,

I expect that it should be able to collapse the content, and that any content should work (that's the Blazor way - templates are RenderFragments and can nest components). So, I moved your Vote for the panelbar, you can Follow its implementation if you like.

With that said, I am closing this item as a duplicate of the panelbar, for anyone looking for similar functionality - Vote for and Follow the Panelbar component implementation (https://feedback.telerik.com/blazor/1435753-accordion-style-expander-panelbar) or also see my samples here.

For something more specific you can start with my previous sample of using the animation container, but note that it is absolutely positioned, so it does not go into the static flow of the content. If static positioning is a must, you can toggle the visibility of any regular panel on any click of any element.

Here's a pretty basic sample of making an inline alert (of course, needs some better styling and refactoring to serve as a reusable component, but I trust it illustrates the point):

 

<style>
    .hidden {
        display: none;
    }

    .my-collapsible-panel {
        min-height: 3em;
    }
    .top-right-icon {
        float: right;
    }
</style>

    <div class="alert alert-dark my-collapsible-panel" role="alert">
        <div class="top-right-icon" @onclick="@( () => PanelVisible = !PanelVisible )">
          <TelerikIcon Icon="@( PanelVisible ? IconName.ArrowChevronUp : IconName.ArrowChevronDown )" />
        </div>
        <div class="@( PanelVisible ? "" : "hidden" )">
            A simple dark alert—check it out!
            <div style="height: 300px;background:yellow">more content</div>
        </div>
    </div>

@code{ 
    bool PanelVisible { get; set; }
}


 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Kelly
Posted on: 24 Jan 2020 04:52

Thank you both for your responses. I was looking to use this control to hide sections of a page that many have any number of controls in the section. If the panelbar (with only one item) will collapse and expand with any content, I guess that would work. I was hoping to be able to place the expand/collapse caret at the end of the content section to hide.

 
Ben Hayat
Posted on: 22 Jan 2020 15:56
Isn't that the same as "Accordion"? Just asking.
ADMIN
Marin Bratanov
Posted on: 22 Jan 2020 11:57

Hello Kelly,

Would a panelbar suit your needs (something like this https://demos.telerik.com/aspnet-core/panelbar/index)? If so, please Vote for and Follow its implementation here: https://feedback.telerik.com/blazor/1435753-accordion-style-expander-panelbar

I am asking for this to ensure that we keep only one copy of each request so everything is easy to track.

At the moment, you could make a component to achieve similar behavior through the AnimationContainer component we provide, here's a basic example of the functionality so you can tweak it further (and, of course, expose as a stanadalone component in your app, and implement templates and so on)

<div style="position: relative; width: 400px; border: 1px solid red;">
    <div>
        <h6>Title goes here</h6>
        <span style="position: absolute; top: 0; right: 0">
            <TelerikButton Icon="@( Expanded ? IconName.ArrowChevronUp : IconName.ArrowChevronDown )"
                           OnClick="@ExpandCollapse" />
        </span>
    </div>
    <TelerikAnimationContainer @ref="@AnimContainer" Width="100%" Height="100px" Class="k-popup">
        lorem ipsum dolor sit amet
    </TelerikAnimationContainer>
</div>

@code {
    TelerikAnimationContainer AnimContainer { get; set; }
    bool Expanded { get; set; }

    async void ExpandCollapse()
    {
        await AnimContainer.ToggleAsync();
        Expanded = !Expanded;
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor