Widgets - Makara Book

Makara provides built-in widgets that are needed for building GUI applications including button, modal, text input and more. There will be more important widgets added to Makara in upcoming new versions.

Root

root_! is a starting point for UI hierarchy, so it needs to be spawned by commands.

#![allow(unused)]
fn main() {
commands.spawn(root_!());
}

For more detail, see RootBundle, RootQuery, RootWidget.

Text

#![allow(unused)]
fn main() {
text_!("Hello world");
}

For more detail, see TextBundle, TextQuery, TextWidget.

Button

#![allow(unused)]
fn main() {
button_!("Click me");
}

With event listeners

#![allow(unused)]
fn main() {
button_!(
    "Click me";
    
    on: |clicked: On<Clicked>| {}; 
    on: |over: On<MouseOver>| {}; 
    on: |out: On<MouseOut>| {}; 
    on: |built: On<WidgetBuilt>| {}
);
}

For more detail, see ButtonBundle, ButtonQuery, ButtonWidget.

Checkbox

#![allow(unused)]
fn main() {
checkbox_!("Check me");
}

With event listeners

#![allow(unused)]
fn main() {
checkbox_!(
    "Check me";
    
    on: |clicked: On<Clicked>| {}; 
    on: |over: On<MouseOver>| {}; 
    on: |out: On<MouseOut>| {}; 
    on: |active: On<Active<String>>| {}; 
    on: |inactive: On<Inactive<String>>| {}; 
    on: |built: On<WidgetBuilt>| {}
);
}

For more detail, see CheckboxBundle, CheckboxQuery, CheckboxWidget.

Circular

#![allow(unused)]
fn main() {
circular_!();
}

With event listeners

#![allow(unused)]
fn main() {
circular_!(
    on: |over: On<MouseOver>| {}; 
    on: |out: On<MouseOut>| {}; 
    on: |change: On<Change<f32>>| {}; 
    on: |built: On<WidgetBuilt>| {}
);
}

For more detail, see CircularBundle, CircularQuery, CircularWidget.

Progress Bar

#![allow(unused)]
fn main() {
progress_bar_!();
}

With event listeners

#![allow(unused)]
fn main() {
progress_bar_!(
    on: |over: On<MouseOver>| {};
    on: |out: On<MouseOut>| {};
    on: |change: On<Change<f32>>| {};
    on: |built: On<WidgetBuilt>| {}
);
}

For more detail, see ProgressBarBundle, ProgressBarQuery, ProgressBarWidget.

Column

#![allow(unused)]
fn main() {
column_!([
    text_!("Item 1"),
    text_!("Item 2")
]);
}

With event listener

#![allow(unused)]
fn main() {
column_!(
    on: |built: On<WidgetBuilt>| {};
    [ text_!("Item 1") ]
);
}

For more detail, see ColumnBundle, ColumnQuery, ColumnWidget.

Row

#![allow(unused)]
fn main() {
row_!([
    text_!("Left"),
    text_!("Right")
]);
}

With event listener

#![allow(unused)]
fn main() {
row_!(
    on: |built: On<WidgetBuilt>| {};
    [ text_!("Item 1") ]
);
}

For more detail, see RowBundle, RowQuery, RowWidget.

Link

#![allow(unused)]
fn main() {
link_!("https://rust-lang.org/");
}

With event listeners

#![allow(unused)]
fn main() {
link_!(
    "https://rust-lang.org/";

    on: |clicked: On<Clicked>| {};
    on: |over: On<MouseOver>| {};
    on: |out: On<MouseOut>| {};
    on: |built: On<WidgetBuilt>| {}
);
}

For more detail, see LinkBundle, LinkQuery, LinkWidget.

#![allow(unused)]
fn main() {
dropdown_!(
    "Click me to show option";
    [
        button_!("Sign In"),
        button_!("Sign Up"),
        button_!("About us")
    ]
);
}

With event listeners

#![allow(unused)]
fn main() {
dropdown_!(
    "Click me to show option";

    on: |clicked: On<Clicked>| {};
    on: |over: On<MouseOver>| {};
    on: |out: On<MouseOut>| {};
    on: |built: On<WidgetBuilt>| {};

    [
        button_!("Sign In"),
        button_!("Sign Up")
    ]
);
}

For more detail, see DropdownBundle, DropdownQuery, DropdownWidget.

