mirror of
https://github.com/docker/docs.git
synced 2026-04-04 10:18:57 +07:00
038e6dc682
- Extract classes to utilities and components. - Reduce number of colors used. - Harmonize button colors. - Restyle admonitions. - Move **Page options** button to main article. - Various color tweaks.
52 lines
1.4 KiB
HTML
52 lines
1.4 KiB
HTML
{{ with .Inner }}{{/* don't do anything, just call it */}}{{ end }}
|
|
{{ $first := urlize (index (.Store.Get "tabs") 0).name }}
|
|
{{ $group := .Get "group" }}
|
|
{{ $groupID := fmt.Printf "tabgroup-%s" (urlize $group) }}
|
|
{{ $persist := .Get "persist" }}
|
|
|
|
|
|
<div
|
|
{{ with $group }}
|
|
{{ if $persist }}
|
|
x-data="{ selected: $persist('{{ $first }}').as('{{ $groupID }}') }"
|
|
{{ else }}
|
|
x-data="{ selected: '{{ $first }}' }"
|
|
{{ end }}
|
|
@tab-select.window="$event.detail.group === '{{ . }}' ? selected =
|
|
$event.detail.name : null"
|
|
{{ else }}
|
|
x-data="{ selected: '{{ $first }}' }"
|
|
{{ end }}
|
|
aria-role="tabpanel"
|
|
>
|
|
<div aria-role="tablist" class="space-x-2">
|
|
{{ range (.Store.Get "tabs") }}
|
|
<button
|
|
class="p-1"
|
|
:class="selected === '{{ .name | urlize }}' &&
|
|
'border-blue border-b-4 dark:border-b-blue-600'"
|
|
{{ if $group }}
|
|
@click="$dispatch('tab-select', { group: '{{ $group }}', name:
|
|
'{{ .name | urlize }}'})"
|
|
{{ else }}
|
|
@click="selected = '{{ .name | urlize }}'"
|
|
{{ end }}
|
|
>
|
|
{{ .name | page.RenderString }}
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
<hr class="!mt-0" />
|
|
<div>
|
|
{{ range (.Store.Get "tabs") }}
|
|
<div
|
|
aria-role="tab"
|
|
:class="selected !== '{{ .name | urlize }}' && 'hidden'"
|
|
>
|
|
{{ .content | page.RenderString (dict "display" "block") }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
<hr />
|
|
</div>
|