Files
ewwii/docs/book/widgets/props.html
2025-08-25 17:56:01 +05:30

474 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE HTML>
<html lang="en" class="latte sidebar-visible" dir="ltr">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Widget Properties - Ewwii documentation</title>
<!-- 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.svg">
<link rel="shortcut icon" href="../favicon.png">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/chrome.css">
<link rel="stylesheet" href="../css/print.css" media="print">
<!-- Fonts -->
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="../fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" id="highlight-css" href="../highlight.css">
<link rel="stylesheet" id="tomorrow-night-css" href="../tomorrow-night.css">
<link rel="stylesheet" id="ayu-highlight-css" href="../ayu-highlight.css">
<!-- Custom theme stylesheets -->
<link rel="stylesheet" href=".././theme/catppuccin.css">
<!-- Provide site root and default themes to javascript -->
<script>
const path_to_root = "../";
const default_light_theme = "latte";
const default_dark_theme = "macchiato";
window.path_to_searchindex_js = "../searchindex.js";
</script>
<!-- Start loading toc.js asap -->
<script src="../toc.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="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('latte')
html.classList.add(theme);
html.classList.add("js");
</script>
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed -->
<script>
let sidebar = null;
const sidebar_toggle = document.getElementById("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="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="sidebar-resize-handle" class="sidebar-resize-handle">
<div class="sidebar-resize-indicator"></div>
</div>
</nav>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky">
<div class="left-buttons">
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</label>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="default_theme">Auto</button></li>
<li role="none"><button role="menuitem" class="theme" id="latte">Latte</button></li>
<li role="none"><button role="menuitem" class="theme" id="frappe">Frappé</button></li>
<li role="none"><button role="menuitem" class="theme" id="macchiato">Macchiato</button></li>
<li role="none"><button role="menuitem" class="theme" id="mocha">Mocha</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
</div>
<h1 class="menu-title">Ewwii documentation</h1>
<div class="right-buttons">
<a href="../print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
<a href="https://github.com/Ewwii-sh/ewwii" title="Git repository" aria-label="Git repository">
<i id="git-repository-button" class="fa fa-github"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<div class="search-wrapper">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
<div class="spinner-wrapper">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script>
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="widget-properties"><a class="header" href="#widget-properties">Widget Properties</a></h1>
<h2 id="widget"><a class="header" href="#widget">widget</a></h2>
<p>These properties apply to all widgets, and can be used anywhere!</p>
<p><strong>Properties</strong></p>
<ul>
<li><code>class</code>: <code>string</code> css class name</li>
<li><code>valign</code>: <code>string</code> how to align this vertically. possible values: "fill", "baseline", "center", "start", "end"</li>
<li><code>halign</code>: <code>string</code> how to align this horizontally. possible values: "fill", "baseline", "center", "start", "end"</li>
<li><code>vexpand</code>: <code>bool</code> should this container expand vertically. Default: false</li>
<li><code>hexpand</code>: <code>bool</code> should this widget expand horizontally. Default: false</li>
<li><code>width</code>: <code>int</code> width of this element</li>
<li><code>height</code>: <code>int</code> height of this element</li>
<li><code>active</code>: <code>bool</code> If this widget can be interacted with</li>
<li><code>tooltip</code>: <code>string</code> tooltip text (on hover)</li>
<li><code>visible</code>: <code>bool</code> visibility of the widget</li>
<li><code>style</code>: <code>string</code> inline scss style applied to the widget</li>
<li><code>css</code>: <code>string</code> scss code applied to the widget</li>
</ul>
<h2 id="combo-box-text"><a class="header" href="#combo-box-text">combo-box-text</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>items</code>: <code>vec</code> Items displayed in the combo box</li>
<li><code>timeout</code>: <code>duration</code> timeout of the command. Default: "200ms"</li>
<li><code>onchange</code>: <code>string</code> runs when an item is selected, replacing <code>{}</code> with the item</li>
</ul>
<h2 id="expander"><a class="header" href="#expander">expander</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>name</code>: <code>string</code> name of the expander</li>
<li><code>expanded</code>: <code>bool</code> sets whether it's expanded</li>
</ul>
<h2 id="revealer"><a class="header" href="#revealer">revealer</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>transition</code>: <code>string</code> animation name ("slideright", "slideleft", etc.)</li>
<li><code>reveal</code>: <code>bool</code> whether the child is revealed</li>
<li><code>duration</code>: <code>duration</code> how long the transition lasts. Default: "500ms"</li>
</ul>
<h2 id="checkbox"><a class="header" href="#checkbox">checkbox</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>checked</code>: <code>bool</code> initial checked state</li>
<li><code>timeout</code>: <code>duration</code> command timeout. Default: "200ms"</li>
<li><code>onchecked</code>: <code>string</code> command when checked</li>
<li><code>onunchecked</code>: <code>string</code> command when unchecked</li>
</ul>
<h2 id="color-button"><a class="header" href="#color-button">color-button</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>use_alpha</code>: <code>bool</code> use alpha channel</li>
<li><code>onchange</code>: <code>string</code> command on color select</li>
<li><code>timeout</code>: <code>duration</code> Default: "200ms"</li>
</ul>
<h2 id="color-chooser"><a class="header" href="#color-chooser">color-chooser</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>use_alpha</code>: <code>bool</code> use alpha channel</li>
<li><code>onchange</code>: <code>string</code> command on color select</li>
<li><code>timeout</code>: <code>duration</code> Default: "200ms"</li>
</ul>
<h2 id="slider"><a class="header" href="#slider">slider</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>flipped</code>: <code>bool</code> reverse direction</li>
<li><code>marks</code>: <code>string</code> draw marks</li>
<li><code>draw_value</code>: <code>bool</code> show value</li>
<li><code>value_pos</code>: <code>string</code> where to show value ("left", "right", etc.)</li>
<li><code>round_digits</code>: <code>int</code> number of decimal places</li>
<li><code>value</code>: <code>float</code> current value</li>
<li><code>min</code>: <code>float</code> minimum value</li>
<li><code>max</code>: <code>float</code> maximum value</li>
<li><code>timeout</code>: <code>duration</code> Default: "200ms"</li>
<li><code>onchange</code>: <code>string</code> command on change (use <code>{}</code> for value)</li>
<li><code>orientation</code>: <code>string</code> layout direction</li>
</ul>
<h2 id="progress"><a class="header" href="#progress">progress</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>flipped</code>: <code>bool</code> reverse direction</li>
<li><code>value</code>: <code>float</code> progress (0100)</li>
<li><code>orientation</code>: <code>string</code> layout direction</li>
</ul>
<h2 id="input"><a class="header" href="#input">input</a></h2>
<p><strong>NOTE:</strong> This widget exposes a special environment variable <code>INPUT_VAL</code> to the commands specified in <code>onchange</code> and <code>onaccept</code>.</p>
<p><strong>Properties</strong></p>
<ul>
<li><code>value</code>: <code>string</code> current text</li>
<li><code>onchange</code>: <code>string</code> command on change; <code>INPUT_VAL</code> contains the new value</li>
<li><code>timeout</code>: <code>duration</code> Default: "200ms"</li>
<li><code>onaccept</code>: <code>string</code> command on Enter; <code>INPUT_VAL</code> contains the new value</li>
<li><code>password</code>: <code>bool</code> obscure input</li>
</ul>
<h2 id="button"><a class="header" href="#button">button</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>timeout</code>: <code>duration</code> Default: "200ms"</li>
<li><code>onclick</code>: <code>string</code> command on activation</li>
<li><code>onmiddleclick</code>: <code>string</code> command on middle click</li>
<li><code>onrightclick</code>: <code>string</code> command on right click</li>
</ul>
<h2 id="image"><a class="header" href="#image">image</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>path</code>: <code>string</code> image file path</li>
<li><code>image_width</code>: <code>int</code> image width</li>
<li><code>image_height</code>: <code>int</code> image height</li>
<li><code>preserve_aspect_ratio</code>: <code>bool</code> keep aspect ratio</li>
<li><code>fill_svg</code>: <code>string</code> fill color for SVGs</li>
<li><code>icon</code>: <code>string</code> theme icon name</li>
<li><code>icon_size</code>: <code>string</code> size of the icon</li>
</ul>
<h2 id="box"><a class="header" href="#box">box</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>spacing</code>: <code>int</code> spacing between children</li>
<li><code>orientation</code>: <code>string</code> direction of children</li>
<li><code>space_evenly</code>: <code>bool</code> distribute children evenly</li>
</ul>
<h2 id="overlay"><a class="header" href="#overlay">overlay</a></h2>
<p><strong>Properties</strong></p>
<p><em>None</em></p>
<h2 id="tooltip"><a class="header" href="#tooltip">tooltip</a></h2>
<p><strong>Properties</strong></p>
<p><em>None listed</em></p>
<h2 id="centerbox"><a class="header" href="#centerbox">centerbox</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>orientation</code>: <code>string</code> direction of layout</li>
</ul>
<h2 id="scroll"><a class="header" href="#scroll">scroll</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>hscroll</code>: <code>bool</code> allow horizontal scrolling</li>
<li><code>vscroll</code>: <code>bool</code> allow vertical scrolling</li>
<li><code>propagate_natural_height</code>: <code>bool</code> use the natural height if true</li>
</ul>
<h2 id="eventbox"><a class="header" href="#eventbox">eventbox</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>timeout</code>: <code>duration</code> Default: "200ms"</li>
<li><code>onscroll</code>: <code>string</code> command on scroll (<code>{}</code> becomes direction)</li>
<li><code>onhover</code>: <code>string</code> command on hover</li>
<li><code>onhoverlost</code>: <code>string</code> command on hover exit</li>
<li><code>cursor</code>: <code>string</code> cursor type</li>
<li><code>ondropped</code>: <code>string</code> command on drop (<code>{}</code> is URI)</li>
<li><code>dragvalue</code>: <code>string</code> URI to drag from this widget</li>
<li><code>dragtype</code>: <code>string</code> type to drag ("file", "text")</li>
<li><code>onclick</code>: <code>string</code> command on click</li>
<li><code>onmiddleclick</code>: <code>string</code> command on middle click</li>
<li><code>onrightclick</code>: <code>string</code> command on right click</li>
</ul>
<h2 id="label"><a class="header" href="#label">label</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>text</code>: <code>string</code> text to display</li>
<li><code>truncate</code>: <code>bool</code> truncate text</li>
<li><code>limit_width</code>: <code>int</code> max characters to show</li>
<li><code>truncate_left</code>: <code>bool</code> truncate beginning</li>
<li><code>show_truncated</code>: <code>bool</code> show truncation</li>
<li><code>unindent</code>: <code>bool</code> strip leading spaces</li>
<li><code>markup</code>: <code>string</code> Pango markup</li>
<li><code>wrap</code>: <code>bool</code> wrap text</li>
<li><code>angle</code>: <code>float</code> rotation angle</li>
<li><code>gravity</code>: <code>string</code> text gravity</li>
<li><code>xalign</code>: <code>float</code> horizontal alignment</li>
<li><code>yalign</code>: <code>float</code> vertical alignment</li>
<li><code>justify</code>: <code>string</code> text justification</li>
<li><code>wrap_mode</code>: <code>string</code> wrap mode ("word", "char", etc.)</li>
<li><code>lines</code>: <code>int</code> max lines (1 = unlimited)</li>
</ul>
<h2 id="literal"><a class="header" href="#literal">literal</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>content</code>: <code>string</code> raw yuck</li>
</ul>
<h2 id="calendar"><a class="header" href="#calendar">calendar</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>day</code>: <code>float</code> selected day</li>
<li><code>month</code>: <code>float</code> selected month</li>
<li><code>year</code>: <code>float</code> selected year</li>
<li><code>show_details</code>: <code>bool</code> show details</li>
<li><code>show_heading</code>: <code>bool</code> show heading</li>
<li><code>show_day_names</code>: <code>bool</code> show day names</li>
<li><code>show_week_numbers</code>: <code>bool</code> show week numbers</li>
<li><code>onclick</code>: <code>string</code> command with <code>{0}</code>, <code>{1}</code>, <code>{2}</code> for day/month/year</li>
<li><code>timeout</code>: <code>duration</code> Default: "200ms"</li>
</ul>
<h2 id="stack"><a class="header" href="#stack">stack</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>selected</code>: <code>int</code> child index</li>
<li><code>transition</code>: <code>string</code> animation name</li>
<li><code>same_size</code>: <code>bool</code> equal child size</li>
</ul>
<h2 id="transform"><a class="header" href="#transform">transform</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>rotate</code>: <code>float</code> rotation angle</li>
<li><code>transform_origin_x</code>: <code>string</code> transform origin x</li>
<li><code>transform_origin_y</code>: <code>string</code> transform origin y</li>
<li><code>translate_x</code>: <code>string</code> shift x</li>
<li><code>translate_y</code>: <code>string</code> shift y</li>
<li><code>scale-x</code>: <code>string</code> scale x</li>
<li><code>scale-y</code>: <code>string</code> scale y</li>
</ul>
<h2 id="circular-progress"><a class="header" href="#circular-progress">circular-progress</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>value</code>: <code>float</code> 0100 progress</li>
<li><code>start_at</code>: <code>float</code> start percentage</li>
<li><code>thickness</code>: <code>float</code> line thickness</li>
<li><code>clockwise</code>: <code>bool</code> direction</li>
</ul>
<h2 id="graph"><a class="header" href="#graph">graph</a></h2>
<p><strong>Properties</strong></p>
<ul>
<li><code>value</code>: <code>float</code> current value</li>
<li><code>thickness</code>: <code>float</code> line thickness</li>
<li><code>time_range</code>: <code>duration</code> duration to track</li>
<li><code>min</code>: <code>float</code> minimum value</li>
<li><code>max</code>: <code>float</code> maximum value</li>
</ul>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="../widgets/widgets_and_params.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next prefetch" href="../examples/examples.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
<a rel="prev" href="../widgets/widgets_and_params.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next prefetch" href="../examples/examples.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
</nav>
</div>
<!-- Livereload script (if served using the cli tool) -->
<script>
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
const socket = new WebSocket(wsAddress);
socket.onmessage = function (event) {
if (event.data === "reload") {
socket.close();
location.reload();
}
};
window.onbeforeunload = function() {
socket.close();
}
</script>
<script>
window.playground_copyable = true;
</script>
<script src="../elasticlunr.min.js"></script>
<script src="../mark.min.js"></script>
<script src="../searcher.js"></script>
<script src="../clipboard.min.js"></script>
<script src="../highlight.js"></script>
<script src="../book.js"></script>
<!-- Custom JS scripts -->
<script src="../js/home_button.js"></script>
</div>
</body>
</html>