UNPKG

@exadel/esl

Version:

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

esl-ui.com

exadel-inc/esl

60 lines (33 loc) • 2.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# [ESL](../../../) Trigger Version: *2.1.0*. Authors: *Alexey Stsefanovich (ala'n)*, *Julia Murashko*. <a name="intro"></a> **ESLTrigger** - a custom element, that allows triggering `ESLToggleable` instances state changes. **NOTE** (update `5.8.0`): Starting from `5.8.0` version, default `ESLTrigger` styles handle missing target element by setting `display: none` to the trigger element. If you want to keep the trigger visible, you can override default styles for the `no-target` attribute of the trigger `esl-trigger[no-target] { display: block; }`, or just skip importing default styles in your project. It is also important to note that there is no more indirect console warning about missing target element, use selector query with `no-target` attribute or rely on hidden state of the trigger element that comes out of the box now. ### Attributes / Properties - - `active-class` - CSS classes to set on active state - `active-class-target` - target element ESLTraversingQuery selector to set `active-class` - `target` - target Toggleable ESLTraversingQuery selector - `track-click` - [MediaQuery](../esl-media-query/README.md) to define allowed to track click event media. (Default: `all`) - `track-hover` - [MediaQuery](../esl-media-query/README.md) to define allowed to track hover event media. (Default: `not all`) - `ignore-esc` - to disallow handle ESC keyboard event to hide target element - `mode` - action to pass to the Toggleable. Supports `show`, `hide` and `toggle` values (`toggle` by default) - `ignore` - selector to ignore inner elements - `a11y-target` - selector of inner target element to place aria attributes. Uses trigger itself if blank - `a11y-label-active` - value of aria-label for active state - `a11y-label-inactive` - value of aria-label for inactive state - `show-delay` - show delay value (number in ms or `none`) - `hide-delay` - hide delay value (number in ms or `none`) - `hover-show-delay` - show delay override value for hover (number in ms or `none`) - `hover-hide-delay` - hide delay override value for hover (number in ms or `none`) - `stop-propagation` - stop event bubbling on click and keydown events (default `true`) ### Readonly Attributes / Properties - `active` - readonly marker of active Toggleable target - `no-target` - readonly marker to indicate that no target Toggleable was found <i class="badge badge-sup badge-success">new</i> ### Events - `esl:change:active` - thrown when trigger changes its state