New to Telerik UI for Blazor? Download free 30-day trial

Add Expand/Collapse Handle to Toggle the Drawer

Environment

Product Drawer for Blazor

Description

How to add a handle feature within the rendered Drawer component that would expand and collapse the component?

Solution

To achieve the desired result you can try the following:

  • Add a Telerik Button
  • Toggle the Drawer on click of that button
  • Use custom CSS to adjust the button's appearance, position, transition etc.

Add Expand/Collapse Handle to Toggle the Drawer. The result from the snippet below.

Add Expand/Collapse Handle

@* Add Expand/Collapse handle to toggle the Drawer *@

<style>
    .my-toggle-button {
        border-radius: 50%;
        transform: translateY(50%);
        border: 1px solid rgba(0, 0, 0, 0.08);
        z-index: 1;
        background-color: #fff;
        transition-duration:0.3s; /* match the Drawer's animation duration */
    }

    .my-toggle-button.collapsed {
            top: 20px;
            left: 34px;
    }

    .my-toggle-button.expanded {
            top: 20px;
            left: 225px;
    }
</style>

<TelerikButton Class="@(ExpandedDrawer ? "my-toggle-button expanded" : "my-toggle-button collapsed")" Icon="@(ExpandedDrawer ? "chevron-left" : "chevron-right")" OnClick="@(() => DrawerRef.ToggleAsync())"></TelerikButton>

<TelerikDrawer Data="@Data"
               Class="my-drawer"
               MiniMode="true"
               Mode="DrawerMode.Push"
               @ref="@DrawerRef"
               @bind-SelectedItem="@SelectedItem"
               @bind-Expanded="@ExpandedDrawer">
    <Content>
        @* Place your contents here - it can be as simple as text, it can be conditional components or components that take the selected item as a parameter, or even the @Body tag for navigation if you place the drawer high enough in the project layout hierarchy *@
        <div class="m-5">
            Selected Item: @SelectedItem?.Text
        </div>
    </Content>
</TelerikDrawer>


@code {
    public bool ExpandedDrawer { get; set; }

    TelerikDrawer<DrawerItem> DrawerRef { get; set; }

    DrawerItem SelectedItem { get; set; }

    IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "Counter", Icon = "plus"},
            new DrawerItem { Text = "FetchData", Icon = "grid-layout"}
        };

    public class DrawerItem
    {
        public string Text { get; set; }
        public string Icon { get; set; }
    }
}
In this article
Not finding the help you need? Improve this article