mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-28 05:10:17 +08:00
53 lines
1.1 KiB
Plaintext
53 lines
1.1 KiB
Plaintext
```md
|
|
<!--- YourComponent.stories.mdx -->
|
|
|
|
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
|
|
|
import { YourComponent } from './your-component';
|
|
|
|
<Meta title="Example of how to use argTypes and functions" />
|
|
|
|
<!---👇 A function to apply some computations -->
|
|
|
|
export const someFunction = (valuePropertyA, valuePropertyB) => {
|
|
|
|
<!--- Makes some computations and returns something -->
|
|
|
|
};
|
|
|
|
export const Template = ({propertyA,propertyB,...rest})=>{
|
|
|
|
<!---👇 Assigns the function result to a variable -->
|
|
|
|
const someFunctionResult = someFunction(propertyA, propertyB);
|
|
return <YourComponent someProperty={someFunctionResult} {...rest} />;
|
|
}
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="A complex case with a function"
|
|
argTypes={{
|
|
propertyA: {
|
|
options: [
|
|
'Item One',
|
|
'Item Two',
|
|
'Item Three'
|
|
],
|
|
},
|
|
propertyB: {
|
|
options: [
|
|
'Another Item One',
|
|
'Another Item Two',
|
|
'Another Item Three'
|
|
],
|
|
},
|
|
}}
|
|
args={{
|
|
propertyA: 'Item One',
|
|
propertyB: 'Another Item One',
|
|
}}>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
```
|