Add panels examples to docs (#7)

* Sphinx panels examples to docs * Add panels examples
Qiskit · Nov 9, 2020 · 00b170e · 00b170e
1 parent 2b09964
commit 00b170e
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 0 deletions.
diff --git a/docs/conf.py b/docs/conf.py
@@ -61,6 +61,7 @@
     'sphinx.ext.viewcode',
     'sphinx.ext.extlinks',
     'jupyter_sphinx',
+    'sphinx_panels',
     'sphinx_autodoc_typehints',
 ]
 

diff --git a/docs/index.rst b/docs/index.rst
@@ -14,6 +14,7 @@ Qiskit sphinx theme |version| documentation
    Functions <functions>
    Classes <classes>
    Jupyter <jupyter>
+   Panels <panels>
 
 
 .. Hiding - Indices and tables

diff --git a/docs/panels.rst b/docs/panels.rst
@@ -0,0 +1,81 @@
+======
+Panels
+======
+
+Basic panels
+============
+
+.. panels::
+    :container: container-lg pb-3
+    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
+
+    panel1
+    ---
+    panel2
+    ---
+    panel3
+    ---
+    :column: col-lg-12 p-2
+    panel4
+
+Dropdowns
+=========
+
+.. dropdown:: Hey, I am a dropdown
+
+    Lots of cool stuff can be done with dropdowns!
+
+
+.. dropdown:: My content will fade in
+    :animate: fade-in
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+Tabs
+====
+
+.. tabbed:: Tab 1
+
+    Tab 1 content
+
+.. tabbed:: Tab 2
+    :class-content: pl-1 bg-primary
+
+    Tab 2 content
+
+
+Cards
+=====
+
+
+.. panels::
+    :container: container-lg
+    :column: col-lg-6 p-2
+    :img-top-cls: pl-2 pr-2
+
+    ---
+    :img-top: images/yi_jing_01_chien.jpg
+
+
+    This is an example card.
+
+    More content here.
+
+    ++++++
+    :badge:`Example,badge-primary badge-pill`
+
+
+    ---
+    :img-top: images/yi_jing_01_chien.jpg
+
+    This is an example card.
+
+    :math:`\sin^{2}(x)+\cos^{2}(x) = 1`
+
+    ++++++
+    :badge:`Example,badge-primary badge-pill`
+    :badge:`Tutorial,badge-success badge-pill`