eed91ba84d
* add storybook
* add storybook files
* add ToggleButton and AlertBanner stories
* add knobs addon
* add notes addon
* add ToggleButton and AlertsBanner notes
* move panel to right
* add ICon
* create story blueprint
* add header to blueprint
* upgrade to storybook 5.0.1
* add confirm-action stories
* move addon panel to bottom
* update ConfirmAction
* add jsdoc comments to alert banner component
* add AlertInline
* set showPanel to true in blueprint
* include newly generated markdown for stories
* adjust code example for toggle button
* add json-to-markdown to package.json
* update AuthForm
* add Storybook readme
* add AlertPopup
* add story markdown custom template
* make storybook dependencies optional
* center all stories
* use message-types helper to dynamically render alerts
* hide panel
* nest alert stories
* move icons into table
* separate homelink into multiple stories
* add homelink with nav example
* remove see links from alert-banner
* add script to autogenerate markdown from component and add it to stories
* add viewport addon and remove centered addon
* update README to include markdown generation
* remove @see links from jsdoc comments
* update README to include jsdoc example
* update alert banner md
* get rid of trailing ######
* update jsdoc and regenerate notes files
* update i-con md
* Update ui/scripts/gen-story-md.js
Co-Authored-By: noelledaley <noelledaley@users.noreply.github.com>
* Update ui/scripts/gen-story-md.js
Co-Authored-By: noelledaley <noelledaley@users.noreply.github.com>
* add storybook docs to vault ui readme
* add jsdoc comments to component blueprint, automatically import md file in story blueprint
* add template template to component blueprint override
* apply basic theme to storybook
* remove comment
* make sure all stories are using auto generated md
* storybook: show optional props in brackets
* storybook: 🔪 HomeLink
* storybook: show AuthConfigForm stories with knobs
37 lines
1.3 KiB
Markdown
37 lines
1.3 KiB
Markdown
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/toggle-button.js. To make changes, first edit that file and run "yarn gen-story-md toggle-button" to re-generate the content.-->
|
|
|
|
## ToggleButton
|
|
`ToggleButton` components are used to expand and collapse content with a toggle.
|
|
|
|
|
|
| Param | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| toggleAttr | <code>String</code> | <code></code> | The attribute upon which to toggle. |
|
|
| attrTarget | <code>Object</code> | <code></code> | The target upon which the event handler should be added. |
|
|
| [openLabel] | <code>String</code> | <code>Hide</code> | options - The message to display when the toggle is open. |
|
|
| [closedLabel] | <code>String</code> | <code>More</code> | options - The message to display when the toggle is closed. |
|
|
|
|
**Example**
|
|
|
|
```js
|
|
<ToggleButton
|
|
@openLabel="Encrypt Output with PGP"
|
|
@closedLabel="Encrypt Output with PGP"
|
|
@toggleTarget={{this}}
|
|
@toggleAttr="showOptions"/>
|
|
{{#if showOptions}}
|
|
<div>
|
|
<p>
|
|
I will be toggled!
|
|
</p>
|
|
</div>
|
|
{{/if}}
|
|
```
|
|
|
|
**See**
|
|
|
|
- [Uses of ToggleButton](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToggleButton)
|
|
- [ToggleButton Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/toggle-button.js)
|
|
|
|
---
|