generated from thzxcx/vue3
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
/*
|
|
* @Author: zhaojinfeng 121016171@qq.com
|
|
* @Date: 2023-06-15 13:23:25
|
|
* @LastEditors: zhaojinfeng 121016171@qq.com
|
|
* @LastEditTime: 2023-06-20 18:27:47
|
|
* @FilePath: \tianheng-design\stories\Button.stories.ts
|
|
* @Description:
|
|
*
|
|
*/
|
|
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
|
|
import Button from '../packages/button/index.vue'
|
|
|
|
// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
|
|
const meta = {
|
|
title: 'Example/Button',
|
|
component: Button,
|
|
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
size: { control: 'select', options: ['small', 'medium', 'large'] },
|
|
backgroundColor: { control: 'color' },
|
|
onClick: { action: 'clicked' },
|
|
},
|
|
args: { primary: false }, // default value
|
|
} satisfies Meta<typeof Button>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
/*
|
|
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
|
* See https://storybook.js.org/docs/vue/api/csf
|
|
* to learn how to use render functions.
|
|
*/
|
|
export const Primary: Story = {
|
|
args: {
|
|
primary: true,
|
|
label: 'Button',
|
|
},
|
|
}
|
|
|
|
export const Secondary: Story = {
|
|
args: {
|
|
primary: false,
|
|
label: 'Button',
|
|
},
|
|
}
|
|
|
|
export const Large: Story = {
|
|
args: {
|
|
label: 'Button',
|
|
size: 'large',
|
|
},
|
|
}
|
|
|
|
export const Small: Story = {
|
|
args: {
|
|
label: 'Button',
|
|
size: 'small',
|
|
},
|
|
}
|