File: usage.md

package info (click to toggle)
sphinx-inline-tabs 2023.4.21-2
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 176 kB
  • sloc: python: 276; javascript: 25; makefile: 5
file content (234 lines) | stat: -rw-r--r-- 3,715 bytes parent folder | download | duplicates (3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
# Usage

## Basics

Tabs are created, using a `tab` directive. Consecutive `tab` directives create a single set of tabs.

```rst
This is text before the tabs.

.. tab:: One

   One is an interesting number.

.. tab:: Two

   Two is the even prime.

.. tab:: Three

   Three is an odd prime.

.. tab:: Four

   Four is not a perfect number.

This is text after the tabs, which seems to flow right through, which avoids breaking the flow of the document.
```

This is text before the tabs.

```{tab} One
One is an interesting number.
```

```{tab} Two
Two is the even prime.
```

```{tab} Three
Three is an odd prime.
```

```{tab} Four
Four is not a perfect number.
```

This is text after the tabs, which seems to flow right through. There is no visual difference for content that's within a tab vs outside it -- adding tabs doesn't disrupt the flow of the document.

## Multiple Tab Sets

It is possible to start a new set from a tab, by having some content between sets or by providing `:new-set:` option to the `tab` directive.

```rst
.. tab:: One

   One is an interesting number.

.. tab:: Two

   Two is the even prime.

This will break the tab set!

.. tab:: Three

   Three is an odd prime.

.. tab:: Four

   Four is not a perfect number.

.. tab:: Five
   :new-set:

   Five is a nice number.

.. tab:: Six

   Six is also nice.
```

```{eval-rst}
.. tab:: One

   One is an interesting number.

.. tab:: Two

   Two is the even prime.

This will break the tab set!

.. tab:: Three

   Three is an odd prime.

.. tab:: Four

   Four is not a perfect number.

.. tab:: Five
   :new-set:

   Five is a nice number.

.. tab:: Six

   Six is also nice.
```

## Rich tab labels

This is only possible with Markdown, as far as I know.

````
```{tab} Three
Three is an odd prime.
```

```{tab} Four (equal to $2^2$)
Four is not a perfect number.
```
````

```{tab} Three
Three is an odd prime.
```

```{tab} Four (equal to $2^2$)
Four is not a perfect number.
```

## Code Tabs

The first code block in a tab content will "join" with the tabs, making things fairly clean for language snippets and OS-based command suggestions.

````{tab} Python
```python
print("Hello World!")
```

It's pretty simple!
````

````{tab} C++
```cpp
#include <iostream>

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

More code, but it works too!
````

````{tab} Text
```none
Hello World!
```

Why not.
````

## Synchronisation

Tabs across multiple sets are synchronised according to the label, unconditionally. This requires JavaScript to be enabled on the end user's browser and, thus, should be considered a progressive enhancement.

```{hint}
Nearly all usage of tabbed content in documentation is based on something about the user which stays consistent throughout the reading (like their OS, or preferred language etc). That's why this behaviour is unconditional.
```

````{tab} Windows
```console
$ py -m pip install sphinx
```
````

````{tab} Unix (MacOS / Linux)
```console
$ python -m pip install sphinx
```
````

````{tab} Windows
:new-set:
```console
$ make.bat html
```
````

````{tab} Unix (MacOS / Linux)
```console
$ make html
```
````

## Nesting

```{versionadded} 2020.04.11.beta8

```

Tabs can be nested, allowing the creation of decision trees made with
tabs. Nested tabs are also synchronised.

````{tab} Windows
```{tab} Command prompt
`cmd.exe`
```
```{tab} Powershell
`ps2.exe`
```
````

````{tab} Unix (MacOS / Linux)

As can be seen on the other tab, the tab sets will "join" when there's
no text between different levels of tabs. Adding text between them
will space them out.

```{tab} Bash
`bash`
```
```{tab} Zsh
`zsh`
```
```{tab} Fish
`fish`
```
```{tab} Powershell
`ps2`
```
````