angular/components

Auto hide for toolbar-row

SvenBudak opened this issue ยท 3 comments

In basicly every WebApp we have a toolbar, and in alot of them we need a "scroll out" effect for single mat-toolbar-rows.

I found this tutorial: https://osvaldas.info/examples/auto-hide-sticky-header/?lazy-plus but i was not able to implement this in a clean working way. also the bar feels not smooth here.

it is very important that people can handle it on single toolbar rows not on the whole mat-toolbar.

We found a solution that will help maybe some people. Demo: https://header-autohide.netlify.com

Here the Code: https://github.com/MurhafSousli/scroll-direction-directive/blob/master/src/app/scroll-direction.directive.ts

I still hope for a better working solution that works on the fly inside material. Because this solution require some manually adding of CSS etc...

Closing this since we don't plan any really expanding mat-toolbar with further features at this point. We may eventually create a new app-bar component that supersedes the toolbar, but have no immediate plans for it.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.