fix: tabs styling in steps shortcode (#440)

* fix: tabs styling in steps shortcode

* docs: add notes for intended usage
This commit is contained in:
Xin 2024-08-18 15:38:06 +01:00 committed by GitHub
parent 2863a3a029
commit 526be88d7b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 7 deletions

View File

@ -25,6 +25,11 @@ This is the third step.
## Usage ## Usage
{{< callout emoji="" >}}
Please note that this shortcode is intended **only for Markdown content**.
If you put HTML content or other shortcodes as step content, it may not render as expected.
{{< /callout >}}
Put Markdown h3 header within `steps` shortcode. Put Markdown h3 header within `steps` shortcode.
``` ```

View File

@ -4,8 +4,9 @@
class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block" class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
id="tabs-panel-{{ .Ordinal }}" id="tabs-panel-{{ .Ordinal }}"
role="tabpanel" role="tabpanel"
{{ if eq .Ordinal $defaultIndex }}tabindex="0"{{ end }} {{- if eq .Ordinal $defaultIndex }} tabindex="0" {{ end -}}
{{ if eq .Ordinal $defaultIndex }}data-state="selected"{{ end }} {{- if eq .Ordinal $defaultIndex }} data-state="selected" {{ end -}}
> >
{{ .InnerDeindent | markdownify }} {{- .InnerDeindent | markdownify -}}
</div> </div>
{{- /* Drop trailing newlines */ -}}

View File

@ -13,9 +13,9 @@
role="tab" role="tab"
type="button" type="button"
aria-controls="tabs-panel-{{ $i }}" aria-controls="tabs-panel-{{ $i }}"
{{ if eq $i $defaultIndex }}aria-selected="true"{{ end }} {{- if eq $i $defaultIndex }} aria-selected="true" {{ end -}}
{{ if eq $i $defaultIndex }}tabindex="0"{{ end }} {{- if eq $i $defaultIndex }} tabindex="0" {{ end -}}
{{ if eq $i $defaultIndex }}data-state="selected"{{ end }} {{- if eq $i $defaultIndex }} data-state="selected"{{ end -}}
> >
{{- $item -}} {{- $item -}}
</button> </button>
@ -23,5 +23,6 @@
</div> </div>
</div> </div>
<div> <div>
{{ .Inner }} {{- .Inner -}}
</div> </div>
{{- /* Drop trailing newlines */ -}}