本文へスキップ
QuickGUI

Tabs

ラベル付きパネルを切り替え、キーボードによる自動または手動のアクティブ化に対応します。

デモを読み込み中…

#インポート

quickgui から Tabs をインポートします。

use quickgui::*;

#使い方

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

#構成

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

#API リファレンス

項目を展開すると説明と完全なシグネチャが表示されます。ダッシュは宣言に既定値が記載されていないことを示します。

Tabs

ソースを見る
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
ソースを見る
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
ソースを見る
orientationpub const fn orientation(mut self, orientation: TabsOrientation) -> Self—

Configures orientation for this part.

pub const fn orientation(mut self, orientation: TabsOrientation) -> Self
ソースを見る
verticalpub const fn vertical(self) -> Self—

Configures vertical for this part.

pub const fn vertical(self) -> Self
ソースを見る
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
ソースを見る
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
ソースを見る
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
ソースを見る
root_idpub const fn root_id(self) -> ElementId—

Configures root id for this part.

pub const fn root_id(self) -> ElementId
ソースを見る
list_idpub fn list_id(self) -> ElementId—

Configures list id for this part.

pub fn list_id(self) -> ElementId
ソースを見る
active_valuepub const fn active_value(self) -> Option<ElementId>—

Configures active value for this part.

pub const fn active_value(self) -> Option<ElementId>
ソースを見る
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
ソースを見る
loops_focuspub const fn loops_focus(self) -> bool—

Configures loops focus for this part.

pub const fn loops_focus(self) -> bool
ソースを見る
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
ソースを見る
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
ソースを見る
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
ソースを見る
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>
ソースを見る
tabpub fn tab(self, value: impl Into<ElementId>) -> Tab—

Configures tab for this part.

pub fn tab(self, value: impl Into<ElementId>) -> Tab
ソースを見る

Tabs::root_with

ソースを見る
pub fn root_with(self, root: Element) -> Element

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

Tabs::root

ソースを見る
pub fn root(self) -> Element

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

Tabs::list_with

ソースを見る
pub fn list_with(self, list: Element) -> Element

Decorate an application-owned tab-list root.

Tabs::list

ソースを見る
pub fn list(self) -> Element

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