nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-10-27 02:33:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tabs: unify parameter names #277

Browse source
This commit is contained in:
Sören Weber 2022-06-23 13:24:54 +02:00
parent 66d32c48b0
commit ae666b2b77
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
exampleSite/content/shortcodes/tabs.en.md
View file

@ -5,7 +5,7 @@ title = "Tabbed views"
The `tabs` shortcode displays arbitrary content in unlimited number of tabs. This comes in handy eg. for providing code snippets for multiple languages or providing configuration in different formats. The `tabs` shortcode displays arbitrary content in unlimited number of tabs. This comes in handy eg. for providing code snippets for multiple languages or providing configuration in different formats.
{{< tabs groupId="tabs-example-language" >}} {{< tabs groupid="tabs-example-language" >}}
{{% tab name="python" %}} {{% tab name="python" %}}
```python ```python
@ -26,7 +26,7 @@ echo "Hello World!"
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials. While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
{{< tabs groupId="shortcode-parameter">}} {{< tabs groupid="shortcode-parameter">}}
{{% tab name="shortcode" %}} {{% tab name="shortcode" %}}
````go ````go
@ -70,21 +70,21 @@ echo "Hello World!"
| Name | Default | Notes | | Name | Default | Notes |
|:----------------------|:-----------------|:------------| |:----------------------|:-----------------|:------------|
| **groupId** | `default` | Arbitrary name of the group the tab view belongs to.<br/><br/>Tab views with the same **groupId** sychronize their selected tab. This sychronization applies to the whole site! | | **groupid** | `default` | Arbitrary name of the group the tab view belongs to.<br/><br/>Tab views with the same **groupid** sychronize their selected tab. This sychronization applies to the whole site! |
| _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. | | _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
{{% notice note %}} {{% notice note %}}
When using tab views with different content sets, make sure to use a common `groupId` for equal sets of tabs but distinct `groupId` for different sets. When using tab views with different content sets, make sure to use a common `groupid` for equal sets of tabs but distinct `groupid` for different sets.
The tab selection is restored automatically based on the `groupId` and if it cannot find a tab item because it came from the `'default'` group on a different page then the first tab is selected instead. The tab selection is restored automatically based on the `groupid` and if it cannot find a tab item because it came from the `'default'` group on a different page then the first tab is selected instead.
{{% /notice %}} {{% /notice %}}
## Examples ## Examples
### Distinct `groupId` ### Distinct `groupid`
````go ````go
{{</* tabs groupId="config" */>}} {{</* tabs groupid="config" */>}}
{{%/* tab name="json" */%}} {{%/* tab name="json" */%}}
```json ```json
{ {
@ -105,7 +105,7 @@ Hello = World
{{</* /tabs */>}} {{</* /tabs */>}}
```` ````
{{< tabs groupId="tabs-example-config" >}} {{< tabs groupid="tabs-example-config" >}}
{{% tab name="json" %}} {{% tab name="json" %}}
```json ```json
{ {
@ -125,12 +125,12 @@ Hello = World
{{% /tab %}} {{% /tab %}}
{{< /tabs >}} {{< /tabs >}}
### Non-Distinct `groupId` ### Non-Distinct `groupid`
See what happens to this tab view if you select **properties** tab from the previous example. See what happens to this tab view if you select **properties** tab from the previous example.
````go ````go
{{</* tabs groupId="config" */>}} {{</* tabs groupid="config" */>}}
{{%/* tab name="json" */%}} {{%/* tab name="json" */%}}
```json ```json
{ {
@ -146,7 +146,7 @@ See what happens to this tab view if you select **properties** tab from the prev
{{</* /tabs */>}} {{</* /tabs */>}}
```` ````
{{< tabs groupId="tabs-example-config" >}} {{< tabs groupid="tabs-example-config" >}}
{{% tab name="json" %}} {{% tab name="json" %}}
```json ```json
{ {

8
layouts/partials/shortcodes/tabs.html
View file

@ -1,21 +1,21 @@
{{- $context := .context }} {{- $context := .context }}
{{- $tabs := .tabs | default slice }} {{- $tabs := .tabs | default slice }}
{{- $groupId := .groupId | default "default" }} {{- $groupid := .groupid | default "default" }}
{{- with $context }} {{- with $context }}
<div class="tab-panel"> <div class="tab-panel">
<div class="tab-nav"> <div class="tab-nav">
{{- range $idx, $tab := $tabs }} {{- range $idx, $tab := $tabs }}
<button <button
data-tab-item="{{ .name }}" data-tab-item="{{ .name }}"
data-tab-group="{{ $groupId }}" data-tab-group="{{ $groupid }}"
class="tab-nav-button {{ cond (eq $idx 0) "active" ""}}" class="tab-nav-button {{ cond (eq $idx 0) "active" ""}}"
onclick="switchTab('{{ $groupId }}','{{ .name }}')" onclick="switchTab('{{ $groupid }}','{{ .name }}')"
><span>{{ .name }}</span></button> ><span>{{ .name }}</span></button>
{{- end }} {{- end }}
</div> </div>
<div class="tab-content"> <div class="tab-content">
{{- range $idx, $tab := $tabs }} {{- range $idx, $tab := $tabs }}
<div data-tab-item="{{ .name }}" data-tab-group="{{ $groupId }}" class="tab-item {{ cond (eq $idx 0) "active" ""}}"> <div data-tab-item="{{ .name }}" data-tab-group="{{ $groupid }}" class="tab-item {{ cond (eq $idx 0) "active" ""}}">
{{ .content | safeHTML }} {{ .content | safeHTML }}
</div> </div>
{{- end }} {{- end }}

2
layouts/shortcodes/tabs.html
View file

@ -1,6 +1,6 @@
{{- partial "shortcodes/tabs.html" (dict {{- partial "shortcodes/tabs.html" (dict
"context" . "context" .
"content" .Inner "content" .Inner
"groupId" (.Get "groupId") "groupid" ((.Get "groupid") | default (.Get "groupId"))
"tabs" (.Scratch.Get "tabs") "tabs" (.Scratch.Get "tabs")
) }} ) }}