Hold to confirm buttons, easily customisable, for ember-cli. After holding on the button for a specified amount of time, the given action is performed (e.g. hold to delete).
ember install ember-hold-button
There are a few types of buttons out of the box; rectangle
, circle
, and border-circle
.
### Rectangle
Option | Description | Default |
---|---|---|
delay | Time the button should be held for, in milliseconds. | 500 . |
action | The action to perform on completion. | null |
type | Style of the button. circle , border-circle or rectangle . |
rectangle |
You can also pass arguments to the component which will then be passed to the action.
The following are a few examples of how to style the button. The component is just a button tag containing a yield and a span. The span is the part that animates.
When you specify a type
for the hold-button, that type becomes a class for the component. So you could specify a custom type (e.g. type='my-cool-button'
) to customise from scratch.
The button always has the CSS class ember-hold-button
, and also has is-holding
while it is being held and is-complete
upon completion. These are bound to the isHolding
and isComplete
attributes respectively, if you want to take control of this.
Template
CSS
.ember-hold-button.rectangle {
background: transparent;
color: #aaa;
}
.ember-hold-button.rectangle span {
z-index: -1;
height: 100%;
background-color: black;
}
Template
CSS
.ember-hold-button.circle {
border-color: orange;
}
.ember-hold-button.circle span {
background-color: orange;
transform: scale(1);
}
.ember-hold-button.circle.is-holding span {
transform: scale(0);
}
This one modifies the rectangle style to animate the progress bar height instead of width and places text in pseudoelements.
Template
CSS
.ember-hold-button.rectangle {
width: 160px;
}
.ember-hold-button.rectangle span {
height: 0;
transition-property: height;
width: 100%;
z-index: 0;
}
.ember-hold-button.rectangle.is-holding span {
height: 100%;
}
.ember-hold-button.rectangle:before {
content: 'Hold to delete';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.ember-hold-button.rectangle:after {
content: 'Deleted ✓';
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2ECC71;
transition: 0.4s;
}
.ember-hold-button.rectangle.is-complete:after {
opacity: 1;
}
.ember-hold-button.rectangle.is-complete:before {
content: '';
}
CSS3 transitions are being used, so IE8/9 are out the window but other browsers should be fine. See can I use this.
git clone <repository-url>
cd my-addon
npm install
npm run lint:hbs
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.