如何在Storybook中添加动画微调器

Question

如上所述，如何在Storybook中添加动画Spinner？我应该从导入SVG开始吗？

Answer 1

与任何其他组件相同。下面是我使用的一个快速示例：

import React from 'react';
import { Meta, Story } from '@storybook/react';
import { LoadingIndicator, LoadingIndicatorProps } from '.';
const meta: Meta<LoadingIndicatorProps> = {
title: 'Loading Indicator example',
component: LoadingIndicator,
};
export default meta;
const Template: Story<LoadingIndicatorProps> = args => (
<LoadingIndicator {...args} />
);
export const Default = Template.bind({});
Default.args = {};

您可能会注意到我正在导入一个名为LoadingIndicator的组件。这只是一个渲染由div容器包装的img的组件，其中img的源参数设置为.svg路径。