Skip to content
QuickGUI

Tabs

Switches between labeled panels with automatic or manual keyboard activation.

Loading interactive demo…

#Import

Import Tabs from quickgui.

use quickgui::*;

#Usage

let tabs = Tabs::new("settings", "general");
tabs.root().flex_col().child(tabs.list().flex_row())

#Anatomy

  • Tabs::root
  • Tabs::list
  • Tabs::tab
  • Tabs::indicator
  • Tabs::panel

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

Tabs

View source
pub fn new(root_id: impl Into<ElementId>, active: impl Into<ElementId>) -> Self
without_selectionpub fn without_selection(root_id: impl Into<ElementId>) -> Self—

Configures without selection for this part.

pub fn without_selection(root_id: impl Into<ElementId>) -> Self
View source
from_statepub fn from_state(root_id: impl Into<ElementId>, state: &TabsState) -> Self—

Configures from state for this part.

pub fn from_state(root_id: impl Into<ElementId>, state: &TabsState) -> Self
View source
orientationpub const fn orientation(mut self, orientation: TabsOrientation) -> Self—

Configures orientation for this part.

pub const fn orientation(mut self, orientation: TabsOrientation) -> Self
View source
verticalpub const fn vertical(self) -> Self—

Configures vertical for this part.

pub const fn vertical(self) -> Self
View source
activate_on_focuspub const fn activate_on_focus(mut self, activate_on_focus: bool) -> Self—

Activate an enabled tab as arrow/Home/End navigation moves focus to it. The default is manual activation: arrows move focus and Enter or Space invokes the tab's ordinary click listener.

pub const fn activate_on_focus(mut self, activate_on_focus: bool) -> Self
View source
loop_focuspub const fn loop_focus(mut self, loop_focus: bool) -> Self—

Configures loop focus for this part.

pub const fn loop_focus(mut self, loop_focus: bool) -> Self
View source
keep_mountedpub const fn keep_mounted(mut self, keep_mounted: bool) -> Self—

Retain inactive panels as `display: none` instead of omitting them from the mounted tree.

pub const fn keep_mounted(mut self, keep_mounted: bool) -> Self
View source
root_idpub const fn root_id(self) -> ElementId—

Configures root id for this part.

pub const fn root_id(self) -> ElementId
View source
list_idpub fn list_id(self) -> ElementId—

Configures list id for this part.

pub fn list_id(self) -> ElementId
View source
active_valuepub const fn active_value(self) -> Option<ElementId>—

Configures active value for this part.

pub const fn active_value(self) -> Option<ElementId>
View source
activates_on_focuspub const fn activates_on_focus(self) -> bool—

Configures activates on focus for this part.

pub const fn activates_on_focus(self) -> bool
View source
loops_focuspub const fn loops_focus(self) -> bool—

Configures loops focus for this part.

pub const fn loops_focus(self) -> bool
View source
keeps_panels_mountedpub const fn keeps_panels_mounted(self) -> bool—

Configures keeps panels mounted for this part.

pub const fn keeps_panels_mounted(self) -> bool
View source
activation_movementpub const fn activation_movement(mut self, movement: TabsActivationMovement) -> Self—

Declare which way the selection travelled, for a descriptor built without a [`TabsState`].

pub const fn activation_movement(mut self, movement: TabsActivationMovement) -> Self
View source
activation_directionpub const fn activation_direction(self) -> TabsActivationDirection—

The side the selection last travelled toward, Base UI's `data-activation-direction`. A horizontal tab list reports `Left` or `Right`, a vertical one `Up` or `Down`, and both report `None` until the application selects through [`TabsState::select_at`].

pub const fn activation_direction(self) -> TabsActivationDirection
View source
indicator_geometrypub fn indicator_geometry( self, handle: &crate::AnchorPlacementHandle, ) -> Option<TabsIndicatorGeometry>—

Read back the active tab's laid-out geometry from a bound indicator handle. Mount the indicator with [`Tab::tracked_indicator_with`] and pass the same handle here on the next frame. The rectangle is the active tab's own, in window logical coordinates, and is `None` until the indicator has been painted once.

pub fn indicator_geometry( self, handle: &crate::AnchorPlacementHandle, ) -> Option<TabsIndicatorGeometry>
View source
tabpub fn tab(self, value: impl Into<ElementId>) -> Tab—

Configures tab for this part.

pub fn tab(self, value: impl Into<ElementId>) -> Tab
View source

Tabs::root_with

View source
pub fn root_with(self, root: Element) -> Element

Decorate an application-owned structural root without adding role or appearance.

Tabs::root

View source
pub fn root(self) -> Element

Create the unstyled root part. Use [`Self::root_with`] to supply an existing element.

Tabs::list_with

View source
pub fn list_with(self, list: Element) -> Element

Decorate an application-owned tab-list root.

Tabs::list

View source
pub fn list(self) -> Element

Create the unstyled list part. Use [`Self::list_with`] to supply an existing element.