base_components.html


<!DOCTYPE html>


<html lang="en" data-content_root="./" >

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Base Elements &#8212; Edifice 3.0.0 documentation</title>
  
  
  <script data-cfasync="false">
    document.documentElement.dataset.mode = localStorage.getItem("mode") || "";
    document.documentElement.dataset.theme = localStorage.getItem("theme") || "";
  </script>
  <!--
    this give us a css class that will be invisible only if js is disabled
  -->
  <noscript>
    <style>
      .pst-js-only { display: none !important; }

    </style>
  </noscript>
  
  <!-- Loaded before other Sphinx assets -->
  <link href="_static/styles/theme.css?digest=8878045cc6db502f8baf" rel="stylesheet" />
<link href="_static/styles/pydata-sphinx-theme.css?digest=8878045cc6db502f8baf" rel="stylesheet" />

    <link rel="stylesheet" type="text/css" href="_static/pygments.css?v=a746c00c" />
    <link rel="stylesheet" type="text/css" href="_static/copybutton.css?v=76b2166b" />
    <link rel="stylesheet" type="text/css" href="_static/css/custom.css?v=84af4edc" />
  
  <!-- So that users can add custom icons -->
  <script src="_static/scripts/fontawesome.js?digest=8878045cc6db502f8baf"></script>
  <!-- Pre-loaded scripts that we'll load fully later -->
  <link rel="preload" as="script" href="_static/scripts/bootstrap.js?digest=8878045cc6db502f8baf" />
<link rel="preload" as="script" href="_static/scripts/pydata-sphinx-theme.js?digest=8878045cc6db502f8baf" />

    <script src="_static/documentation_options.js?v=acc74ff5"></script>
    <script src="_static/doctools.js?v=9bcbadda"></script>
    <script src="_static/sphinx_highlight.js?v=dc90522c"></script>
    <script src="_static/clipboard.min.js?v=a7894cd8"></script>
    <script src="_static/copybutton.js?v=f281be69"></script>
    <script>DOCUMENTATION_OPTIONS.pagename = 'base_components';</script>
    <link rel="icon" href="_static/EdificePyramid.ico"/>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="edifice.QtWidgetElement" href="stubs/edifice.QtWidgetElement.html" />
    <link rel="prev" title="edifice.child_place" href="stubs/edifice.child_place.html" />
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="docsearch:language" content="en"/>
  <meta name="docsearch:version" content="" />
  </head>
  
  
  <body data-bs-spy="scroll" data-bs-target=".bd-toc-nav" data-offset="180" data-bs-root-margin="0px 0px -60%" data-default-mode="">

  
  <div id="pst-skip-link" class="skip-link d-print-none"><a href="#main-content">Skip to main content</a></div>
  
  <div id="pst-scroll-pixel-helper"></div>
  
  <button type="button" class="btn rounded-pill" id="pst-back-to-top">
    <i class="fa-solid fa-arrow-up"></i>Back to top</button>

  
  <dialog id="pst-search-dialog">
    
<form class="bd-search d-flex align-items-center"
      action="search.html"
      method="get">
  <i class="fa-solid fa-magnifying-glass"></i>
  <input type="search"
         class="form-control"
         name="q"
         placeholder="Search the docs ..."
         aria-label="Search the docs ..."
         autocomplete="off"
         autocorrect="off"
         autocapitalize="off"
         spellcheck="false"/>
  <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span>
</form>
  </dialog>

  <div class="pst-async-banner-revealer d-none">
  <aside id="bd-header-version-warning" class="d-none d-print-none" aria-label="Version warning"></aside>
</div>

  
    <header class="bd-header navbar navbar-expand-lg bd-navbar d-print-none">
<div class="bd-header__inner bd-page-width">
  <button class="pst-navbar-icon sidebar-toggle primary-toggle" aria-label="Site navigation">
    <span class="fa-solid fa-bars"></span>
  </button>
  
  
  <div class="col-lg-3 navbar-header-items__start">
    
      <div class="navbar-item">

  
