g6/stories/index.stories.tsx

38 lines
1022 B
TypeScript
Raw Normal View History

import {array, boolean, number, text, withKnobs} from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo'; // 这里引入你想展示的组件
import React from 'react';
export default {
title: 'Button',
decorators: [withKnobs]
};
// const passions = array('Passions', ['Fishing', 'Skiing']);
export const withText = () => {
const passions = text('Name', 'aaa')
return <div>{passions}</div>
};
// export const withEmoji = () => (
// <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
// );
// Knobs for React props
export const withAButton = () => (
<button disabled={boolean("Disabled", false)}>
{text("Label", "Hello Storybook")}
</button>
);
// Knobs as dynamic variables.
export const asDynamicVariables = () => {
const name = text("Name", "Arunoda Susiripala");
const age = number("Age", 89);
const content = `I am ${name} and I'm ${age} years old.`;
return <div>{content}</div>;
};