nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 15:57:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

docs: add docs for new tab parameter #550

Browse source
This commit is contained in:
Sören Weber 2023-06-06 00:31:57 +02:00
parent 84a884e353
commit 9dc450a069
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 98 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
exampleSite/content/basics/migration/_index.en.md
View file

@ -18,6 +18,14 @@ This document shows you what's new in the latest release. For a detailed list of
---
## 5.16.0 (2023-06-05)
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received style, color and icon parameter similar to other shortcodes.
Additionally the `name` parameter was renamed to `title`. You don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
---
## 5.15.0 (2023-05-29)
- {{% badge style="note" title=" " %}}Change{{% /badge %}} Now also compatible with Hugo {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.112.0{{% /badge %}} or higher. This does not change the minimum required Hugo version.

87
exampleSite/content/shortcodes/tab.en.md
View file

@ -48,14 +48,17 @@ printf("Hello World!");
### Parameter
| Name | Default | Notes |
|:----------------------|:---------------------|:------------|
| **name** | _<empty>_ | Arbitrary text for the name of the tab. |
| _**<content>**_ | _<empty>_ | Arbitrary text to be displayed in the tab. |
| Name | Default | Notes |
|:----------------------|:----------------|:------------|
| **style** | `default` | The style scheme used for the tab.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
| **title** | see notes | Arbitrary title for the tab. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary text to be displayed in the tab. |
## Examples
### Code with collapsed margins
### Single Code Block with Collapsed Margins
{{% tab title="Code" %}}
@ -65,7 +68,7 @@ printf("Hello World!");
{{% /tab %}}
### Mixed content
### Mixed Markdown Content
{{% tab title="_**Mixed**_" %}}
@ -76,3 +79,75 @@ printf("Hello World!");
```
{{% /tab %}}
### Understanding `style` and `color` Behavior
The `style` parameter affects how the `color` parameter is applied.
````go
{{</* tabs */>}}
{{%/* tab title="just colored style" style="blue" */%}}
The `style` parameter is set to a color style.
This will set the background to a lighter version of the chosen style color as configured in your theme variant.
{{%/* /tab */%}}
{{%/* tab title="just color" color="blue" */%}}
Only the `color` parameter is set.
This will set the background to a lighter version of the chosen CSS color value.
{{%/* /tab */%}}
{{%/* tab title="default style and color" style="default" color="blue" */%}}
The `style` parameter affects how the `color` parameter is applied.
The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
{{%/* /tab */%}}
{{%/* tab title="just severity style" style="info" */%}}
The `style` parameter is set to a severity style.
This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
{{%/* /tab */%}}
{{%/* tab title="severity style and color" style="info" color="blue" */%}}
The `style` parameter affects how the `color` parameter is applied.
This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
{{%/* /tab */%}}
{{</* /tabs */>}}
````
{{< tabs >}}
{{% tab title="just colored style" style="blue" %}}
The `style` parameter is set to a color style.
This will set the background to a lighter version of the chosen style color as configured in your theme variant.
{{% /tab %}}
{{% tab title="just color" color="blue" %}}
Only the `color` parameter is set.
This will set the background to a lighter version of the chosen CSS color value.
{{% /tab %}}
{{% tab title="default style and color" style="default" color="blue" %}}
The `style` parameter affects how the `color` parameter is applied.
The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
{{% /tab %}}
{{% tab title="just severity style" style="info" %}}
The `style` parameter is set to a severity style.
This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
{{% /tab %}}
{{% tab title="severity style and color" style="info" color="blue" %}}
The `style` parameter affects how the `color` parameter is applied.
This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
{{% /tab %}}
{{< /tabs >}}

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

@ -77,6 +77,8 @@ echo "Hello World!"
| Name | Default | Notes |
|:----------------------|:---------------------|:------------|
| **groupid** | _&lt;random&gt;_ | Arbitrary name of the group the tab view belongs to.<br><br>Tab views with the same **groupid** sychronize their selected tab. The tab selection is restored automatically based on the `groupid` for tab view. If the selected tab can not be found in a tab group the first tab is selected instead.<br><br>This sychronization applies to the whole site! |
| **style** | _&lt;empty&gt;_ | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
| **color** | _&lt;empty&gt;_ | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
| _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
## Examples
@ -194,12 +196,14 @@ Hello = World
{{% /tab %}}
{{< /tabs >}}
### Nested Tabs
### Nested Tabs and Color
In case you want to nest tabs, the parent tab that contains the subtabs needs to be declared with `{{</* tab */>}}` instead of `{{%/* tab */%}}`. Note, that in this case it is not possible to put markdown in the parent tab.
You can also set various color parameter for all tabs or just selected ones. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values.
````go
{{</* tabs groupid="main" */>}}
{{</* tabs groupid="main" style="primary" */>}}
{{</* tab title="Text" */>}}
Simple text is possible here...
{{</* tabs groupid="tabs-example-language" */>}}
@ -215,7 +219,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to
{{</* /tabs */>}}
{{</* /tab */>}}
{{</* tab title="Code" */>}}
{{</* tab title="Code" style="default" color="fuchsia" */>}}
...but no markdown
{{</* tabs groupid="tabs-example-language" */>}}
{{%/* tab title="python" */%}}
@ -233,7 +237,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to
{{</* /tabs */>}}
````
{{< tabs groupid="main" >}}
{{< tabs groupid="main" style="primary" >}}
{{< tab title="Text" >}}
Simple text is possible here...
{{< tabs groupid="tabs-example-language" >}}
@ -249,7 +253,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to
{{< /tabs >}}
{{< /tab >}}
{{< tab title="Code" >}}
{{< tab title="Code" style="default" color="fuchsia" >}}
...but no markdown
{{< tabs groupid="tabs-example-language" >}}
{{% tab title="python" %}}