How to use the @material/radio.MDCRadio function in @material/radio

To help you get started, we’ve selected a few @material/radio 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-catalog / src / ListCatalog.js View on Github external
    this.initRadio = radioEl => radioEl && this.destroyableComponents.push(new MDCRadio(radioEl));
github fintechstudios / angularjs-mdc / src / mdc-radio / mdc-radio.js View on Github external
constructor(...args) {
    super(...args);

    this.$element.addClass('mdc-radio');
    this.mdc = new MDCRadio(this.$element[0]);

    this.$element.ready(() => {
      this.mdc.ripple.layout();
    });
  }
github material-components / material-components-site-generator / jekyll-site-src / _js_src / mdc-code-render.js View on Github external
function initRadioButton(groupName, label) {
    const templateEl = document.getElementById(LANGUAGE_RADIO_TEMPLATE_ID);
    const radioId = `language-radio-${languageRadioCount++}`;

    const radioInputEl = templateEl.content.querySelector('.mdc-radio__native-control');
    radioInputEl.setAttribute('id', radioId);
    radioInputEl.setAttribute('name', groupName);
    radioInputEl.setAttribute('value', label);

    const radioLabelEl = templateEl.content.querySelector('.language-name');
    radioLabelEl.setAttribute('for', radioId);
    radioLabelEl.textContent = label;

    const radioEl = document.importNode(templateEl.content, true);

    const radio = new MDCRadio(radioEl.querySelector('.mdc-radio'));
    radio.listen('change', () => {
      const lang = radio.nativeControl_.value;
      if (selectedLanguage.get() == lang) {
        return false;
      }
      selectedLanguage.set(lang);

      const event = document.createEvent('HTMLEvents');
      event.initEvent('selectLangChange', false, true);
      document.dispatchEvent(event);
    });

    return {
      component: radio,
      element: radioEl,
    };
github Tencent / omi / packages / omim / src / radio / index.tsx View on Github external
installed() {
    const radio = new MDCRadio(this.shadowRoot.querySelector('.mdc-radio'))
    const formField = new MDCFormField(this.shadowRoot.querySelector('.mdc-form-field'))
    formField.input = radio
    this.radio = radio
    this.group = this.getScopeRoot(this.shadowRoot.host).querySelectorAll(`m-radio[name='${this.props.name}']`)
    //fix group 不一致
    this.group.forEach(ele => {
      ele.group = this.group
    })
  }