<!DOCTYPE HTML>
<html lang="en" class="light sidebar-visible" dir="ltr">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Makara Book</title>
<meta name="robots" content="noindex">
<!-- Custom HTML head -->
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon-de23e50b.svg">
<link rel="shortcut icon" href="favicon-8114d1fc.png">
<link rel="stylesheet" href="css/variables-8adf115d.css">
<link rel="stylesheet" href="css/general-2459343d.css">
<link rel="stylesheet" href="css/chrome-ae938929.css">
<link rel="stylesheet" href="css/print-9e4910d8.css" media="print">
<!-- Fonts -->
<link rel="stylesheet" href="fonts/fonts-9644e21d.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" id="mdbook-highlight-css" href="highlight-493f70e1.css">
<link rel="stylesheet" id="mdbook-tomorrow-night-css" href="tomorrow-night-4c0ae647.css">
<link rel="stylesheet" id="mdbook-ayu-highlight-css" href="ayu-highlight-3fdfc3ac.css">
<!-- Custom theme stylesheets -->
<!-- Provide site root and default themes to javascript -->
<script>
const path_to_root = "";
const default_light_theme = "light";
const default_dark_theme = "navy";
window.path_to_searchindex_js = "searchindex-4ae00f6c.js";
</script>
<!-- Start loading toc.js asap -->
<script src="toc-8d598e1a.js"></script>
</head>
<body>
<div id="mdbook-help-container">
<div id="mdbook-help-popup">
<h2 class="mdbook-help-title">Keyboard shortcuts</h2>
<div>
<p>Press <kbd>←</kbd> or <kbd>→</kbd> to navigate between chapters</p>
<p>Press <kbd>S</kbd> or <kbd>/</kbd> to search in the book</p>
<p>Press <kbd>?</kbd> to show this help</p>
<p>Press <kbd>Esc</kbd> to hide this help</p>
</div>
</div>
</div>
<div id="mdbook-body-container">
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script>
try {
let theme = localStorage.getItem('mdbook-theme');
let sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script>
const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? default_dark_theme : default_light_theme;
let theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
const html = document.documentElement;
html.classList.remove('light')
html.classList.add(theme);
html.classList.add("js");
</script>
<input type="checkbox" id="mdbook-sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed -->
<script>
let sidebar = null;
const sidebar_toggle = document.getElementById("mdbook-sidebar-toggle-anchor");
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
} else {
sidebar = 'hidden';
sidebar_toggle.checked = false;
}
if (sidebar === 'visible') {
sidebar_toggle.checked = true;
} else {
html.classList.remove('sidebar-visible');
}
</script>
<nav id="mdbook-sidebar" class="sidebar" aria-label="Table of contents">
<!-- populated by js -->
<mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
<noscript>
<iframe class="sidebar-iframe-outer" src="toc.html"></iframe>
</noscript>
<div id="mdbook-sidebar-resize-handle" class="sidebar-resize-handle">
<div class="sidebar-resize-indicator"></div>
</div>
</nav>
<div id="mdbook-page-wrapper" class="page-wrapper">
<div class="page">
<div id="mdbook-menu-bar-hover-placeholder"></div>
<div id="mdbook-menu-bar" class="menu-bar sticky">
<div class="left-buttons">
<label id="mdbook-sidebar-toggle" class="icon-button" for="mdbook-sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="mdbook-sidebar">
<span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></span>
</label>
<button id="mdbook-theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="mdbook-theme-list">
<span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M371.3 367.1c27.3-3.9 51.9-19.4 67.2-42.9L600.2 74.1c12.6-19.5 9.4-45.3-7.6-61.2S549.7-4.4 531.1 9.6L294.4 187.2c-24 18-38.2 46.1-38.4 76.1L371.3 367.1zm-19.6 25.4l-116-104.4C175.9 290.3 128 339.6 128 400c0 3.9 .2 7.8 .6 11.6c1.8 17.5-10.2 36.4-27.8 36.4H96c-17.7 0-32 14.3-32 32s14.3 32 32 32H240c61.9 0 112-50.1 112-112c0-2.5-.1-5-.2-7.5z"/></svg></span>
</button>
<ul id="mdbook-theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-default_theme">Auto</button></li>
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-light">Light</button></li>
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-ayu">Ayu</button></li>
</ul>
<button id="mdbook-search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="mdbook-searchbar">
<span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z"/></svg></span>
</button>
</div>
<h1 class="menu-title">Makara Book</h1>
<div class="right-buttons">
<a href="print.html" title="Print this book" aria-label="Print this book">
<span class=fa-svg id="print-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zm-16-88c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/></svg></span>
</a>
</div>
</div>
<div id="mdbook-search-wrapper" class="hidden">
<form id="mdbook-searchbar-outer" class="searchbar-outer">
<div class="search-wrapper">
<input type="search" id="mdbook-searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="mdbook-searchresults-outer" aria-describedby="searchresults-header">
<div class="spinner-wrapper">
<span class=fa-svg id="fa-spin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M304 48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zm0 416c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM48 304c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm464-48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM142.9 437c18.7-18.7 18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zm0-294.2c18.7-18.7 18.7-49.1 0-67.9S93.7 56.2 75 75s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zM369.1 437c18.7 18.7 49.1 18.7 67.9 0s18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9z"/></svg></span>
</div>
</div>
</form>
<div id="mdbook-searchresults-outer" class="searchresults-outer hidden">
<div id="mdbook-searchresults-header" class="searchresults-header"></div>
<ul id="mdbook-searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script>
document.getElementById('mdbook-sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('mdbook-sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#mdbook-sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="mdbook-content" class="content">
<main>
<h1 id="introduction"><a href="#introduction" class="header">Introduction</a></h1>
<h3 align="center">
Build high performance GUI app with power of Game Engine (Bevy).
</h3>
<p>Makara is a UI Library built on top of Bevy engine.</p>
<p><a href="https://bevy.org/">Bevy</a> is a game engine written in Rust, based on
<a href="https://bevy.org/learn/quick-start/getting-started/ecs/">ECS</a> architecture.
It’s capable of rendering 2D and 3D graphics.</p>
<p><a href="https://bevy.org/">Bevy</a> also provides full UI system to build GPU accelerated GUI application but because it’s based on
<a href="https://bevy.org/learn/quick-start/getting-started/ecs/">ECS</a>, building UI with Bevy is verbosity.</p>
<p>Let’s see an example below of creating a simple button with pure Bevy’s UI.</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>fn setup(mut commands: Commands) {
commands.spawn((
Node {
width: px(100),
height: px(20),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
padding: UiRect::all(px(10)),
..default()
},
BorderRadius::all(px(8)),
BackgroundColor(Color::srgb(1.0, 1.0, 1.0)),
children![
(
Text::new("Click me"),
TextColor(Color::BLACK)
)
],
observe(on_button_click)
))
}
fn on_button_click(_click: On<Pointer<Click>>) {
// do something
}
<span class="boring">}</span></code></pre>
<p>As you can see, it’s really easy to get lost with Bevy’s UI. A real GUI application
will have more than just a button and complex hierarchy.</p>
<p><strong>Makara</strong> simplifies this problem but providing <strong>built-in widgets</strong> and high level api with builder pattern
that most rust devs familiar with, to make it easy to write and maintain the code.</p>
<p>Let’s see how <strong>Makara</strong> reduce the verbosity.</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>fn setup(mut commands: Commands) {
commands.spawn(
button_!(
"Click me", background_color: "white", padding: px(10);
on: on_button_click
)
);
}
fn on_button_click(_clicked: On<Clicked>) {
// do something
}
<span class="boring">}</span></code></pre>
<p>Now it’s much cleaner compare to previous example.</p>
<p>Another motivation behind this project is the performance inherent to a modern game engine.
Bevy utilizes a decoupled architecture consisting of a Spatial Simulation and
an Interface Overlay. This allows for hardware-accelerated rendering of complex
2D/3D meshes and custom shaders within the World Space,
while maintaining a highly responsive, independent UI.</p>
<p align="center">
<img src="images/layers.png" alt="Bevy Layers" width="400">
</p>
<p>That means you can render any kind of heavy graphic within your application without sacrifying performance.</p>
<h3 id="core-features"><a class="header" href="#core-features">Core Features</a></h3>
<ul>
<li>Built-in widgets including <strong>button, modal, text input</strong> and more.</li>
<li>Leverages Bevy’s <strong>massive parallelism</strong> for smooth and efficient rendering.</li>
<li>Routing systems.</li>
<li>Custom styling with ID & Classes similar to HTML/CSS.</li>
<li>High level API and flexible.</li>
</ul>
<h2 id="installation"><a class="header" href="#installation">Installation</a></h2>
<pre><code>cargo add makara
</code></pre>
<div style="break-before: page; page-break-before: always;"></div>
<h1 id="getting-start-1"><a href="#getting-start-1" class="header">Getting Start</a></h1>
<h4 id="important"><a class="header" href="#important">IMPORTANT</a></h4>
<p>Makara relies entire on <a href="https://bevyengine.org/">Bevy</a>’s UI system and ECS. When you use <strong>Makara</strong>,
you’re actually using the <strong>Bevy engine</strong>, with <strong>Makara</strong> providing an abstraction for its UI system
to help you build GUI applications with ease.</p>
<p>A solid understanding of <strong>Bevy’s ECS</strong> is required. If you’re new to <strong>Bevy</strong>,
I recommend checking out <a href="https://bevyengine.org/learn/quick-start/introduction/">Bevy’s quick start guide</a>.</p>
<h3 id="getting-start"><a class="header" href="#getting-start">Getting Start</a></h3>
<pre class="playground"><code class="language-rust">use makara::prelude::*;
use bevy::prelude::*;
fn main() {
App::new()
.add_plugins(MakaraPlugin::default())
.add_systems(Startup, setup)
.run();
}
fn setup(mut commands: Commands) {
commands.spawn(
root_!(
align_items: AlignItems::Center,
justify_content: JustifyContent::Center;
[ text_!("Hello world", font_size: 20.0) ]
)
);
}</code></pre>
<h3 id="an-overview-of-ecs"><a class="header" href="#an-overview-of-ecs">An overview of ECS</a></h3>
<p>Because this library is powered by a game engine which is based on ECS architecture, it’s a must to understand how ECS works.</p>
<p>ECS stands for <strong>Entity-Component-System</strong>.</p>
<ul>
<li>
<p><strong>Entity</strong>: entities are objects you see when you run your application. A button widget is an entity,
a text widget is an entity, the list goes on. Each entity consists of one or multiple <strong>components</strong>.</p>
</li>
<li>
<p><strong>Component</strong>: think of component as a tag. It’s used to identify different kind of data. In the context
of <strong>Makara</strong> or <strong>Bevy</strong>, component is just a rust struct or enum.</p>
<p>For example, you create a button with background color of red and border color of blue in <strong>Makara</strong>.</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// create button with background color of red and border color of blue
button_!("Click me", background_color: "red", border_color: "blue");
<span class="boring">}</span></code></pre>
<p>Under the hood, the button is just an entity that contains these
2 components, <a href="https://docs.rs/bevy/latest/bevy/prelude/struct.BackgroundColor.html"><code>BackgroundColor</code></a>
and <a href="https://docs.rs/bevy/latest/bevy/prelude/struct.BorderColor.html"><code>BorderColor</code></a> which looks
something like this.</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>(
BackgroundColor(Color::srgb(1.0, 0.0, 0.0)),
BorderColor(Color::srgb(0.0, 1.0, 0.0)),
// other components
)
<span class="boring">}</span></code></pre>
<p>It’s then up to the <strong>Bevy</strong> engine to translate it to shading language and render it on your GPU.</p>
</li>
<li>
<p><strong>System</strong>: systems are just rust functions that take specific arguments and run at specific schedule. <code>Startup</code> schedule means the
functions run only once at the beginning. <code>Update</code> schedule means the functions run every single frame. And
of course, there are more schedules than just that.</p>
<pre class="playground"><code class="language-rust">fn main() {
App::new()
.add_plugins(MakaraPlugin::default())
.add_systems(Startup, setup)
.run();
}
fn setup(mut commands: Commands) {
// do something
}</code></pre>
<p>Here, <code>setup</code> function is a system that take a special argument, in this case <code>Commands</code>. It’s being registered
to run at <code>Startup</code> schedule which means it only do something once and that’s it.</p>
</li>
</ul>
<h3 id="understand-makara-hierarchy"><a class="header" href="#understand-makara-hierarchy">Understand Makara hierarchy</a></h3>
<p>Just like any other UI frameworks, you need a starting point for your application.
In <strong>Makara</strong>, you start by spawning a single <strong>root</strong> widget and add other widgets
as children of <strong>root</strong> except <strong>modal</strong>.</p>
<p>In above example, when you run the application with <code>cargo run</code> you will see the text
“Hello world” appears at the center of the screen.</p>
<p>You can make a widget becomes a child of another widget by using <code>[]</code>, we will talk about it later.</p>
<div style="break-before: page; page-break-before: always;"></div>
<h1 id="widget-structure"><a href="#widget-structure" class="header">Widget Structure</a></h1>
<h3 id="understanding-the-structure-of-widgets-in-makara"><a class="header" href="#understanding-the-structure-of-widgets-in-makara">Understanding the structure of widgets in Makara</a></h3>
<p>In <strong>Makara</strong>, creating a widget can be done by calling its pre-defined macro.
A button can be created using <code>button_!</code> and a text can be created using <code>text_!</code>.</p>
<p>Each macro is splitted into 3 parts with specific orders and the orders are:</p>
<ol>
<li>Properties</li>
<li>Event handlers</li>
<li>Children</li>
</ol>
<p>Let’s have a look at a few examples.</p>
<p>Button</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>button_!(
"Click me",
id: "my-btn",
background_color: "blue"; // properties end with ;
on: |clicked: On<Clicked>| {
println("Button is clicked");
};
on: |mouse_over: On<MouseOver>| {
println!("Mouse is over button");
}
);
// We don't need ; at the end of properties because we don't have an event handler.
button_!("Click me", border_color: "red");
<span class="boring">}</span></code></pre>
<p>Column</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
id: "my-column",
align_items: AlignItems::Center; // properties end with ;
[
text_!("Hello world"),
text_!("Hello again")
]
);
// We don't need ; at the end of properties because we don't have any children.
column_!(id: "my-column", align_items: AlignItems::Center);
<span class="boring">}</span></code></pre>
<p>Scroll</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>scroll_!(
align_items: AlignItems::Center; // properties end with ;
on: |scrolling; On<Scrolling>| {
println!("scrolling");
}; // event handler ends with ;
[
text_!("Hello world"),
text_!("Hello mom"),
text_!("Hello friends")
]
);
<span class="boring">}</span></code></pre>
<h3 id="the-rules-for-using-widget-macro"><a class="header" href="#the-rules-for-using-widget-macro">The rules for using widget macro</a></h3>
<ol>
<li>Always put <code>;</code> after properties if there are event handlers or children <code>[]</code>.</li>
<li>Always put <code>;</code> after an event handler if there are more event handlers or children <code>[]</code>.</li>
</ol>
<div style="break-before: page; page-break-before: always;"></div>
<h1 id="widgets"><a class="header" href="#widgets">Widgets</a></h1>
<p><strong>Makara</strong> provides a comprehensive set of built-in widgets for building modern GUI applications. Each widget comes with styling options, event handling capabilities, and built-in class support for rapid development.</p>
<h2 id="container-widgets"><a class="header" href="#container-widgets">Container Widgets</a></h2>
<p>Container widgets manage layout and can contain child elements.</p>
<h3 id="root"><a class="header" href="#root">Root</a></h3>
<p>The <code>root_!</code> widget is the starting point for your UI hierarchy and must be spawned by commands. It supports alignment utility classes.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>commands.spawn(root_!([
text_!("Hello World")
]));
<span class="boring">}</span></code></pre>
<p><strong>With styling and alignment:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>commands.spawn(
root_!(
background_color: Color::srgb(0.1, 0.1, 0.2),
class: "justify-center align-center p-4";
[
column_!([
text_!("Welcome to Makara!"),
button_!("Get Started")
])
]
)
);
<span class="boring">}</span></code></pre>
<p><strong>With custom properties:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>commands.spawn(
root_!(
width: percent(100),
height: percent(100),
id: "main-container",
class: "justify-between align-stretch";
[/* children */]
)
);
<span class="boring">}</span></code></pre>
<h3 id="column"><a class="header" href="#column">Column</a></h3>
<p>The <code>column_!</code> widget arranges children vertically in a flexbox column layout.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!([
text_!("Item 1"),
text_!("Item 2"),
text_!("Item 3")
])
<span class="boring">}</span></code></pre>
<p><strong>With alignment and spacing:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-center align-center p-4 m-2",
background_color: Color::WHITE;
[
text_!("Centered Column", font_size: 24.0),
button_!("Action Button", class: "is-primary mt-3"),
text_!("Footer text", class: "mt-2")
]
)
<span class="boring">}</span></code></pre>
<p><strong>With event handling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
on: |built: On<WidgetBuilt>| {
println!("Column widget built!");
};
[/* children */]
)
<span class="boring">}</span></code></pre>
<h3 id="row"><a class="header" href="#row">Row</a></h3>
<p>The <code>row_!</code> widget arranges children horizontally in a flexbox row layout.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>row_!([
text_!("Left"),
text_!("Center"),
text_!("Right")
])
<span class="boring">}</span></code></pre>
<p><strong>Navigation bar example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>row_!(
class: "justify-between align-center p-3",
background_color: Color::srgb(0.2, 0.3, 0.8);
[
text_!("MyApp", font_size: 20.0, color: Color::WHITE),
row_!(
class: "justify-end align-center";
[
button_!("Home", class: "mr-2"),
button_!("About", class: "mr-2"),
button_!("Contact")
]
)
]
)
<span class="boring">}</span></code></pre>
<h3 id="scroll"><a class="header" href="#scroll">Scroll</a></h3>
<p>The <code>scroll_!</code> widget creates a scrollable container for content that exceeds the container size.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>scroll_!([
text_!("Line 1"),
text_!("Line 2"),
text_!("Line 3"),
// ... many more lines
])
<span class="boring">}</span></code></pre>
<p><strong>Styled scroll container:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>scroll_!(
width: px(300),
height: px(200),
class: "p-3",
background_color: Color::srgb(0.95, 0.95, 0.95);
[
column_!(
class: "justify-start align-stretch";
[
text_!("Scrollable Content", font_size: 18.0, class: "mb-2"),
text_!("This is line 1"),
text_!("This is line 2"),
// ... more content
]
)
]
)
<span class="boring">}</span></code></pre>
<p><strong>With scroll event handling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>scroll_!(
on: |scrolling: On<Scrolling>| {
println!("User is scrolling!");
};
[/* scrollable content */]
)
<span class="boring">}</span></code></pre>
<h2 id="interactive-widgets"><a class="header" href="#interactive-widgets">Interactive Widgets</a></h2>
<h3 id="button"><a class="header" href="#button">Button</a></h3>
<p>The <code>button_!</code> widget provides clickable interactions with built-in hover states.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>button_!("Click Me")
<span class="boring">}</span></code></pre>
<p><strong>With styling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>button_!("Submit", class: "is-primary p-3 m-2")
<span class="boring">}</span></code></pre>
<p><strong>With event handling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>button_!(
"Save Data";
on: |clicked: On<Clicked>| {
println!("Save button clicked!");
};
on: |over: On<MouseOver>| {
println!("Mouse over save button");
};
on: |out: On<MouseOut>| {
println!("Mouse left save button");
}
)
<span class="boring">}</span></code></pre>
<p><strong>Complete example with styling and events:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>button_!(
"Delete Item",
id: "delete-btn",
class: "is-danger p-2 m-1";
on: |clicked: On<Clicked>| {
// Handle delete action
};
on: |built: On<WidgetBuilt>| {
println!("Delete button ready!");
}
)
<span class="boring">}</span></code></pre>
<h3 id="text-input"><a class="header" href="#text-input">Text Input</a></h3>
<p>The <code>text_input_!</code> widget provides text entry with placeholder support and theming.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>text_input_!("Enter your name...")
<span class="boring">}</span></code></pre>
<p><strong>With styling and validation:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>text_input_!(
"Enter email address...",
class: "is-primary p-2",
width: px(300),
id: "email-input"
)
<span class="boring">}</span></code></pre>
<p><strong>With change event handling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>text_input_!(
"Search...";
on: |change: On<Change<String>>| {
println!("Search text: {}", change.0);
};
on: |clicked: On<Clicked>| {
println!("Input field focused");
}
)
<span class="boring">}</span></code></pre>
<p><strong>Form example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-start align-stretch p-4";
[
text_!("User Registration", font_size: 20.0, class: "mb-3"),
text_input_!("Full Name...", class: "mb-2", width: px(300)),
text_input_!("Email Address...", class: "is-info mb-2", width: px(300)),
text_input_!("Password...", class: "is-warning mb-3", width: px(300)),
button_!("Register", class: "is-success")
]
)
<span class="boring">}</span></code></pre>
<h3 id="checkbox"><a class="header" href="#checkbox">Checkbox</a></h3>
<p>The <code>checkbox_!</code> widget provides boolean toggle functionality.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>checkbox_!("Accept terms and conditions")
<span class="boring">}</span></code></pre>
<p><strong>With styling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>checkbox_!("Enable notifications", class: "is-primary p-2")
<span class="boring">}</span></code></pre>
<p><strong>With state change handling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>checkbox_!(
"Subscribe to newsletter";
on: |active: On<Active<String>>| {
println!("Checkbox activated: {}", active.0);
};
on: |inactive: On<Inactive<String>>| {
println!("Checkbox deactivated: {}", inactive.0);
}
)
<span class="boring">}</span></code></pre>
<p><strong>Settings panel example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-start align-start p-4";
[
text_!("Settings", font_size: 18.0, class: "mb-3"),
checkbox_!("Dark mode", class: "is-info mb-2"),
checkbox_!("Auto-save", class: "is-success mb-2"),
checkbox_!("Show tooltips", class: "is-primary mb-2"),
button_!("Apply Settings", class: "is-primary mt-2")
]
)
<span class="boring">}</span></code></pre>
<h3 id="radio-group--radio"><a class="header" href="#radio-group--radio">Radio Group & Radio</a></h3>
<p>Radio widgets provide single-selection from multiple options.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>radio_group_!([
radio_!("Option A"),
radio_!("Option B"),
radio_!("Option C")
])
<span class="boring">}</span></code></pre>
<p><strong>Payment method selector:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>radio_group_!(
class: "p-3";
on: |change: On<Change<String>>| {
println!("Selected payment method: {}", change.0);
};
[
radio_!("Credit Card", class: "is-primary mb-2"),
radio_!("PayPal", class: "is-info mb-2"),
radio_!("Bank Transfer", class: "is-success mb-2"),
radio_!("Cash on Delivery", class: "is-warning")
]
)
<span class="boring">}</span></code></pre>
<p><strong>With individual radio event handling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>radio_group_!([
radio_!(
"Small Size";
on: |active: On<Active>| {
println!("Small size selected");
}
),
radio_!("Medium Size"),
radio_!("Large Size")
])
<span class="boring">}</span></code></pre>
<h3 id="select"><a class="header" href="#select">Select</a></h3>
<p>The <code>select_!</code> widget provides a dropdown selection interface.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>select_!("Choose country...", choices: &["USA", "Canada", "Mexico"])
<span class="boring">}</span></code></pre>
<p><strong>With styling and events:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>select_!(
"Select payment method...",
choices: &["Credit Card", "Debit Card", "PayPal"],
class: "is-primary p-2",
width: px(250);
on: |change: On<Change<String>>| {
println!("Selected: {}", change.0);
};
on: |active: On<Active>| {
println!("Dropdown opened");
};
on: |inactive: On<Inactive>| {
println!("Dropdown closed");
}
)
<span class="boring">}</span></code></pre>
<p><strong>Form integration:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-start align-stretch p-4";
[
text_!("Shipping Information"),
select_!("Country...", choices: &["USA", "Canada", "UK"], class: "mb-2"),
select_!("State/Province...", choices: &["CA", "NY", "TX"], class: "mb-2"),
button_!("Continue", class: "is-success")
]
)
<span class="boring">}</span></code></pre>
<h3 id="dropdown"><a class="header" href="#dropdown">Dropdown</a></h3>
<p>The <code>dropdown_!</code> widget creates a button that shows/hides child content.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>dropdown_!(
"Menu";
[
button_!("Profile"),
button_!("Settings"),
button_!("Logout")
]
)
<span class="boring">}</span></code></pre>
<p><strong>Navigation dropdown:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>dropdown_!(
"Products",
class: "is-primary";
on: |clicked: On<Clicked>| {
println!("Products dropdown toggled");
};
[
button_!("Laptops", class: "mb-1"),
button_!("Phones", class: "mb-1"),
button_!("Tablets", class: "mb-1"),
button_!("Accessories")
]
)
<span class="boring">}</span></code></pre>
<h3 id="slider"><a class="header" href="#slider">Slider</a></h3>
<p>The <code>slider_!</code> widget provides numeric input via draggable control.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>slider_!(min: 0.0, max: 100.0)
<span class="boring">}</span></code></pre>
<p><strong>Volume control example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-start align-center p-4";
[
text_!("Volume Control", class: "mb-2"),
slider_!(
min: 0.0,
max: 100.0,
class: "is-primary p-2";
on: |change: On<Change<f32>>| {
println!("Volume: {:.1}%", change.0);
}
)
]
)
<span class="boring">}</span></code></pre>
<p><strong>Settings panel with multiple sliders:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-start align-stretch p-4";
[
text_!("Audio Settings", font_size: 18.0, class: "mb-3"),
column_!(class: "mb-2"; [
text_!("Master Volume"),
slider_!(min: 0.0, max: 100.0, class: "is-primary")
]),
column_!(class: "mb-2"; [
text_!("Music Volume"),
slider_!(min: 0.0, max: 100.0, class: "is-info")
]),
column_!(class: "mb-2"; [
text_!("Effects Volume"),
slider_!(min: 0.0, max: 100.0, class: "is-success")
])
]
)
<span class="boring">}</span></code></pre>
<h2 id="display-widgets"><a class="header" href="#display-widgets">Display Widgets</a></h2>
<h3 id="text"><a class="header" href="#text">Text</a></h3>
<p>The <code>text_!</code> widget displays styled text content.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>text_!("Hello World")
<span class="boring">}</span></code></pre>
<p><strong>With styling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>text_!("Welcome!", font_size: 24.0, color: Color::srgb(0.2, 0.6, 0.8))
<span class="boring">}</span></code></pre>
<p><strong>With classes:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>text_!("Error message", class: "is-danger", font_size: 16.0)
<span class="boring">}</span></code></pre>
<p><strong>Typography example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-start align-start p-4";
[
text_!("Main Heading", font_size: 32.0, class: "mb-3"),
text_!("Subheading", font_size: 20.0, class: "is-info mb-2"),
text_!("Regular paragraph text with some content.", font_size: 14.0, class: "mb-2"),
text_!("Small caption text", font_size: 12.0, class: "is-secondary")
]
)
<span class="boring">}</span></code></pre>
<h3 id="image"><a class="header" href="#image">Image</a></h3>
<p>The <code>image_!</code> widget displays images from file paths or URLs.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>image_!("assets/logo.png")
<span class="boring">}</span></code></pre>
<p><strong>With sizing:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>image_!(
"assets/hero-banner.jpg",
width: px(400),
height: px(200)
)
<span class="boring">}</span></code></pre>
<p><strong>With events:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>image_!(
"assets/profile.png";
on: |clicked: On<Clicked>| {
println!("Profile image clicked");
};
on: |over: On<MouseOver>| {
println!("Hovering over image");
}
)
<span class="boring">}</span></code></pre>
<p><strong>Image gallery example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>row_!(
class: "justify-around align-center p-4";
[
image_!("assets/thumb1.jpg", width: px(150), height: px(150)),
image_!("assets/thumb2.jpg", width: px(150), height: px(150)),
image_!("assets/thumb3.jpg", width: px(150), height: px(150))
]
)
<span class="boring">}</span></code></pre>
<h3 id="link"><a class="header" href="#link">Link</a></h3>
<p>The <code>link_!</code> widget creates clickable links that open in the browser.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>link_!("https://rust-lang.org/")
<span class="boring">}</span></code></pre>
<p><strong>With custom text:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>link_!("Visit Rust Website", url: "https://rust-lang.org/")
<span class="boring">}</span></code></pre>
<p><strong>With styling and events:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>link_!(
"Documentation",
url: "https://docs.rs/makara",
class: "is-primary";
on: |clicked: On<Clicked>| {
println!("Documentation link clicked");
}
)
<span class="boring">}</span></code></pre>
<p><strong>Footer links example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>row_!(
class: "justify-center align-center p-3";
[
link_!("Privacy Policy", url: "https://example.com/privacy", class: "mr-4"),
link_!("Terms of Service", url: "https://example.com/terms", class: "mr-4"),
link_!("Contact Us", url: "https://example.com/contact")
]
)
<span class="boring">}</span></code></pre>
<h2 id="progress--loading-widgets"><a class="header" href="#progress--loading-widgets">Progress & Loading Widgets</a></h2>
<h3 id="progress-bar"><a class="header" href="#progress-bar">Progress Bar</a></h3>
<p>The <code>progress_bar_!</code> widget shows linear progress indication.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>progress_bar_!()
<span class="boring">}</span></code></pre>
<p><strong>With styling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>progress_bar_!(
class: "is-primary p-2",
width: px(300)
)
<span class="boring">}</span></code></pre>
<p><strong>With progress tracking:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>progress_bar_!(
class: "is-success";
on: |change: On<Change<f32>>| {
println!("Progress: {:.1}%", change.0 * 100.0);
}
)
<span class="boring">}</span></code></pre>
<p><strong>Loading interface example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-center align-center p-4";
[
text_!("Loading...", class: "mb-2"),
progress_bar_!(class: "is-info", width: px(250)),
text_!("Please wait while we process your request",
font_size: 12.0, class: "mt-2")
]
)
<span class="boring">}</span></code></pre>
<h3 id="circular"><a class="header" href="#circular">Circular</a></h3>
<p>The <code>circular_!</code> widget shows circular/spinner progress indication.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>circular_!()
<span class="boring">}</span></code></pre>
<p><strong>With styling:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>circular_!(
class: "is-primary p-3",
width: px(50),
height: px(50)
)
<span class="boring">}</span></code></pre>
<p><strong>Loading spinner example:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!(
class: "justify-center align-center p-4";
[
circular_!(class: "is-info mb-3"),
text_!("Processing...", class: "is-info")
]
)
<span class="boring">}</span></code></pre>
<h2 id="modal"><a class="header" href="#modal">Modal</a></h2>
<p>The <code>modal_!</code> widget creates overlay dialogs and is independent of the root widget hierarchy.</p>
<p><strong>Basic Usage:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>commands.spawn(
modal_!([
column_!([
text_!("Are you sure?"),
button_!("Confirm")
])
])
);
<span class="boring">}</span></code></pre>
<p><strong>Confirmation dialog:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>modal_!(
on: |active: On<Active>| {
println!("Modal opened");
};
on: |inactive: On<Inactive>| {
println!("Modal closed");
};
[
column_!(
class: "justify-center align-center p-4",
background_color: Color::WHITE,
width: px(300),
height: px(200);
[
text_!("Delete Confirmation", font_size: 18.0, class: "mb-3"),
text_!("Are you sure you want to delete this item?", class: "mb-4"),
row_!(
class: "justify-center align-center";
[
button_!("Cancel", class: "is-secondary mr-2"),
button_!("Delete", class: "is-danger")
]
)
]
)
]
)
<span class="boring">}</span></code></pre>
<p><strong>Settings modal:</strong></p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>modal_!([
column_!(
class: "justify-start align-stretch p-4",
background_color: Color::WHITE,
width: px(400),
height: px(500);
[
text_!("Settings", font_size: 24.0, class: "mb-4"),
checkbox_!("Enable notifications", class: "mb-2"),
checkbox_!("Auto-save documents", class: "mb-2"),
text_!("Theme", class: "mb-1"),
select_!("Choose theme...", choices: &["Light", "Dark", "Auto"], class: "mb-4"),
row_!(
class: "justify-end align-center";
[
button_!("Cancel", class: "mr-2"),
button_!("Save", class: "is-primary")
]
)
]
)
])
<span class="boring">}</span></code></pre>
<h2 id="built-in-classes"><a class="header" href="#built-in-classes">Built-in Classes</a></h2>
<p>All widgets support built-in utility classes:</p>
<h3 id="color-classes"><a class="header" href="#color-classes">Color Classes</a></h3>
<ul>
<li><code>is-primary</code>, <code>is-primary-dark</code></li>
<li><code>is-link</code>, <code>is-link-dark</code></li>
<li><code>is-info</code>, <code>is-info-dark</code></li>
<li><code>is-success</code>, <code>is-success-dark</code></li>
<li><code>is-warning</code>, <code>is-warning-dark</code></li>
<li><code>is-danger</code>, <code>is-danger-dark</code></li>
</ul>
<h3 id="spacing-classes-container-widgets-only"><a class="header" href="#spacing-classes-container-widgets-only">Spacing Classes (Container widgets only)</a></h3>
<ul>
<li>Margin: <code>m-0</code> to <code>m-6</code>, <code>mt-2</code>, <code>mr-3</code>, <code>mb-1</code>, <code>ml-4</code>, <code>mx-2</code>, <code>my-3</code></li>
<li>Padding: <code>p-0</code> to <code>p-6</code>, <code>pt-2</code>, <code>pr-3</code>, <code>pb-1</code>, <code>pl-4</code>, <code>px-2</code>, <code>py-3</code></li>
</ul>
<h3 id="alignment-classes-container-widgets-only"><a class="header" href="#alignment-classes-container-widgets-only">Alignment Classes (Container widgets only)</a></h3>
<ul>
<li>Justify: <code>justify-start</code>, <code>justify-center</code>, <code>justify-end</code>, <code>justify-between</code>, <code>justify-around</code>, <code>justify-evenly</code></li>
<li>Align: <code>align-start</code>, <code>align-center</code>, <code>align-end</code>, <code>align-stretch</code>, <code>align-baseline</code></li>
</ul>
<h2 id="complete-example"><a class="header" href="#complete-example">Complete Example</a></h2>
<p>Here’s a complete application example using multiple widgets:</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>use makara::prelude::*;
use bevy::prelude::*;
fn setup(mut commands: Commands) {
commands.spawn(
root_!(
class: "justify-center align-center p-4",
background_color: Color::srgb(0.9, 0.9, 0.9);
[
column_!(
class: "justify-start align-stretch p-4",
background_color: Color::WHITE,
width: px(500);
[
// Header
text_!("User Profile", font_size: 24.0, class: "mb-4"),
// Profile image
row_!(
class: "justify-center align-center mb-4";
[
image_!("assets/avatar.png", width: px(100), height: px(100))
]
),
// Form fields
text_input_!("Full Name...", class: "mb-2"),
text_input_!("Email...", class: "is-info mb-2"),
// Preferences
text_!("Preferences", font_size: 16.0, class: "mb-2"),
checkbox_!("Email notifications", class: "mb-1"),
checkbox_!("Dark mode", class: "mb-3"),
// Theme selection
select_!("Theme...", choices: &["Light", "Dark", "Auto"], class: "mb-4"),
// Actions
row_!(
class: "justify-end align-center";
[
button_!("Cancel", class: "mr-2"),
button_!("Save Profile", class: "is-primary")
]
)
]
)
]
)
);
}
<span class="boring">}</span></code></pre>
<p>For detailed API documentation, visit the <a href="https://docs.rs/makara/latest/makara/">Rust docs</a>.</p>
<div style="break-before: page; page-break-before: always;"></div>
<h1 id="querying-widgets"><a href="#querying-widgets" class="header">Querying Widgets</a></h1>
<p>Each widget type has its own query and blueprint.
Once widgets are built, you can query any widgets within systems using
its corresponding query struct.</p>
<p>For example, let’s say we have a text and a button. Once the button is clicked,
we want to update the text.</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>column_!([
text_!("Hello world", id: "my-text"),
button_!("Click me"; on: |_clicked: On<Clicked>, mut text_q: TextQuery| {
if let Some(text) = text_q.find_by_id("my-text") {
text.text.value.0 = "Hello Mom".to_string();
}
})
]);
<span class="boring">}</span></code></pre>
<p>In the example above, once the button is clicked, we query text widgets using <code>TextQuery</code>.
We then find the specific widget using its <code>id</code>. This is similar to how <code>javascript</code> finds
HTML elements within the <strong>DOM</strong>.</p>
<p>Of course, you can query a widget using <strong>class</strong> or <strong>entity</strong> instead of <strong>id</strong>. Querying
with <strong>class</strong> is useful if you want to fetch multiple widgets at same time, but requires
you to write extra code.</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// change all text colors when button is clicked.
column_!([
text_!("Hello world", class: "my-text"),
text_!("Hello mom", class: "my-text"),
text_!("Hello friend", class: "my-text"),
text_!("Hello stranger", class: "my-text"),
button_!("Click me"; on: |_clicked: On<Clicked>, mut text_q: TextQuery| {
// find_by_class returns list of entity
let text_entities = text_q.find_by_class("my-text");
// iterate thru the list
for entity in text_entities.into_iter() {
if let Some(text) = text_q.find_by_entity(entity) {
text.text.color.0 = Color::RED;
}
}
})
]);
<span class="boring">}</span></code></pre>
<p>For more information about widget query and its blueprint, see <a href="#widgets">widgets</a>.</p>
<div style="break-before: page; page-break-before: always;"></div>
<h1 id="styling"><a href="#styling" class="header">Styling</a></h1>
<h2 id="styling-in-makara"><a class="header" href="#styling-in-makara">Styling in Makara</a></h2>
<p>There are 2 ways to provide custom styles to widgets.</p>
<ol>
<li>Style on widgets directly using properties.</li>
<li>Attach an <code>ID</code> or <code>Classes</code> and provide styles via <code>ID</code> or <code>Classes</code>.</li>
</ol>
<h3 id="direct-styling"><a class="header" href="#direct-styling">Direct styling</a></h3>
<pre class="playground"><code class="language-rust">fn main() {
App::new()
.add_plugins(MakaraPlugin::default())
.add_systems(Startup, setup)
.run();
}
fn setup(mut commands: Commands) {
commands.spawn(
root_!(
align_items: AlignItems::Center, // direct styling
justify_content: JustifyContent::Center; // direct styling
[ text_!("Hello world", font_size: 20.0) ]
)
);
}</code></pre>
<h3 id="with-id-and-classes"><a class="header" href="#with-id-and-classes">With ID and Classes</a></h3>
<pre class="playground"><code class="language-rust">fn main() {
App::new()
.add_plugins(MakaraPlugin::default())
.add_systems(Startup, (setup, setup_styles)) // add this
.run();
}
fn setup(mut commands: Commands) {
commands.spawn(
root_!(id: "root"; [
text_!("Hello world", id: "text-one", class: "text"),
text_!("Hello mom", class: "text"),
text_!("Hello friend", class: "text hello-friend"),
text_!("Hello stranger", class: "text")
])
);
}
fn setup_styles(mut style: ResMut<CustomStyle>) {
// via id
style.bind_id(
"root",
Style::new()
.align_items(AlignItems::Center)
.justify_content(JustifyContent::Center)
);
// via id
style.bind_id("text-one", Style::new().color("red"));
// via class
style.bind_class(
"text",
Style::new().font_size(20.0)
);
// via class
style.bind_class(
"hello-friend",
Style::new().color("blue")
);
}</code></pre>
<p>When you run the application:</p>
<ul>
<li><code>root</code> will get <code>AlignItems</code> and <code>JustifyContent</code> styles.</li>
<li>all <code>texts</code> will have <code>font_size</code> of <code>20.0</code>.</li>
<li>only one <code>text</code> with id <code>text-one</code> will have <code>color</code> of <code>red</code>.</li>
<li>only one <code>text</code> with class <code>hello-friend</code> will have <code>color</code> of <code>blue</code>.</li>
</ul>
<p>See <a href="https://docs.rs/makara/latest/makara/styles/struct.Style.html">Style</a> API for more info.</p>
<div style="break-before: page; page-break-before: always;"></div>
<h1 id="alignment-utility-classes"><a class="header" href="#alignment-utility-classes">Alignment Utility Classes</a></h1>
<p>Makara provides a comprehensive set of alignment utility classes that allow you to control the layout and positioning of widgets without writing custom styles. These classes follow CSS flexbox conventions and work similarly to utility frameworks like Tailwind CSS.</p>
<h2 id="justify-content-classes"><a class="header" href="#justify-content-classes">Justify Content Classes</a></h2>
<p>Justify content classes control the alignment of child elements along the <strong>main axis</strong> (horizontal for rows, vertical for columns).</p>
<div class="table-wrapper">
<table>
<thead>
<tr><th>Class Name</th><th>Alternative</th><th>Effect</th></tr>
</thead>
<tbody>
<tr><td><code>justify-start</code></td><td><code>justify-content-start</code></td><td>Align children to the start of the main axis</td></tr>
<tr><td><code>justify-center</code></td><td><code>justify-content-center</code></td><td>Center children along the main axis</td></tr>
<tr><td><code>justify-end</code></td><td><code>justify-content-end</code></td><td>Align children to the end of the main axis</td></tr>
<tr><td><code>justify-between</code></td><td><code>justify-content-between</code></td><td>Distribute children with equal space between them</td></tr>
<tr><td><code>justify-around</code></td><td><code>justify-content-around</code></td><td>Distribute children with equal space around them</td></tr>
<tr><td><code>justify-evenly</code></td><td><code>justify-content-evenly</code></td><td>Distribute children with equal space around and between them</td></tr>
<tr><td><code>justify-stretch</code></td><td><code>justify-content-stretch</code></td><td>Stretch children to fill the main axis</td></tr>
</tbody>
</table>
</div>
<h2 id="align-items-classes"><a class="header" href="#align-items-classes">Align Items Classes</a></h2>
<p>Align items classes control the alignment of child elements along the <strong>cross axis</strong> (vertical for rows, horizontal for columns).</p>
<div class="table-wrapper">
<table>
<thead>
<tr><th>Class Name</th><th>Alternative</th><th>Effect</th></tr>
</thead>
<tbody>
<tr><td><code>align-start</code></td><td><code>align-items-start</code></td><td>Align children to the start of the cross axis</td></tr>
<tr><td><code>align-center</code></td><td><code>align-items-center</code></td><td>Center children along the cross axis</td></tr>
<tr><td><code>align-end</code></td><td><code>align-items-end</code></td><td>Align children to the end of the cross axis</td></tr>
<tr><td><code>align-stretch</code></td><td><code>align-items-stretch</code></td><td>Stretch children to fill the cross axis</td></tr>
<tr><td><code>align-baseline</code></td><td><code>align-items-baseline</code></td><td>Align children along their baseline</td></tr>
</tbody>
</table>
</div>
<h2 id="align-content-classes"><a class="header" href="#align-content-classes">Align Content Classes</a></h2>
<p>Align content classes control the alignment of wrapped lines when there are multiple rows/columns of content.</p>
<div class="table-wrapper">
<table>
<thead>
<tr><th>Class Name</th><th>Effect</th></tr>
</thead>
<tbody>
<tr><td><code>align-content-start</code></td><td>Align wrapped lines to the start</td></tr>
<tr><td><code>align-content-center</code></td><td>Center wrapped lines</td></tr>
<tr><td><code>align-content-end</code></td><td>Align wrapped lines to the end</td></tr>
<tr><td><code>align-content-stretch</code></td><td>Stretch wrapped lines to fill the container</td></tr>
<tr><td><code>align-content-between</code></td><td>Distribute wrapped lines with equal space between them</td></tr>
<tr><td><code>align-content-around</code></td><td>Distribute wrapped lines with equal space around them</td></tr>
<tr><td><code>align-content-evenly</code></td><td>Distribute wrapped lines with equal space around and between them</td></tr>
</tbody>
</table>
</div>
<h2 id="usage-examples"><a class="header" href="#usage-examples">Usage Examples</a></h2>
<h3 id="basic-centering"><a class="header" href="#basic-centering">Basic Centering</a></h3>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// Center content both horizontally and vertically
root_!(
class: "justify-center align-center";
[ text_!("Centered content") ]
)
<span class="boring">}</span></code></pre>
<h3 id="button-layout"><a class="header" href="#button-layout">Button Layout</a></h3>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// Distribute buttons evenly across a row
row_!(
class: "justify-between align-center";
[
button_!("Cancel"),
button_!("Submit")
]
)
<span class="boring">}</span></code></pre>
<h3 id="card-layout"><a class="header" href="#card-layout">Card Layout</a></h3>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// Create a vertically centered card with content aligned to start
column_!(
class: "justify-center align-start p-4";
[
text_!("Card Title", font_size: 18.0),
text_!("Card content goes here..."),
button_!("Action", class: "mt-3")
]
)
<span class="boring">}</span></code></pre>
<h3 id="navigation-bar"><a class="header" href="#navigation-bar">Navigation Bar</a></h3>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// Create a navigation bar with logo on left, menu on right
row_!(
class: "justify-between align-center p-3";
[
text_!("Logo", font_size: 20.0),
row_!(
class: "justify-end align-center";
[
button_!("Home", class: "mr-2"),
button_!("About", class: "mr-2"),
button_!("Contact")
]
)
]
)
<span class="boring">}</span></code></pre>
<h3 id="grid-like-layout"><a class="header" href="#grid-like-layout">Grid-like Layout</a></h3>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// Create a grid of items with even spacing
column_!(
class: "justify-start align-stretch";
[
row_!(
class: "justify-around align-center mb-4";
[
button_!("Item 1"),
button_!("Item 2"),
button_!("Item 3")
]
),
row_!(
class: "justify-around align-center";
[
button_!("Item 4"),
button_!("Item 5"),
button_!("Item 6")
]
)
]
)
<span class="boring">}</span></code></pre>
<h2 id="combining-with-other-classes"><a class="header" href="#combining-with-other-classes">Combining with Other Classes</a></h2>
<p>Alignment classes work seamlessly with other built-in utility classes:</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// Combine alignment with spacing and color classes
column_!(
class: "justify-center align-center p-4 m-2";
background_color: Color::WHITE;
[
text_!("Welcome!", class: "mb-3", font_size: 24.0),
button_!("Get Started", class: "is-primary")
]
)
<span class="boring">}</span></code></pre>
<h2 id="responsive-considerations"><a class="header" href="#responsive-considerations">Responsive Considerations</a></h2>
<p>While Makara doesn’t have built-in responsive breakpoints like web CSS frameworks, you can dynamically change classes based on window size or other conditions in your Bevy systems:</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>fn adjust_layout_system(
mut commands: Commands,
windows: Query<&Window>,
mut widgets: Query<(Entity, &mut Class), With<SomeWidget>>
) {
if let Ok(window) = windows.get_single() {
for (entity, mut class) in widgets.iter_mut() {
if window.width() < 600.0 {
// Mobile layout
class.set("justify-center align-center".to_string());
} else {
// Desktop layout
class.set("justify-between align-center".to_string());
}
}
}
}
<span class="boring">}</span></code></pre>
<h2 id="supported-widgets"><a class="header" href="#supported-widgets">Supported Widgets</a></h2>
<p>Alignment utility classes are supported on <strong>container widgets</strong> that manage child element layout:</p>
<ul>
<li><code>root_!()</code> - Main application container</li>
<li><code>row_!()</code> - Horizontal flex container</li>
<li><code>column_!()</code> - Vertical flex container</li>
<li><code>scroll_!()</code> - Scrollable container</li>
</ul>
<p>Other widgets like <code>button_!()</code>, <code>text_!()</code>, <code>image_!()</code>, etc. have fixed internal layouts and don’t support alignment classes since they’re not intended to be containers for user-defined child elements.</p>
<h2 id="performance-notes"><a class="header" href="#performance-notes">Performance Notes</a></h2>
<ul>
<li>Alignment classes are processed during widget build and when the class attribute changes</li>
<li>No runtime overhead once the layout is computed</li>
<li>Classes are parsed once and cached until the class attribute is modified</li>
<li>Bevy’s layout system handles the actual positioning efficiently</li>
</ul>
<h2 id="migration-from-manual-styling"><a class="header" href="#migration-from-manual-styling">Migration from Manual Styling</a></h2>
<p>If you were previously setting alignment properties manually:</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>// Old way
root_!(
justify_content: JustifyContent::Center,
align_items: AlignItems::Center;
[ /* children */ ]
)
// New way with utility classes
root_!(
class: "justify-center align-center";
[ /* children */ ]
)
<span class="boring">}</span></code></pre>
<p>The utility class approach provides the same functionality with more concise syntax and better consistency across your application.</p>
<div style="break-before: page; page-break-before: always;"></div>
<h1 id="routing-1"><a href="#routing-1" class="header">Routing</a></h1>
<h2 id="routing"><a class="header" href="#routing">Routing</a></h2>
<p>Routing in Makara is really easy. There are only 3 steps.</p>
<ol>
<li>Specifying route name on <code>root</code> widget.</li>
<li>Register route.</li>
<li>Navigating.</li>
</ol>
<h3 id="specifying-route"><a class="header" href="#specifying-route">Specifying route</a></h3>
<p>Just like I mentioned in previous chapter about <a href="#understand-makara-hierarchy">hierarchy</a>,
we need to use <code>root</code> widget as a starting point for UI hierarchy.</p>
<p>If you want to have multiple pages or views, you need to create multiple starting points. In other words,
each <code>root</code> defines one page or view.</p>
<p>For example, let’s say you want to have <strong>Home</strong> view and <strong>About Us</strong> view.</p>
<pre class="playground"><code class="language-rust">fn main() {
App::new()
.add_plugins(MakaraPlugin::default())
.add_systems(Startup, (setup_home_view, setup_about_us_view))
.run();
}
fn setup_home_view(mut commands: Commands) {
commands.spawn(
root_!(route: "home"; [ text_!("This is home view") ])
);
}
fn setup_about_us_view(mut commands: Commands) {
commands.spawn(
root_!(route: "about-us"; [ text_!("This is about us view") ])
);
}</code></pre>
<p>We can specify route name for each view by using <code>route</code> property.</p>
<h3 id="registering-routes"><a class="header" href="#registering-routes">Registering Routes</a></h3>
<p>After we defined route on each view, we need to register those routes.
We can do so by using <code>Router</code> resource.</p>
<pre class="playground"><code class="language-rust">fn main() {
App::new()
.add_plugins(MakaraPlugin::default())
.add_systems(Startup, (
setup_home_view,
setup_about_us_view,
setup_routes // add here
))
.run();
}
fn setup_routes(mut router: ResMut<Router>) {
router.register_routes(["home", "about-us"]);
// define which route you want to see when the application started
router.default_route("home", ());
}
// setup view systems..</code></pre>
<p>You may also want to set the default route. If you don’t, the first route in the list
will be set to default automatically.</p>
<h3 id="route-navigation"><a class="header" href="#route-navigation">Route Navigation</a></h3>
<p>Let’s update the above examples to demonstrate how to nagivate to specific route.</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>fn setup_home_view(mut commands: Commands) {
commands.spawn(
root_!(route: "home"; [
text_!("This is home view"),
button_!(
"Go to about us view";
on: |_clicked: On<Clicked>, mut router: ResMut<Router>| {
router.nagivate("about-us", ());
}
)
])
);
}
fn setup_about_us_view(mut commands: Commands) {
commands.spawn(
root_!(route: "about-us"; [
text_!("This is about us view"),
button_!(
"Go to home view";
on: |_clicked: On<Clicked>, mut router: ResMut<Router>| {
router.nagivate("home", ());
}
)
])
);
}
<span class="boring">}</span></code></pre>
<p>We can navigate to any route by calling <code>navigate</code> method.</p>
<h3 id="route-params"><a class="header" href="#route-params">Route Params</a></h3>
<p>Of course, each route can have one or multiple params.</p>
<p>For example, let’s say we have a view called <strong>product-detail</strong>, but this view is dynamic based
on product id or name.</p>
<pre class="playground"><code class="language-rust"><span class="boring">#![allow(unused)]
</span><span class="boring">fn main() {
</span>fn setup_home_view(mut commands: Commands) {
commands.spawn(
root_!(route: "home"; [
text_!("This is home view"),
button_!(
"See product";
on: |_clicked: On<Clicked>, mut router: ResMut<Router>| {
router.nagivate(
"product-detail",
Param::new()
.value("id", "1234") // just random product id
.value("name", "Iphone 17 256GB") // product name
);
}
)
])
);
}
fn setup_product_detail_view(mut commands: Commands) {
commands.spawn(
root_!(
route: "product-detail";
on: |page_loaded: On<PageLoaded>, mut text_q: TextQuery| {
if let Some(text) = text_q.find_by_id("product-name") {
if let Some(name) = page_loaded.param.get("name") {
text.text.value.0 = name.clone();
}
}
};
[ text_!("Product name: Unknown", id: "product-name") ]
)
);
}
<span class="boring">}</span></code></pre>
<p>See <a href="https://docs.rs/makara/latest/makara/routers/struct.Router.html">Router</a> and
<a href="https://docs.rs/makara/latest/makara/routers/struct.Param.html">Param</a> for more info.</p>
<div style="break-before: page; page-break-before: always;"></div>
<h1 id="organizing-your-project-1"><a href="#organizing-your-project-1" class="header">Organizing your project</a></h1>
<h3 id="organizing-your-project"><a class="header" href="#organizing-your-project">Organizing your project</a></h3>
<p>UI hierarchy can become verbosity and hard to keep track of. It’s always recommended
to seperate your code into snippets.</p>
<p>For example,</p>
<pre class="playground"><code class="language-rust">use makara::prelude::*;
use bevy::prelude::*;
fn main() {
App::new()
.add_plugins(MakaraPlugin::default())
.add_systems(Startup, setup)
.run();
}
fn setup(mut commands: Commands) {
commands.spawn(
root_!(
align_items: AlignItems::Center,
justify_content: JustifyContent::Center;
[
text_!("Register your info"),
input_container(),
button_container()
]
)
);
}
fn input_container() -> impl Bundle {
column_!([
text_input_!("Enter email"),
text_input_!("Enter name"),
text_!("Choose gender"),
radio_group_!([ radio_!("Male"), radio_!("Female") ])
])
}
fn button_container() -> impl Bundle {
row_!([
button_!("Cancel"; on: |_clicked: On<Clicked>| {}),
button_!("Submit"; on: |_clicked: On<Clicked>| {})
])
}</code></pre>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
</nav>
</div>
<template id=fa-eye><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg></span></template>
<template id=fa-eye-slash><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c5.2-11.8 8-24.8 8-38.5c0-53-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zm223.1 298L373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5z"/></svg></span></template>
<template id=fa-copy><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/></svg></span></template>
<template id=fa-play><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg></span></template>
<template id=fa-clock-rotate-left><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z"/></svg></span></template>
<script>
window.playground_copyable = true;
</script>
<script src="elasticlunr-ef4e11c1.min.js"></script>
<script src="mark-09e88c2c.min.js"></script>
<script src="searcher-c2a407aa.js"></script>
<script src="clipboard-1626706a.min.js"></script>
<script src="highlight-abc7f01d.js"></script>
<script src="book-a0b12cfe.js"></script>
<!-- Custom JS scripts -->
<script>
window.addEventListener('load', function() {
window.setTimeout(window.print, 100);
});
</script>
</div>
</body>
</html>
