GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-20 05:02:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6464 from jamisuomalainen/update-addons-notes-readme-vue

Browse Source 
Update addons-notes README with Vue example
This commit is contained in:
Michael Shilman 2019-04-09 18:56:11 +08:00 committed by GitHub
commit 2c67da429f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
addons/notes/README.md
View File

@ -6,7 +6,7 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
![Storybook Addon Notes Demo](docs/demo.png)
### Getting Started
## Getting Started
**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybooks/storybook/tree/master/addons/)**
@ -14,7 +14,7 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
yarn add -D @storybook/addon-notes
```
Then create a file called `addons.js` in your storybook config.
Then create a file called `addons.js` in your Storybook config.
Add following content to it:
@ -22,7 +22,9 @@ Add following content to it:
import '@storybook/addon-notes/register';
```
You can use the `notes` parameter to add a note to each story:
Now, you can use the `notes` parameter to add a note to each story.
### With React
```js
import { storiesOf } from '@storybook/react';
@ -35,9 +37,25 @@ storiesOf('Component', module)
});
```
#### Using Markdown
### With Vue
To use markdown in your notes is supported, storybook will load markdown as raw by default.
```js
import { storiesOf } from '@storybook/vue';
import MyButton from './MyButton.vue';
storiesOf('MyButton', module)
.add('with some emoji', () => ({
components: { MyButton },
template: '<my-button>😀 😎 👍 💯</my-button>'
}), {
notes: 'A very simple example of addon notes',
});
```
## Using Markdown
Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.
```js
import { storiesOf } from '@storybook/react';
@ -48,13 +66,12 @@ storiesOf('Component', module)
.add('With Markdown', () => <Component />, { notes });
```
### Giphy
## Giphy
When using markdown, you can also embed gifs from Giphy into your markdown. Currently, the value `gif` of the gif prop is used to search and return the first result returned by Giphy.
When using Markdown, you can also embed gifs from Giphy into your Markdown. Currently, the value `gif` of the gif prop is used to search and return the first result returned by Giphy.
```md
# Title
<Giphy gif='cheese' />
```