Image

#![allow(unused)]
fn main() {
// path or url
image_!("path/to/image.png");
}

With event listeners

#![allow(unused)]
fn main() {
image_!(
    "path/to/image.png";
    
    on: |clicked: On<Clicked>| {};
    on: |over: On<MouseOver>| {};
    on: |out: On<MouseOut>| {};
    on: |built: On<WidgetBuilt>| {}
);
}

For more detail, see ImageBundle, ImageQuery, ImageWidget.

Modal is independent and doesn’t need to be part of root widget.

#![allow(unused)]
fn main() {
command.spawn(
    modal_!([
        column_!([
            text_!("Hello world"),
            button_!("Close modal")
        ])
    ])
);
}

With event listeners

#![allow(unused)]
fn main() {
modal_!(
    on: |active: On<Active>| {};
    on: |inactive: On<Inactive>| {};
    on: |built: On<WidgetBuilt>| {};

    [
        column_!([
            text_!("Hello world"),
            button_!("Close modal")
        ])
    ]
);
}

For more detail, see ModalBundle, ModalQuery, ModalWidget.

Radio Group & Radio

radio_group needs radio as its item.

#![allow(unused)]
fn main() {
radio_group_!([
    radio_!("Pay by Card"),
    radio_!("Pay by Cash")
]);
}

With event listeners

#![allow(unused)]
fn main() {
radio_group_!(
    on: |clicked: On<Clicked>| {};
    on: |over: On<MouseOver>| {};
    on: |out: On<MouseOut>| {};
    on: |change: On<Change<String>>| {};
    on: |built: On<WidgetBuilt>| {};

    [
        radio_!(
            "Pay by Card";
            on: |active: On<Active>| {}; 
            on: |inactive: On<Inactive>| {}
        ),
        radio_!("Pay by Cash")
    ]
);
}

For more detail, see RadioGroupBundle, RadioGroupQuery, RadioGroupWidget, RadioBundle, RadioQuery, RadioWidget.

Scroll

#![allow(unused)]
fn main() {
scroll_!([
    text_!("Hello world"),
    text_!("Hello there")
]);
}

With event listener

#![allow(unused)]
fn main() {
scroll_!(
    on: |scrolling: On<Scrolling>| {};
    [
        text_!("Hello world"),
        text_!("Hello there")
    ]
);
}

For more detail, see ScrollBundle, ScrollQuery, ScrollWidget.

Select

#![allow(unused)]
fn main() {
select_!("Click me to show option", choices: &["Cash", "Card", "Afterpay"]);    
}

With event listeners

#![allow(unused)]
fn main() {
select_!(
    "Click me to show option", 
    choices: &["Cash", "Card", "Afterpay"];
    
    on: |clicked: On<Clicked>| {};
    on: |over: On<MouseOver>| {};
    on: |out: On<MouseOut>| {};
    on: |built: On<WidgetBuilt>| {};
    on: |active: On<Active>| {};
    on: |inactive: On<Inactive>| {};
    on: |change: On<Change<String>>| {}
);
}

For more detail, see SelectBundle, SelectQuery, SelectWidget.

Slider

#![allow(unused)]
fn main() {
// Takes range-start & range-end as arguments.
// In this case start at 0.0, end at 100.0 .
slider_!(min: 0.0, max: 100.0);
}

With event listeners

#![allow(unused)]
fn main() {
slider_!(
    min: 0.0, max: 100.0;
    
    on: |clicked: On<Clicked>| {};
    on: |over: On<MouseOver>| {};
    on: |out: On<MouseOut>| {};
    on: |built: On<WidgetBuilt>| {}; 
    on: |change: On<Change<f32>>| {}
);
}

For more detail, see SliderBundle, SliderQuery, SliderWidget.

Text Input

#![allow(unused)]
fn main() {
text_input_!("Enter something");
}

With event listeners

#![allow(unused)]
fn main() {
text_input_!(
    "Enter something";
    
    on: |clicked: On<Clicked>| {};
    on: |over: On<MouseOver>| {};
    on: |out: On<MouseOut>| {};
    on: |built: On<WidgetBuilt>| {}; 
    on: |change: On<Change<String>>| {}
);
}

For more detail, see TextInputBundle, TextInputQuery, TextInputWidget.

Keyboard shortcuts

Makara Book