30 lines
7.5 KiB
HTML
30 lines
7.5 KiB
HTML
<!doctype html><html lang=en-us dir=ltr><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content='
|
|
Tabs
|
|
#
|
|
|
|
Tabs let you organize content by context, for example installation instructions for each supported platform.
|
|
{{% tabs "id" %}}
|
|
{{% tab "MacOS" %}} # MacOS Content {{% /tab %}}
|
|
{{% tab "Linux" %}} # Linux Content {{% /tab %}}
|
|
{{% tab "Windows" %}} # Windows Content {{% /tab %}}
|
|
{{% /tabs %}}
|
|
|
|
Example
|
|
#
|
|
|
|
|
|
|
|
|
|
|
|
'><meta name=theme-color media="(prefers-color-scheme: light)" content="#ffffff"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#343a40"><meta name=color-scheme content="light dark"><meta property="og:url" content="https://example.org/docs/shortcodes/tabs/"><meta property="og:site_name" content="My New Hugo Site"><meta property="og:title" content="My New Hugo Site"><meta property="og:description" content='Tabs # Tabs let you organize content by context, for example installation instructions for each supported platform.
|
|
{{% tabs "id" %}} {{% tab "MacOS" %}} # MacOS Content {{% /tab %}} {{% tab "Linux" %}} # Linux Content {{% /tab %}} {{% tab "Windows" %}} # Windows Content {{% /tab %}} {{% /tabs %}} Example #'><meta property="og:locale" content="en_us"><meta property="og:type" content="article"><meta property="article:section" content="docs"><title>Tabs | My New Hugo Site</title>
|
|
<link rel=icon href=/favicon.png><link rel=manifest href=/manifest.json><link rel=canonical href=https://example.org/docs/shortcodes/tabs/><link rel=stylesheet href=/book.min.6c8b9d2a1fc95075ed7da46ca81060b39add8fff6741ac51259f768929281e2c.css integrity="sha256-bIudKh/JUHXtfaRsqBBgs5rdj/9nQaxRJZ92iSkoHiw=" crossorigin=anonymous><script defer src=/fuse.min.js></script><script defer src=/en.search.min.9673d6ec80e7ea2624702dfa8af062865b38fab85f2c803969e50d693548458f.js integrity="sha256-lnPW7IDn6iYkcC36ivBihls4+rhfLIA5aeUNaTVIRY8=" crossorigin=anonymous></script></head><body dir=ltr><input type=checkbox class="hidden toggle" id=menu-control>
|
|
<input type=checkbox class="hidden toggle" id=toc-control><main class="container flex"><aside class=book-menu><div class=book-menu-content><nav><h2 class=book-brand><a class="flex align-center" href=/><span>My New Hugo Site</span></a></h2><div class="book-search hidden"><input type=text id=book-search-input placeholder=Search aria-label=Search maxlength=64 data-hotkeys=s/><div class="book-search-spinner hidden"></div><ul id=book-search-results></ul></div><script>document.querySelector(".book-search").classList.remove("hidden")</script><ul><li class=book-section-flat><a href=/docs/example/>Example Site</a><ul><li><a href=/docs/example/table-of-contents/>Table of Contents</a><ul><li><a href=/docs/example/table-of-contents/with-toc/>With ToC</a></li><li><a href=/docs/example/table-of-contents/without-toc/>Without ToC</a></li></ul></li><li><input type=checkbox id=section-daaeee56fab400ffe0b5304ba7523921 class=toggle>
|
|
<label for=section-daaeee56fab400ffe0b5304ba7523921 class="flex justify-between"><a role=button>Collapsed</a></label><ul><li><a href=/docs/example/collapsed/3rd-level/>3rd Level</a><ul><li><a href=/docs/example/collapsed/3rd-level/4th-level/>4th Level</a></li></ul></li></ul></li></ul></li><li class=book-section-flat><span>Shortcodes</span><ul><li><a href=/docs/shortcodes/buttons/>Buttons</a></li><li><a href=/docs/shortcodes/columns/>Columns</a></li><li><a href=/docs/shortcodes/details/>Details</a></li><li><a href=/docs/shortcodes/hints/>Hints</a></li><li><a href=/docs/shortcodes/mermaid/>Mermaid</a></li><li><a href=/docs/shortcodes/tabs/ class=active>Tabs</a></li><li><a href=/docs/shortcodes/katex/>KaTeX</a></li></ul></li></ul><ul><li><a href=/posts/>Blog</a></li></ul></nav><script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script></div></aside><div class=book-page><header class=book-header><div class="flex align-center justify-between"><label for=menu-control><img src=/svg/menu.svg class=book-icon alt=Menu></label><h3>Tabs</h3><label for=toc-control><img src=/svg/toc.svg class=book-icon alt="Table of Contents"></label></div><aside class="hidden clearfix"><nav id=TableOfContents><ul><li><a href=#example>Example</a></li></ul></nav></aside></header><article class="markdown book-article"><h1 id=tabs>Tabs
|
|
<a class=anchor href=#tabs>#</a></h1><p>Tabs let you organize content by context, for example installation instructions for each supported platform.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-tpl data-lang=tpl><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>%</span> <span style=color:#a6e22e>tabs</span> <span style=color:#e6db74>"id"</span> <span style=color:#f92672>%</span><span style=color:#75715e>}}</span>
|
|
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>%</span> <span style=color:#a6e22e>tab</span> <span style=color:#e6db74>"MacOS"</span> <span style=color:#f92672>%</span><span style=color:#75715e>}}</span> # MacOS Content <span style=color:#75715e>{{</span><span style=color:#f92672>%</span> <span style=color:#f92672>/</span><span style=color:#a6e22e>tab</span> <span style=color:#f92672>%</span><span style=color:#75715e>}}</span>
|
|
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>%</span> <span style=color:#a6e22e>tab</span> <span style=color:#e6db74>"Linux"</span> <span style=color:#f92672>%</span><span style=color:#75715e>}}</span> # Linux Content <span style=color:#75715e>{{</span><span style=color:#f92672>%</span> <span style=color:#f92672>/</span><span style=color:#a6e22e>tab</span> <span style=color:#f92672>%</span><span style=color:#75715e>}}</span>
|
|
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>%</span> <span style=color:#a6e22e>tab</span> <span style=color:#e6db74>"Windows"</span> <span style=color:#f92672>%</span><span style=color:#75715e>}}</span> # Windows Content <span style=color:#75715e>{{</span><span style=color:#f92672>%</span> <span style=color:#f92672>/</span><span style=color:#a6e22e>tab</span> <span style=color:#f92672>%</span><span style=color:#75715e>}}</span>
|
|
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>%</span> <span style=color:#f92672>/</span><span style=color:#a6e22e>tabs</span> <span style=color:#f92672>%</span><span style=color:#75715e>}}</span>
|
|
</span></span></code></pre></div><h2 id=example>Example
|
|
<a class=anchor href=#example>#</a></h2></article><footer class=book-footer><div class="flex flex-wrap justify-between"></div><script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script></footer><div class=book-comments></div><label for=menu-control class="hidden book-menu-overlay"></label></div><aside class=book-toc><div class=book-toc-content><nav id=TableOfContents><ul><li><a href=#example>Example</a></li></ul></nav></div></aside></main></body></html> |