In-Line-Tabs


Basic

Create a tab with the tab directive. Consecutive tab directives create a single set of tabs.


 1 This is text before the tabs.
 2
 3 .. tab:: First
 4
 5     First tab text is interesting.
 6
 7 .. tab:: Second
 8
 9     Second tab text is twice as interesting as the first tab.
10
11 .. tab:: Third
12
13     Third  tab is an odd one indeed.
14
15 .. tab:: Fourth
16
17     Fourth is four times better.
18
19 Text directly below the tabs will be visible in all the tabs and
20 does not break the document flow.

See the styling above rendered by Sphinx below.


This is text before the tabs.

First tab text is interesting.

Second tab text is twice as interesting as the first tab.

Third tab is an odd one indeed.

Fourth is four times better.

Text directly below the tabs will be visible in all the tabs and does not break the document flow.


Multiple Tab Sets


It is possible to start a new tab within an existing tab by placing content between sets or providing the :new-set: option to the tab directive.


 1 This is text before the tabs.
 2
 3 .. tab:: First
 4
 5     First tab text is interesting.
 6
 7 .. tab:: Second
 8
 9     Second tab text is  twice as interesting as the first tab.
10
11 .. tab:: Third
12
13     Third  tab is an odd one indeed.
14 .. tab:: Fourth
15
16         Fourth is four times better.
17 .. tab:: Fifth
18     :new-set:
19
20 Five is a nice number.
21
22 .. tab:: Sixth
23
24     Six is also nice.

See the styling above rendered by Sphinx below.


This is text before the tabs.

First tab text is interesting.

Second tab text is twice as interesting as the first tab.

Third tab is an odd one indeed.

Fourth is four times better.

Five is a nice number.

Six is also nice.


Code in Tabs


Code-block’s in a tabs’ content area will display in the tab contents, making things very straightforward for programming language snippets and OS-based command suggestions.


.. tab:: Python

    .. code-block:: Python
        :linenos:

        print("Hello World!")

    .. code-block:: Python

        print("Another Hello World!")

.. tab:: Yaml

    .. code-block:: Yaml
        :linenos:

        name: Auto-generate CHANGELOG-WIP
        on:
        # release:
        #   types: [created, edited]
        # # schedule:
        #   - cron: "0 14 * * *"
        # push:
        #   branches:
        #     - main
        workflow_dispatch:

        jobs:
        generate-changelog:
            runs-on: ubuntu-latest
            steps:
            - uses: actions/checkout@v2
                with:
                fetch-depth: 0
            - uses: BobAnkh/auto-generate-changelog@master
                with:
                REPO_NAME: "your repo/your-project"
                ACCESS_TOKEN: ${{secrets.GITHUB_TOKEN}}
                PATH: "/CHANGELOG.md"
                COMMIT_MESSAGE: "docs(CHANGELOG): update release notes:repo"
                TYPE: "chore:Chore,feat:Feature,fix:Bug Fixes,docs:Documentation,
                perf:Performance Improvements,refactor:Refactor,style:Styling,test:Tests, WIP:In Progress"

.. tab:: C++

    .. code-block:: C++
        :linenos:

        #include <iostream>

        int main() {
        std::cout << "Hello World!" << std::endl;
        }

See the styling above rendered by Sphinx below.

1print("Hello World!")

1print("Another Hello World!")

 1name: Auto-generate CHANGELOG-WIP
 2on:
 3# release:
 4#   types: [created, edited]
 5# # schedule:
 6#   - cron: "0 14 * * *"
 7# push:
 8#   branches:
 9#     - main
10workflow_dispatch:
11
12jobs:
13generate-changelog:
14    runs-on: ubuntu-latest
15    steps:
16    - uses: actions/checkout@v2
17        with:
18        fetch-depth: 0
19    - uses: BobAnkh/auto-generate-changelog@master
20        with:
21        REPO_NAME: "your repo/your-project"
22        ACCESS_TOKEN: ${{secrets.GITHUB_TOKEN}}
23        PATH: "/CHANGELOG.md"
24        COMMIT_MESSAGE: "docs(CHANGELOG): update release notes:repo"
25        TYPE: "chore:Chore,feat:Feature,fix:Bug Fixes,docs:Documentation,
26        perf:Performance Improvements,refactor:Refactor,style:Styling,
27        test:Tests, WIP:In Progress"

1#include <iostream>
2
3int main() {
4std::cout << "Hello World!" << std::endl;
5}

Synchronisation


With JavaScript enabled on the end users browser, Tabs across multiple sets will synchronise unconditionally.


Hint

Synchronisation behaviour is unconditional because tabbed content usually stays consistent, for example, the Operating System or programming language.


.. tab:: Unix (MacOS / Linux)

    .. code-block:: console
        :linenos:

        $ python -m pip install sphinx

.. tab:: Windows

    .. code-block:: console
        :linenos:

        $ py -m pip install sphinx

.. tab:: Unix (MacOS / Linux)
    :new-set:

    .. code-block:: console
        :linenos:

        $ make html

.. tab:: Windows

    .. code-block:: console
        :linenos:

        $ make.bat html

See the styling above rendered by Sphinx below.


Click on the Windows tab to see Synchronisation in action.


1$ python -m pip install sphinx

1$ py -m pip install sphinx

1$ make html

1$ make.bat html

Hint

For good document flow, keep the tab order the same throughout the document. As shown above, Unix precedes Windows.


Nesting


Nested Tabs allow the creation of decision trees using tabs. Nested tabs are also synchronised.


.. tab:: Unix (MacOS / Linux)

    .. tab:: Bash

        .. code-block:: Bash
            :linenos:

            bash

    .. tab:: Zsh

        .. code-block:: Zsh
            :linenos:

            zsh

.. tab:: Windows

    .. tab:: Command Prompt

        .. code-block:: console
            :linenos:

            cmd.exe

    .. tab:: Powershell

        .. code-block:: Powershell
            :linenos:

            ps2.exe

See the styling above rendered by Sphinx below.


1bash

1zsh

1cmd.exe

1ps2.exe