This is an ember-paper addon that provides an implementation of material expansion panels.
An example usage:
You can see how this addon looks like at https://miguelcobain.github.io/ember-paper-expansion-panel/
ember install ember-paper-expansion-panel
Don't forget to import your styles in your app.scss
after importing ember paper styles:
@import "ember-paper";
@import "ember-paper-expansion-panel";
expanded
- defaults tofalse
- this toggles the expansion panel between expanded and collapsed modes.onExpandedChange
- an action that is sent when a the panel is expanded or collapsed. You get two arguments, a boolean with the current state ofexpanded
and the event object
This component yields a hash that contains:
collapsed
andexpanded
components- a
collapse
action you can use to collapse the panel (e.g use it with paper-button's onClick) - an
isExpanded
boolean that tells you the current state of the panel
Use this component to render what shows up in the collapsed state.
Its API is just like a {{#paper-item}}
. It also yields a controls
hash.
This component yields a hash that contains the header
, content
and footer
components.
Use this component to render what goes into the expanded header state.
Again, this component will behave like {{#paper-item}}
. It also yields a controls
hash.
Use this component to render what goes inside the expanded content area.
Use this component to render what goes inside the expanded footer area.
git clone <repository-url>
cd my-addon
npm install
npm run lint:js
npm run lint:js -- --fix
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"ember try:each
– Runs the test suite against multiple Ember versions
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.