mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 05:51:21 +08:00
62 lines
1.2 KiB
Plaintext
62 lines
1.2 KiB
Plaintext
```md
|
|
<!-- Custom-MDX-Documentation.mdx -->
|
|
|
|
# Replacing DocsPage with custom `MDX` content
|
|
|
|
This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
|
|
|
|
It can be further expanded with your own code snippets and include specific information related to your stories.
|
|
|
|
For example:
|
|
|
|
import { Story } from "@storybook/addon-docs";
|
|
|
|
## Button
|
|
|
|
Button is the primary component. It has four possible states.
|
|
|
|
- [Primary](#primary)
|
|
- [Secondary](#secondary)
|
|
- [Large](#large)
|
|
- [Small](#small)
|
|
|
|
## With the story title defined
|
|
|
|
If you included the title in the story's default export, use this approach.
|
|
|
|
### Primary
|
|
|
|
<Story id="example-button--primary" />
|
|
|
|
### Secondary
|
|
|
|
<Story id="example-button--secondary" />
|
|
|
|
### Large
|
|
|
|
<Story id="example-button--large" />
|
|
|
|
### Small
|
|
|
|
<Story id="example-button--small" />
|
|
|
|
## Without the story title defined
|
|
|
|
If you didn't include the title in the story's default export, use this approach.
|
|
|
|
### Primary
|
|
|
|
<Story id="your-directory-button--primary"/>
|
|
|
|
### Secondary
|
|
|
|
<Story id="your-directory-button--secondary"/>
|
|
|
|
### Large
|
|
|
|
<Story id="your-directory-button--large"/>
|
|
|
|
### Small
|
|
|
|
<Story id="your-directory-button--small" />
|
|
``` |