[tips] use google material symbols in buttons with ripple like effect

Webix JS
1

https://snippet.webix.com/wj9t1jzr

A more webix way to do that perhaps ?

1 Like
2

Good day @franck34,

The better way to use Google symbols is create a custom component based on button view or by rewriting
button view . Inside of .protoUI we add a check for a new type, and depending on this, add additional HTML-content to the template:

  $renderInput(obj) {
    const symbol = `<span class="webix_icon_btn material-symbols material-symbols-outlined" style="max-width:${obj.cheight}px;">${obj.icon}</span>`
    return `<button type='button' ${obj.popup ? "aria-haspopup='true'":""} class='webix_button ${this.config.type === "micon" ? "symbol-btn" : ""}'>${this.config.type === "micon" ? symbol : ""}${obj.label || obj.value}</button>`;
  }

Please, check out the snippets with example:
Based on button original component: Code Snippet
Rewrited ‘button’ view: Code Snippet

The same must be done for other components where you plan to use symbols (somewhere you can make a separate type, somewhere you need to create a custom component like in example above).

1 Like