@ivanvanderbyl/ember-material-components-button
v0.77.1-alpha.2
Published
ember-cli addon for @material/button
Downloads
7
Maintainers
Readme
@ivanvanderbyl/ember-material-components-button
ember-cli addon for @material/button
.
Installation
ember install @ivanvanderbyl/ember-material-components-button
Components
This package contains the following top-level components.
mdc-button
Description
Add a button element to the parent.
Usage
{{mdc-button style=[raised|unelevated|outlined]
dense=[true|false]
disabled=[true|false]
type=type
}}
Attributes
style
- The button style. Must either be one of the following string values:raised
,unelevated
, oroutlined
dense
- The button is dense.disabled
- The button is in a disabled state.type
- The type of button (e.g., submit or reset).
Examples
{{#mdc-button style="raised"}}Button{{/mdc-button}}
{{#mdc-button style="outlined"}}Button{{/mdc-button}}
Listening for Button Clicks
Use the click
attribute and the action
helper to listen for button clicks.
{{#mdc-button style="raised" click=(action "clicked")}}Button{{/mdc-button}}
Adding Icons to Buttons
Use {{mdc-button-icon}}
, which extends the
{{mdc-icon}}
component, to add an icon to the button.
{{#mdc-button style="raised"}}{{mdc-button-icon "event"}}Button{{/mdc-button}}
mdc-button-linkto
The {{mdc-button-linkto}}
components will bind the button to a route, which means you
do not have to create an action that routes to a new location when clicked. The
does this by extending the LinkComponent
component, and applying the Button
mixin
exported from this module.
Because
{{mdc-button-linkto}}
extendsLinkComponent
, all properties and methods available onLinkComponent
are available on{{mdc-button-linkto}}
.
{{#mdc-button-linkto "contact" style="unelevated"}}Contact Us{{/mdc-button-linkto}}
{{#mdc-button-linkto "user" user.id style="raised"}}Contact Us{{/mdc-button-linkto}}