storybook/docs/snippets/common/gizmo-story-controls-customization.ts.mdx
2022-11-30 20:25:47 +00:00

69 lines
1.4 KiB
Plaintext

```ts
// Gizmo.stories.ts|tsx
import { Gizmo } from './Gizmo';
// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
const meta: Meta<typeof Gizmo> = {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Gizmo',
component: Gizmo,
argTypes: {
canRotate: {
control: 'boolean',
},
width: {
control: { type: 'number', min: 400, max: 1200, step: 50 },
},
height: {
control: { type: 'range', min: 200, max: 1500, step: 50 },
},
rawData: {
control: 'object',
},
coordinates: {
control: 'object',
},
texture: {
control: {
type: 'file',
accept: '.png',
},
},
position: {
control: 'radio',
options: ['left', 'right', 'center'],
},
rotationAxis: {
control: {
type: 'check',
options: ['x', 'y', 'z'],
},
},
scaling: {
control: 'select',
options: [10, 50, 75, 100, 200],
},
label: {
control: 'text',
},
meshColors: {
control: {
type: 'color',
presetColors: ['#ff0000', '#00ff00', '#0000ff'],
},
},
revisionDate: {
control: 'date',
},
},
};
export default meta;
```