mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
add trailing icon to button
This commit is contained in:
parent
db33fa4270
commit
4e2d62aef0
@ -75,6 +75,10 @@ limitations under the License.
|
||||
<mwc-button disabled label="disabled" icon="fingerprint"></mwc-button>
|
||||
</div>
|
||||
|
||||
<h4>trailing icon labeled</h4>
|
||||
|
||||
<mwc-button label="Normal" icon="explore" trailingIcon></mwc-button>
|
||||
|
||||
<script type="module">
|
||||
import {html, css} from 'lit-element/lit-element.js';
|
||||
import {Button} from '@material/mwc-button/mwc-button.js';
|
||||
|
@ -37,6 +37,9 @@ export class Button extends LitElement {
|
||||
@property({type: Boolean})
|
||||
disabled = false;
|
||||
|
||||
@property({type: Boolean})
|
||||
trailingIcon = false;
|
||||
|
||||
@property()
|
||||
icon = '';
|
||||
|
||||
@ -57,14 +60,16 @@ export class Button extends LitElement {
|
||||
'mdc-button--outlined': this.outlined,
|
||||
'mdc-button--dense': this.dense,
|
||||
};
|
||||
const mdcButtonIcon = html`<span class="material-icons mdc-button__icon">${this.icon}</span>`
|
||||
return html`
|
||||
<button
|
||||
.ripple="${ripple({unbounded: false})}"
|
||||
class="mdc-button ${classMap(classes)}"
|
||||
?disabled="${this.disabled}"
|
||||
aria-label="${this.label || this.icon}">
|
||||
${this.icon ? html`<span class="material-icons mdc-button__icon">${this.icon}</span>` : ''}
|
||||
${this.label}
|
||||
${this.icon && !this.trailingIcon ? mdcButtonIcon : ''}
|
||||
<span class="mdc-button__label">${this.label}</span>
|
||||
${this.icon && this.trailingIcon ? mdcButtonIcon : ''}
|
||||
<slot></slot>
|
||||
</button>`;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user