62196dd666
* feat(tabs): add icon support for tabs - Introduced an `icon` property for tabs to display icons alongside tab labels. - Updated the tabs shortcode and HTML partials to accommodate the new icon feature. - Enhanced documentation for tabs to include examples of using icons in tab definitions. * chore: rebuild css * doc(tabs): add icon support in tab documentation for multiple languages - Enhanced documentation for tabs to include examples of using the `icon` parameter in Persian, Japanese, and Simplified Chinese. - Updated the tab shortcode examples to demonstrate how to display icons alongside tab labels. * chore: regenerate compiled css * fix(a11y): add aria-hidden to decorative tab icons Add aria-hidden="true" to tab icon SVGs so screen readers skip decorative icons and only announce the tab name. Update @example docblock in tab.html to demonstrate the icon parameter. * doc(tabs): improve icon section with better examples and icon page link Rename "Tabs With Icons" heading to "Add Icons" for consistency with other action-oriented section titles. Replace JSON/YAML/TOML icon example with Photos/Music/Videos using photograph, music-note, and film icons that naturally match their labels. Add link to the Icon shortcode page so users can discover available icon names.
49 lines
3.0 KiB
HTML
49 lines
3.0 KiB
HTML
{{- $tabsID := .id }}
|
|
|
|
{{- /*
|
|
The `tabs` parameter is a list of dict with the following keys:
|
|
- `id`: (int) the ID of the tab (the Ordinal of the tab shortcode).
|
|
- `name`: (string) the name of the tab (the title).
|
|
- `icon`: (string) the icon of the tab.
|
|
- `content`: (string) the content of the tab.
|
|
- `selected`: (bool) whether the tab is selected.
|
|
*/ -}}
|
|
{{- $tabs := .tabs }}
|
|
|
|
{{- if eq (len $tabs) 0 -}}
|
|
{{ errorf "tabs must have at least one tab" }}
|
|
{{- end -}}
|
|
|
|
{{- $enableSync := .enableSync }}
|
|
|
|
{{- /* Create group data for syncing and select the first tab if none is selected. */ -}}
|
|
{{- $selectedIndex := 0 -}}
|
|
{{ $dataTabGroup := slice -}}
|
|
|
|
{{- range $i, $item := $tabs -}}
|
|
{{- $dataTabGroup = $dataTabGroup | append ($item.name) -}}
|
|
|
|
{{- if $item.selected -}}
|
|
{{- $selectedIndex = $i -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- /* Generate a unique ID for each tab group. */ -}}
|
|
{{- $globalID := printf "tabs-%02v" $tabsID -}}
|
|
|
|
{{- /* Keep HTML on single lines to avoid `>` being parsed as blockquote when nested in steps (#876) */ -}}
|
|
<div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
|
|
<div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800" role="tablist"{{- if $enableSync }} data-tab-group="{{ delimit $dataTabGroup `,` }}"{{- end }}>
|
|
{{- range $i, $item := $tabs -}}
|
|
<button class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white hx:hextra-focus-visible-inset" id="tabs-tab-{{ $globalID }}-{{ $item.id }}" role="tab" type="button" aria-controls="tabs-panel-{{ $globalID }}-{{ $item.id }}" aria-selected="{{ if eq $i $selectedIndex }}true{{ else }}false{{ end }}" tabindex="{{ if eq $i $selectedIndex }}0{{ else }}-1{{ end }}"{{- if eq $i $selectedIndex }} data-state="selected"{{- end }}><span class="hx:inline-flex hx:items-center hx:gap-1.5">{{- with $item.icon -}}{{- partial "utils/icon.html" (dict "name" . "attributes" `height=1em class="hx:inline-block hx:shrink-0" aria-hidden="true"`) -}}{{- end -}}<span>{{- $item.name -}}</span></span></button>
|
|
{{- end -}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{{- range $i, $item := $tabs -}}
|
|
<div class="hextra-tabs-panel hx:rounded-sm hx:pt-6 hx:hidden hx:data-[state=selected]:block" id="tabs-panel-{{ $globalID }}-{{ $item.id }}" role="tabpanel" aria-labelledby="tabs-tab-{{ $globalID }}-{{ $item.id }}" aria-hidden="{{ if eq $i $selectedIndex }}false{{ else }}true{{ end }}"{{- if eq $i $selectedIndex }} tabindex="0" data-state="selected"{{- end }}>
|
|
{{- $item.content | markdownify -}}
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|