<a class="navbar-brand logo" href="index.html">
  
  
    <img src="_static/EdificePyramid.svg" class="logo__image only-light" alt="Edifice 3.0.0 documentation - Home"/>
    <img src="_static/EdificePyramid.svg" class="logo__image only-dark pst-js-only" alt="Edifice 3.0.0 documentation - Home"/>
  
  
</a></div>
    
  </div>
  
  <div class="col-lg-9 navbar-header-items">
    
    <div class="me-auto navbar-header-items__center">
      
        <div class="navbar-item">
<nav>
  <ul class="bd-navbar-elements navbar-nav">
    
<li class="nav-item ">
  <a class="nav-link nav-internal" href="tutorial.html">
    Tutorial
  </a>
</li>


<li class="nav-item ">
  <a class="nav-link nav-internal" href="examples.html">
    Examples
  </a>
</li>


<li class="nav-item current active">
  <a class="nav-link nav-internal" href="api.html">
    API
  </a>
</li>


<li class="nav-item ">
  <a class="nav-link nav-internal" href="developer_tools.html">
    Developer Tools
  </a>
</li>


<li class="nav-item ">
  <a class="nav-link nav-internal" href="versions.html">
    Release Notes
  </a>
</li>

  </ul>
</nav></div>
      
    </div>
    
    
    <div class="navbar-header-items__end">
      
        <div class="navbar-item navbar-persistent--container">
          

<button class="btn search-button-field search-button__button pst-js-only" title="Search" aria-label="Search" data-bs-placement="bottom" data-bs-toggle="tooltip">
 <i class="fa-solid fa-magnifying-glass"></i>
 <span class="search-button__default-text">Search</span>
 <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
</button>
        </div>
      
      
        <div class="navbar-item">

<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" aria-label="Color mode" data-bs-title="Color mode"  data-bs-placement="bottom" data-bs-toggle="tooltip">
  <i class="theme-switch fa-solid fa-sun                fa-lg" data-mode="light" title="Light"></i>
  <i class="theme-switch fa-solid fa-moon               fa-lg" data-mode="dark"  title="Dark"></i>
  <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"  title="System Settings"></i>
</button></div>
      
        <div class="navbar-item"><ul class="navbar-icon-links"
    aria-label="Icon Links">
        <li class="nav-item">
          
          
          <a href="https://github.com/pyedifice/pyedifice" title="GitHub" class="nav-link pst-navbar-icon" rel="noopener" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="fa-brands fa-github fa-lg" aria-hidden="true"></i>
            <span class="sr-only">GitHub</span></a>
        </li>
</ul></div>
      
    </div>
    
  </div>
  
  
    <div class="navbar-persistent--mobile">

<button class="btn search-button-field search-button__button pst-js-only" title="Search" aria-label="Search" data-bs-placement="bottom" data-bs-toggle="tooltip">
 <i class="fa-solid fa-magnifying-glass"></i>
 <span class="search-button__default-text">Search</span>
 <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
</button>
    </div>
  

    <button class="pst-navbar-icon sidebar-toggle secondary-toggle" aria-label="On this page">
      <span class="fa-solid fa-outdent"></span>
    </button>
  
</div>

    </header>
  

  <div class="bd-container">
    <div class="bd-container__inner bd-page-width">
      
      
      <dialog id="pst-primary-sidebar-modal"></dialog>
      <div id="pst-primary-sidebar" class="bd-sidebar-primary bd-sidebar hide-on-wide">
        

  <div class="sidebar-header-items sidebar-primary__section">
    
    
      <div class="sidebar-header-items__center">
        
          
            <div class="navbar-item">
<nav>
  <ul class="bd-navbar-elements navbar-nav">
    
<li class="nav-item ">
  <a class="nav-link nav-internal" href="tutorial.html">
    Tutorial
  </a>
</li>


<li class="nav-item ">
  <a class="nav-link nav-internal" href="examples.html">
    Examples
  </a>
</li>


<li class="nav-item current active">
  <a class="nav-link nav-internal" href="api.html">
    API
  </a>
</li>


<li class="nav-item ">
  <a class="nav-link nav-internal" href="developer_tools.html">
    Developer Tools
  </a>
</li>


<li class="nav-item ">
  <a class="nav-link nav-internal" href="versions.html">
    Release Notes
  </a>
