tabbed directive is a container that allows splitting related content
into selectable tabs, viewable one at a time.
The general format of the
tabbed directive is:
.. tabbed:: unique_id .. tab:: Tab #1 + --- Content area #1 --- | | one or more lines of content | + ----------------------- .. tab:: Tab #2 + --- Content area #2 --- .. tab:: Tab #N + --- Content area #N ---
There is no hard limit on the maximum number of tabs allowed. On narrow pages, the tabs will adjust to fit the overall tabbed content. However, too many tabs can impair usability more than they improve it. Use your judgement to see what works in your environment.
- unique id
A unique identifier after a space and the
tabbeddirective. Valid identifiers must not contain spaces. You should also avoid the characters `` `
- content area
tabbeddirective must contain at least 1 child
Any other content placed as an immediate child of the
.. tabbed::directive is silently ignored.
.. tab::is only valid inside a
.. tabbed::parent container.
- .. tab::
String. Create a new tab and label the tab using the provided string. A label is required, and may contain spaces.
If the tab contains a null content area, then the build process throws a warning and the tab will not appear in the rendered HTML.
Any valid Sphinx or Runestone markup can reside within a tab.
No optional arguments are defined for this directive.
tabbed directive is language agnostic.
Nothing is actually executed or interpreted.
Sphinx configuration options¶
No directive specific configuration options exist.
Currently, some Runestone directives do not function correctly in a tabbed container:
tabbed contain has the same unique id as another in the same document,
then no error or warning is displayed, but the conflicting
will not display its children correctly.
You can create a container that contains one or more tabs.
.. tabbed:: tab-ex1 .. tab:: Question 1 Write a program that prints "Hello, world". .. activecode:: helloworld print("Hello, world") .. tab:: Discussion .. disqus:: :shortname: interactivepython :identifier: helloworlddiscussion
Write a program that prints “Hello, world”.
Note that nearly every example in this directives manual used tabs to organize the source code and live examples.