mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
93 lines
1.9 KiB
Plaintext
93 lines
1.9 KiB
Plaintext
import { Story, Preview, Meta, Props } from '@storybook/addon-docs/blocks';
|
|
import { action } from '@storybook/addon-actions';
|
|
import { html } from 'lit-html';
|
|
import '../demo-wc-card.js';
|
|
|
|
# Storybook Docs for Web Components
|
|
|
|
<Meta title="Addons/Docs" />
|
|
|
|
## Story definition
|
|
|
|
A story can be a simple return of `html`
|
|
|
|
<Story name="simple" height="220px">
|
|
{html`
|
|
<demo-wc-card>Hello World</demo-wc-card>
|
|
`}
|
|
</Story>
|
|
|
|
## API
|
|
|
|
You can show the api table of a web component at any point in your documentation.
|
|
|
|
<Props of="demo-wc-card" />
|
|
|
|
## Function stories
|
|
|
|
Or a function
|
|
|
|
<Story name="function" height="220px">
|
|
{() => {
|
|
const rows = [{ header: 'health', value: '200' }, { header: 'mana', value: '100' }];
|
|
return html`
|
|
<demo-wc-card back-side .rows=${rows}>
|
|
A card with data on the back
|
|
</demo-wc-card>
|
|
`;
|
|
}}
|
|
</Story>
|
|
|
|
## Wrapper
|
|
|
|
You can also wrap your live demos in a nice little wrapper.
|
|
|
|
<Preview withToolbar>
|
|
<Story name="wrapper" height="220px">
|
|
{html`
|
|
<demo-wc-card>Hello World</demo-wc-card>
|
|
`}
|
|
</Story>
|
|
</Preview>
|
|
|
|
## Story reference
|
|
|
|
You can also reference an existing story from within your MDX file.
|
|
|
|
<Preview withToolbar>
|
|
<Story id="welcome--welcome" height="500px" inline={false} />
|
|
</Preview>
|
|
|
|
## Stories not inline
|
|
|
|
By default stories are rendered inline.
|
|
For web components that is usually fine as they are style encapsulated via shadow dom.
|
|
However when you have a style tag in you template it might be best to show them in an iframe.
|
|
|
|
To always use iframes you can set
|
|
|
|
```js
|
|
addParameters({
|
|
docs: {
|
|
inlineStories: false,
|
|
},
|
|
});
|
|
```
|
|
|
|
or add it to individual stories.
|
|
|
|
```
|
|
<Story inline={false} />
|
|
```
|
|
|
|
<Preview withToolbar>
|
|
<Story name="notInline" height="220px">
|
|
{html`
|
|
<style>
|
|
p { color: red; }
|
|
</style>
|
|
<p>Makes all p tags red... so best to not render inline</pd>
|
|
`}
|
|
</Story>
|
|
</Preview>
|