esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • Tabs
    • Toggleable

ESL Trigger

Related Components

  • ESL Toggleable
  • ESL Panel
  • ESL Popup
  • ESL Tabs

Related Examples

  • Toggleable
  • Accordion
  • Tabs
  • Menu
  • Popup

ESLTrigger - a custom element, that allows triggering ESLToggleable instances state changes.

Attributes / Properties

  • active - readonly marker of active Toggleable target

  • 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 (next by default)

  • track-click - MediaQuery to define allowed to track click event media. (Default: all)

  • track-hover - MediaQuery 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)

Events

  • esl:change:active - thrown when trigger changes its state

ESL v4.2.0 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko