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

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

Text

#![allow(unused)]
fn main() {
text("Hi Mom!").build()
}

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>| {}),
)
}

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>| {}),
)
}

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>| {}),
)
}

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>| {}),
)
}

Column

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

With event listener

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

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

Row

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

With event listener

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

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

Link

#![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>| {}),
)
}

Dropdown

#![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>| {})
)
}

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>| {})
)
}

Modal

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>| {})
)
}

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>| {}),
)
}

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>| {})
)
}

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>>| {}),
)
}

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>>| {}),
)
}

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>>| {}),
)
}