Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

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

#![allow(unused)]
fn main() {
root().build()
}

For more detail, see RootBundle, RootQuery, RootWidget.

Text

text("Hi Mom!").build()

For more detail, see TextBundle, TextQuery, TextWidget.

Button

#![allow(unused)]
fn main() {
button("Click me").build()
}

With event listeners

#![allow(unused)]
fn main() {
(
    button("Click me").build(),

    observe(|clicked: On<Clicked>| {}),

    observe(|over: On<MouseOver>| {}),

    observe(|out: On<MouseOut>| {}),

    observe(|built: On<WidgetBuilt>| {}),
)
}

For more detail, see ButtonBundle, ButtonQuery, ButtonWidget.

Checkbox

#![allow(unused)]
fn main() {
checkbox("Check me").build()
}

With event listeners

#![allow(unused)]
fn main() {
(
    checkbox("Check me").build(),

    observe(|clicked: On<Clicked>| {}),

    observe(|over: On<MouseOver>| {}),

    observe(|out: On<MouseOut>| {}),

    observe(|active: On<Active>| {}),

    observe(|inactive: On<Inactive>| {}),

    observe(|built: On<WidgetBuilt>| {}),
)
}

For more detail, see CheckboxBundle, CheckboxQuery, CheckboxWidget.

Circular

#![allow(unused)]
fn main() {
circular().build()
}

With event listeners

#![allow(unused)]
fn main() {
(
    circular().build(),

    observe(|over: On<MouseOver>| {}),

    observe(|out: On<MouseOut>| {}),

    observe(|change: On<Change<f32>>| {}),

    observe(|built: On<WidgetBuilt>| {}),
)
}

For more detail, see CircularBundle, CircularQuery, CircularWidget.

Progress Bar

#![allow(unused)]
fn main() {
progress_bar().build()
}

With event listeners

#![allow(unused)]
fn main() {
(
    progress_bar().build(),

    observe(|over: On<MouseOver>| {}),

    observe(|out: On<MouseOut>| {}),

    observe(|change: On<Change<f32>>| {}),

    observe(|built: On<WidgetBuilt>| {}),
)
}

For more detail, see ProgressBarBundle, ProgressBarQuery, ProgressBarWidget.

Column

#![allow(unused)]
fn main() {
column().build()
}

With event listener

#![allow(unused)]
fn main() {
(
    column().build(),

    observe(|built: On<WidgetBuilt>| {}),
)
}

For more detail, see ColumnBundle, ColumnQuery, ColumnWidget.

Row

#![allow(unused)]
fn main() {
row().build()
}

With event listener

#![allow(unused)]
fn main() {
(
    row().build(),

    observe(|built: On<WidgetBuilt>| {}),
)
}

For more detail, see RowBundle, RowQuery, RowWidget.

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

With event listeners

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

    observe(|clicked: On<Clicked>| {}),

    observe(|over: On<MouseOver>| {}),

    observe(|out: On<MouseOut>| {}),

    observe(|built: On<WidgetBuilt>| {}),
)
}

For more detail, see LinkBundle, LinkQuery, LinkWidget.

#![allow(unused)]
fn main() {
(
    dropdown("Click me to show option").build(),
    children![
        button("Sign In").build(),
        button("Sign Up").build(),
        button("About us").build()
    ]
)
}

With event listeners

#![allow(unused)]
fn main() {
(
    dropdown("Click me to show option").build(),
    children![
        button("Sign In").build(),
        button("Sign Up").build(),
        button("About us").build()
    ],
    
    observe(|clicked: On<Clicked>| {}),
    
    observe(|over: On<MouseOver>| {}),
    
    observe(|out: On<MouseOut>| {}),
    
    observe(|built: On<WidgetBuilt>| {})
)
}

For more detail, see DropdownBundle, DropdownQuery, DropdownWidget.

Image

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

With event listeners

