This is a migrated thread and some comments may be shown as answers.

Drawer - Auto-Expand / Auto-Close in mini mode

1 Answer 589 Views
Drawer
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 02 Apr 2020, 09:41 PM

Is there a way to make the drawer

- auto expand/toggle when mouse over mini mode

- auto close/toggle when mouse out in mini mode

 

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 03 Apr 2020, 12:03 PM

Hi John,

Here is a sample StackBlitz demonstrating the required behaviour - https://stackblitz.com/edit/angular-elky7u-yt3r5p?file=app/app.component.ts

In short we have to set the expanded property based on the mouse location:

  1. On (mouseenter) we set expanded=true
  2. On (mouseleave) we set expanded=false

Note that with this approach there is no animation when toggling the drawer. In order to have the sliding animations we need to use the toggle() method. Here is an example - https://stackblitz.com/edit/angular-elky7u-tfcqf8?file=app/app.component.ts

I hope this helps. Please let me know if further assistance is needed.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Drawer
Asked by
n/a
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or