4f130f6e4f
- Add new shortcode to render details HTML element. - Implement integration tests to check: default state, custom summary, open state, attribute sanitization, allowed attributes, and localization of default summary text. - Update docs to include details shortcode. Closes # 13090
68 lines
No EOL
1.9 KiB
HTML
68 lines
No EOL
1.9 KiB
HTML
{{- /*
|
|
Renders an HTML details element.
|
|
|
|
@param {string} [summary] The content of the child summary element.
|
|
@param {bool} [open=false] Whether to initially display the contents of the details element.
|
|
@param {string} [class] The value of the element's class attribute.
|
|
@param {string} [name] The value of the element's name attribute.
|
|
|
|
@reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
|
|
|
|
@examples
|
|
|
|
{{< details >}}
|
|
A basic collapsible section.
|
|
{{< /details >}}
|
|
|
|
{{< details summary="Custom Summary Text" >}}
|
|
Showing custom `summary` text.
|
|
{{< /details >}}
|
|
|
|
{{< details summary="Open Details" open=true >}}
|
|
Contents displayed initially by using `open`.
|
|
{{< /details >}}
|
|
|
|
{{< details summary="Styled Content" class="my-custom-class" >}}
|
|
Content can be styled with CSS by specifying a `class`.
|
|
|
|
Target details element:
|
|
|
|
```css
|
|
details.my-custom-class { }
|
|
```
|
|
|
|
Target summary element:
|
|
|
|
```css
|
|
details.my-custom-class > summary > * { }
|
|
```
|
|
|
|
Target inner content:
|
|
|
|
```css
|
|
details.my-custom-class > :not(summary) { }
|
|
```
|
|
{{< /details >}}
|
|
|
|
{{< details summary="Grouped Details" name="my-details" >}}
|
|
Specifying a `name` allows elements to be connected, with only one able to be open at a time.
|
|
{{< /details >}}
|
|
|
|
*/}}
|
|
|
|
{{- /* Get arguments. */}}
|
|
{{- $summary := or (.Get "summary") (T "shortcodes.details") "Details" }}
|
|
{{- $class := or (.Get "class") "" }}
|
|
{{- $name := or (.Get "name") "" }}
|
|
{{- $open := false }}
|
|
{{- if in (slice "false" false 0) (.Get "open") }}
|
|
{{- $open = false }}
|
|
{{- else if in (slice "true" true 1) (.Get "open")}}
|
|
{{- $open = true }}
|
|
{{- end }}
|
|
|
|
{{- /* Render. */}}
|
|
<details{{- if $open }} open{{ end }}{{- if $name }} name="{{ $name }}"{{- end }}{{- if $class }} class="{{ $class }}"{{- end }}>
|
|
<summary>{{ $summary | .Page.RenderString }}</summary>
|
|
{{ .Inner | .Page.RenderString (dict "display" "block") -}}
|
|
</details> |