FaButton

🟡 Needs container
🟡 Doesn't accept child/children

Colors

pub enum BtnColor {
    Default,
    Primary,
    PrimaryDark,
    Secondary,
    Success,
    SuccessDark,
    Danger,
    DangerDark,
    Warning,
    WarningDark,
    Info,
    InfoDark
}

Shapes

pub enum BtnShape {
    Default,
    Round,
    Rectangle
}

Sizes

pub enum BtnSize {
    Small,
    Normal,
    Large,
}

Widget API

pub fn fa_button<'a>(builder: &'a mut FamiqWidgetBuilder, text: &str) -> FaButtonBuilder<'a> {
    // ..
}

Usage

let button = fa_button(&mut builder, "Press me").build();

Return Entity of the widget which must be used inside FaContainer widget.

Built-in classes

• Color: is-primary, is-primary-dark, is-secondary, is-danger, is-danger-dark, is-info, is-info-dark, is-success, is-success-dark, is-warning, is-warning-dark.

• Size: is-small, is-normal, is-large.

• Shape: is-round, is-rectangle.

Example

// default
let my_btn = fa_button(&mut builder, "Press me")
    .id("#my-btn")
    .build();

// info
let info_btn = fa_button(&mut builder, "Press me")
    .id("#info-btn")
    .class("is-info")
    .build();

// success & small
let small_btn = fa_button(&mut builder, "Press me")
    .class("is-success is-small")
    .build();

// warning & large
let large_btn = fa_button(&mut builder, "Press me")
    .class("is-warning is-large")
    .build();

fa_container(&mut builder)
    .children([my_btn, info_btn, small_btn, large_btn])
    .build();

Handle button press

fn handle_button_press_system(mut events: EventReader<FaInteractionEvent>) {
    for e in events.read() {
        if e.is_button_pressed() {
            // make sure this works only with buttons that have id provided
            if let Some(id) = e.widget_id.as_ref() {
                match ud.as_str() {
                    "#my-btn" => {
                        // do something with my button
                    },
                    "#info-btn" => {
                        // do something with info button
                    }
                    _ => ()
                }
            }
        }
    }
}