tabs

Tabs

This tabs component works without JavaScript by using a combination of anchors, which point to the tabpanels, and CSS, that shows the correct tabpanel using :target. If JavaScript is enabled, the behavior will be enhanced and the anchors will be replaced using buttons. The implementation is roughly based on this Example of Tabs with Automative Activation on w3.org.

Information

Folder
src/components/patterns/tabs

Files

Schema 
// src/components/patterns/tabs/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/tabs
additionalProperties: false
type: object
required:
  - tabs
  - content
properties:
  heading:
    type: string
    format: html
    description: patterns/heading
  is_interactive:
    $ref: /patterns/tabs/tabs-list#/properties/is_interactive
  tabs:
    $ref: /patterns/tabs/tabs-list#/properties/tabs
  content:
    type: array
    items:
      type: object
      additionalProperties: false
      required:
        - content
        - id
      properties:
        content:
          type: string
          format: html
          description: patterns/*
        id:
          type: string
        is_selected:
          type: boolean
Mocks 
// src/components/patterns/tabs/mocks.yaml

$ref: patterns/tabs/tabs-list#interactive
content:
  - content:
      $tpl: patterns/rich-text
      content: >-
        <p><b>This is tab 1.</b> Aliquip quis culpa consequat officia officia
        esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam
        aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat
        anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut
        consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur
        irure et.</p><p>Eu reprehenderit ad aliqua do aliqua dolore amet sunt
        excepteur ut ut deserunt aliquip consequat. Velit minim do officia
        proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa
        esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit
        eiusmod minim sint proident. Veniam laboris et nisi proident occaecat
        ipsum.</p>
    id: tab-1
    is_selected: true
  - content:
      $tpl: patterns/rich-text
      content: >-
        <p><b>This is tab 2.</b> Aliquip quis culpa consequat officia officia
        esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam
        aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat
        anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut
        consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur
        irure et.</p>
    id: tab-2
  - content:
      $tpl: patterns/rich-text
      content: >-
        <p><b>This is tab 3.</b> Aliquip quis culpa consequat officia officia
        esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam
        aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat
        anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut
        consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur
        irure et.</p><p>Eu reprehenderit ad aliqua do aliqua dolore amet sunt
        excepteur ut ut deserunt aliquip consequat. Velit minim do officia
        proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa
        esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit
        eiusmod minim sint proident. Veniam laboris et nisi proident occaecat
        ipsum.</p>
    id: tab-3
$variants:
  - $name: With heading
    heading:
      $tpl: patterns/heading
      $ref: patterns/heading#h2
      heading: Tabs
Template 
// src/components/patterns/tabs/tabs.twig

<div class="Tabs js-Tabs" data-js="false">
	{% if heading %}
		<div class="Tabs-heading">
			{{ heading }}
		</div>
	{% endif %}
	{% include "@patterns/tabs/tabs-list/tabs-list.twig" with {
		is_interactive: is_interactive,
		tabs: tabs,
	} only %}
	<div class="Tabs-tabpanels">
		{% for item in content %}
			<div class="Tabs-tabpanel" role="tabpanel" tabindex="0" id="{{ item.id }}" aria-labelledby="{{ item.id }}"{% if not item.is_selected %} hidden{% endif %}>
				{{ item.content|raw }}
			</div>
		{% endfor %}
	</div>
</div>

Variants

default
Open

This is tab 1. Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

With heading
Open

Tabs

This is tab 1. Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.