a12s-1.0.0-beta7/modules/patterns/templates/patterns/tabs/tabs.ui_patterns.yml

tabs:
  label: Tabs
  description: >
    Implementation of tabs pattern, following the specifications in
    https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  fields:
    tabs:
      type: array
      label: Tabs
      preview:
        -
          label: Tab 1
          content: >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ante vestibulum, aliquet purus non,
            eleifend mauris. Donec vel odio non felis lobortis interdum eu a mauris.
        -
          label: Tab 2
          content: >
            Aenean ornare, nisl nec tincidunt lobortis, lacus enim facilisis orci, nec eleifend lorem orci quis ex. Orci
            varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        - label: Tab 3
          content: >
            Proin tincidunt, neque a fermentum luctus, est risus porttitor urna, et posuere dolor nisi non nunc. Nulla
            mollis pharetra varius. Aenean id lacinia elit. Sed fringilla felis ac elit finibus sodales.
    active_tab:
      type: int
      label: Active tab
      description: >
        [optional] The index of the active tab. This takes precedence on the active flag which may be defined for a tab.
      preview: 2
    namespace:
      type: string
      label: Tabs namespace
      description: >
        [optional] The namespace is a unique identifier for the group of tabs, and should be unique par page. If not
        provided, a random string is generated as namespace.
      preview: preview
  settings:
    tabs_alignment:
      type: select
      label: Tabs alignment
      description: Defines the alignment of the tabs.
      options:
        tab-start: Start
        tab-center: Center
        tab-end: End
        tab-fill: Fill
      default: tab-start
    no_gap:
      type: boolean
      label: No gap between tabs
      description: Remove the gap between the tab headers.
      default: 0
    underlined:
      type: boolean
      label: Underlined header
      description: Add a line under the tab headers.
      default: 0
    bordered:
      type: boolean
      label: Borders
      description: Add a border around the tab headers and panels.
      default: 1
    shadowed:
      type: boolean
      label: Shadow
      description: Add a shadow under the tab panels.
      default: 1
    fade:
      type: boolean
      label: Fade
      description: Use a fade effect when switching tab.
      default: 0

  libraries:
    - a12s_theme_builder/disclosure-tabs
    - tabs:
        css:
          component:
            css/tabs.css: { }