Expand description
§GButton
is similar to google material common buttons (not identical)
The key size attribute of button is font_size. It bonds a lot of other sizes and has the default value 14px.
According to this 1px here = 0.0714em
GButton has a lot of attributes (and you can make something similar to FAB button via them), but only id are required. If you use icon in button, icon_style attribute is also required.
Attention! You must set label and/or use icon to make your button readable!
All other attributes with default parameters:
- label:
AttrValue, [default “”] Attention! If you do not use icon in button, you must use this! - button_type:
AttrValue, [default “button”] - style:
GButtonStyle, [default GButtonStyle::Filled] - outlined_border_color:
Option<AttrValue>, [default “#79747E”] - font_size:
AttrValue, [default “14px”] - onclick:
Option<Callback<PointerEvent>>, [default None] Use PointerEvent instead of MouseEvent - class:
AttrValue, [default “”] - height:
AttrValue, [default “2.85em”] - width:
Option<AttrValue>, [default None] - parent:
DependsOn, [default None] This attribute required only with GTextInput - background_color:
AttrValue, [default “#6750A4”] - label_color:
AttrValue, [default “#ffffff”] - border_radius:
AttrValue, [default “20px”] It is similar to container_shape in google material buttons - has_icon:
bool, [default false] - trailing_icon:
bool, [default false] - dark_theame:
bool, [default false] Experimental! Now it changes shadows from black to white if true. - disabled:
bool, [default false]
§Examples
use yew::prelude::*;
use yew_google_material::prelude::*;
<GButton
id="use_g_button"
label="Button" />Also you can add icon with has_icon attribute. If so, you also need to set icon_style attribute together with stylesheet inside <head></head>(see GIcon docs). If you need trailing icon use trailing_icon with true together with has_icon attributes in GButton.
To adjust icon parameters use fill, wght, grade, opsz attributes as well as with GIcon.
Attention! The way to add icon in this version is different from v.0.0.7.
use yew::prelude::*;
use yew_google_material::prelude::*;
<GButton
id="login_button" // requiered
label="Sign In"
style={GButtonStyle::Outlined}
label_color="#fff"
has_icon="login" // requiered to add icon
trailing_icon=true
icon_style={GIconStyle::Outlined} // requiered to add icon
wght="400" // add it only for icon if you need it
/>Attention! If you change icon size within button you can break the design. Probably then you need to adjust width and height. Do it with caution.