#![allow(unused)]
fn main() {
(
    image("path/to/image.png").build()
    
    observe(|clicked: On<Clicked>| {}),
    
    observe(|over: On<MouseOver>| {}),
    
    observe(|out: On<MouseOut>| {}),
    
    observe(|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() {
(
    modal().build(),
    children![
        ( 
            // modal content need to wrapped inside a container
            column().build(),
            children![
                text("Hello world").build(),
                button("Close modal").build()
            ]
        )
    ]
)
}

With event listeners

#![allow(unused)]
fn main() {
(
    modal().build(),
    children![
        ( 
            // modal content
            column().build(),
            children![
                text("Hello world").build(),
                button("Close modal").build()
            ]
        )
    ],
    observe(|active: On<Active>| {}),

    observe(|inactive: On<Inactive>| {}),
        
    observe(|built: On<WidgetBuilt>| {})
)
}

For more detail, see ModalBundle, ModalQuery, ModalWidget.

Radio Group & Radio

radio_group needs radio as its item.

#![allow(unused)]
fn main() {
(
    radio_group().build(),
    children![
        radio("Pay by Card").build(),
        radio("Pay by Cash").build(), 
    ]
)
}

With event listeners

#![allow(unused)]
fn main() {
(
    radio_group().build(),
    children![
        (
            radio("Pay by Card").build(),
            
            observe(|active: On<Active>| {}), 
            observe(|inactive: On<Inactive>| {})
        ),
        radio("Pay by Cash").build(), 
    ],

    observe(|clicked: On<Clicked>| {}),

    observe(|over: On<MouseOver>| {}),

    observe(|out: On<MouseOut>| {}),

    observe(|change: On<Change<String>>| {}),

    observe(|built: On<WidgetBuilt>| {}),
)
}

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

Scroll

#![allow(unused)]
fn main() {
(
    scroll().build(),
    children![
        // scroll content
        text("Hello world").build(),
        text("Hello there").build(),
    ]
)
}

With event listener

#![allow(unused)]
fn main() {
(
    scroll().build(),
    children![
        // scroll content
        text("Hello world").build(),
        text("Hello there").build(),
    ],

    observe(|scrolling: On<Scrolling>| {})
)
}

For more detail, see ScrollBundle, ScrollQuery, ScrollWidget.

Select

#![allow(unused)]
fn main() {
select("Click me to show option", &["Cash", "Card", "Afterpay"]).build(), 
}

With event listeners

#![allow(unused)]
fn main() {
(
    select("Click me to show option", &["Cash", "Card", "Afterpay"]).build(),
    
    observe(|clicked: On<Clicked>| {}),
    
    observe(|over: On<MouseOver>| {}),
    
    observe(|out: On<MouseOut>| {}),
    
    observe(|built: On<WidgetBuilt>| {}),
    
    observe(|active: On<Active>| {}),
    
    observe(|inactive: On<Inactive>| {}),

    observe(|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(0.0, 100.0).build()
}

With event listeners

#![allow(unused)]
fn main() {
(
    slider(0.0, 100.0).build()
    
    observe(|clicked: On<Clicked>| {}),
    
    observe(|over: On<MouseOver>| {}),
    
    observe(|out: On<MouseOut>| {}),
    
    observe(|built: On<WidgetBuilt>| {}), 

    observe(|change: On<Change<f32>>| {}),
)
}

For more detail, see SliderBundle, SliderQuery, SliderWidget.

Text Input

#![allow(unused)]
fn main() {
text_input("Enter something").build()
}

With event listeners

#![allow(unused)]
fn main() {
(    
    text_input("Enter something").build(),
    
    observe(|clicked: On<Clicked>| {}),
    
    observe(|over: On<MouseOver>| {}),
    
    observe(|out: On<MouseOut>| {}),
    
    observe(|built: On<WidgetBuilt>| {}), 
    
    observe(|change: On<Change<String>>| {}),
)
}

For more detail, see TextInputBundle, TextInputQuery, TextInputWidget.