Wrapper components for google's web starter kit material design elements.
Note: expect periodic breaking changes since we're following the development of the material-sprint branch of wsk.
This is an ember-cli addon containing a collection of ember js components wrapping/adapting the vanilla javascript that powers the material design elements included in the future release of Google's Web Starter Kit.
The aim if this project is to keep compatibility with the default WSK, if you need something more emberish have a look at ember-paper.
v0.1.0 - Initial version
- button, card, column-layout, item, shadow elements
- ripple and shadow mixins
- extra: animated hamburger icon.
From the root fo your ember-cli project do:
npm install ember-material --save-dev
- Properties (can be mixed)
action
(default: null) : Default to trigger on button pressraised
(default: false) : raised button, false creates a flat buttoncolored
(default: false) : apply default color stylesripple
(default: false) : enable ripple effectfav
(default: false) : create a FAV button (do not mix withicon
)icon
(default: false) : create icon button (do not mix withfav
)
Example:
{{#wsk-button action="someAction"
ripple=true
colored=true
raised=true
}} Button text {{/wsk-button}}
Example:
{{#wsk-column-layout}}
<div class="some-class">
...
</div>
<div class="other-class">
...
</div>
<div class="another-class">
...
</div>
{{/wsk-column-layout}}
Example:
{{#material-card}}
{{#material-card-image}}
<img src="some_image.png" alt="">
{{/material-card-image}}
{{#material-card-heading}}
stuff
{{/material-card-heading}}
{{#material-card-caption}}
more stuff
{{/material-card-caption}}
{{#material-card-lower}}
lots of stuff
{{/material-card-lower}}
{{#material-card-bottom}}
some action
{{/material-card-bottom}}
{{/material-card}}
- Properties
ripple
(default: false) : enable ripple effect
Example: {{#wsk-item ripple=true}} item text {{/wsk-item}}
- Properties
zPosition
(default: 1) : element depth for shadowing
Example:
{{#wsk-shadow zPosition=2}}
<div>Some stuff</div>
{{/wsk-shadow}}
####More to come soon ...
If you want to contribute, well ... thank you!
Issues and PR's are welcome, the information below will be useful to you:
*Node js *Bower *node-sass-cli (globally for scripting)
*NOTE: for now, you need to install node-sass-cli for the wsk styles, I hope I find a better way to build these soon
git clone
this repositorynpm install
bower install
./scripts/build-wsk-styles.sh
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.