import { Stack, Box, Text } from '@chakra-ui/react';
import { Meta, Story, Canvas } from '@storybook/addon-docs';

import SimplePagination from '.';

<Meta title="导航/简单分页 SimplePagination" component={SimplePagination} />

# 简单分页 SimplePagination

## 导入

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

### 基本使用

<Canvas>
  <Story name="默认">
    <SimplePagination
      hasPrevious
      hasNext
      onPrevious={() => {
        console.log('Previous');
      }}
      onNext={() => {
        console.log('Next');
      }}
    />
  </Story>
</Canvas>

### 带 tooltip

<Canvas>
  <Story name="带tooltip">
    <SimplePagination
      previousTooltip="前一页"
      nextTooltip="下一页"
      hasPrevious
      hasNext
      onPrevious={() => {
        console.log('Previous');
      }}
      onNext={() => {
        console.log('Next');
      }}
    />
  </Story>
</Canvas>

## API

| 参数            | 说明             | 类型          | 默认值   |
| --------------- | ---------------- | ------------- | -------- |
| size            | 按钮的大小       | ButtonSize    | "middle" |
| hasNext         | 下一页是否可点击 | boolean       | false    |
| hasPrevious     | 上一页是否可点击 | boolean       | false    |
| previousTooltip | 上一页的 tooltip | string        | -        |
| nextTooltip     | 下一页的 tooltip | string        | -        |
| onNext          | 下一页点击事件   | () => void    | -        |
| onPrevious      | 上一页点击事件   | () => void    | -        |
| style           | 外层的样式       | CSSProperties | -        |