mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 23:55:53 +00:00
e7b4edf7a6
The Dropdown component should be considered the dropdown folder going forward. This should be distinguished as a different component that composes the Dropdown component Since the template itself is rather simple it seems preferable to have duplicate templates that describe the actual component (PageTools, VariantsDropdown and LanguageButton) MenuDropdown is renamed Dropdown and styles that don't correspond to the Dropdown component are moved to the relevant components. MenuContents mustache template (future component) is added to DRY up several of the new templates. Bug: T320927 Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
30 lines
1.1 KiB
Plaintext
30 lines
1.1 KiB
Plaintext
{{!
|
|
See @typedef MenuDefinition
|
|
}}
|
|
{{! this template must be used with Dropdown/Close to avoid unclosed HTML tags }}
|
|
<div id="{{id}}" class="vector-menu vector-dropdown vector-menu-dropdown{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
|
|
{{!
|
|
Dropdown menus use the checkbox hack and require `input` and `label` elements.
|
|
`aria-label` is applied to the `input` which is semantically a button.
|
|
The `label` element is used as a visual button.
|
|
}}
|
|
<input type="checkbox"
|
|
id="{{id}}-checkbox"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
data-event-name="ui.dropdown-{{id}}"
|
|
class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
|
|
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
|
|
{{{html-vector-menu-checkbox-attributes}}}
|
|
/>
|
|
<label
|
|
id="{{id}}-label"
|
|
for="{{id}}-checkbox"
|
|
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
|
|
{{{html-vector-menu-heading-attributes}}}
|
|
>
|
|
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
|
|
</label>
|
|
<div id="{{id}}-content-container" class="vector-menu-content">
|
|
|