Adding icons and visual disable to items in main menu

Ionic Framework ionic-v3
#1

Hey guys,

I have been mixing different tab navigations and a single main menu and so far everything works great!

I’d like to show the users of my app what is about to come in the next weeks in the main menu, although the items that are not yet ready should not be usable. I have succeeded in giving the relevant items a disabled-state, which will make them unclickable. But is there an Ionic way of applying a visual disabled state to items in the main menu? So that the user can see instantly that an item exists but is not yet usable.

And secondly: I have tried to attach icons to the items in the main navigation but the icons have no margin between them and the text of the item. This doesn’t look good. What is the Ionic2 way of combining icons and items in the main menu?

This is my current code for the main menu (in Jade):

ion-menu(bind-content="content")
    ion-toolbar
        ion-title {{"ui.general.menu" | translate}}
    ion-content
        ion-list
            button(ion-item template="ngFor:let p of pages" on-click="openPage(p)" disabled="{{p.disabled}}")
                ion-icon(name="{{p.icon}}")
                | {{p.title | translate}}`

Just for clarification: With main menu I mean ion-menu.

#2

Ok, I got the part with the icons being to narrow to my text on my own:
I just needed to add the item-left to my code:

ion-icon(name="{{p.icon}}" item-left)

The part with “how can I disable entries in my main menu visually” is still unsolved :slight_smile:

#3

Maybe a bit late, but better late then never, maybe it could help someone else.

If you take a look at the disabled css class of ionic, you should see the following code:

cursor: default;
opacity: .4;
pointer-events: none;

So, just create a “general available css class” with the content I’ve mentioned before and append it conditionally (f. e. with ngClass) to your icons.

That’s the way I’ve solved it.