material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-27 06:04:44 +03:00
Code Issues Projects Releases Wiki Activity

add trailing icon to button

Browse Source
This commit is contained in:
navigalia 2019-03-05 16:04:28 +01:00
parent db33fa4270
commit 4e2d62aef0
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/button.html
View File

@ -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';

9
packages/button/src/mwc-button.ts
View File

@ -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>`;
}