Pane Tabs

verb target forms description sources

tab

a block element in place

tabs

Determine which block in tabset to show in pane.

js/tabber.js

The act of using local tabs to swap between “overlapping” panes of content blocks is called “tabbing panes.”

- app: Asciidoctor
  use: THE AsciiDoc markup converter
  url: https://www.asciidoctor.org
  git: https://github.com/asciidoctor/asciidoctor
  vrsn: '2.0'
- app: Jekyll
  use: world-class static-site generator (SSG)
  url: https://jekyllrb.com
  git: https://github.com/jekyll/jekyll
  vrsn: '4.0'
[
   {
      "app": "Asciidoctor",
      "use": "THE AsciiDoc markup converter",
      "url": "https://www.asciidoctor.org",
      "git": "https://github.com/asciidoctor/asciidoctor",
      "vrsn": "2.0"
   },
   {
      "app": "Jekyll",
      "use": "world-class static-site generator (SSG)",
      "url": "https://jekyllrb.com",
      "git": "https://github.com/jekyll/jekyll",
      "vrsn": "4.0"
   }
]

Example

Take another look at our example tabset.

- app: Asciidoctor
  use: THE AsciiDoc markup converter
  url: https://www.asciidoctor.org
  git: https://github.com/asciidoctor/asciidoctor
  vrsn: '2.0'
- app: Jekyll
  use: world-class static-site generator (SSG)
  url: https://jekyllrb.com
  git: https://github.com/jekyll/jekyll
  vrsn: '4.0'
[
   {
      "app": "Asciidoctor",
      "use": "THE AsciiDoc markup converter",
      "url": "https://www.asciidoctor.org",
      "git": "https://github.com/asciidoctor/asciidoctor",
      "vrsn": "2.0"
   },
   {
      "app": "Jekyll",
      "use": "world-class static-site generator (SSG)",
      "url": "https://jekyllrb.com",
      "git": "https://github.com/jekyll/jekyll",
      "vrsn": "4.0"
   }
]

Now, to examine the source. You may be surprised to see it is just conventional AsciiDoc.

Source for above tabset
[.tabber-tabset.tabs-data-format-tabber] (1)
--
[source,yaml,role="tabber-pane pane-data-yaml"] (2)
----
include::./example_tabset-source_data.yml[]
----
[source,json,role="tabber-pane pane-data-json"] (3)
----
include::./example_tabset-source_data.json[]
----
--
1 The whole handler must be wrapped in an AsciiDoc open block with the tabber-tabset role (class) assigned. An optional second class names the tabset and can match the name for an optional configuration entry in the version-handlers registry.
2 Inside the open block, we can place any (untested) number of content panes, which can take the form of nearly any block element, such as code listings, example blocks, or tables. They need only be assigned the tabber-pane role (class) and a class that matches pane-<option-slug>. In the case that you have registered an opts block in the optional config for this tabset, the <option-slug> must match the slug for the registered option to make use of its metadata.
Due to a limitation in AsciiDoc, the outer open block cannot include another open block — there is no syntax for it as of Asciidoctor 2. To create a truly transparent content block, try including a table with no borders. The {tab-table-options} attribute is set to: frame=none,cols=1a,caption=''.
3 The second tab’s definition in this case includes an explicit title argument, which overrides the text label assigned in the registry.

Customizations

YAML Data *
- app: Asciidoctor
  use: THE AsciiDoc markup converter
  url: https://www.asciidoctor.org
  git: https://github.com/asciidoctor/asciidoctor
  vrsn: '2.0'
- app: Jekyll
  use: world-class static-site generator (SSG)
  url: https://jekyllrb.com
  git: https://github.com/jekyll/jekyll
  vrsn: '4.0'
[
   {
      "app": "Asciidoctor",
      "use": "THE AsciiDoc markup converter",
      "url": "https://www.asciidoctor.org",
      "git": "https://github.com/asciidoctor/asciidoctor",
      "vrsn": "2.0"
   },
   {
      "app": "Jekyll",
      "use": "world-class static-site generator (SSG)",
      "url": "https://jekyllrb.com",
      "git": "https://github.com/jekyll/jekyll",
      "vrsn": "4.0"
   }
]
XML Data **
<?xml version="1.0" encoding="UTF-8" ?>
<root>
  <row>
    <app>Asciidoctor</app>
    <use>THE AsciiDoc markup converter</use>
    <url>https://www.asciidoctor.org</url>
    <git>https://github.com/asciidoctor/asciidoctor</git>
    <vrsn>2.0</vrsn>
  </row>
  <row>
    <app>Jekyll</app>
    <use>world-class static-site generator (SSG)</use>
    <url>https://jekyllrb.com</url>
    <git>https://github.com/jekyll/jekyll</git>
    <vrsn>4.0</vrsn>
  </row>
</root>

Now, to examine the source. You may be surprised to see it is just conventional AsciiDoc.

Source for above tabset
[.tabber-tabset.tabs-data-format-tabber]
--
[source,yaml,role="tabber-pane pane-data-yaml",title="YAML Data *"] (1)
----
\include::./example_tabset-source_data.yml[] (2)
----
[source,json,role="tabber-pane pane-data-json"]
----
include::./example_tabset-source_data.json[]
----
[source,xml,role="tabber-pane pane-data-xml",title="XML Data **"]
----
include::./example_tabset-source_data.xml[]
----
--
Feedback, please.