跳到正文
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.