From a79f81322a7c00b176cabbd60a18ae70fc7c53cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Tue, 6 Jun 2023 19:54:12 +0200 Subject: [PATCH] tabs: add title and icon option #552 --- .../content/basics/migration/_index.en.md | 4 +- exampleSite/content/shortcodes/tabs.en.md | 45 +++++++++++++------ layouts/partials/shortcodes/tabs.html | 1 + static/css/theme.css | 8 ++++ 4 files changed, 43 insertions(+), 15 deletions(-) diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 4893d32663..186130dd01 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -20,9 +20,9 @@ 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 some love and style, color and icon parameter similar to other shortcodes. +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received some love and now align with their style, color, title and icon parameter to the other shortcodes. - If you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top. + The visuals are now slightly different compared to previous versions. Most noteable, if you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top. Additionally the `name` parameter was renamed to `title` but 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. diff --git a/exampleSite/content/shortcodes/tabs.en.md b/exampleSite/content/shortcodes/tabs.en.md index 0c47b28a29..5a19ffcef7 100644 --- a/exampleSite/content/shortcodes/tabs.en.md +++ b/exampleSite/content/shortcodes/tabs.en.md @@ -9,20 +9,27 @@ This comes in handy eg. for providing code snippets for multiple languages. If you just want a single tab you can instead call the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) standalone. -{{< tabs >}} -{{% tab title="python" %}} +{{< tabs title="hello." >}} +{{% tab title="py" %}} ```python print("Hello World!") ``` {{% /tab %}} -{{% tab title="bash" %}} +{{% tab title="sh" %}} ```bash echo "Hello World!" ``` +{{% /tab %}} +{{% tab title="c" %}} + +```c +printf("Hello World!"); +``` + {{% /tab %}} {{< /tabs >}} @@ -36,17 +43,22 @@ See the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) for a description of {{% tab title="shortcode" %}} ````go -{{}} -{{%/* tab title="python" */%}} +{{}} +{{%/* tab title="py" */%}} ```python print("Hello World!") ``` {{%/* /tab */%}} -{{%/* tab title="bash" */%}} +{{%/* tab title="sh" */%}} ```bash echo "Hello World!" ``` {{%/* /tab */%}} +{{%/* tab title="c" */%}} +```c +printf"Hello World!"); +``` +{{%/* /tab */%}} {{}} ```` @@ -56,15 +68,20 @@ echo "Hello World!" ````go {{ partial "shortcodes/tabs.html" (dict "context" . + "title" "hello." "content" (slice (dict - "title" "python" + "title" "py" "content" ("```python\nprint(\"Hello World!\")\n```" | .RenderString) ) (dict - "title" "bash" + "title" "sh" "content" ("```bash\necho \"Hello World!\"\n```" | .RenderString) ) + (dict + "title" "c" + "content" ("```c\nprintf(\"Hello World!\");\n```" | .RenderString) + ) ) )}} ```` @@ -79,6 +96,8 @@ echo "Hello World!" | **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. | +| **title** | _<empty>_ | Arbitrary title written in front of the tabs. | +| **icon** | _<empty>_ | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. | | _**<content>**_ | _<empty>_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. | ## Examples @@ -200,10 +219,10 @@ Hello = World 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. +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... {{}} @@ -219,7 +238,7 @@ You can also set various color parameter for all tabs or just selected ones. See {{}} {{}} -{{}} +{{}} ...but no markdown {{}} {{%/* tab title="python" */%}} @@ -237,7 +256,7 @@ You can also set various color parameter for all tabs or just selected ones. See {{}} ```` -{{< tabs groupid="main" style="primary" >}} +{{< tabs groupid="main" style="primary" title="Rationale" icon="thumbtack" >}} {{< tab title="Text" >}} Simple text is possible here... {{< tabs groupid="tabs-example-language" >}} @@ -253,7 +272,7 @@ You can also set various color parameter for all tabs or just selected ones. See {{< /tabs >}} {{< /tab >}} -{{< tab title="Code" style="default" color="fuchsia" >}} +{{< tab title="Code" style="default" color="darkorchid" >}} ...but no markdown {{< tabs groupid="tabs-example-language" >}} {{% tab title="python" %}} diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html index 8399ad3459..8dc0ee5718 100644 --- a/layouts/partials/shortcodes/tabs.html +++ b/layouts/partials/shortcodes/tabs.html @@ -54,6 +54,7 @@ {{- with $context }}
+
{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | $context.RenderString }}{{ if (not $title) }}​{{ end }}
{{- range $idx, $tab := $tabs }}