.. role:: clio-optional
   :class: clio-flag clio-flag-optional


###########
HoopsLayout
###########

.. js:class:: ui.layout.HoopsLayout

   Provides a slot-based page layout container for HOOPS web components.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-layout floatingPanels>
        <div slot="menu-bar">Menu</div>
        <div slot="central-widget">Viewer</div>
      </hoops-layout>
   
   .. rubric:: Custom Element
   
   
   ``hoops-layout``
   
   .. rubric:: Attributes
   
   
   **floatingPanels**
   
   
      Renders panel slots in floating mode when enabled
   
   
   .. rubric:: Slots
   
   
   **menu-bar**
   
   
      Slot for the top menu bar
   
   
   **status-bar**
   
   
      Slot for the bottom status bar
   
   
   **panel-left**
   
   
      Slot for the left side panel
   
   
   **panel-right**
   
   
      Slot for the right side panel
   
   
   **panel-top**
   
   
      Slot for the top panel
   
   
   **panel-bottom**
   
   
      Slot for the bottom panel
   
   
   **toolbar-left**
   
   
      Slot for the left toolbar
   
   
   **toolbar-right**
   
   
      Slot for the right toolbar
   
   
   **toolbar-top**
   
   
      Slot for the top toolbar
   
   
   **toolbar-bottom**
   
   
      Slot for the bottom toolbar
   
   
   **central-widget**
   
   
      Slot for the central content
   
   
   .. rubric:: CSS Properties
   
   
   **--hoops-layout-width**
   
   
      Width of the layout container
   
   
   **--hoops-layout-height**
   
   
      Height of the layout container
   
   
   .. rubric:: Since
   
   
   ``2025.7.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.layout.HoopsLayout.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.layout.HoopsLayout.slotsShown`
   * :js:data:`~ui.layout.HoopsLayout.floatingPanels`
   
   .. rubric:: Methods
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:meth:`~ui.layout.HoopsLayout.hideSlot`
   * :js:meth:`~ui.layout.HoopsLayout.isSlotVisible`
   * :js:meth:`~ui.layout.HoopsLayout.setSlotVisibility`
   * :js:meth:`~ui.layout.HoopsLayout.showSlot`
   * :js:meth:`~ui.layout.HoopsLayout.toggleSlotVisibility`
   
   



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

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


.. js:method:: ui.layout.HoopsLayout.constructor

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



.. rst-class:: kind-group kind-properties

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


.. js:data:: ui.layout.HoopsLayout.slotsShown

      .. rst-class:: sig-pretty-signature
      
         | slotsShown: *Record*
      



.. js:data:: ui.layout.HoopsLayout.floatingPanels

      .. rst-class:: clio-flags
      
         :clio-optional:`optional`
      
      .. rst-class:: sig-pretty-signature
      
         | floatingPanels: *boolean*
      



.. rst-class:: kind-group kind-methods

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


.. js:method:: ui.layout.HoopsLayout.hideSlot

      .. rst-class:: sig-pretty-signature
      
         | hideSlot(**name**\ : *HoopsLayoutSlotName*\ ): *void*
      
      Hides the specified slot in the Hoops layout.
      
      **Parameters**
      
      
         **name**\ : *HoopsLayoutSlotName*
      
      
            The name of the slot to hide.
      
      
      
      **Returns**\ : *void*
      



.. js:method:: ui.layout.HoopsLayout.isSlotVisible

      .. rst-class:: sig-pretty-signature
      
         | isSlotVisible(**slotName**\ : *HoopsLayoutSlotName*\ ): *boolean*
      
      Determines whether a specific slot is visible.
      
      **Parameters**
      
      
         **slotName**\ : *HoopsLayoutSlotName*
      
      
            The name of the slot to check visibility for.
      
      
      
      **Returns**\ : *boolean*
      
      
      
      - Returns ``true`` if the slot is visible, ``false`` otherwise.
      
      



.. js:method:: ui.layout.HoopsLayout.setSlotVisibility

      .. rst-class:: sig-pretty-signature
      
         | setSlotVisibility(**slotName**\ : *HoopsLayoutSlotName*\ , **shown**\ : *boolean*\ ): *void*
      
      Mutates the visibility state of a slot.
      
      **Parameters**
      
      
         **slotName**\ : *HoopsLayoutSlotName*
      
      
            The name of the slot to mutate.
      
      
         **shown**\ : *boolean*
      
      
            The visibility state to set for the slot.
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: ui.layout.HoopsLayout.showSlot

      .. rst-class:: sig-pretty-signature
      
         | showSlot(**name**\ : *HoopsLayoutSlotName*\ ): *void*
      
      Sets the visibility of a layout slot to be shown.
      
      **Parameters**
      
      
         **name**\ : *HoopsLayoutSlotName*
      
      
            The name of the layout slot.
      
      
      
      **Returns**\ : *void*
      
      
      



.. js:method:: ui.layout.HoopsLayout.toggleSlotVisibility

      .. rst-class:: sig-pretty-signature
      
         | toggleSlotVisibility(**name**\ : *HoopsLayoutSlotName*\ ): *void*
      
      Toggles the visibility of a layout slot.
      
      **Parameters**
      
      
         **name**\ : *HoopsLayoutSlotName*
      
      
            The name of the layout slot to toggle.
      
      
      
      **Returns**\ : *void*
      
      
      




