mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-02 05:03:44 +08:00
Add your-component.ts snippet for html framework
This commit is contained in:
parent
841fe3753d
commit
9bd8804ffb
@ -24,6 +24,7 @@ Pick a simple component from your project, like a Button, and write a `.stories.
|
||||
'svelte/your-component.mdx.mdx',
|
||||
'web-components/your-component.js.mdx',
|
||||
'html/your-component.js.mdx',
|
||||
'html/your-component.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
23
docs/snippets/html/your-component.ts.mdx
Normal file
23
docs/snippets/html/your-component.ts.mdx
Normal file
@ -0,0 +1,23 @@
|
||||
```ts
|
||||
// YourComponent.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
import { createYourComponent } from './YourComponent';
|
||||
|
||||
//👇 This default export determines where your story goes in the story list
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'YourComponent',
|
||||
} as Meta;
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template: StoryFn = (args): HTMLElement => createYourComponent(args);
|
||||
|
||||
export const FirstStory = Template.bind({});
|
||||
FirstStory.args = {
|
||||
//👇 The args you need here will depend on your component
|
||||
};
|
||||
```
|
Loading…
x
Reference in New Issue
Block a user