ember-paper-expansion-panel
This is an ember-paper addon that provides an implementation of material expansion panels.
Usage
An example usage:
{{#paper-expansion-panel as |panel|}} {{#panel.collapsed}} <div class="md-panel-title">Title {{item}}</div> <div class="md-panel-summary">Summary</div> {{paper-icon "keyboard_arrow_down"}} {{/panel.collapsed}} {{#panel.expanded as |expanded|}} {{#expanded.header}} <div class="md-panel-title">Expanded title</div> <div class="md-panel-summary">Expanded summary</div> {{paper-icon "keyboard_arrow_up"}} {{/expanded.header}} {{#expanded.content}} Content {{/expanded.content}} {{#expanded.footer}} <span class="flex"></span> {{#paper-button onClick=(action panel.collapse)}} Cancel {{/paper-button}} {{#paper-button primary=true onClick=(action panel.collapse)}} Save {{/paper-button}} {{/expanded.footer}} {{/panel.expanded}}{{/paper-expansion-panel}}
Demo
You can see how this addon looks like at https://miguelcobain.github.io/ember-paper-expansion-panel/
Installation
ember install ember-paper-expansion-panel
Don't forget to import your styles in your app.scss
after importing ember paper styles:
;;
API
{{#paper-expansion-panel as |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
{{#panel.collapsed}}
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.
{{#panel.expanded as |expanded|}}
This component yields a hash that contains the header
, content
and footer
components.
{{#expanded.header}}
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.
{{#expanded.content}}
Use this component to render what goes inside the expanded content area.
{{#expanded.footer}}
Use this component to render what goes inside the expanded footer area.
Contributing
Installation
git clone <repository-url>
cd my-addon
npm install
Linting
npm run lint:js
npm run lint:js -- --fix
Running tests
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
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
License
This project is licensed under the MIT License.