import { Stack } from '@chakra-ui/react';
import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
import Spinner from '.';
import { useState } from 'react';
import { Button } from '@chakra-ui/react';

<Meta title="反馈/旋转器 Spinner" component={Spinner} />

# 旋转器 Spinner

Spinner 提供了一个视觉提示，表明某个动作正在处理、等待更改过程或结果。

## 导入

```typescript
import { Spinner } from '@ahri-ui/core';
```

## 使用

<Canvas>
  <Story name="默认">
    <Spinner />
  </Story>
</Canvas>

### 带颜色的旋转器

<Canvas>
  <Story name="带颜色的旋转器">
    <Spinner color="red.500" />
  </Story>
</Canvas>

## 包裹组件

<Canvas>
  <Story name="包裹">
    {() => {
      const [isSpinning, setIsSpinning] = useState(true);
      return (
        <>
          <Button onClick={() => setIsSpinning(!isSpinning)}>开关</Button>
          <Spinner isSpinning={isSpinning}>
            <div style={{ height: 200, border: '1px solid #ccc' }}>内容</div>
          </Spinner>
        </>
      );
    }}
  </Story>
</Canvas>

### 不同尺寸的旋转器

<Canvas>
  <Story name="不同尺寸的旋转器">
    <Stack direction="row" spacing={4}>
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </Stack>
  </Story>
</Canvas>

### 带有空白区颜色的旋转器

<Canvas>
  <Story name="带有空白区颜色的旋转器">
    <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
  </Story>
</Canvas>

## 参数

<ArgsTable of={Spinner} />