Ember-toggle-button
This is an Ember add-on for a simple yet powerful toggle button.
Installation
-
From Ember:
ember install @ryannerd/ember-toggle-button
-
Using NPM:
npm install @ryannerd/ember-toggle-button
Using in your Ember Application
Once installed simply wrap an HTML element in an ember-toggle-button block:
<!-- This will add a toggle button to the right of the Test Button element -->
{{#ember-toggle-button}}
<button>Test Button</button>
{{/ember-toggle-button}}
-
Properties
- leftOffset (float) [optional] Tweaks the button position in px. (e.g. a value of -2 will move the toggle button 2px to the left)
- topOffset (float) [optional] Tweaks the button position in px vertically.
- useDefaultToggleAction (bool) [optional] Defaults to true.
- toggleWidth (string) [optional] Default is '5%'.
-
Actions
-
toggleButtonClicked(isOpen, target)
Fires when the toggle button is clicked.isOpen
(bool) indicates the toggle button's state.target
(Jquery object) This is the element that the toggle button is "attached" to.
-
Examples
Table wrapped in ember-toggle-button
<!--- table-example.hbs -->
{{#ember-toggle-button
toggleWidth="-=12px"
topOffset=43
leftOffset=0
toggleButtonClicked=(action "toggleTableClicked")
}}
<table style="border-width: 3px;border-style:solid;">
<tr>
<th style="border-style:solid;">First name</th>
<th style="border-style:solid;">Last name</th>
</tr>
<tr>
<td style="border-style:solid;">John</td>
<td style="border-style:solid;">Doe</td>
</tr>
<tr>
<td style="border-style:solid;">Jane</td>
<td style="border-style:solid;">Doe</td>
</tr>
</table>
{{/ember-toggle-button}}
// table-example.js
actions:
{
toggleTableClicked(isOpen, target)
{
if (isOpen)
{
target.css('background-color', 'white');
}
else
{
target.css('background-color', 'blue');
}
}
Button wrapped in the ember-toggle-button
{{#ember-toggle-button}}
<button>Really Wide Button That is Super Wide</button>
{{/ember-toggle-button}}
Running (as dummy)
ember serve
- Go to http://localhost:4200.
Running Tests (as dummy)
-
npm test
(Runsember try:testall
will test ember-toggle-button against multiple Ember versions) ember test
ember test --server
Building (as dummy)
ember build
For more information on using ember-cli, visit http://ember-cli.com/.