</li>

  </ul>
</nav></div>
          
        
      </div>
    
    
      <div class="sidebar-header-items__end">
        
          <div class="navbar-item">

<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" aria-label="Color mode" data-bs-title="Color mode"  data-bs-placement="bottom" data-bs-toggle="tooltip">
  <i class="theme-switch fa-solid fa-sun                fa-lg" data-mode="light" title="Light"></i>
  <i class="theme-switch fa-solid fa-moon               fa-lg" data-mode="dark"  title="Dark"></i>
  <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"  title="System Settings"></i>
</button></div>
        
          <div class="navbar-item"><ul class="navbar-icon-links"
    aria-label="Icon Links">
        <li class="nav-item">
          
          
          <a href="https://github.com/pyedifice/pyedifice" title="GitHub" class="nav-link pst-navbar-icon" rel="noopener" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="fa-brands fa-github fa-lg" aria-hidden="true"></i>
            <span class="sr-only">GitHub</span></a>
        </li>
</ul></div>
        
      </div>
    
  </div>
  
  
  <div class="sidebar-primary-items__end sidebar-primary__section">
      <div class="sidebar-primary-item">
<div id="ethical-ad-placement"
      class="flat"
      data-ea-publisher="readthedocs"
      data-ea-type="readthedocs-sidebar"
      data-ea-manual="true">
</div></div>
  </div>


      </div>
      
      <main id="main-content" class="bd-main" role="main">
        
        
          <div class="bd-content">
            <div class="bd-article-container">
              
              <div class="bd-header-article d-print-none">
<div class="header-article-items header-article__inner">
  
    <div class="header-article-items__start">
      
        <div class="header-article-item">

<nav aria-label="Breadcrumb" class="d-print-none">
  <ul class="bd-breadcrumbs">
    
    <li class="breadcrumb-item breadcrumb-home">
      <a href="index.html" class="nav-link" aria-label="Home">
        <i class="fa-solid fa-home"></i>
      </a>
    </li>
    
    <li class="breadcrumb-item"><a href="api.html" class="nav-link">API</a></li>
    
    <li class="breadcrumb-item active" aria-current="page"><span class="ellipsis">Base Elements</span></li>
  </ul>
</nav>
</div>
      
    </div>
  
  
</div>
</div>
              
              
<div id="searchbox"></div>
                <article class="bd-article">
                  
  <section id="module-edifice.base_components">
<span id="base-elements"></span><h1>Base Elements<a class="headerlink" href="#module-edifice.base_components" title="Link to this heading">#</a></h1>
<p>Base Elements are the building blocks for an Edifice application.</p>
<p>Each Base Element manages an underlying
<a class="reference external" href="https://doc.qt.io/qtforpython-6/PySide6/QtWidgets/QWidget.html">QWidget</a>.</p>
<p>All Base Elements in this module inherit from <a class="reference internal" href="stubs/edifice.QtWidgetElement.html#edifice.QtWidgetElement" title="edifice.QtWidgetElement"><code class="xref py py-class docutils literal notranslate"><span class="pre">QtWidgetElement</span></code></a>
and its props.
This means that all Base Elements can be made to respond to clicks by passing
a handler function to the <code class="code docutils literal notranslate"><span class="pre">on_click</span></code> prop. All Base Elements are
stylable using the <code class="code docutils literal notranslate"><span class="pre">style</span></code> prop, see <a class="reference internal" href="styling.html"><span class="doc">Styling</span></a>.</p>
<div class="pst-scrollable-table-container"><table class="autosummary longtable table autosummary">
<tbody>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.QtWidgetElement.html#edifice.QtWidgetElement" title="edifice.QtWidgetElement"><code class="xref py py-obj docutils literal notranslate"><span class="pre">QtWidgetElement</span></code></a>([style, tool_tip, cursor, ...])</p></td>
<td><p>Base Qt Widget Element.</p></td>
</tr>
</tbody>
</table>
</div>
<p>Base Elements can roughly be divided into Root Elements, Layout Elements,
and Content Elements.</p>
<section id="root-base-elements">
<h2>Root Base Elements<a class="headerlink" href="#root-base-elements" title="Link to this heading">#</a></h2>
<p>The root parent Element of every Edifice application is a <a class="reference internal" href="stubs/edifice.Window.html#edifice.Window" title="edifice.Window"><code class="xref py py-class docutils literal notranslate"><span class="pre">Window</span></code></a>.</p>
<p>Or an <a class="reference internal" href="stubs/edifice.ExportList.html#edifice.ExportList" title="edifice.ExportList"><code class="xref py py-class docutils literal notranslate"><span class="pre">ExportList</span></code></a> for exporting components to
a normal PySide6/PyQt6 app.</p>
<div class="pst-scrollable-table-container"><table class="autosummary longtable table autosummary">
<tbody>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.Window.html#edifice.Window" title="edifice.Window"><code class="xref py py-obj docutils literal notranslate"><span class="pre">Window</span></code></a>([title, icon, menu, _on_open, ...])</p></td>
<td><p>The root <code class="xref py py-class docutils literal notranslate"><span class="pre">View</span></code> element of an <a class="reference internal" href="stubs/edifice.App.html#edifice.App" title="edifice.App"><code class="xref py py-class docutils literal notranslate"><span class="pre">App</span></code></a> which runs in an operating system window.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.ExportList.html#edifice.ExportList" title="edifice.ExportList"><code class="xref py py-obj docutils literal notranslate"><span class="pre">ExportList</span></code></a>()</p></td>
<td><p>The root element for an App which does <a class="reference internal" href="stubs/stubs/edifice.App.export_widgets.html#edifice.App.export_widgets" title="edifice.App.export_widgets"><code class="xref py py-func docutils literal notranslate"><span class="pre">App.export_widgets()</span></code></a>.</p></td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="layout-base-elements">
<h2>Layout Base Elements<a class="headerlink" href="#layout-base-elements" title="Link to this heading">#</a></h2>
<p>Each Layout Base Element manages an underlying
<a class="reference external" href="https://doc.qt.io/qtforpython-6/PySide6/QtWidgets/QLayout.html">QLayout</a>,
and can have children (like the <code class="code docutils literal notranslate"><span class="pre">&lt;div&gt;</span></code> HTML tag).</p>
<p>To render a Layout Base Element, always use the <code class="code docutils literal notranslate"><span class="pre">with</span></code> statement
and indent the element’s children:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="k">with</span> <span class="n">VBoxView</span><span class="p">():</span>
    <span class="k">with</span> <span class="n">HBoxView</span><span class="p">():</span>
        <span class="n">Label</span><span class="p">(</span><span class="s2">&quot;Hello&quot;</span><span class="p">)</span>
        <span class="n">Label</span><span class="p">(</span><span class="s2">&quot;World&quot;</span><span class="p">)</span>
</pre></div>
</div>
<p>All of the Layout Base Elements have the name suffix <code class="code docutils literal notranslate"><span class="pre">View</span></code>.</p>
<div class="pst-scrollable-table-container"><table class="autosummary longtable table autosummary">
<tbody>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.VBoxView.html#edifice.VBoxView" title="edifice.VBoxView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">VBoxView</span></code></a>(**kwargs)</p></td>
<td><p>Vertical column layout view for child elements.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.HBoxView.html#edifice.HBoxView" title="edifice.HBoxView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">HBoxView</span></code></a>(**kwargs)</p></td>
<td><p>Horizontal row layout view for child elements.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.FixView.html#edifice.FixView" title="edifice.FixView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">FixView</span></code></a>(**kwargs)</p></td>
<td><p>View layout for child widgets with fixed position.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.VScrollView.html#edifice.VScrollView" title="edifice.VScrollView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">VScrollView</span></code></a>(**kwargs)</p></td>
<td><p>Scrollable vertical column layout.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.HScrollView.html#edifice.HScrollView" title="edifice.HScrollView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">HScrollView</span></code></a>(**kwargs)</p></td>
<td><p>Scrollable horizontal row layout widget.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.FixScrollView.html#edifice.FixScrollView" title="edifice.FixScrollView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">FixScrollView</span></code></a>(**kwargs)</p></td>
<td><p>Scrollable layout widget for child widgets with fixed position.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.TabView.html#edifice.TabView" title="edifice.TabView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">TabView</span></code></a>([labels])</p></td>
<td><p>Layout widget with multiple tabs.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.GridView.html#edifice.GridView" title="edifice.GridView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">GridView</span></code></a>([layout, key_to_code])</p></td>
<td><p>Grid layout widget for rendering children on a 2D rectangular grid.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.TableGridView.html#edifice.TableGridView" title="edifice.TableGridView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">TableGridView</span></code></a>([row_stretch, column_stretch, ...])</p></td>
<td><p>Table-style grid layout displays its children as aligned rows of columns.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.TableGridRow.html#edifice.TableGridRow" title="edifice.TableGridRow"><code class="xref py py-obj docutils literal notranslate"><span class="pre">TableGridRow</span></code></a>()</p></td>
<td><p>Row Element of a <a class="reference internal" href="stubs/edifice.TableGridView.html#edifice.TableGridView" title="edifice.TableGridView"><code class="xref py py-class docutils literal notranslate"><span class="pre">TableGridView</span></code></a>.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.FlowView.html#edifice.FlowView" title="edifice.FlowView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">FlowView</span></code></a>(**kwargs)</p></td>
<td><p>Flow-style layout.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.WindowPopView.html#edifice.WindowPopView" title="edifice.WindowPopView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">WindowPopView</span></code></a>([title, icon, on_close, ...])</p></td>
<td><p>Pop-up Window layout.</p></td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="content-base-elements">
<h2>Content Base Elements<a class="headerlink" href="#content-base-elements" title="Link to this heading">#</a></h2>
<p>Content Base Elements render a single Qt Widget and mostly do not have children.</p>
<div class="pst-scrollable-table-container"><table class="autosummary longtable table autosummary">
<tbody>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.Button.html#edifice.Button" title="edifice.Button"><code class="xref py py-obj docutils literal notranslate"><span class="pre">Button</span></code></a>([title])</p></td>
<td><p>Basic button widget.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.ButtonView.html#edifice.ButtonView" title="edifice.ButtonView"><code class="xref py py-obj docutils literal notranslate"><span class="pre">ButtonView</span></code></a>([on_trigger])</p></td>
<td><p>Button with child layout.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.CheckBox.html#edifice.CheckBox" title="edifice.CheckBox"><code class="xref py py-obj docutils literal notranslate"><span class="pre">CheckBox</span></code></a>([checked, text, on_change])</p></td>
<td><p>Checkbox widget.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.Dropdown.html#edifice.Dropdown" title="edifice.Dropdown"><code class="xref py py-obj docutils literal notranslate"><span class="pre">Dropdown</span></code></a>([selection, options, on_select, ...])</p></td>
<td><p>Dropdown selection widget.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.Image.html#edifice.Image" title="edifice.Image"><code class="xref py py-obj docutils literal notranslate"><span class="pre">Image</span></code></a>(src[, aspect_ratio_mode])</p></td>
<td><p>Render an image.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.ImageSvg.html#edifice.ImageSvg" title="edifice.ImageSvg"><code class="xref py py-obj docutils literal notranslate"><span class="pre">ImageSvg</span></code></a>(src, **kwargs)</p></td>
<td><p>Render an SVG image.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.Icon.html#edifice.Icon" title="edifice.Icon"><code class="xref py py-obj docutils literal notranslate"><span class="pre">Icon</span></code></a>(name[, size, collection, ...])</p></td>
<td><p>Display an Icon.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.IconButton.html#edifice.IconButton" title="edifice.IconButton"><code class="xref py py-obj docutils literal notranslate"><span class="pre">IconButton</span></code></a>(name[, size, collection, ...])</p></td>
<td><p>Display an Icon Button.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.Label.html#edifice.Label" title="edifice.Label"><code class="xref py py-obj docutils literal notranslate"><span class="pre">Label</span></code></a>([text, selectable, word_wrap, ...])</p></td>
<td><p>Text display widget.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.ProgressBar.html#edifice.ProgressBar" title="edifice.ProgressBar"><code class="xref py py-obj docutils literal notranslate"><span class="pre">ProgressBar</span></code></a>(value[, min_value, max_value, ...])</p></td>
<td><p>Progress bar widget.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.RadioButton.html#edifice.RadioButton" title="edifice.RadioButton"><code class="xref py py-obj docutils literal notranslate"><span class="pre">RadioButton</span></code></a>([checked, text, on_change])</p></td>
<td><p>Radio buttons.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.ScrollBar.html#edifice.ScrollBar" title="edifice.ScrollBar"><code class="xref py py-obj docutils literal notranslate"><span class="pre">ScrollBar</span></code></a>([value, minimum, maximum, ...])</p></td>
<td><p>Scroll bar widget.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.Slider.html#edifice.Slider" title="edifice.Slider"><code class="xref py py-obj docutils literal notranslate"><span class="pre">Slider</span></code></a>(value[, min_value, max_value, ...])</p></td>
<td><p>Slider bar widget.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.SpinInput.html#edifice.SpinInput" title="edifice.SpinInput"><code class="xref py py-obj docutils literal notranslate"><span class="pre">SpinInput</span></code></a>([value, min_value, max_value, ...])</p></td>
<td><p>Widget for a <code class="code docutils literal notranslate"><span class="pre">int</span></code> input value with up/down buttons.</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.TextInput.html#edifice.TextInput" title="edifice.TextInput"><code class="xref py py-obj docutils literal notranslate"><span class="pre">TextInput</span></code></a>([text, placeholder_text, ...])</p></td>
<td><p>One line text input widget.</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="stubs/edifice.TextInputMultiline.html#edifice.TextInputMultiline" title="edifice.TextInputMultiline"><code class="xref py py-obj docutils literal notranslate"><span class="pre">TextInputMultiline</span></code></a>([text, placeholder_text, ...])</p></td>
<td><p>Multiline text input widget.</p></td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="events">
<h2>Events<a class="headerlink" href="#events" title="Link to this heading">#</a></h2>
<p>Each user interaction with a Base Element generates events, and you can specify
how to handle the event by providing a handler function.</p>
<p>These handlers are passed into the Base Element as <strong>props</strong>, for example
the <code class="code docutils literal notranslate"><span class="pre">on_click</span></code> <strong>prop</strong> of <a class="reference internal" href="stubs/edifice.QtWidgetElement.html#edifice.QtWidgetElement" title="edifice.QtWidgetElement"><code class="xref py py-class docutils literal notranslate"><span class="pre">QtWidgetElement</span></code></a>,
or the <code class="code docutils literal notranslate"><span class="pre">on_change</span></code> <strong>prop</strong> for checkboxes, radio buttons, sliders,
and text input.
When the event occurs the handler function will be called with an argument
describing the event.</p>
<p>Usually, what you want to do in an event handler is to update some
state with a <a class="reference internal" href="stubs/edifice.use_state.html#edifice.use_state" title="edifice.use_state"><code class="xref py py-func docutils literal notranslate"><span class="pre">use_state()</span></code></a> <strong>setter function</strong>.</p>
<section id="async-event-handlers">
<h3>Async Event Handlers<a class="headerlink" href="#async-event-handlers" title="Link to this heading">#</a></h3>
<p>These event handlers run in the main event loop.
A lengthy operation will block the application from interacting with the user,
which is generally a bad user experience.</p>
<p>Consider this code.</p>
<div class="literal-block-wrapper docutils container" id="id1">
<div class="code-block-caption"><span class="caption-text">Blocking Event Handler</span><a class="headerlink" href="#id1" title="Link to this code">#</a></div>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="nd">@component</span>
<span class="k">def</span> <span class="nf">MyComponent</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>

    <span class="n">results</span><span class="p">,</span> <span class="n">set_results</span> <span class="o">=</span> <span class="n">use_state</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">)</span>

    <span class="k">def</span> <span class="nf">on_click</span><span class="p">(</span><span class="n">event</span><span class="p">:</span><span class="n">QMouseEvent</span><span class="p">):</span>
        <span class="n">r</span> <span class="o">=</span> <span class="n">fetch_from_network</span><span class="p">()</span>
        <span class="n">set_results</span><span class="p">(</span><span class="n">r</span><span class="p">)</span>

    <span class="k">with</span> <span class="n">VBoxView</span><span class="p">():</span>
        <span class="n">Button</span><span class="p">(</span><span class="s2">&quot;Fetch&quot;</span><span class="p">,</span> <span class="n">on_click</span><span class="o">=</span><span class="n">on_click</span><span class="p">)</span>
        <span class="k">if</span> <span class="n">results</span><span class="p">:</span>
            <span class="n">Label</span><span class="p">(</span><span class="n">results</span><span class="p">)</span>
</pre></div>
</div>
</div>
<p>When the Fetch button is clicked, the event handler will call a <code class="code docutils literal notranslate"><span class="pre">fetch_from_network</span></code> function,
blocking the application for an unbounded length of time.
If the user clicks the increment button while waiting for the fetch then nothing will happen.</p>
<p>Use the <a class="reference internal" href="stubs/edifice.use_async_call.html#edifice.use_async_call" title="edifice.use_async_call"><code class="xref py py-func docutils literal notranslate"><span class="pre">use_async_call</span></code></a> Hook for an asynchronous event handler
which will cancel automatically when <code class="code docutils literal notranslate"><span class="pre">MyComponent</span></code> is unmounted, or
when the Fetch button is pressed again.</p>
<div class="literal-block-wrapper docutils container" id="id2">
<div class="code-block-caption"><span class="caption-text">Async Event Handler</span><a class="headerlink" href="#id2" title="Link to this code">#</a></div>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="nd">@component</span>
<span class="k">def</span> <span class="nf">MyComponent</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>

    <span class="n">results</span><span class="p">,</span> <span class="n">set_results</span> <span class="o">=</span> <span class="n">use_state</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">)</span>
    <span class="n">loading</span><span class="p">,</span> <span class="n">set_loading</span> <span class="o">=</span> <span class="n">use_state</span><span class="p">(</span><span class="kc">False</span><span class="p">)</span>

    <span class="k">async</span> <span class="k">def</span> <span class="nf">on_click</span><span class="p">(</span><span class="n">event</span><span class="p">:</span><span class="n">QMouseEvent</span><span class="p">):</span>
        <span class="n">set_loading</span><span class="p">(</span><span class="kc">True</span><span class="p">)</span>
        <span class="n">r</span> <span class="o">=</span> <span class="k">await</span> <span class="n">fetch_from_network</span><span class="p">()</span>
        <span class="n">set_results</span><span class="p">(</span><span class="n">r</span><span class="p">)</span>
        <span class="n">set_loading</span><span class="p">(</span><span class="kc">False</span><span class="p">)</span>

    <span class="n">on_click_handler</span><span class="p">,</span> <span class="n">cancel_click_handler</span> <span class="o">=</span> <span class="n">use_async_call</span><span class="p">(</span><span class="n">on_click</span><span class="p">)</span>

    <span class="k">with</span> <span class="n">VBoxView</span><span class="p">():</span>
        <span class="n">Button</span><span class="p">(</span><span class="s2">&quot;Fetch&quot;</span><span class="p">,</span> <span class="n">on_click</span><span class="o">=</span><span class="n">on_click_handler</span><span class="p">)</span>
        <span class="k">if</span> <span class="n">loading</span><span class="p">:</span>
            <span class="n">Label</span><span class="p">(</span><span class="s2">&quot;Fetching...&quot;</span><span class="p">)</span>
        <span class="k">elif</span> <span class="n">results</span><span class="p">:</span>
            <span class="n">Label</span><span class="p">(</span><span class="n">results</span><span class="p">)</span>
</pre></div>
</div>
</div>
</section>
</section>
<section id="custom-base-elements">
<span id="custom-widget"></span><h2>Custom Base Elements<a class="headerlink" href="#custom-base-elements" title="Link to this heading">#</a></h2>
<p>Not all QtWidgets are supported by Edifice.
Edifice provides <a class="reference internal" href="stubs/edifice.CustomWidget.html#edifice.CustomWidget" title="edifice.CustomWidget"><code class="xref py py-class docutils literal notranslate"><span class="pre">CustomWidget</span></code></a> to allow you to bind arbitrary
QtWidgets to an Edifice Element.</p>
<div class="pst-scrollable-table-container"><table class="autosummary longtable table autosummary">
<tbody>
<tr class="row-odd"><td><p><a class="reference internal" href="stubs/edifice.CustomWidget.html#edifice.CustomWidget" title="edifice.CustomWidget"><code class="xref py py-obj docutils literal notranslate"><span class="pre">CustomWidget</span></code></a>(*args, **kwargs)</p></td>
<td><p>Custom widgets that you can define.</p></td>
</tr>
</tbody>
</table>
</div>
</section>
</section>


                </article>
              
              
                <footer class="prev-next-footer d-print-none">
                  
<div class="prev-next-area">
    <a class="left-prev"
       href="stubs/edifice.child_place.html"
       title="previous page">
      <i class="fa-solid fa-angle-left"></i>
      <div class="prev-next-info">
        <p class="prev-next-subtitle">previous</p>
        <p class="prev-next-title">edifice.child_place</p>
      </div>
    </a>
    <a class="right-next"
       href="stubs/edifice.QtWidgetElement.html"
       title="next page">
      <div class="prev-next-info">
        <p class="prev-next-subtitle">next</p>
        <p class="prev-next-title">edifice.QtWidgetElement</p>
      </div>
      <i class="fa-solid fa-angle-right"></i>
    </a>
</div>
                </footer>
              
            </div>
            
            
                <dialog id="pst-secondary-sidebar-modal"></dialog>
                <div id="pst-secondary-sidebar" class="bd-sidebar-secondary bd-toc"><div class="sidebar-secondary-items sidebar-secondary__inner">


  <div class="sidebar-secondary-item">
<div
    id="pst-page-navigation-heading-2"
    class="page-toc tocsection onthispage">
    <i class="fa-solid fa-list"></i> On this page
  </div>
  <nav class="bd-toc-nav page-toc" aria-labelledby="pst-page-navigation-heading-2">
    <ul class="visible nav section-nav flex-column">
<li class="toc-h2 nav-item toc-entry"><a class="reference internal nav-link" href="#root-base-elements">Root Base Elements</a></li>
<li class="toc-h2 nav-item toc-entry"><a class="reference internal nav-link" href="#layout-base-elements">Layout Base Elements</a></li>
<li class="toc-h2 nav-item toc-entry"><a class="reference internal nav-link" href="#content-base-elements">Content Base Elements</a></li>
<li class="toc-h2 nav-item toc-entry"><a class="reference internal nav-link" href="#events">Events</a><ul class="nav section-nav flex-column">
<li class="toc-h3 nav-item toc-entry"><a class="reference internal nav-link" href="#async-event-handlers">Async Event Handlers</a></li>
</ul>
</li>
<li class="toc-h2 nav-item toc-entry"><a class="reference internal nav-link" href="#custom-base-elements">Custom Base Elements</a></li>
</ul>
  </nav></div>

</div></div>
              
            
          </div>
          <footer class="bd-footer-content">
            
          </footer>
        
      </main>
    </div>
  </div>
  
  <!-- Scripts loaded after <body> so the DOM is not blocked -->
  <script defer src="_static/scripts/bootstrap.js?digest=8878045cc6db502f8baf"></script>
<script defer src="_static/scripts/pydata-sphinx-theme.js?digest=8878045cc6db502f8baf"></script>

  <footer class="bd-footer">
<div class="bd-footer__inner bd-page-width">
  
    <div class="footer-items__start">
      
        <div class="footer-item">

  <p class="sphinx-version">
    Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 8.1.3.
    <br/>
  </p>
</div>
      
    </div>
  
  
    <div class="footer-items__end">
      
        <div class="footer-item">
<p class="theme-version">
  <!-- # L10n: Setting the PST URL as an argument as this does not need to be localized -->
  Built with the <a href="https://pydata-sphinx-theme.readthedocs.io/en/stable/index.html">PyData Sphinx Theme</a> 0.16.1.
</p></div>
      
    </div>
  
</div>

  </footer>
  </body>
</html>