GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix links and code examples in addons/knobs

Browse Source
This commit is contained in:
SilencerWeb 2018-04-05 17:14:56 +05:00 committed by GitHub
parent 0f934c62b0
commit cf6ee41024
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
addons/knobs/README.md
View File

@ -16,9 +16,9 @@ You can also use Knobs as a dynamic variable inside stories in [Storybook](https
This is how Knobs look like:
[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](https://git.io/vXdhZ)
[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](https://goo.gl/uX9WLf)
> Checkout the above [Live Storybook](https://storybooks-official.netlify.com/) or [watch this video](https://www.youtube.com/watch?v=kopW6vzs9dg&feature=youtu.be).
> Checkout the above [Live Storybook](https://goo.gl/uX9WLf) or [watch this video](https://www.youtube.com/watch?v=kopW6vzs9dg&feature=youtu.be).
## Getting Started
@ -50,7 +50,7 @@ stories.addDecorator(withKnobs);
// Knobs for React props
stories.add('with a button', () => (
<button disabled={boolean('Disabled', false)} >
{text('Label', 'Hello Button')}
{text('Label', 'Hello Storybook')}
</button>
));
@ -77,17 +77,17 @@ const stories = storiesOf('Storybook Knobs', module);
stories.addDecorator(withKnobs);
// Knobs for Angular props
stories.add('with text', () => ({
stories.add('with a button', () => ({
component: Button,
props: {
text: text('text', 'Hello Button'), // The first param of the knob function has to be exactly the same as the component input.
text: text('text', 'Hello Storybook'), // The first param of the knob function has to be exactly the same as the component input.
},
}));
```
Categorize your knobs by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the knobs storybook panel to filter between the groups. Knobs without a `groupId` are automatically categorized into the `ALL` group.
```
```js
// Knob assigned a groupId.
stories.add('as dynamic variables', () => {
const groupId = 'GROUP-ID1'