Sphinx panels¶

Sphinx extension 'sphinx-panels'

Repository: sphinx-panels@GitHub
Documentation: sphinx-panels@ReadTheDocs

Credit

At the moment the examples on this page are mostly a one to one copy of the sphinx-panels documentation.

Attention

These examples show what the extension is offering out of the box.

The TYPO3 community hasn't yet agreed on what possibilities we actually want to use. Note that we are using a different and dedicated extension for Sphinx-Tabs already.

This page

Dummy target 'panels/usage'¶

...

Examples ¶

Example: Extension manual search ¶

Extension manual search

fill in here

Example ¶

Content of the top-left panel

Content of the top-right panel

example

Clickable Panel

Example ¶

Content of the top-left panel

Content of the top-right panel

Content of the bottom-left panel

Content of the bottom-right panel

Example ¶

https://example.org

This entire panel is clickable.

Go To Reference

Example ¶

panel1

panel2

panel3

panel4

Example ¶

panel 1 header

panel 1 content

Example ¶

panel 1 header

panel 1 content

panel 1 footer

panel 2 header

panel 2 content

panel 2 footer

header 1

Panel 1 content

More content

tail 1

header 2

Panel 2 content

tail 1

Example ¶

some text

some other text

Example ¶

https://example.org

This entire panel is clickable.

Go To Reference

Example ¶

primary

Example ¶

https://example.org my, text my reference

Example ¶

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

import pip

Tab 4

Tabbed Content ¶

The tabbed directive generates tabbed selection panels.

Sequential directives will be grouped together, unless the :new-group option is added. You can set which tab will be shown by default, using the :selected: option.

Tab directives can contain any content, and you can also set CSS classes with :class-label: and :class-content::

.. tabbed:: Tab 1

    Tab 1 content

.. tabbed:: Tab 2
    :class-content: pl-1 bg-primary

    Tab 2 content

.. tabbed:: Tab 3
    :new-group:

    .. code-block:: python

        import pip

.. tabbed:: Tab 4
    :selected:

    .. dropdown:: Nested Dropdown

        Some content

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

import pip

Tab 4

Here's an example of showing an example in multiple programming languages:

c++

int main(const int argc, const char **argv) {
  return 0;
}

python

def main():
    return

java

class Main {
    public static void main(String[] args) {
    }
}

julia

function main()
end

fortran

PROGRAM main
END PROGRAM main

Div Directive ¶

The div directive is the same as the container directive, but does not add a container class in HTML outputs, which is incompatible with Bootstrap CSS:

.. div:: text-primary

    hallo

hallo

Combined Example ¶

.. dropdown:: Panels in a drop-down
    :title: bg-success text-warning
    :open:
    :animate: fade-in-slide-down

    .. panels::
        :container: container-fluid pb-1
        :column: col-lg-6 col-md-6 col-sm-12 col-xs-12 p-2
        :card: shadow
        :header: border-0
        :footer: border-0

        ---
        :card: + bg-warning

        header
        ^^^^^^

        Content of the top-left panel

        ++++++
        footer

        ---
        :card: + bg-info
        :footer: + bg-danger

        header
        ^^^^^^

        Content of the top-right panel

        ++++++
        footer

        ---
        :column: col-lg-12 p-3
        :card: + text-center

        .. link-button:: panels/usage
            :type: ref
            :text: Clickable Panel
            :classes: btn-link stretched-link font-weight-bold