How to use @material/mwc-ripple - 10 common examples

To help you get started, we’ve selected a few @material/mwc-ripple 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-components / packages / fab / src / mwc-fab-base.ts View on Github external
let iconTemplate: TemplateResult|string = '';

    if (this.icon) {
      iconTemplate = html`
        <span class="material-icons mdc-fab__icon">${this.icon}</span>`;
    }

    const label = showLabel ? html
    `<span class="mdc-fab__label">${this.label}</span>`: '';
    return html`
      <button aria-label="${this.label || this.icon}" class="mdc-fab ${classMap(classes)}">
        <div class="mdc-fab__ripple"></div>
        ${this.showIconAtEnd ? label : ''}
        ${iconTemplate}
        ${!this.showIconAtEnd ? label : ''}
      </button>`;
  }
}
github material-components / material-components-web-components / packages / radio / src / mwc-radio-base.ts View on Github external
protected render() {
    return html`
      <div class="mdc-radio">
        <input name="${this.name}" type="radio" class="mdc-radio__native-control">
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
        <div class="mdc-radio__ripple"></div>
      </div>`;
  }
github material-components / material-components-web-components / packages / icon-button / src / mwc-icon-button-base.ts View on Github external
protected render() {
    return html`<button aria-label="${this.label || this.icon}" class="mdc-icon-button">
    
      <i class="material-icons">${this.icon}</i>
    
  </button>`;
  }
}
github material-components / material-components-web-components / packages / button / src / mwc-button-base.ts View on Github external
protected render() {
    const classes = {
      'mdc-button--raised': this.raised,
      'mdc-button--unelevated': this.unelevated,
      'mdc-button--outlined': this.outlined,
      'mdc-button--dense': this.dense,
    };
    const mdcButtonIcon =
        html`<span class="material-icons mdc-button__icon">${this.icon}</span>`;
    const buttonRipple = ripple({unbounded: false});
    return html`
      <button aria-label="${this.label || this.icon}" class="mdc-button ${classMap(classes)}" id="button">
        <div class="mdc-button__ripple"></div>
        ${this.icon &amp;&amp; !this.trailingIcon ? mdcButtonIcon : ''}
        <span class="mdc-button__label">${this.label}</span>
        ${this.icon &amp;&amp; this.trailingIcon ? mdcButtonIcon : ''}
        
      </button>`;
  }
}
github material-components / material-components-web-components / node_modules / @material / mwc-radio / mwc-radio.js View on Github external
render() {
        return html `
      ${this.renderStyle()}
      <div class="mdc-radio">
        <input name="${this.name}" type="radio" class="mdc-radio__native-control">
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>`;
    }
    firstUpdated() {
github material-components / material-components-web-components / node_modules / @material / mwc-button / mwc-button.js View on Github external
render() {
        const classes = {
            'mdc-button--raised': this.raised,
            'mdc-button--unelevated': this.unelevated,
            'mdc-button--outlined': this.outlined,
            'mdc-button--dense': this.dense,
        };
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-button ${classMap(classes)}">
        ${this.icon ? html `<span class="material-icons mdc-button__icon">${this.icon}</span>` : ''}
        ${this.label}
        
      </button>`;
    }
};
github material-components / material-components-web-components / packages / checkbox / src / mwc-checkbox-base.ts View on Github external
protected render() {
    return html`
      <div class="mdc-checkbox">
        <input class="mdc-checkbox__native-control" type="checkbox">
        <div class="mdc-checkbox__background">
          <svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
            <path d="M1.73,12.91 8.1,19.28 22.79,4.59" fill="none" class="mdc-checkbox__checkmark-path"></path>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
      </div>`;
github material-components / material-components-web-components / node_modules / @material / mwc-fab / mwc-fab.js View on Github external
render() {
        const classes = {
            'mdc-fab--mini': this.mini,
            'mdc-fab--exited': this.exited,
            'mdc-fab--extended': this.extended,
        };
        const showLabel = this.label !== '' &amp;&amp; this.extended;
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-fab ${classMap(classes)}">
        ${showLabel &amp;&amp; this.showIconAtEnd ? this.label : ''}
        ${this.icon ? html `<span class="material-icons mdc-fab__icon">${this.icon}</span>` : ''}
        ${showLabel &amp;&amp; !this.showIconAtEnd ? this.label : ''}
      </button>`;
    }
};
github material-components / material-components-web-components / packages / fab / mwc-fab.js View on Github external
render() {
        const classes = {
            'mdc-fab--mini': this.mini,
            'mdc-fab--exited': this.exited,
            'mdc-fab--extended': this.extended,
        };
        const showLabel = this.label !== '' &amp;&amp; this.extended;
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-fab ${classMap(classes)}">
        ${showLabel &amp;&amp; this.showIconAtEnd ? this.label : ''}
        ${this.icon ? html `<span class="material-icons mdc-fab__icon">${this.icon}</span>` : ''}
        ${showLabel &amp;&amp; !this.showIconAtEnd ? this.label : ''}
      </button>`;
    }
};
github material-components / material-components-web-components / node_modules / @material / mwc-switch / mwc-switch.js View on Github external
render() {
        return html `
      ${this.renderStyle()}
      <div class="mdc-switch">
        <div class="mdc-switch__track"></div>
        <div class="mdc-switch__thumb-underlay">
          <div class="mdc-switch__thumb">
            <input role="switch" class="mdc-switch__native-control" id="basic-switch" type="checkbox">
          </div>
        </div>
      </div>
      `;
    }
};

@material/mwc-ripple

Material Design ripple web component

Apache-2.0
Latest version published 2 years ago

Package Health Score

67 / 100
Full package analysis