Bootstrap Components Button Property

Forum to discuss the new web client version of Servoy.

Bootstrap Components Button Property

Postby tgs » Mon Nov 25, 2019 5:16 pm

Hi,

is there anybody who can tell me the meaning and differences of the Button WebComponent Properties imageStyleClass and styleClass?

webcomponent_property.png


Thank you in advance.
You do not have the required permissions to view the files attached to this post.
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 886
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: Bootstrap Components Button Property

Postby paronne » Tue Nov 26, 2019 9:37 am

Hi,

the styleClass property is used to assign 1 or more class to the button to control it's overall style e.g. "btn btn-primary".
the imageStyleClass instead it can be used to show an icon as a Font Icon; e.g. "fas fa-search"
Make sure the NG Service Font Awesome is installed via the Web Package Manager; you can therefore make use of the Font Awesome Icons https://fontawesome.com/icons?d=gallery

Regards,
Paolo

Image
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Bootstrap Components Button Property

Postby tgs » Thu Nov 28, 2019 2:06 pm

Hi Paolo,

thank you for explaining me this Component style classes.

I have installed the Font Awesome package and I'm calling the service "plugins.fontawesomeLib.load()" with my onOpenSolution.
But how do I get the Font Awesome Icon on the button?
Only setting e.g. "fas fa-plus" as value for the imageStyleClass is not working.
Do I have to create a style for the icons I want in my css stylesheet? If yes, how?

Thank you in advance.
Best regards
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 886
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: Bootstrap Components Button Property

Postby paronne » Tue Dec 03, 2019 10:04 am

Hi,

if the Font Awesome in installed for your NG Solution (or any of it's module) there is nothing else to be done.
If the icon doesn't show for you, the only reasons i can think of is:
- the button may be too small and the icon doesn't fit ?
- there may be some conflicts with other versions of the Font Awesome library from older web packages; other components used to reference Font Awesome v 4.x in the past, in the latest packages this dependancy has been moved out since the Font Awesome library can be installed separately (as you did). Try these values to check if it makes any difference "fa fa-search" (v 4.x syntax) or "fas fa-search" (v 5.x syntax).

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 6 guests

cron