Drawer Mini Mode Width - blazor

1 Answer 7 Views
Drawer
alex
Top achievements
Rank 1
alex asked on 18 Apr 2024, 08:19 AM
Hi, is there a override for Drawer Width when in Mini Mode.
I wanted to increase the size of my Icons outside of the default 50px. 

Thanks! 

1 Answer, 1 is accepted

Sort by
1
Accepted
Hristian Stefanov
Telerik team
answered on 18 Apr 2024, 11:26 AM

Hi Alex,

To increase the Drawer width in mini mode, you can use the following CSS:

<style>
    .k-drawer-mini .k-drawer .k-drawer-wrapper {
        width: 75px;
    }
</style>

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@SvgIcon.Menu">Toggle drawer</TelerikButton>
<TelerikDrawer Data="@Data"
               MiniMode="true"
               Mode="@DrawerMode.Push"
               @ref="@DrawerRef">
</TelerikDrawer>

@code {
    public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    public bool MiniMode { get; set; } = true;
    public IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
                {
            new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
                };

    public class DrawerItem
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }
}

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Tags
Drawer
Asked by
alex
Top achievements
Rank 1
Answers by
Hristian Stefanov
Telerik team
Share this question
or