How to use the @material/dom/ponyfill.matches function in @material/dom

To help you get started, we’ve selected a few @material/dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github material-components / material-components-web / packages / mdc-list / component.ts View on Github external
private getListItemIndex_(evt: Event) {
    const eventTarget = evt.target as Element;
    const nearestParent = closest(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);

    // Get the index of the element if it is a list item.
    if (nearestParent && matches(nearestParent, `.${cssClasses.LIST_ITEM_CLASS}`)) {
      return this.listElements.indexOf(nearestParent);
    }

    return -1;
  }
github pgbross / vue-material-adapter / packages / mcwv-tabs / tab-scroller.js View on Github external
eventTargetMatchesSelector: (evtTarget, selector) => {
        return matches(evtTarget, selector);
      },
      addClass: className => this.$set(this.classes, className, true),
github material-components / material-components-web-components / packages / base / src / utils.ts View on Github external
export function findAssignedElement(slot: HTMLSlotElement, selector: string) {
  for (const node of slot.assignedNodes({flatten: true})) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      const el = (node as HTMLElement);
      if (matches(el, selector)) {
        return el;
      }
    }
  }

  return null;
}
github pgbross / vue-material-adapter / packages / mcwv-ripple / ripple-base.js View on Github external
isSurfaceActive: () => {
        return matches(vm.$el, ':active');
      },
      isSurfaceDisabled: () => {
github trimox / angular-mdc-web / packages / tab-scroller / tab-scroller.ts View on Github external
      eventTargetMatchesSelector: (evtTarget: HTMLElement, selector: string) => matches(evtTarget, selector),
      addClass: (className: string) => this._getHostElement().classList.add(className),
github material-components / material-components-web-react / packages / ripple / index.tsx View on Github external
isSurfaceActive: () => {
          if (activator) {
            return matches(activator, ':active');
          }

          return matches(surface, ':active');
        },
        isSurfaceDisabled: () => this.props.disabled as boolean,
github material-components / material-components-web / packages / mdc-tab-scroller / component.ts View on Github external
      eventTargetMatchesSelector: (evtTarget, selector) => matches(evtTarget as Element, selector),
      addClass: (className) => this.root_.classList.add(className),
github trimox / angular-mdc-web / packages / ripple / ripple.service.ts View on Github external
      isSurfaceActive: () => matches(instance._root, ':active'),
      isSurfaceDisabled: () => coerceBooleanProperty(instance.disabled),
github material-components / material-components-web-components / packages / dialog / src / mwc-dialog-base.ts View on Github external
eventTargetMatches: (target, selector) =>
          target ? matches(target as Element, selector) : false,
      getActionFromEvent: (e: Event) => {
github material-components / material-components-web / packages / mdc-ripple / component.ts View on Github external
      isSurfaceActive: () => matches(instance.root_, ':active'),
      isSurfaceDisabled: () => Boolean(instance.disabled),

@material/dom

DOM manipulation utilities for Material Components for the web

MIT
Latest version published 2 years ago

Package Health Score

85 / 100
Full package analysis

Similar packages