mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
feat(tabs): better usage
This commit is contained in:
ZhenShuo Leo
@@ -34,8 +34,8 @@ function activateTab(container, activeIndex) {
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initTabs);
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initTabs);
|
||||
} else {
|
||||
initTabs();
|
||||
}
|
||||
|
||||
@@ -721,74 +721,62 @@ The `tabs` shortcode is commonly used to present different variants of a particu
|
||||
**Example**
|
||||
|
||||
`````md
|
||||
{{</* tabs labels="Windows;;macOS;;Linux" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
{{</* tab label="Windows" */>}}
|
||||
Install using Chocolatey:
|
||||
|
||||
Install using Chocolatey:
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
or install using WinGet
|
||||
|
||||
or install using WinGet
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{</* tab label="macOS" */>}}
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
|
||||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||||
|
||||
{{</* /tab */>}}
|
||||
{{</* tab label="Linux" */>}}
|
||||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
`````
|
||||
|
||||
**Output**
|
||||
|
||||
{{< tabs labels="Windows;;macOS;;Linux" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab label="Windows" >}}
|
||||
Install using Chocolatey:
|
||||
|
||||
Install using Chocolatey:
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
or install using WinGet
|
||||
|
||||
or install using WinGet
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{< tab label="macOS" >}}
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
|
||||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab label="Linux" >}}
|
||||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
@@ -718,74 +718,62 @@ B-->C[利益]
|
||||
**例**
|
||||
|
||||
````md
|
||||
{{</* tabs labels="Windows;;macOS;;Linux" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
{{</* tab label="Windows" */>}}
|
||||
Chocolatey を使用してインストール:
|
||||
|
||||
Chocolatey を使用してインストール:
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
または WinGet を使用してインストール
|
||||
|
||||
または WinGet を使用してインストール
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{</* tab label="macOS" */>}}
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
|
||||
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
|
||||
|
||||
{{</* /tab */>}}
|
||||
{{</* tab label="Linux" */>}}
|
||||
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
**出力**
|
||||
|
||||
{{< tabs labels="Windows;;macOS;;Linux" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab label="Windows" >}}
|
||||
Chocolatey を使用してインストール:
|
||||
|
||||
Chocolatey を使用してインストール:
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
または WinGet を使用してインストール
|
||||
|
||||
または WinGet を使用してインストール
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{< tab label="macOS" >}}
|
||||
```bash
|
||||
brew install --cask visual-studio-codeqweqwe
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
|
||||
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab label="Linux" >}}
|
||||
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
@@ -727,74 +727,62 @@ The `tabs` shortcode is commonly used to present different variants of a particu
|
||||
**Example**
|
||||
|
||||
`````md
|
||||
{{</* tabs labels="Windows;;macOS;;Linux" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
{{</* tab label="Windows" */>}}
|
||||
Install using Chocolatey:
|
||||
|
||||
Install using Chocolatey:
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
or install using WinGet
|
||||
|
||||
or install using WinGet
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{</* tab label="macOS" */>}}
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
|
||||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||||
|
||||
{{</* /tab */>}}
|
||||
{{</* tab label="Linux" */>}}
|
||||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
`````
|
||||
|
||||
**Output**
|
||||
|
||||
{{< tabs labels="Windows;;macOS;;Linux" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab label="Windows" >}}
|
||||
Install using Chocolatey:
|
||||
|
||||
Install using Chocolatey:
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
or install using WinGet
|
||||
|
||||
or install using WinGet
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{< tab label="macOS" >}}
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
|
||||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab label="Linux" >}}
|
||||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
@@ -731,74 +731,62 @@ B-->C[Profit]
|
||||
**示例**
|
||||
|
||||
````md
|
||||
{{</* tabs labels="Windows;;macOS;;Linux" */>}}
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
{{</* tab label="Windows" */>}}
|
||||
使用 Chocolatey 安装:
|
||||
|
||||
使用 Chocolatey 安装:
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
或使用 WinGet 安装
|
||||
|
||||
或使用 WinGet 安装
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{</* tab label="macOS" */>}}
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
|
||||
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
|
||||
|
||||
{{</* /tab */>}}
|
||||
{{</* tab label="Linux" */>}}
|
||||
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
|
||||
{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
{{< tabs labels="Windows;;macOS;;Linux" >}}
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab >}}
|
||||
{{< tab label="Windows" >}}
|
||||
使用 Chocolatey 安装:
|
||||
|
||||
使用 Chocolatey 安装:
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
|
||||
```pwsh
|
||||
choco install vscode.install
|
||||
```
|
||||
或使用 WinGet 安装
|
||||
|
||||
或使用 WinGet 安装
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
```pwsh
|
||||
winget install -e --id Microsoft.VisualStudioCode
|
||||
```
|
||||
{{< tab label="macOS" >}}
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
|
||||
```bash
|
||||
brew install --cask visual-studio-code
|
||||
```
|
||||
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
|
||||
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab label="Linux" >}}
|
||||
参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
{{- $index := .Parent.Scratch.Get "tab-index" | default 0 -}}
|
||||
{{- .Parent.Scratch.Set "tab-index" (add 1 $index) -}}
|
||||
<div class="tab__panel {{ if eq $index 0 }}tab--active{{ end }}" data-tab-index="{{ $index }}">
|
||||
{{ .InnerDeindent | strings.TrimSpace | .Page.RenderString }}
|
||||
</div>
|
||||
{{- $label := .Get "label" -}}
|
||||
{{- $index := .Parent.Store.Get "tab-index" | default 0 -}}
|
||||
{{- $content := .InnerDeindent | strings.TrimSpace | .Page.RenderString -}}
|
||||
|
||||
{{- $tabs := .Parent.Store.Get "tabs" | default slice -}}
|
||||
{{- .Parent.Store.Set "tabs" ($tabs | append (dict "label" $label "content" $content)) -}}
|
||||
{{- .Parent.Store.Set "tab-index" (add 1 $index) -}}
|
||||
|
||||
@@ -1,23 +1,28 @@
|
||||
{{- $labels := split (.Get "labels") ";;" -}}
|
||||
{{- .Store.Set "tab-index" 0 -}}
|
||||
{{- $noop := .Inner -}}
|
||||
|
||||
|
||||
<div class="tab__container w-full">
|
||||
<div class="tab__nav" role="tablist">
|
||||
<div class="flex gap-1 overflow-x-auto">
|
||||
{{- range $index, $label := $labels -}}
|
||||
{{- range $nTabs, $_ := .Store.Get "tabs" -}}
|
||||
<button
|
||||
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if eq $index 0 }}
|
||||
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if eq $nTabs 0 }}
|
||||
tab--active
|
||||
{{ end }}"
|
||||
role="tab"
|
||||
aria-selected="{{ cond (eq $index 0) "true" "false" }}"
|
||||
data-tab-index="{{ $index }}">
|
||||
{{ trim $label " " }}
|
||||
aria-selected="{{ cond (eq $nTabs 0) "true" "false" }}"
|
||||
data-tab-index="{{ $nTabs }}">
|
||||
{{ index . "label" }}
|
||||
</button>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab__content mt-4">
|
||||
{{ .Inner }}
|
||||
{{- range $nTabs, $_ := .Store.Get "tabs" -}}
|
||||
<div class="tab__panel {{ if eq $nTabs 0 }}tab--active{{ end }}" data-tab-index="{{ $nTabs }}">
|
||||
{{ index . "content" }}
|
||||
</div>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user