consul

History

John Cowen 308e5a480e ui: Remove storybook, add docfy (#9831 ) This PR removes storybook and adds docfy and uses docfy to render our existing README files. This now means we can keep adding README documentation without committing any specific format or framework. If we eventually move to storybook then fine, or if we just want to remove docfy for whatever reason then fine - we will still have a full set of README files viewable via GitHub.		2021-03-08 12:22:01 +00:00
..
README.mdx	ui: Remove storybook, add docfy (#9831 )	2021-03-08 12:22:01 +00:00
index.hbs	ui: Add 'Search Across' for finer grained searching (#9282 )	2020-12-01 15:45:09 +00:00
index.js	ui: Move to Workspaced Structure (#8994 )	2020-10-21 15:23:16 +01:00

README.mdx

## ToggleButton

`<ToggleButton checked="checked" @onchange={{action 'change'}} as |api|>Toggle</ToggleButton>`

`<ToggleButton />` is a straightforward combination of a `<label>` and `<input type="checkbox" />` to allow you to easily setup CSS based (`input:checked ~ *`) visual toggling. The body of the component ends up inside the `<label>`.

Additionally, a `clickoutside` is currently included, so if the toggle is in an 'on' state, clicking outside the `<ToggleButton>` itself will un-toggle the component. This could be changed in a future version for this to be configurable/preventable and/or use/rely on a modifer instead.

### Arguments

| Argument/Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `Boolean` | false | The default value of the toggle on/off (true/false) |
| `onchange` | `Function` |  | The action to fire when the data changes. Emits an Event-like object with a `target` that is a reference to the underlying standard DOM input element. |

### Methods/Actions/api

| Method/Action |  Description |
| --- | --- |
| `click` | Fire a click event on the ToggleButton/input which reverse the state of the toggle. |

### Example

Here is an example of a simple CSS based dropdown menu. Note: The general sibling selector (`~`) should be used as the label/button itself is the adjacent sibling (`+`).

```handlebars
<div class="menu">
  <ToggleButton>
	  Open Menu
  </ToggleButton>
  <ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
  </ul>
</div>
```

```css
.menu input ~ ul {
  display: none;
}
.menu input:checked ~ ul {
  display: block;
}
```



### See

- [Component Source Code](./index.js)
- [TemplateSource Code](./index.hbs)

---