ember-paper-expansion-panel

Material expansion panels for ember-paper.

Usage no npm install needed!

<script type="module">
  import emberPaperExpansionPanel from 'https://cdn.skypack.dev/ember-paper-expansion-panel';
</script>

README

ember-paper-expansion-panel Build Status Ember Observer Score

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:

@import "ember-paper";
@import "ember-paper-expansion-panel";

API

{{#paper-expansion-panel as |panel|}}

  • expanded - defaults to false - 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 of expanded and the event object

This component yields a hash that contains:

  • collapsed and expanded 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 version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.