Jump to content
uniGUI Discussion Forums
bbosnjak

"Hamburger" IconCls

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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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;
}

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks, That works.

 

I thought it said to do 1 OR 2, not 1 AND 2.

 

Your instructions were clear, but I misread them.

Share this post


Link to post
Share on other sites

Farshad, Continuing from a few posts back, I am trying to get the Menu style to have the same style as the Toolbar - please advise - Thanks 

post-5752-0-50837300-1510296290_thumb.jpg

  • Upvote 1

Share this post


Link to post
Share on other sites

×