examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx
import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';
import MyButton from './Button.vue';
import InfoButton from './components/InfoButton.vue';
<Meta
title="Addon/ControlsMDX"
component={MyButton}
argTypes={{
color: { control: { type: 'color' } },
}}
/>
export const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { MyButton },
template: '<my-button :color="color" :rounded="rounded">{{label}}</my-button>',
});
# Addon-controls in MDX
Controls can also be defined and used in MDX stories.
## Rounded
<Canvas>
<Story
name="Rounded"
args={{
rounded: true,
color: '#f00',
label: 'A Button with rounded edges',
}}
>
{Template.bind({})}
</Story>
</Canvas>
<Source story="Rounded" />
<ArgsTable story="Rounded" />
## Square
<Canvas>
<Story
name="Square"
args={{
// rounded: false, test out default value handling
color: '#00f',
label: 'A Button with square edges',
}}
>
{Template.bind({})}
</Story>
</Canvas>
<ArgsTable story="Square" />
## Multiple components
<ArgsTable components={{ MyButton, InfoButton }} />