Add tabs shortcode
This commit is contained in:
23
README.md
23
README.md
@@ -684,6 +684,29 @@ Parameters:
|
||||
<dt><code>cite</code></dt>
|
||||
<dd>Optional. String. Plain text. Citation.</dd>
|
||||
|
||||
### Tabs
|
||||
|
||||
The `paige/tabs` shortcodes provide tabbed content.
|
||||
|
||||
```
|
||||
{{< paige/tabs >}}
|
||||
{{< paige/tabs/buttons >}}
|
||||
{{< paige/tabs/button >}}A{{< /paige/tabs/button >}}
|
||||
{{< paige/tabs/button >}}B{{< /paige/tabs/button >}}
|
||||
{{< paige/tabs/button >}}C{{< /paige/tabs/button >}}
|
||||
{{< /paige/tabs/buttons >}}
|
||||
{{< paige/tabs/panes >}}
|
||||
{{< paige/tabs/pane >}}1{{< /paige/tabs/pane >}}
|
||||
{{< paige/tabs/pane >}}2{{< /paige/tabs/pane >}}
|
||||
{{< paige/tabs/pane >}}3{{< /paige/tabs/pane >}}
|
||||
{{< /paige/tabs/panes >}}
|
||||
{{< /paige/tabs >}}
|
||||
```
|
||||
|
||||
Inner content: Required. String. Markdown.
|
||||
|
||||
Parameters: None.
|
||||
|
||||
### Vimeo
|
||||
|
||||
The `paige/vimeo` shortcode provides a Vimeo video.
|
||||
|
132
exampleSite/content/shortcodes/tabs.md
Normal file
132
exampleSite/content/shortcodes/tabs.md
Normal file
@@ -0,0 +1,132 @@
|
||||
+++
|
||||
authors = ["author-demo"]
|
||||
categories = ["paige", "shortcodes"]
|
||||
date = 2024-07-06T22:37:00-07:00
|
||||
description = "Demonstration of the Paige tabs shortcodes."
|
||||
tags = ["figures", "tabs"]
|
||||
title = "Tabs Shortcode"
|
||||
+++
|
||||
|
||||
Paige provides a `paige/tabs` shortcode for displaying content in tabs.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Basic
|
||||
|
||||
Code:
|
||||
|
||||
```go-html-template
|
||||
{{</* paige/tabs */>}}
|
||||
{{</* paige/tabs/buttons */>}}
|
||||
{{</* paige/tabs/button */>}}JSON{{</* /paige/tabs/button */>}}
|
||||
{{</* paige/tabs/button */>}}TOML{{</* /paige/tabs/button */>}}
|
||||
{{</* paige/tabs/button */>}}YAML{{</* /paige/tabs/button */>}}
|
||||
{{</* /paige/tabs/buttons */>}}
|
||||
{{</* paige/tabs/panes */>}}
|
||||
{{</* paige/tabs/pane */>}}
|
||||
{{</* paige/code lang="json" */>}}
|
||||
{"foo": 123}
|
||||
{{</* /paige/code */>}}
|
||||
{{</* /paige/tabs/pane */>}}
|
||||
{{</* paige/tabs/pane */>}}
|
||||
{{</* paige/code lang="toml" */>}}
|
||||
foo = 123
|
||||
{{</* /paige/code */>}}
|
||||
{{</* /paige/tabs/pane */>}}
|
||||
{{</* paige/tabs/pane */>}}
|
||||
{{</* paige/code lang="yaml" */>}}
|
||||
foo: 123
|
||||
{{</* /paige/code */>}}
|
||||
{{</* /paige/tabs/pane */>}}
|
||||
{{</* /paige/tabs/panes */>}}
|
||||
{{</* /paige/tabs */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/tabs >}}
|
||||
{{< paige/tabs/buttons >}}
|
||||
{{< paige/tabs/button >}}JSON{{< /paige/tabs/button >}}
|
||||
{{< paige/tabs/button >}}TOML{{< /paige/tabs/button >}}
|
||||
{{< paige/tabs/button >}}YAML{{< /paige/tabs/button >}}
|
||||
{{< /paige/tabs/buttons >}}
|
||||
{{< paige/tabs/panes >}}
|
||||
{{< paige/tabs/pane >}}
|
||||
{{< paige/code lang="json" >}}
|
||||
{"foo": 123}
|
||||
{{< /paige/code >}}
|
||||
{{< /paige/tabs/pane >}}
|
||||
{{< paige/tabs/pane >}}
|
||||
{{< paige/code lang="toml" >}}
|
||||
foo = 123
|
||||
{{< /paige/code >}}
|
||||
{{< /paige/tabs/pane >}}
|
||||
{{< paige/tabs/pane >}}
|
||||
{{< paige/code lang="yaml" >}}
|
||||
foo: 123
|
||||
{{< /paige/code >}}
|
||||
{{< /paige/tabs/pane >}}
|
||||
{{< /paige/tabs/panes >}}
|
||||
{{< /paige/tabs >}}
|
||||
|
||||
## Figure
|
||||
|
||||
Code:
|
||||
|
||||
```go-html-template
|
||||
{{</* paige/figure caption="Tabs" */>}}
|
||||
{{</* paige/tabs */>}}
|
||||
{{</* paige/tabs/buttons */>}}
|
||||
{{</* paige/tabs/button */>}}JSON{{</* /paige/tabs/button */>}}
|
||||
{{</* paige/tabs/button */>}}TOML{{</* /paige/tabs/button */>}}
|
||||
{{</* paige/tabs/button */>}}YAML{{</* /paige/tabs/button */>}}
|
||||
{{</* /paige/tabs/buttons */>}}
|
||||
{{</* paige/tabs/panes */>}}
|
||||
{{</* paige/tabs/pane */>}}
|
||||
{{</* paige/code lang="json" */>}}
|
||||
{"foo": 123}
|
||||
{{</* /paige/code */>}}
|
||||
{{</* /paige/tabs/pane */>}}
|
||||
{{</* paige/tabs/pane */>}}
|
||||
{{</* paige/code lang="toml" */>}}
|
||||
foo = 123
|
||||
{{</* /paige/code */>}}
|
||||
{{</* /paige/tabs/pane */>}}
|
||||
{{</* paige/tabs/pane */>}}
|
||||
{{</* paige/code lang="yaml" */>}}
|
||||
foo: 123
|
||||
{{</* /paige/code */>}}
|
||||
{{</* /paige/tabs/pane */>}}
|
||||
{{</* /paige/tabs/panes */>}}
|
||||
{{</* /paige/tabs */>}}
|
||||
{{</* /paige/figure */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/figure caption="Tabs" >}}
|
||||
{{< paige/tabs >}}
|
||||
{{< paige/tabs/buttons >}}
|
||||
{{< paige/tabs/button >}}JSON{{< /paige/tabs/button >}}
|
||||
{{< paige/tabs/button >}}TOML{{< /paige/tabs/button >}}
|
||||
{{< paige/tabs/button >}}YAML{{< /paige/tabs/button >}}
|
||||
{{< /paige/tabs/buttons >}}
|
||||
{{< paige/tabs/panes >}}
|
||||
{{< paige/tabs/pane >}}
|
||||
{{< paige/code lang="json" >}}
|
||||
{"foo": 123}
|
||||
{{< /paige/code >}}
|
||||
{{< /paige/tabs/pane >}}
|
||||
{{< paige/tabs/pane >}}
|
||||
{{< paige/code lang="toml" >}}
|
||||
foo = 123
|
||||
{{< /paige/code >}}
|
||||
{{< /paige/tabs/pane >}}
|
||||
{{< paige/tabs/pane >}}
|
||||
{{< paige/code lang="yaml" >}}
|
||||
foo: 123
|
||||
{{< /paige/code >}}
|
||||
{{< /paige/tabs/pane >}}
|
||||
{{< /paige/tabs/panes >}}
|
||||
{{< /paige/tabs >}}
|
||||
{{< /paige/figure >}}
|
11
layouts/shortcodes/paige/tabs.html
Normal file
11
layouts/shortcodes/paige/tabs.html
Normal file
@@ -0,0 +1,11 @@
|
||||
{{ $content := chomp .Inner }}
|
||||
|
||||
{{ if not (.Page.Scratch.Get "paige-tabs") }}
|
||||
{{ .Page.Scratch.Set "paige-tabs" 0 }}
|
||||
{{ end }}
|
||||
|
||||
{{ .Page.Scratch.Add "paige-tabs" 1 }}
|
||||
|
||||
<div class="paige-tabs">
|
||||
{{ $content }}
|
||||
</div>
|
16
layouts/shortcodes/paige/tabs/button.html
Normal file
16
layouts/shortcodes/paige/tabs/button.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{{ $content := chomp .Inner | markdownify }}
|
||||
{{ $tabcount := .Page.Scratch.Get "paige-tabs" | default 0 }}
|
||||
|
||||
{{ if not $content }}
|
||||
{{ errorf "layouts/shortcodes/paige/tab/button.html: no content" }}
|
||||
{{ end }}
|
||||
|
||||
{{ .Page.Scratch.Add "paige-tabs-button" 1 }}
|
||||
|
||||
{{ $buttoncount := .Page.Scratch.Get "paige-tabs-button" }}
|
||||
|
||||
{{ $active := eq $buttoncount 1 }}
|
||||
|
||||
<li class="nav-item" role="presentation">
|
||||
<button aria-controls="paige-tabs-{{ $tabcount }}-pane-{{ $buttoncount }}" aria-selected="{{ $active }}" class="{{ if $active }} active {{ end }} nav-link" data-bs-target="#paige-tabs-{{ $tabcount }}-pane-{{ $buttoncount }}" data-bs-toggle="tab" id="paige-tabs-{{ $tabcount }}-button-{{ $buttoncount }}" role="tab" type="button">{{ $content }}</button>
|
||||
</li>
|
9
layouts/shortcodes/paige/tabs/buttons.html
Normal file
9
layouts/shortcodes/paige/tabs/buttons.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{{ $content := chomp .Inner }}
|
||||
|
||||
{{ .Page.Scratch.Set "paige-tabs-button" 0 }}
|
||||
|
||||
<div class="paige-tab-buttons">
|
||||
<ul class="mb-3 nav nav-tabs" role="tablist">
|
||||
{{ $content }}
|
||||
</ul>
|
||||
</div>
|
14
layouts/shortcodes/paige/tabs/pane.html
Normal file
14
layouts/shortcodes/paige/tabs/pane.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{{ $content := chomp .Inner | markdownify }}
|
||||
{{ $tabcount := .Page.Scratch.Get "paige-tabs" | default 0 }}
|
||||
|
||||
{{ if not $content }}
|
||||
{{ errorf "layouts/shortcodes/paige/tab/pane.html: no content" }}
|
||||
{{ end }}
|
||||
|
||||
{{ .Page.Scratch.Add "paige-tabs-pane" 1 }}
|
||||
|
||||
{{ $panecount := .Page.Scratch.Get "paige-tabs-pane" }}
|
||||
|
||||
{{ $active := eq $panecount 1 }}
|
||||
|
||||
<div aria-labelledby="paige-tabs-{{ $tabcount }}-button-{{ $panecount }}" class="{{ if $active }} active {{ end }} fade {{ if $active }} show {{ end }} tab-pane" id="paige-tabs-{{ $tabcount }}-pane-{{ $panecount }}" role="tabpanel" tabindex="0">{{ $content }}</div>
|
9
layouts/shortcodes/paige/tabs/panes.html
Normal file
9
layouts/shortcodes/paige/tabs/panes.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{{ $content := chomp .Inner }}
|
||||
|
||||
{{ .Page.Scratch.Set "paige-tabs-pane" 0 }}
|
||||
|
||||
<div class="paige-tab-panes">
|
||||
<div class="tab-content">
|
||||
{{ $content }}
|
||||
</div>
|
||||
</div>
|
Reference in New Issue
Block a user