import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
import Collapsible from '.';
import Button from '../button';
import { useState } from 'react';

<Meta title="数据展示/折叠 Collapsible" component={Collapsible} />

# 折叠 Collapsible

## 导入

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

## 基本使用

<Canvas>
  <Story name="基本使用">
    {() => {
      const [open, setOpen] = useState(true);
      return (
        <div>
          <Button onClick={() => setOpen(!open)}>开关</Button>
          <Collapsible open={open}>
            <p>跟 antd 不同的折叠，这是没有样式的</p>
            <p>跟 antd 不同的折叠，这是没有样式的</p>
            <p>跟 antd 不同的折叠，这是没有样式的</p>
          </Collapsible>
        </div>
      );
    }}
  </Story>
</Canvas>

## 参数

<ArgsTable of={Collapsible} />