Files
ewwii/docs/book/widgets/props.html

421 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="sidebar-visible no-js navy">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Widget Properties - Ewwii documentation</title>
<!-- Custom HTML head -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<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" href="../highlight.css">
<link rel="stylesheet" href="../tomorrow-night.css">
<link rel="stylesheet" href="../ayu-highlight.css">
<!-- Custom theme stylesheets -->
</head>
<body>
<!-- Provide site root to javascript -->
<script type="text/javascript">
var path_to_root = "../";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "navy";
</script>
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script type="text/javascript">
try {
var theme = localStorage.getItem('mdbook-theme');
var 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 type="text/javascript">
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('no-js')
html.classList.remove('navy')
html.classList.add(theme);
html.classList.add('js');
</script>
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var html = document.querySelector('html');
var sidebar = 'hidden';
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
}
html.classList.remove('sidebar-visible');
html.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<div class="sidebar-scrollbox">
<ol class="chapter"><li class="chapter-item expanded affix "><a href="introduction.html">Introduction</a></li><li class="chapter-item expanded "><a href="getting_started.html"><strong aria-hidden="true">1.</strong> Getting Started</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="installation.html"><strong aria-hidden="true">1.1.</strong> Installation</a></li><li class="chapter-item expanded "><a href="statictranspl.html"><strong aria-hidden="true">1.2.</strong> Optional: Statictranspl</a></li></ol></li><li class="chapter-item expanded "><a href="config/config_and_syntax.html"><strong aria-hidden="true">2.</strong> Configuration &amp; Syntax</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="config/configuration.html"><strong aria-hidden="true">2.1.</strong> Configuration</a></li><li class="chapter-item expanded "><a href="config/rendering_and_best_practices.html"><strong aria-hidden="true">2.2.</strong> Rendering and Best Practices</a></li><li class="chapter-item expanded "><a href="config/config_fundamentals.html"><strong aria-hidden="true">2.3.</strong> Fundamentals</a></li><li class="chapter-item expanded "><a href="config/variables.html"><strong aria-hidden="true">2.4.</strong> Variables</a></li><li class="chapter-item expanded "><a href="config/expression_language.html"><strong aria-hidden="true">2.5.</strong> Expression Language</a></li></ol></li><li class="chapter-item expanded "><a href="theming/theming_and_ui.html"><strong aria-hidden="true">3.</strong> Theming &amp; UI</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="theming/working_with_gtk.html"><strong aria-hidden="true">3.1.</strong> Working With GTK</a></li><li class="chapter-item expanded "><a href="theming/styling_widgets.html"><strong aria-hidden="true">3.2.</strong> Styling Widgets</a></li></ol></li><li class="chapter-item expanded "><a href="modules/modules.html"><strong aria-hidden="true">4.</strong> Modules</a></li><li class="chapter-item expanded "><a href="widgets/widgets.html"><strong aria-hidden="true">5.</strong> Widgets</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="widgets/widgets_and_params.html"><strong aria-hidden="true">5.1.</strong> Widgets &amp; Parameters</a></li><li class="chapter-item expanded "><a href="widgets/props.html"><strong aria-hidden="true">5.2.</strong> Widget Properties</a></li></ol></li><li class="chapter-item expanded "><a href="examples/examples.html"><strong aria-hidden="true">6.</strong> Examples</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="examples/starter_bar.html"><strong aria-hidden="true">6.1.</strong> Starter Bar</a></li><li class="chapter-item expanded "><a href="examples/interactive.html"><strong aria-hidden="true">6.2.</strong> Interactive Widgets</a></li><li class="chapter-item expanded "><a href="examples/theming.html"><strong aria-hidden="true">6.3.</strong> Theming Tricks</a></li></ol></li><li class="chapter-item expanded "><a href="troubleshooting.html"><strong aria-hidden="true">7.</strong> Troubleshooting</a></li></ol>
</div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></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 bordered">
<div class="left-buttons">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</button>
<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="light">Light</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy (default)</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" 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">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</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 type="text/javascript">
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>Properties</strong></p>
<ul>
<li><code>value</code>: <code>string</code> current text</li>
<li><code>onchange</code>: <code>string</code> command on change</li>
<li><code>timeout</code>: <code>duration</code> Default: "200ms"</li>
<li><code>onaccept</code>: <code>string</code> command on Enter</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>
</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" 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" 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>
<script type="text/javascript">
window.playground_copyable = true;
</script>
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
<!-- Custom JS scripts -->
<script type="text/javascript" src="../js/home_button.js"></script>
</body>
</html>