How to use the @material/icon-button.MDCIconButtonToggle function in @material/icon-button

To help you get started, we’ve selected a few @material/icon-button 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 jsoetens / udacity-nanodegree-mws / mws-project-3 / app / js / resto-info.js View on Github external
const elementGoogleMaps = document.getElementById('google-maps');
const elementGoogleStaticMaps = document.getElementById('google-static-maps');
const elementReviewsContainer = document.getElementById('reviews-container');
const elementReviewsList = document.getElementById('reviews-list');

/**
 * Material Design
 */
// Enhance icon button to have a ripple effect by instantiating MDCRipple 
// on the root element.
const iconButtonRipple = 
  new MDCRipple(document.querySelector('.mdc-icon-button'));
iconButtonRipple.unbounded = true;

const toggleFavoriteButton = 
  new MDCIconButtonToggle(elementAddToFavorites);

elementAddToFavorites.addEventListener('MDCIconButtonToggle:change', function(evt) {
  // let newStatus = evt.detail.isOn ? 'yes' : 'no';
  if (evt.detail.isOn) {
    is_favorite = true;
    postIsFavoriteNetworkFirst(self.restaurant_id, is_favorite)
  } else {
    is_favorite = false;
    postIsFavoriteNetworkFirst(self.restaurant_id, is_favorite);
  }
});

/**
 * Post the is_favorite status by restaurant_id, save data locally to IndexedDB,
 * send to API server, update UI.
 * POST: http://localhost:1337/restaurants//?is_favorite=true
github material-components / material-components-web-catalog / src / ShapeCatalog.js View on Github external
                  ref={(surfaceEl) => this.iconToggle = surfaceEl && new MDCIconButtonToggle(surfaceEl)}>
                  <i>favorite</i>
github prateekbh / preact-material-components / ts / IconButton / index.tsx View on Github external
public componentDidMount() {
    super.componentDidMount();
    this.MDComponent = new MDCIconButtonToggle(this.control);
  }
  public componentWillUnmount() {
github Tencent / omi / packages / omim / src / icon-button / index.tsx View on Github external
domReady(() => {
      this.update()

      const root = this.shadowRoot.querySelector('.mdc-icon-button')
      if (this.props.ripple) {
        const r = new MDCRipple(root)
        r.unbounded = true
      }

      if (this.props.icons || this.props.imgs || (this.props.children && this.props.children[0] && this.props.children[1])) {
        const toggleButton = new MDCIconButtonToggle(root)
        toggleButton.listen('MDCIconButtonToggle:change', (evt: CustomEvent) => {
          this.fire('change', { isOn: evt.detail.isOn })
        })

      }
    })
  }