How to use the @material/drawer/dismissible/foundation function in @material/drawer

To help you get started, we’ve selected a few @material/drawer 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-drawer / mdc-drawer.js View on Github external
},
      notifyClose: () => {
        this.$emit('change', false);
        this.$emit('close');
      },
      notifyOpen: () => {
        this.$emit('change', true);
        this.$emit('open');
      },
      trapFocus: () => this.focusTrap_.activate(),
      releaseFocus: () => this.focusTrap_.deactivate(),
    };

    const { DISMISSIBLE, MODAL } = MDCDismissibleDrawerFoundation.cssClasses;
    if (this.drawer_.classList.contains(DISMISSIBLE)) {
      this.foundation = new MDCDismissibleDrawerFoundation(adapter);
    } else if (this.drawer_.classList.contains(MODAL)) {
      this.foundation = new MDCModalDrawerFoundation(adapter);
    } else {
      throw new Error(
        `MDCDrawer: Failed to instantiate component. Supported variants are ${DISMISSIBLE} and ${MODAL}.`,
      );
    }
    this.foundation && this.foundation.init();
    this.initialSyncWithDOM();

    if (this.toggleOn) {
      this.toggleOnEventSource = this.toggleOnSource || this.$root;
      this.toggleOnEventSource.$on(this.toggleOn, this.toggle);
    }
    if (this.openOn) {
      this.openOnEventSource = this.openOnSource || this.$root;
github pgbross / vue-material-adapter / packages / mcwv-drawer / drawer.js View on Github external
},
      notifyClose: () => {
        this.$emit('change', false);
        this.$emit('close');
      },
      notifyOpen: () => {
        this.$emit('change', true);
        this.$emit('open');
      },
      trapFocus: () => this.focusTrap_.activate(),
      releaseFocus: () => this.focusTrap_.deactivate(),
    };

    const { DISMISSIBLE, MODAL } = MDCDismissibleDrawerFoundation.cssClasses;
    if (this.drawer_.classList.contains(DISMISSIBLE)) {
      this.foundation = new MDCDismissibleDrawerFoundation(adapter);
    } else if (this.drawer_.classList.contains(MODAL)) {
      this.foundation = new MDCModalDrawerFoundation(adapter);
    } else {
      throw new Error(
        `mcwDrawer: Failed to instantiate component. Supported variants are ${DISMISSIBLE} and ${MODAL}.`,
      );
    }
    this.foundation && this.foundation.init();
    this.initialSyncWithDOM();

    if (this.toggleOn) {
      this.toggleOnEventSource = this.toggleOnSource || this.$root;
      this.toggleOnEventSource.$on(this.toggleOn, this.toggle);
    }
    if (this.openOn) {
      this.openOnEventSource = this.openOnSource || this.$root;