# Pagination

分页显示器。

# 基本用法

pagination-1

import {Pagination, Dot} from 'react-native-maui';

<View style={{ width: '100%', height: 50, backgroundColor: '#000', justifyContent: 'center' }}>
  <Pagination currentIndex={1} total={5}>
    <Dot />
  </Pagination>
</View>

# 自定义样式

pagination-2

import {Pagination, Dot} from 'react-native-maui';

<View style={{ width: '100%', height: 50, backgroundColor: '#000', justifyContent: 'center' }}>
  <Pagination currentIndex={1} total={5} position='left'>
    <Dot activeColor='red' inActiveColor='cyan' />
  </Pagination>
</View>
<View style={{ width: '100%', height: 100, backgroundColor: '#000' }}>
  <Pagination position="right" currentIndex={1} total={5}>
    <Dot direction="column" />
  </Pagination>
</View>
<View style={{ width: '100%', height: 50, backgroundColor: '#000', justifyContent: 'center' }}>
  <Pagination currentIndex={1} total={5} position='right'>
    <Dot shape='cube' />
  </Pagination>
</View>

# 数字样式

pagination-3

import {Pagination, Percent} from 'react-native-maui';

<View style={{ width: '100%', height: 50, backgroundColor: '#000', justifyContent: 'center' }}>
  <Pagination currentIndex={currentIndex} total={5}>
    <Percent style={{ color: 'white', fontSize: 18 }} />
  </Pagination>
</View>

# 属性

# Pagination属性

名称	描述	类型	默认值
currentIndex Required	当前的索引	`number`、`Animated.SharedValue<number>`	-
total Required	全部数量	number	-
position	位置	`left` 、 `center` 、 `right`	`center`

# Dot属性

名称	描述	类型	默认值
size	大小	number	8
activeColor	当前位置的颜色	string	`white`
inActiveColor	非当前位置颜色	string	`white`
shape	形状	`circle` 、 `cube`	`circle`
style	容器样式	ViewStyle	-
direction	位置	`row` 、 `column`	`row`

# Percent属性

名称	描述	类型	默认值
style	文字样式	TextStyle	-

← AnimatedNumber Segmented →