@nacho-ui/pill
The Nacho pill component creates an interactive element that can be added, dismissed, toggled, or defined by user-generated content.
Installation
ember install @nacho-ui/pill
Usage
NachoPillInput
The Nacho pill input component is used when you want to allow input for a set of tags that appear as a pill-like item.
Expected behavior:
- If the tag already has a value, clicking on the X will trigger a function with the intention to delete the tag
- If the tag is an empty tag, clicking on the + will put us in "editing" mode to add a value
- While in editing mode, clicking the + again or pressing the enter key will create a new tag
- While in editing mode, pressing the tab key will create a new tag and also leave us in editing mode still to quickly add more tags
- While in editing mode, clicking away will cause the input pill to reset
Params:
Name | Type | Description |
---|---|---|
value | `string | undefined` |
placeholder | `string | undefined` |
onComplete | (p: string) => void |
Triggers the completion task for adding a tag, where p is the value of the user's text input |
onDelete | (p: string) => void |
Triggers the deletion of the tag, where P is the value of the value passed into the component |
baseState | PillState as string |
Allows the user to specify a custom state for the tag (defaults to PillState.NeutralInverse ) when a value is displayed |
emptyState | PillState as string |
Allows the user to specify a custom state for the tag (defaults to PillState.Inverse ) when prompting to enter a value |
Example usage
Contributing
Installation
git clone <repository-url>
cd nacho-pill
yarn install
Linting
yarn lint:hbs
yarn lint:js
yarn 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
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.