Zum Hauptinhalt springen

Tabs

Tabs are a builtin component provided by the Docusaurus default theme.

Paths on Windows

On Windows , paths take the form C:\foo\bar.

Synchronized tab groups​

The above tab group is set to have a groupId of operating-systems. If we now add a second group with the same groupId, you will notice that both groups change their selected tab whenever we change it in either one of them. The exception here being the FreeBSD tab: Since it only exists within the second group, selecting that tab won't affect the state of the first one.

Microsoft Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For instance, Windows NT for consumer and corporate desktops, Windows Server for servers, and Windows IoT for embedded systems. Defunct Windows families include Windows 9x, Windows Mobile, Windows Phone, and Windows Embedded Compact. Source: πŸ‘‰ Wikipedia.

Syntactical particularities​

Consider the code used to create the first tab group on this page:

::::Tabs
:::Tab[Windows]{value="win"}
:::insight[Paths on Windows :mdi[linux]]
On Windows :mdi[microsoft-windows], paths take the form `C:\foo\bar`.
:::

:::Tab[macOS]{value="macos"}
:::insight[Paths on macOS]
On macOS :mdi[apple], paths are specified in the Unix-like style `/foo/bar`
:::

:::Tab[Linux]{value="linux"}
:::insight[Paths on Linux]
On Linux :mdi[linux], just like on macOS, we use Unix-like paths, such as `/foo/bar`.
:::
::::

For this code to render as expected, we need to follow two particular rules, which may not be obvious at first glance:

  1. The Tab parent must use a strictly higher count of leading colons than its Tab or Admonitions children (e.g. ::::Tabs vs. :::Tab). This parent container must also have its own closing directive (i.e. :::: for ::::Tabs). Source: πŸ‘‰ Discussion on GitHub.
  2. Each Tab element must specify a value property, such as {value="macos"}. The semantics of this property are explained in the πŸ‘‰ previous section.

Note that the indentation is only used to improve legibility and does not affect the semantics of this code.