ember-paper-selection-dialog
v0.0.5
Published
The default blueprint for ember-cli addons.
Downloads
3
Readme
ember-paper-selection-dialog
This is an ember-paper addon that provides dialogs for selections. Think of it as a select component, but using dialogs.
Usage
An example usage:
{{#paper-selection-dialog
title="Select a country" class="flex-50" fullscreen=true
options=options selected=singleSelected
onSelect=(action (mut singleSelected)) onClose=(action (mut showSingle) false) as |option index selected|}}
{{option}} {{if selected "Yay, I'm selected"}} #{{index}}
{{/paper-selection-dialog}}
The component is promise friendly, meaning that it accepts promises in options
or selected
properties and will display a {{paper-circular-progress}}
until both are resolved.
You must specify how you want to render each item in the component's block. Each option is yielded to the block, along with its index. A boolean is also yielded to let you know if that option is currently selected or not.
Demo
You can see how this addon looks like at https://coachlogix.github.io/ember-paper-selection-dialog/
Installation
Run:
ember install ember-paper-selection-dialog
Don't forget to import your styles in your app.scss
after importing ember paper styles:
@import "ember-paper";
@import "ember-paper-selection-dialog";
API
- All the properties that
paper-dialog
supports. multiple
- defaults tofalse
- set it totrue
to support multiple selections.options
- an array or promise that resolves to an array that contains the possible options to choose from.selected
- the currently selected items. Can also be a promise.onSelect
- an action sent when the user clicks the confirm button. Will contain an option on single mode and an array of options on multiple mode.onClose
- an action sent when the cancel or close button are pressed (also sent every timepaper-dialog
sends it)cancelLabel
- defaults to'Cancel'
- you can specify an alternate text for the cancel buttonconfirmLabel
- defaults to'Confirm'
- you can specify an alternate text for the confirm buttontitle
- the displayed title of the dialogcloseOnConfirm
- defaults totrue
- by default the component will also send theonClose
action when you click the confirm buttonnoOptionsMessage
- defaults to'No options.'
- you can specify a message to show whenoptions
is or resolves to a falsy value
Contributing
Installation
git clone <repository-url>
cd my-addon
npm install
Linting
npm run lint:hbs
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.