EidosUI

componentsheadersnavigationtabletabsthemepluginsmarkdownstylestagsutils

eidos.components.tabs

TabContainer(*content: air.tags.models.special.Tag, initial_tab_url: str, class_: str = '', target_id: str = 'tabs', **kwargs: Any) -> air.tags.models.special.Tag

GitHub

HTMX-based tab container that loads tabs dynamically.

Args:

  • initial_tab_url: URL to load the initial tab content
  • cls: Additional classes for the container
  • target_id: ID for the tab container (default: "tabs")

Returns:

Tag: The tab container that will be populated via HTMX

Example:

TabContainer("/settings/general")

Parameters:

  • content: <class 'air.tags.models.special.Tag'>
  • initial_tab_url: <class 'str'>
  • class_: <class 'str'>
  • target_id: <class 'str'> = tabs
  • kwargs: typing.Any

Returns: <class 'air.tags.models.special.Tag'>

TabList(*tabs: tuple[str, str], selected: int = 0, class_: str = '', hx_target: str = '#tabs', hx_swap: Literal['innerHTML', 'outerHTML', 'beforebegin', 'afterbegin', 'beforeend', 'afterend', 'delete', 'none'] = 'innerHTML', **kwargs: Any) -> air.tags.models.special.Tag

GitHub

HTMX-based tab list for server-rendered tabs.

Args:

  • *tabs: Variable number of (label, url) tuples
  • selected: Index of the selected tab (0-based)
  • tab_cls: Additional classes for tab buttons
  • hx_target: HTMX target for tab content (default: "#tabs")
  • hx_swap: HTMX swap method (default: "innerHTML")

Returns:

Tag: The tab list component

Example:

TabList( ("General", "/settings/general"), ("Security", "/settings/security"), ("Advanced", "/settings/advanced"), selected=0 )

Parameters:

  • tabs: tuple[str, str]
  • selected: <class 'int'> = 0
  • class_: <class 'str'>
  • hx_target: <class 'str'> = #tabs
  • hx_swap: typing.Literal['innerHTML', 'outerHTML', 'beforebegin', 'afterbegin', 'beforeend', 'afterend', 'delete', 'none'] = innerHTML
  • kwargs: typing.Any

Returns: <class 'air.tags.models.special.Tag'>

TabPanel(content: air.tags.models.special.Tag, class_: str = '', **kwargs: Any) -> air.tags.models.special.Tag

GitHub

Tab panel content wrapper.

Args:

  • content: The content to display in the tab panel
  • panel_cls: Additional classes for the panel

Returns:

Tag: The tab panel component

Parameters:

  • content: <class 'air.tags.models.special.Tag'>
  • class_: <class 'str'>
  • kwargs: typing.Any

Returns: <class 'air.tags.models.special.Tag'>

Tabs(tab_list: air.tags.models.special.Tag, tab_panel: air.tags.models.special.Tag, cls: str = '', **kwargs: Any) -> air.tags.models.special.Tag

GitHub

Complete tab component with list and panel.

Args:

  • tab_list: The TabList component
  • tab_panel: The TabPanel component
  • cls: Additional classes for the container

Returns:

Tag: The complete tabs component

Example:

# In your route handler: tab_list = TabList( ("General", "/settings/general"), ("Security", "/settings/security"), selected=0 ) tab_panel = TabPanel(general_settings_content) return Tabs(tab_list, tab_panel)

Parameters:

  • tab_list: <class 'air.tags.models.special.Tag'>
  • tab_panel: <class 'air.tags.models.special.Tag'>
  • cls: <class 'str'>
  • kwargs: typing.Any

Returns: <class 'air.tags.models.special.Tag'>