diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index bdee12878b..62e6c0d90d 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -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. diff --git a/exampleSite/content/shortcodes/tab.en.md b/exampleSite/content/shortcodes/tab.en.md index c1f21a89d5..6180b4cad0 100644 --- a/exampleSite/content/shortcodes/tab.en.md +++ b/exampleSite/content/shortcodes/tab.en.md @@ -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.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- 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.

- for severity styles: a nice matching color for the severity
- 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.

- for severity styles: the matching title for the severity
- for all other styles: _<empty>_

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.

- for severity styles: a nice matching icon for the severity
- for all other styles: _<empty>_

If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | +| _**<content>**_ | _<empty>_ | 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 +{{}} +{{%/* 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 >}} +{{% 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 >}} diff --git a/exampleSite/content/shortcodes/tabs.en.md b/exampleSite/content/shortcodes/tabs.en.md index 522df4c5a6..0c47b28a29 100644 --- a/exampleSite/content/shortcodes/tabs.en.md +++ b/exampleSite/content/shortcodes/tabs.en.md @@ -77,6 +77,8 @@ echo "Hello World!" | Name | Default | Notes | |:----------------------|:---------------------|:------------| | **groupid** | _<random>_ | Arbitrary name of the group the tab view belongs to.

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.

This sychronization applies to the whole site! | +| **style** | _<empty>_ | 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** | _<empty>_ | 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. | | _**<content>**_ | _<empty>_ | 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 `{{}}` 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 -{{}} +{{}} {{}} Simple text is possible here... {{}} @@ -215,7 +219,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to {{}} {{}} -{{}} +{{}} ...but no markdown {{}} {{%/* tab title="python" */%}} @@ -233,7 +237,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to {{}} ```` -{{< 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" %}}