Sphinx Design 组件#

在本页中，您将找到用户界面组件，例如徽章、按钮、卡片和选项卡。

本页中的组件**并非由 PyData 主题提供**。它们由 Sphinx Design （ Sphinx 插件）提供。这意味着如果您希望使用本页中的组件，您必须单独安装 Sphinx Design 并将其添加到您的 conf.py 中。

参见

要将 Sphinx Design 插件添加到您的 Sphinx 项目中，请参阅 Sphinx Design - 入门。

Contributors to both projects have worked to ensure compatible styling so that Sphinx Design components look and feel consistent with the PyData Theme.

This page shows you how the Sphinx Design components would look on your site if you were to use them in combination with the PyData Theme. Sphinx Design also provides a PyData-themed version of the Sphinx Design site; however, their site use an older version of this theme.

Any customizations you make to the theme could affect how these components appear on your site. So what you see on this page might not match exactly what you see on your site even if your site uses this theme.

Badges and button-links#

Here are some of the available badges:

primary secondary success primary outline secondary outline success outline

Here are some of the available button-style links, also using semantic colors:

备注

Sphinx Design buttons are actually links, meaning they are rendered in HTML with <a> tags instead of <button>. Use them if you need a link to look like a button, but try not to overuse them as they are not considered best practice for accessibility. (For example, it upsets user interface expectations because the space bar can be used on <button>-tag buttons but not on <a>-tag links that look like buttons.)

If in your site's custom CSS file you override the CSS custom properties --pst-color-* (where * is one of the semantic color names, such as primary, danger), badges and buttons will automatically use the custom color.

Cards#

Only heading

Only body.

But with multiple text paragraphs.

Heading and body

Content of the third card.

Sample badge

A card with a dropdown menu

A clickable card

Don't forget to add the alternative text with link-alt!

Clickable cards - Sphinx Design docs

panel 1 header

panel 1 content more content

panel 1 footer

panel 2 header

panel 2 content

panel 2 footer

Tabs#

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

Dropdowns#

Dropdowns look similar to admonitions, but they are clickable interactive elements that can be used to hide content. See the Sphinx Design Dropdown documentation for more information.

An admonition for reference.

And some admonition content.

Copybuttons#

sphinx-copybutton adds a copy button to each of your code cells. You can see it in action by hovering over the code cell below:

print("A copybutton in the top-right!")

nbsphinx

If your documentation site uses both nbsphinx and Sphinx-copybutton, you will want to add the following line to your conf.py file to prevent the copy button from appearing on top of notebook cell numbers:

conf.py#

copybutton_selector = ":not(.prompt) > div.highlight pre"

Toggle buttons#

sphinx-togglebutton allows you to convert admonitions into toggle-able elements.

Click me to toggle!

This will be hidden until a click!

A standalone toggle button!