How to use the @material/menu/foundation.MDCMenuFoundation function in @material/menu

To help you get started, we’ve selected a few @material/menu 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 pgbross / vue-material-adapter / packages / mcwv-menu / mdc-menu.0.vue View on Github external
mounted() {
    const refreshItems = () => {
      this.items = [].slice.call(
        this.$refs.items.querySelectorAll('.mdc-list-item[role]'),
      );
      this.$emit('update');
    };
    this.slotObserver = new MutationObserver(() => refreshItems());
    this.slotObserver.observe(this.$el, {
      childList: true,
      subtree: true,
    });

    this._previousFocus = undefined;

    this.foundation = new MDCMenuFoundation({
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => this.$refs.root.classList.contains(className),
      hasNecessaryDom: () => Boolean(this.$refs.items),
      getAttributeForEventTarget: (target, attributeName) =>
        target.getAttribute(attributeName),
      getInnerDimensions: () => ({
        width: this.$refs.items.offsetWidth,
        height: this.$refs.items.offsetHeight,
      }),
      hasAnchor: () =>
        this.$refs.root.parentElement &&
        this.$refs.root.parentElement.classList.contains('mdc-menu-anchor'),
      getAnchorDimensions: () =>
        this.$refs.root.parentElement.getBoundingClientRect(),
      getWindowDimensions: () => ({
github material-components / material-components-web-react / packages / menu / index.tsx View on Github external
componentDidMount() {
    const foundation = new MDCMenuFoundation(this.adapter);
    foundation.init();
    this.setState({foundation});
  }
github pgbross / vue-material-adapter / packages / mcwv-menu / menu.js View on Github external
item: this.items[evtData.index],
        });

        this.$emit('select', {
          index: evtData.index,
          item: this.items[evtData.index],
        });
      },
      getMenuItemCount: () => this.items.length,
      focusItemAtIndex: index => this.items[index].focus(),
      focusListRoot: () =>
        this.$el.querySelector(strings.LIST_SELECTOR).focus(),
    };

    this.menuOpen = this.open;
    this.foundation = new MDCMenuFoundation(adapter);

    this.foundation.init();
  },
  beforeDestroy() {
github pgbross / vue-material-adapter / packages / mcwv-menu / mdc-menu.js View on Github external
mounted() {
    this._previousFocus = undefined;

    this.foundation = new MDCMenuFoundation({
      addClassToElementAtIndex: (index, className) => {
        const list = this.items;
        list[index].classList.add(className);
      },
      removeClassFromElementAtIndex: (index, className) => {
        const list = this.items;
        list[index].classList.remove(className);
      },
      addAttributeToElementAtIndex: (index, attr, value) => {
        const list = this.items;
        list[index].setAttribute(attr, value);
      },
      removeAttributeFromElementAtIndex: (index, attr) => {
        const list = this.items;
        list[index].removeAttribute(attr);
      },