Jump to content

"Hamburger" IconCls


bbosnjak

Recommended Posts

Rather than showing a power button in the top left corner, I'd like to display the standard "hamburger" menu icon (like "=" but with a third line).

 

What IconCls is this, as I can't seem to identify it?

 

Given this is a UI standard today, can the necessary icon be added to IconCls?

Link to comment
Share on other sites

Hi,

 

In principle, you can put any symbol of a specific font, unicode I guess

 

Try:

 

1. UniServerModule -> CustomCSS:

.x-tab .x-button-icon.hamburger::before, .x-button .x-button-icon.hamburger::before {
    bottom: 0;
    content: "l";
    font-family: "Pictos";
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

2. MainmForm -> TitleButtons -> TUnimTitleButton-0 -> IconCls -> hamburger (just type manually)

 

post-906-0-81025500-1487932756_thumb.png

 

Result:

 

post-906-0-34087500-1487932922_thumb.png

 

 

Or use "unicode":

.x-tab .x-button-icon.hamburger::before, .x-button .x-button-icon.hamburger::before {
    bottom: 0;
    content: "\2630";
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

Result:

 

post-906-0-35159500-1487933129_thumb.png

 

Best regards.

Link to comment
Share on other sites

  • 8 months later...

I tried using the TUnimButton

 

I changed the iconcls to 'hamburger' (with out quotes)

and the button is blank.

If I use one of the ones in the list like 'more' it does work.

 

also, is there a list of the pictures of what each icon looks like anywhere?

Link to comment
Share on other sites

Hi,

 

I tried using the TUnimButton

 

I changed the iconcls to 'hamburger' (with out quotes)

and the button is blank.

If I use one of the ones in the list like 'more' it does work.

 

It seems you forgot about CustomCSS:

 

UniServerModule -> CustomCSS:

.x-tab .x-button-icon.hamburger::before, .x-button .x-button-icon.hamburger::before {
    bottom: 0;
    content: "l";
    font-family: "Pictos";
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}
Link to comment
Share on other sites

Thanks for the Hamburger Button tips.

 

I tried to add a Menu to the MainmForm and have it called by the Hamburger TitleButton but ran into problems.

 

1) The Menu showed when the MainmForm is shown even though the Menu Visibility was set to False ?

 

2) I want Sencha themed buttons in the Menu (and as an alternative text instead of buttons) with their respective Tap events ?

 

Please advise - Thanks

Link to comment
Share on other sites

×
×
  • Create New...