Jump to content


Photo

"Hamburger" IconCls


  • Please log in to reply
8 replies to this topic

#1 bbosnjak

bbosnjak

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 53 posts

Posted 23 February 2017 - 10:35 PM

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?


  • 0

#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3625 posts

Posted 24 February 2017 - 10:46 AM

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)

 

Attached File  hamburgerCls.png   12.65KB   13 downloads

 

Result:

 

Attached File  hamburgerMenu.png   3.89KB   12 downloads

 

 

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:

 

Attached File  hamburgerMenu2.png   3.76KB   11 downloads

 

Best regards.


  • 0

#3 bbosnjak

bbosnjak

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 53 posts

Posted 24 February 2017 - 06:25 PM

The Unicode one works beautifully!

 

Thanks :biggrin:


  • 0

#4 RobYost

RobYost

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 195 posts
  • LocationFlorida, USA

Posted 08 November 2017 - 07:02 PM

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?


  • 0

http://unigui.mirahe.../wiki/Main_Page

Please add any utilities you think are useful. I will try to keep the wiki organized.


#5 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3625 posts

Posted 09 November 2017 - 05:31 AM

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;
}

  • 0

#6 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 155 posts
  • LocationMelbourne Australia

Posted 09 November 2017 - 06:34 AM

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


  • 0

Andy


#7 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3625 posts

Posted 09 November 2017 - 06:46 AM

Hi,

 

Please make a testcase for better understanding

 

Best regards,


  • 0

#8 RobYost

RobYost

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 195 posts
  • LocationFlorida, USA

Posted 09 November 2017 - 12:07 PM

Thanks, That works.

 

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

 

Your instructions were clear, but I misread them.


  • 0

http://unigui.mirahe.../wiki/Main_Page

Please add any utilities you think are useful. I will try to keep the wiki organized.


#9 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 155 posts
  • LocationMelbourne Australia

Posted 10 November 2017 - 06:46 AM

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 

Attached Files


  • 1

Andy





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users