Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a NavBar Component with Tabs support #327

Open
caom92 opened this issue May 18, 2018 · 0 comments
Open

Add a NavBar Component with Tabs support #327

caom92 opened this issue May 18, 2018 · 0 comments

Comments

@caom92
Copy link

caom92 commented May 18, 2018

Expected Behavior

I would like to request the inclusion of a new mz-navbar component which height is extended and supports navigation tabs, as can be seen in the Materialize CSS Documentation.

Current Behavior

Trying to implement this functionality without having to write my own component is a real struggle. I've tried different workarounds so far but I haven't been able to replicate the functionality that can be seen in Materialize. If you have any suggestions on how I can do it using current components in Ng2-Materialize, I'll gladly hear them.

Possible Solution

One thing I'm trying to do is to place an mz-tabs component immediately after the mz-navbar and change its CSS rules so that it looks and behaves similar to Materialize's extended nav-bar with tabs. So a quick solution would be to provide a way to specify a CSS class to apply to mz-tabs; right now, only mz-tab-item has a class input field, not mz-tabs. Ideally though, there should be a way to configure mz-navbar to be extended and have tabs or the extended navbar should have its own component.

Context

My ultimate goal is to have a fixed navbar where I can put action icons (like "Save", for example) as well as navigation tabs. The idea is that the user can scroll down the web page (which will have tons of content) but doesn't need to scroll all the way back up to click on a tab to navigate to a different page or to click on an action icon. I could simply have the page content inside a div that is scrollable and which height is less than the screen's, so that the tabs can remain in their place without the need to use an extended navbar, but the users feel claustrophobic using such a small space and do not like it. That's why I would like to use the extended navbar with tabs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants