
#######
Toolbar
#######

.. js:class:: ui.toolbar.Toolbar

   A basic vertical toolbar component for stacking buttons and other interactive elements.
   
   This component provides a flexible container with consistent spacing and alignment for toolbar buttons. It automatically arranges child elements vertically with proper gaps and centers them within a fixed-width container.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-toolbar>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
      </hoops-toolbar>
      
      <script>
        const toolbar = document.getElementsByTagName("hoops-toolbar")[0];
        // Toolbar will automatically arrange children vertically
      </script>
   
   .. rubric:: Custom Element
   
   
   ``hoops-toolbar``
   
   .. rubric:: Slots
   
   
   **- Default slot for toolbar buttons and other interactive elements**
   
   .. rubric:: CSS Properties
   
   
   **--hoops-dropdown-gap**
   
   
      Gap spacing for dropdown elements within the toolbar (default: 0.8rem)
   
   
   .. rubric:: Since
   
   
   ``2025.7.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.toolbar.Toolbar.constructor`
   
   



.. rst-class:: kind-group kind-constructors

.. rubric:: Constructors
   :class: kind-group-title


.. js:method:: ui.toolbar.Toolbar.constructor

      .. rst-class:: sig-pretty-signature
      
         | Toolbar(): :js:class:`Toolbar <ui.toolbar.Toolbar>`
      
      **Returns**\ : :js:class:`Toolbar <ui.toolbar.Toolbar>`
      




