open-index/open-npm huggingface dataset:
npm package: @rax-ui/action-sheet
Description: --- display: ActionSheet family: other ---
Author: huya.nzb@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: ActionSheet
family: other
---

# ActionSheet

动作面板


## API


### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| visible | 是否显示 | `boolean` | false |
| title | 标题 | `string` | |
| buttons | 按钮列表 | `ActionButtonProps` ||
| items | 分享项列表, 设置此项后开启 `gallery` 模式 | `ActionItemProps` ||
| onHide | 隐藏时回调 | (reason: string) => void | |
| onClick | 点击时的回调 | (rowIndex?: number, index: number, e) => void | |
| onEnter | 开始进入时回调函数 | () => void |  |
| onExit | 开始退出时回调函数 | () => void |  |
| onEntering | 正在进入时回调函数 | () => void |  |
| onExiting | 正在退出时回调函数 | () => void |  |
| onEntered | 进入后回调函数 | () => void |  |
| onExited | 退出后回调函数 | () => void |  |

### 调用 【不推荐】

```jsx
import ActionSheet from '@rax-ui/action-sheet';

// 按钮列表
ActionSheet.show({
  buttons: [
    '朝阳区',
    '西城区',
    '海淀区',
    {
      a: 1, // 自定义数据
      text: '东城区', // 文案,
      style: {
        backgroundColor: 'white' // 按钮样式
      },
      textStyle: {
        color: 'red' // 按钮文案样式
      }
    }
  ]
}, function(e) {
  console.log(e);
  // 按钮数据：e.text/e.index/e.a
  // 点击取消/蒙层：e.cancel/e.mask
});

// 自定义内容
ActionSheet.show({
  title: '分享到',
  content(handler) {
    return (
      <View>
        {[
          { text: 'QQ', data: 'qq' },
          { text: '微信', data: 'wx' },
          { text: '微博', data: 'wb' },
          { text: '钉钉', data: 'dd' },
          { text: '朋友圈', data: 'wxf' }
        ].map((s, i) => (
          <View key={i} onClick={() => handler(s)}>
            <Text>{s.text}</Text>
          </View>
        ))}
      </View>
    )
  }
}, function(e) {
  console.log(e); // e.text/e.data
});
```

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| `action-sheet` | 面板 |
| `action-sheet__body` | 面板主体 |
| `action-sheet__footer` | 面板底部 |
| `action-sheet__title` | 面板标题 |
| `action-sheet__title__text` | 面板标题文案 |
| `action-sheet__content` | 面板内容 |
| `action-sheet__button` | 面板按钮 |
| `action-sheet__button--first` | 第一个面板按钮 |
| `action-sheet__button__text` | 面板按钮文案 |
| `action-sheet__cancel` | 取消按钮 |
| `action-sheet__cancel__text` | 取消按钮文案 |
npm package: @rax-ui/badge
Description: Rax UI Badge
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Badge
family: Data Display
---

# Badge

图标右上角的红点、数字或者文字。用于告知用户，该区域的状态变化或者待处理任务的数量。

## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| count | 展示的数字，可以为文字，大于 `max` 时显示为 `${max}+`，为 0 时隐藏 | number |  |
| max | 展示封顶的数字值 | number | 99 |
| type | 类型 <br> 可选值: <br> `normal`, `dot`, `unread`  | enum | normal |
| renderBadge | 自定义的badge渲染函数 | (): node |  |
| children | 被包裹的元素，当 children 存在时，badge将出现在元素的右上方 | any | |

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| badge | bage 样式 |
| badge__content | badge 内容样式 |
| badge__text | badge 文字样式 |
| badge--auto | badge 存在 children 时的样式 |
| badge--auto__content | badge 存在 children 时的内容样式  |
| badge--dot | `type="dot"` 时的样式 |
| badge--dot__content | `type="dot"` 时的内容样式 |
| badge--unread | `type="unread"` 时的样式 |
| badge--unread__content | `type="unread"` 时的内容样式 |
npm package: @rax-ui/calendar
Description: Rax UI Calendar
Author: jinli.lyy@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Calendar
family: data-display
---

# Calendar

按照日历形式展示数据


## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| shape | 日历类型 <br> 可选值：<br> `normal`, `picker` | enum | `normal` |
| mode | 显示面板模式 <br> 可选值：<br> `date`, `week` | enum | `date` |
| selectType | 选择类型: <br> 可选值：<br> `single`， `multiple`， `range`， `week` | enum | `single` |
| defaultValue | 默认选择日期 | Date / Date[] | `new Date()` |
| value | 选择日期 | Date / Date[] |  |
| visibleDate | 默认显示日期 | Date | `new Date()` |
| hideHeader | 是否隐藏日历头 | boolean | false |
| rowHeight | 日期行高，单位：`rpx` | number | 80 |
| disabledDate | 禁用日期 | `(date: Date, viewType: ViewType) => boolean` | `() => false` |
| renderTitle | 渲染标题内容 | `(props: TitleProps) => RaxNode` | |
| renderDateCell | 渲染日期单元格 | `({ date: Date, status: StatusType }) => RaxNode` | |
| onChange | 选择日期改变时触发 | `(value: Date | Date[], selectDate: Date) => void` | |
| onVisibleDateChange | 展示面板日期改变时回调 | `(date: Date) => void` | |

### Interface

```typescript
export interface type ViewType = 'year' | 'month' | 'date';
export interface StatusType = 'normal' | 'disabled' | 'selected' | 'current';
export interface TitleProps {
  date: Date,
  mode: 'year' | 'month' | 'date' | 'week',
  locale: LocaleType,
  styles: { title: CSSProperties }
}
```

### LocaleType

```typescript
export interface LocaleType {
  /**
   * 哪一天作为一个星期的开始
   */
  firstDayOfWeek?: number;
  /**
   * 月份再年份前面
   */
  monthBeforeYear?: boolean;
  /**
   * 周列表
   */
  weekdays?: string[];
  /**
   * 月列表
   */
  months?: string[];
  /**
   * 年
   */
  year?: string;
  /**
   * 月
   */
  month?: string;
  /**
   * 日
   */
  day?: string;
}
```

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| `calendar` | 日历容器样式 |
| `calendar__header` | 日历头样式 |
| `calendar__header__action` | 日历头部切换按钮样式 |
| `calendar__header__action-icon` | 日历头部切换按钮图标样式 |
| `calendar__header__title` | 日期标题样式 |
| `calendar__week` | 周行样式 |
| `calendar__week-cell` | 周单元格样式 |
| `calendar__week-cell__text` | 周单元格文字样式 |
| `calendar__body` | 日历体样式 |
| `calendar__sub-header` | 日历子标题样式 |
| `calendar__sub-header__text` | 日历子标题文字样式 |
| `calendar__date-table` | 日历表格样式 |
| `calendar__date-table-tr` | 日历表格行样式 |
| `calendar__date-table-td` | 日历单元格格样式 |
| `calendar__date-table-td--inrange` | 在选择区间内样式 |
| `calendar__date-table__cell` | 日期单元格样式 |
| `calendar__date-table__cell__text` | 日期单元格文字样式 |
| `calendar__date-table__cell--disabled` | 日期单元格禁用样式 |
| `calendar__date-table__cell--disabled__text` | 日期单元格禁用时文字样式 |
| `calendar__date-table__cell--selected` | 日期单元格选择样式 |
| `calendar__date-table__cell--selected__text` | 日期单元格选择时文字样式 |
| `calendar__date-table__cell--current` | 日期单元格当天样式 |
| `calendar__date-table__cell--current__text` | 日期单元格当天时文字样式 |
npm package: @rax-ui/carousel
Description: Rax UI Carousel
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Carousel
family: Data Display
---

# Carousel

轮播图


## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| defaultSlideIndex | 默认显示的索引 | number | 0 |
| slideWidth | 默认 slide 宽度 | number, string | |
| slideHeight | 默认 slide 高度  |  number, string | |
| hideIndicators | 是否隐藏指示点 | bool | false |
| autoplay | 是否自动切换 | bool | false |
| interval | 自动切换的时间间隔 | number | 3000 |
| onChange | 切换面板后的回调函数 | (current: number): void | |

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| carousel__dot-wrapper | 指示点层的样式 |
| carousel__dot | 指示点样式 |
| carousel__dot--active |指示点被激活样式 |
npm package: @rax-ui/check-list
Description: Rax UI Check List
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: __ComponentName__
family: other
---

# __ComponentName__

hello world


## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| data | 数据源 | `Array<{ label: string, value: string | number, disabled: boolean }`> | [] |
| value | 选择的值 | `string, number, Array` |  |
| multiple | 是否多选 | boolean | false |
| tickPosition | 选中√ 的位置 | 'left', 'right' | 'right' |
| renderItem | 自定义渲染item  | ({ label, value, disabled, checked, styles, onChange }) => void | |
| onChange | 选择时回调函数 | (value, e?: Event) => void | |

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| check-list | |
| check-list__item | |
| check-list__item__text | |
| check-list__item__icon | |
| check-list__item--checked | |
| check-list__item--checked__icon | |
| check-list__item--checked__text | |
| check-list__item--disabled | |
| check-list__item--disabled__icon | |
| check-list__item--disabled__text | |
npm package: @rax-ui/date-picker
Description: --- display: Date Picker family: Form ---
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Date Picker
family: Form
---

# DatePicker

用于选择日期或者时间


## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| type | 类型<br>可选值：<br> `date`, `time`, `dateime`, `year`, `month` | enum | `date` |
| maxDate | 最大时间 | Date;
| maxDate | 可选的最大日期 | Date | `new Date(new Date().getFullYear() + 20, 11, 31, 23, 59, 59, 999)` |
| minDate | 可选的最小日期 | Date | `new Date(2000, 0, 1, 0, 0, 0, 0)` |
| use12Hours | 是否使用 12 小时制 | bool | false |
| selectSecond | 是否可以选择秒 | bool | false |
| format | 时间格式化显示, 格式化函数基于 `dayjs` 实现 | string/func | `getDefaultFormat` |
| label | 选择框文本 | node |  |
| labelWidth | label 宽度 | string | auto |
| actionIcon | 选择框右侧的图标 | node | 'dropdown-down' |
| value | 选择框的值（受控） | Date | |
| defaultValue | 选择框的值（非受控）| Date | |
| disabled | 是否被禁用 | bool | false |
| solo | 是否只显示选择框内容（不包含 label 和 errorText 、HelpText） | bool | false |
| outline | 是否显示边框 | bool | false |
| placeholder | 选择框的提示文案 | string | |
| helpText | 选择框底部的帮助文案 | node | |
| errorText | 选择框底部的错误文案（设置此项后，选择框变为 `error` 状态，helpText 无效） | node | |
| align | 选择框内容对齐方向 <br>可选值：<br> `left`，`center`，`right` | enum | `left` |
| prepend | 选择框的前置内容 | node | |
| append | 选择框的后置内容 | node | |
| clear | 是否可以被清除 | bool | false |
| title | 选择器的标题文案 | string |  |
| renderSelection | 渲染已选择的内容 |  (value: any, valueLabel: any) => RaxNode | |
| onChange | 选择之后的回调 | (value: Date): void | |
| onFocus | focus 事件的回调 | ():void |  |
| onBlur | blur 事件的回调 | ():void |  |
| onShow | 选择器打开时的回调 | ():void |  |
| onHide | 选择器关闭时的回调 | ():void |  |
### CSS API

Select CSS
npm package: @rax-ui/dialog
Description: Dialog of Rax UI
Author: huya.nzb@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Dialog
family: other
---

# Dialog

对话框


## API

### Dialog

| 参数 | 说明 | 类型 | 默认值 |
| --- | ---- | --- | ----- |
| visible | 是否显示 | bool | false |
| type | 对话框类型 | 'none' / 'alert' / 'confirm' | false |
| keepMounted | 是否一直存在 | boolean | false |
| hideBackdrop | 是否隐藏遮盖背景 | boolean | false |
| disableBackdropClose | 是否禁用背景点击关闭 | boolean | false |
| title | 对话框的标题内容 | node | |
| icon | 对话框的图标, 支持传入图标名称或者图片 URL 路径 | string | |
| iconColor | 图标的颜色类型 <br>可选值：<br> `success`, `notice`, `warning`, `error`, `normal` | enum | `normal` |
| message | 对话框的文字内容 | string | |
| close | 是否显示关闭按钮 | bool | false |
| free | 是否是自由模式，设置为 `true` 只有关闭按钮的位置和样式将会发生变化 | bool | false |
| buttons | 对话框底部按钮 | DialogButtonProps[] | [] |
| buttonDirection | 按钮排列方向 <br>可选值：<br> `row`, `column`| enum | `row` |
| renderBanner | 渲染对话框 banner 部分的内容 | ():node | |
| onOk | 确定按钮被点击时回调 | (e) => void; | |
| onCancel | 取消按钮被点击时回调 | (e) => void; | |
| onButtonClick | 按钮被点击时回调 | (index?: number, e?: any) => void; | |
| onHide | 当对话框遮盖层点击或者点击关闭按钮时回调 | (reason: string, e) => void |  |
| onEnter | 开始进入时回调函数 | () => void |  |
| onExit | 开始退出时回调函数 | () => void |  |
| onEntering | 正在进入时回调函数 | () => void |  |
| onExiting | 正在退出时回调函数 | () => void |  |
| onEntered | 进入后回调函数 | () => void |  |
| onExited | 退出后回调函数 | () => void |  |
| onBackdropClick | 遮盖背景被点击时调用 | () => void |  |
| onClose | 关闭时调用 | (reason: string) => void |  |
| children | 对话框的内容 | node | |

### DialogButtonProps

| 参数 | 说明 | 类型 | 默认值 |
| --- | ---- | --- | ----- |
| text | 按钮文字 | string | |
| onClick | 点击之后回调 【小程序支持旧版本存在风险】 | (e) => void | |
| style | 按钮样式 | CSSProperties | |
| textStyle | 按钮文字样式 | CSSProperties | |

### 函数式调用 （WEB, Weex）

```jsx
import Dialog from '@rax-ui/dialog';

// 提示
Dialog.alert({
  message: 'Hello alert',
  button: '自定义按钮' // 默认确定
}, () => {
  console.log('callback')
});

// 确认
Dialog.confirm({
  title: 'title',
  message: 'Hello alert',
  okButton: '自定义确定', // 默认确定
  cancelButton: '自定义取消', // 默认取消
}, (e) => {
  console.log(e.ok); // 是否点击确定
});

// 自定义内容和按钮
const hide = Dialog.show({
  title: 'title',
  content: (
    <View>
      <Text>自定义内容</Text>
    </View>
  ),
  buttons: [
    '知道了',
    {
      a: 1,
      b: 2,
      text: '关闭',
      style: { // 自定义按钮样式
        backgroundColor: 'red'
      },
      textStyle: { // 自定义按钮文案样式
        color: 'white'
      }
    }
  ]
}, (e) => {
  console.log(e); // 包含 button 里的属性如 e.a, e.b
  hide(); // 需要手动关闭
});
```

### 组件式调用

```jsx
import { useState } from 'rax';
import Dialog from '@rax-ui/dialog';

function App() {
  const [visible, setVisible] = useState(true);
  return (
    <Dialog
      title="标题"
      visible={visible}
      buttons={[{ text: '确定', onClick: () => setVisible(false)}]}
    >
      <View>自定义内容</View>
    </Dialog>
  )
}
```

### CSS API

详细见 `src/style/index.ts`
npm package: @rax-ui/drawer
Description: Drawer of Rax UI
Author: huya.nzb@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Drawer
family: other
---

# Drawer

抽屉组件


## API

```jsx
import Drawer from '@rax-ui/drawer';

// 普通用法
function App() {
  const [visible, setVisible] = useState(true);
  return (
    <Drawer
      height={400} // 可以不设置，默认会根据内容高度设置，设置的话可以减少计算尺寸的一步
      visible={visible}
      placement="bottom"
      onMaskClick={() => setVisible(false)}
    >
      <View>
        <Text>content</Text>
      </View>
    </Drawer>
  );
}

// portal: 使用 createPortal
function CustomComponent() {
  const [visible, setVisible] = useState(true);
  const portal = useRef(null);
  return (
    <View>
      <View ref={portal}></View>
      <Drawer
        portal={true}
        // portal={document.body} // 同上
        // portal={() => portal.current} // 其他节点
        visible={visible}
        placement="bottom"
        onMaskClick={() => setVisible(false)}
      >
        <View>
          <Text>content</Text>
        </View>
      </Drawer>
    </View>
  );
}

// keepAlive: 保存状态（隐藏时不删除）
function App() {
  const [visible, setVisible] = useState(true);
  return (
    <Drawer
      keepAlive={true}
      visible={visible}
      placement="bottom"
      onMaskClick={() => setVisible(false)}
    >
      {// 保存已输入的值}
      <TextInput />
    </Drawer>
  );
}
```

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| visible | 是否显示 | boolean | false |
| placement | 抽屉放置的位置 | top/bottom/left/right | right |
| width | 宽度（left/right 时配置） | string/number | auto |
| height | 高度（top/bottom 时配置） | string/number | auto |
| keepMounted | 是否隐藏时不删除 | boolean | false |
| disableBackdropClose | 是否禁用背景点击关闭 | boolean | false |
| onShow | 显示时回调 | () => void | |
| onHide | 隐藏时回调 | () => void | |
| onEnter | 开始进入时回调函数 | () => void |  |
| onExit | 开始退出时回调函数 | () => void |  |
| onEntering | 正在进入时回调函数 | () => void |  |
| onExiting | 正在退出时回调函数 | () => void |  |
| onEntered | 进入后回调函数 | () => void |  |
| onExited | 退出后回调函数 | () => void |  |
| onBackdropClick | 遮盖背景被点击时调用 | () => void |  |


### CSS API

> 继承 Modal

| 名称 | 说明 |
|:---------------|:--------|
| `drawer` | 抽屉盒子 |
npm package: @rax-ui/field
Description: --- display: __ComponentName__ family: other ---
Author: Justin Kahn
Latest version: 1.0.0-beta.62

---
display: __ComponentName__
family: other
---

# __ComponentName__

hello world


## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|


### CSS API

| 名称 | 说明 |
|:---------------|:--------|
npm package: @rax-ui/filter-combo-container
Description: --- display: @rax-ui/filter-combo-container family: other ---
Latest version: 1.0.0-beta.15

---
display: @rax-ui/filter-combo-container
family: other
---

# @rax-ui/filter-combo-container

用作 Filter 场景的业务组件组合容器，它只是一个滚动容器，包含 `重置` 和 `确认选择按钮` 和一些方法，内部渲染由 `config` 数组传递 子组件和 子组件props 来决定，详见 Demo

## Feature
- 1、内部组件可动态扩展
- 2、容器统一封装，开发者无需关心容器实现，按照规范抛出结果即可
- 3、统一封装，必然有一些规范，规范如下

**接入容器中的组件：规范约定**
- 组件必须暴露 `reset` 重置选中值方法供容器调用：`Function() => filterParam`
- 组件必须暴露 `getFilterParam` 获取选中值方法供容器调用：Function() => filterParam
- 组件 `onChange(filterParam)` 回调函数返回形参 `filterParam`

```
// filterParam 格式
interface FilterParam {
  filterKey: string | number;
  filterText?: string;
  filterValue: any;
  // 和默认筛选值比较，筛选值是否变更
  filterValueChanged?: boolean;
}
```

## 预览图
![预览图](https://img.alicdn.com/tfs/TB19XdNg9f2gK0jSZFPXXXsopXa-281-501.png)

## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| styles | 自定义样式 | { [key:string]: CSSProperties} | {} |
| config|  组合的组件配置数组（Component 属性必传，此处用 多选组件） | Array | [] |
| filterKey|  filterKey | String | 'more'|
| resetButtonText|  重置按钮文字 | String | '重置'|
| confirmButtonText|  确认按钮文字 | String | '确定选择'|
| enableScroll|  开启滚动 | Boolean | true |
| iphonexCompatible|  iPhoneX 兼容性处理 | Boolean | true |


这里的 `MultiSelect`写法规范就是[ Filter.Panel 子组件书写规范](#)，详见 `@rax-ui/filter` 组件文档


```
config = [
  {
    Component: MultiSelect, // Component必传，此处用 多选组件
    {...compProps} // 如下都是多选组件的 Props
  },
  {
    Component: MultiSelect, // Component必传，此处用 多选组件
    {...compProps} // 如下都是多选组件的 Props
  },
]
```

### 方法

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| reset | 重置内部选中状态 | Function |  |
| rootRef | 根节点 ref | Object |  |

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
|container| 外层容器样式(可通过此来设置 width, height) |
|body| 中间内容样式 |
|footer| 底部样式 |
|reset__button| 重置按钮样式 |
|reset__button__text| 重置按钮文字样式 |
|confirm__button| 确认按钮 |
|confirm__button__text| 确认按钮文字样式 |
|separator| 分隔符样式 |
npm package: @rax-ui/filter-helper
Description: --- display: __ComponentName__ family: other ---
Author: beizhu.wc@alibaba-inc.com
Latest version: 1.0.0-beta.15

---
display: __ComponentName__
family: other
---

# @rax-ui/filter-helper

`@rax-ui/filter` 组件的帮助工具，提供**滚动吸附功能**，**滚动到具体位置功能**


## API

- withSticky：高阶组件，可提供在 RecycleView 组件中滚动吸附，兼容 weex/web 环境，【只支持RecycleView组件中使用】
  - **函数签名**`：Function(Wrapped: JSX.Element) => Wrapped
	- `Wrapped: JSX.Element`：被包裹的组件，目前仅支持 `RecycleView.Header`
- scrollIntoView：在滚动容器中，滚动到特定节点，滚动容器支持`RecycleView`、`ScrollView`
  - **函数签名**`：Function(node: any, container: any, animated = true, offset = 0) => void
	- `node`:  要滚动到的 dom 节点
	- `container`:  当前滚动容器 dom 节点
  - `animated`：是否动画
  - `offset`：滚动到node节点的 offset 距离


## Demo

```
import { createElement, render, Component } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import RecycleView from 'rax-recyclerview';
import findDOMNode from 'rax-find-dom-node';
import { withSticky, scrollIntoView } from '@rax-ui/filter-helper';

const StickyHeader = withSticky(RecycleView.Header);

class Demo extends Component {
  handleClick = () => {
    scrollIntoView(findDOMNode(this.refSticky), findDOMNode(this.refRecycleView), false);
  };
  render() {
    return (
      <View style={styles.page}>
        <RecycleView
          style={styles.recycle}
          ref={r => {
            this.refRecycleView = r;
          }}
        >
          {buildData(3).map((val, index) => {
            return (
              <RecycleView.Cell>
                <View key={'1' + index} style={styles.item}>
                  <Text>Top UI</Text>
                </View>
              </RecycleView.Cell>
            );
          })}
          <StickyHeader
            ref={r => {
              this.refSticky = r;
            }}
          >
            <View onClick={this.handleClick} style={styles.stickyItem}>
              <Text>Sticky Item, Click Me</Text>
            </View>
          </StickyHeader>

          {buildData(50).map((val, index) => {
            return (
              <RecycleView.Cell>
                <View key={'2' + index} style={styles.item}>
                  <Text>List Item {index}</Text>
                </View>
              </RecycleView.Cell>
            );
          })}
        </RecycleView>
      </View>
    );
  }
}
function buildData(length, text = '') {
  return new Array(length)
    .join(0)
    .split('')
    .map((item, index) => {
      return {
        text: text + index,
        value: String(index)
      };
    });
}

const styles = {
  page: {
    width: 750,
    height: 1334
  },
  recycle: {
    width: 750,
    height: 1246
  },
  stickyItem: {
    width: 750,
    height: 100,
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center'
  },
  item: {
    width: 750,
    height: 300,
    backgroundColor: '#eaeaea',
    justifyContent: 'center',
    alignItems: 'center'
  }
};

render(<Demo />, null, { driver: DriverUniversal });
```
npm package: @rax-ui/filter-list-select
Description: --- display: FilterListSelect family: other ---
Author: fengyu.xy
Latest version: 1.0.0-beta.15

---
display: FilterListSelect
family: other
---

# FilterListSelect

配合 Filter 使用的下拉列表面板，列表个数超过支持滚动，滚动场景容器高度可配置，参考 CSS API


## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| styles | 自定义样式 | Object | {} |
| dataSource| 数据源 | Array | [] <br/> **格式**:<br/> [{ name: '全部', value: '100' }] |
| filterKey | 搜索使用的 key | String | '' |
| filterValue | 选中值 | String|Number | '' |
| defaultValue | 默认值（通过将默认值和选中值进行比较得到当前 Filter 面板是否有 filterValueChanged） | String|Number | '' |
| selectedImg | 	list选中图标 | String | //gw.alicdn.com/tfs/TB1Jn2_SFXXXXaVXXXXXXXXXXXX-40-40.png |
| onChange | 搜索回调函数 <br /> **注意** <br />在 Filter 中使用时，父组件会注入该 prop | Function | ()=>{} |

### 方法

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| reset | 重置内部选中状态 | Function |  |
| rootRef | 根节点 ref | Object |  |

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
|list| 最外层容器样式(容器高度超过Panel 最大高度自动支持滚动，也可通过此样式来配置高度) |
|list__row| 单个 list row 样式 |
|list__row_active| 选中的单个 list row 样式 |
|list__icon| 选中图标样式 |
|list__text| 单个 list 文本样式 |
|list__text_active| 单个 list 文本选中样式 |
npm package: @rax-ui/filter-multi-select
Description: --- display: @rax-ui/filter-multi-select family: other ---
Author: yuning.yuningwang
Latest version: 1.0.0-beta.15

---
display: @rax-ui/filter-multi-select
family: other
---

# @rax-ui/filter-multi-select

在 `@rax-ui/filter` 组件中使用的单选、多选、输入框选择面板业务组件

## 组件功能
支持用户传入自定义选项
  - 支持多选框内设定自定义输入范围
  - 在拥有默认样式的情况下支持自定义样式


## API

### Props

|名称 | 类型 | 默认值 |描述 | 
|:---------------|:--------|:----|:----------|
|styles|Object||样式|
|title|String|''|选项标题|
|foldable|Boolean|false|面板是否可折叠|
|filterKey|String|''|选项key|
|filterValue|Array|[]|选项默认选中值|
|dataSource|Array|[]|选项|
|range|Object|{}|输入范围选项|

### Function

|名称|参数|类型|描述|
|:---------------|:--------|:----|:----------|
|onChange|{}|Function|选项更改触发回调|
|reset|/|Function|选项重置|
|getFilterParam|/|Function|主动获取搜索参数|

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
|multi__select__select__box__wrapper|选项外容器样式|
|multi__select__title__wrapper|标题外容器样式|
|multi__select__title|标题样式|
|multi__select__fold__icon|折叠icon样式|
|multi__select__invisible__fold_icon|隐藏折叠icon样式|
|multi__select__block__container|单选项外容器样式|
|select__box__block|选项样式|
|select__box__block__selected|选中选项样式|
|select__box__block__text|选项文本样式|
|select__box__block__text__selected|选中选项文本样式|
|input__unit__wrapper|输入框样式|
|input__unit__main|输入框文本样式|
|input__unit__unit|输入框单位样式|
|input__unit__title|输入框文案样式|
|input__unit__separator|文本输入框范围选项间隔样式|
npm package: @rax-ui/form
Description: Rax UI Form
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Form
family: other
---

# Form

用于表单布局

## API

### Form

| 名称       | 说明       | 类型            | 默认值 |
| :--------- | :--------- | :-------------- | :----- |
| labelWidth | 文字的宽度 | string / number |
| labelType  | label 类型 | inner / upper   |        |

#### Form.Item

| 名称       | 说明                                         | 类型            | 默认值  |
| :--------- | :------------------------------------------- | :-------------- | :------ |
| label      | 表单项的 `label`                             | string          |         |
| labelWidth | 文字的宽度                                   | string / number |
| labelType  | label 类型                                   | inner / upper   |         |
| helpText   | 表单项帮助文字信息                           | string          |         |
| required   | 是否为必填项                                 | boolean         | `false` |
| errorText  | 表单项错误文字信息                           | string          |         |
| tapable    | 是否可点击，设置为 true 后，会出现右侧的图标 | boolean         |         |

### CSS API

| 名称                    | 说明               |
| :---------------------- | :----------------- |
| form                    | 表单样式           |
| form\_\_sub-header      | 表单小标题样式     |
| form\_\_footer          | 表单底部区域样式   |
| form\_\_content         | 表单内容区样式     |
| form\_\_item            | 表单项             |
| form\_\_item-container  | 表单项内容         |
| form\_\_item-label      | 表单项标签         |
| form\_\_item-input      | 表单项输入区域     |
| form\_\_item-help       | 表单项帮助区域     |
| form\_\_item-help-text  | 表单项帮助文字     |
| form\_\_item-error-text | 表单项提示出错文字 |
npm package: @rax-ui/grid
Description: Rax UI Grid
Author: jinli.lyy@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Grid
family: container
---

# Grid

宫格容器

## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| columns | 列数 | number | 3 |
| cells | 网格数据 | Cell | |
| bordered | 是否有边框 | boolean | |
| horizontalAlign | 水平方向对齐方式 <br/>**可选值：**<br/> `center` `start` `end` | center |
| verticalAlign | 垂直方向对齐方式 <br/>**可选值：**<br/> `center` `start` `end` | center |
| onCellClick | 单元格被点击时的回调 | (index: number, e) => void | |
| renderCell | 渲染单元格内容 | ({ cell: Cell, index: number }) => RaxNode | |

## Cell

| 名称 | 说明 |
|:---------------|:--------|
| style | 单元格样式 |
| className | 单元格样式 |
| ... | |
npm package: @rax-ui/icon
Description: Rax UI Icon
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Icon
family: general
---

# Icon

hello world

## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| name | icon 名称 | string | |
| uri | icon URL, 设置此项会更改为用image渲染 | |
npm package: @rax-ui/list
Description: Rax UI List
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: List
family: general
---

# List

列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。

## API

* `<List>`
* `<List.Item media={}>`
* `<List.ItemMedia>`
* `<List.ItemAction>`
* `<List.ItemContent>`
* `<List.ItemLabel>`
* `<List.ItemCaption>`


### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| `list` | 列表样式 |
| `list__item` | 列表项样式 |
| `list__item__divider` | 列表分割线样式 |
| `list__item__content` | 列表项内容样式 |
| `list__item__media` | 列表项图标/图片容器样式 |
| `list__item__label` | 列表项主文本样式 |
| `list__item__caption` | 列表项次要文本样式 |
| `list__item__icon` | 列表图标样式 |
npm package: @rax-ui/loading
Description: Loading of Rax UI
Author: huya.nzb@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Loading
family: other
---

# Loading

加载框


## API

### 函数式调用

适合全局页面的加载框

```jsx
import Loading from '@rax-ui/loading';

// 默认
Loading.show();

// 自定义
Loading.show({
  mask: true, // 默认 false
  content: '加载中', // 底部文案
  icon: 'https://img.alicdn.com/tfs/TB1aks3PpXXXXcXXFXXXXXXXXXX-150-150.gif', // 自定义加载动画图
});

// 关闭
Loading.hide();
```

### 组件式调用

适合区域的加载框

```jsx
import { createElement, useState, useEffect } from 'rax';
import Loading from '@rax-ui/loading';
import View from 'rax-view';
import Text from 'rax-text';

function App() {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setVisible(false);
    }, 5000);
  });

  return (
    <View>
      <Text>自定义内容</Text>
      <Loading visible={visible} content="加载中" />
    </View>
  );
}
```

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| `visible` | 是否显示 | `boolean` | `false` |
| `mask` | 是否带有蒙层 | `boolean` | `false` |
| `icon` | 加载动画图 | `string` | [地址](https://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif) |
| `content` | 加载文案 | `string` ||


### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| `loading` | 加载框 |
| `loading--mask` | 蒙层样式 |
| `loading__icon` | 加载动画图 |
| `loading__content` | 文案 |
npm package: @rax-ui/locale
Description: --- display: Locale family: Utils ---
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Locale
family: Utils
---

# Locale

国际化控件, 目前用于定义/使用文案。

## API

### LocaleProvider

全局注入文案，`<LocaleProvider locale={} />`

### useLocale<T>(name: string, props: { locale: T }, defaultLocale: T)

使用文案

* name: 组件名称
* props: 组件参数，里面需要有 `locale`
* defaultLocale: 默认文案

### withLocale<T, P extends LocaledComponentProps<T>>(Component: ComponentType<P>, options: { name: string, defaultLocale: T })

HOC 用于 Class Component

* Component 组件
* options
  * options.name 组件名称
  * options.defaultLocale 默认文案
npm package: @rax-ui/number-picker
Description: Rax UI Number Picker
Author: xiangzhi.wsl
Latest version: 1.0.0-beta.62

---
display: NumberPicker
family: Data Entry
---

# NumberPicker

数字选择器

## API

### Props

| 名称           | 说明                               | 类型              | 默认值    |
| :------------- | :--------------------------------- | :---------------- | :-------- |
| className      | className                          | string            |           |
| value          | 当前值, 有值时为受控模式           | number            |           |
| defaultValue   | 初始值                             | number            | 1         |
| max            | 最大值                             | number            | Infinity  |
| min            | 最小值                             | number            | -Infinity |
| step           | 步数                               | number            | 1         |
| editable       | `input` 可输入                     | boolean           | true      |
| disabled       | 是否禁用（按钮和手动输入皆不可用） | boolean           | false     |
| onBeforeChange | 变化前回调函数                     | (): Promise\<any> |           |
| onChange       | 变化时回调函数                     | (n: number): void |           |

### CSS API

| 名称                                   | 说明                        |
| :------------------------------------- | :-------------------------- |
| number-picker                          | 容器样式                    |
| number-picker\_\_input                 | 输入框样式                  |
| number-picker\_\_button                | 按钮样式                    |
| number-picker\_\_button-icon           | 按钮图标样式                |
| number-picker--disabled\_\_input       | `disabled` 时的输入框样式   |
| number-picker--disabled\_\_button      | `disabled` 时的按钮样式     |
| number-picker--disabled\_\_button-icon | `disabled` 时的按钮图标样式 |
| number-picker--focused\_\_input        | `focus` 时输入框样式        |
npm package: @rax-ui/pagination
Description: 分页
Author: lianmin.slm
Latest version: 1.0.0-beta.62

# Pagination

分页

## API

### Props

| 名称     | 说明                                                            | 类型                      | 默认值   |
| :------- | :-------------------------------------------------------------- | :------------------------ | :------- |
| size     | 尺寸, <br/>可选值 `medium`，`large`                             | enum                      | `medium` |
| type     | 类型， <br/> 可选值 `normal`,`mini`(隐藏分页数字和首、末页按钮) | enum                      | `normal` |
| current  | 当前页                                                          | number                    | 1        |
| total    | 总分页数（必填， >0 的整数）                                    | number                    | 1        |
| disabled | 是否禁用                                                        | boolean                   | false    |
| onChange | 分页事件                                                        | (current:number, e)=>void |          |

### CSS API

| 名称                   | 说明             |
| :--------------------- | :--------------- |
| `pagination--current'` | 当前页 文案 样式 |
| `pagination--total'`   | 总页数 文案 样式 |
npm package: @rax-ui/picker
Description: Rax UI picker
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Picker
family: Form
---

# Picker

滑动选择器，目前只支持H5版本

## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| data | 数据源	| array<{value, label, children: Array}> | |
| value | 值, 格式是[value1, value2, value3], 对应数据源的相应级层value | array | |
| cascade | 是否联动 | bool | false |
| onChange | 选中后的回调 | (value, colunmnIndex): void | |

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| picker | 最外层样式 |
| picker__item | 每一个选择项样式 |
| picker__col | 每个可选择的列的样式 |
| picker__col-content | 内容样式 |
| picker__col-item | 每一项样式 |
| picker__col-item--selected | 被选择时的样式 |
| picker__mask | 遮罩样式 |
| picker__indicator | 中间指示器的样式 |
npm package: @rax-ui/progress
Description: Rax UI Progress
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Progress
family: Data Display
---

# Progress

用于展示操作的当前进度。

## API

### Props

| 名称      | 说明                                                                     | 类型          | 默认值 |
| :-------- | :----------------------------------------------------------------------- | :------------ | :----- |
| shape     | 形态 <br>可选值：<br>`circle` (weex 不支持), `line`                      | enum          | `line` |
| percent   | 所占百分比, <br>可选值：<br> 0 - 100                                     | number        | 0      |
| barWidth  | 进度条宽度, 单位 `px`                                                    | number        | 4      |
| size      | 进度条大小 （仅在 `shape='circle'` 时生效）                              | string/number |        |
| color     | 颜色                                                                     | string        |        |
| platform  | 组件的平台特有样式, 可选值有 `iOS` 或 `Android`, 由 `ConfigPovider` 传入 | enum          | `iOS`  |
| style     | `style` 属性                                                             | object        | {}     |
| className | `className` 属性                                                         | string        |        |
| children  | 仅在 `shape='circle'` 时生效， 为进度条的百分比文字或者自定义渲染节点    | node          |        |

### CSS API

| 名称                         | 说明                          |
| :--------------------------- | :---------------------------- |
| linear-progress              | `shape='linear'` 时样式       |
| linear-progress\_\_track     | `shape='linear'` 时轨道样式   |
| linear-progress\_\_bar       | `shape='linear'` 时进度条样式 |
| circle-progress              | `shape='circle'` 时样式       |
| circle-progress\_\_track     | `shape='circle'` 时轨道样式   |
| circle-progress\_\_bar       | `shape='circle'` 时轨道样式   |
| circle-progress\_\_text-wrap | `shape='circle'` 时文本层样式 |
| circle-progress\_\_text      | `shape='circle'` 时文本样式   |
npm package: @rax-ui/range
Description: --- display: Range family: Form ---
Author: xuhong.cxh@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Range
family: Form
---

# Range

滑动输入条

## API

### Props

| 名称           | 说明                                                               | 类型            | 默认值 |
| :------------- | :----------------------------------------------------------------- | :-------------- | :----- |
| min            | 最小值                                                             | number          | 0      |
| max            | 最大值                                                             | number          | 100    |
| step           | 步长                                                               | number          | 1      |
| value          | 值                                                                 | number/number[] | 0      |
| count          | 拇指的个数, 1 或 2                                                 | number          | 1      |
| defaultValue   | 默认值                                                             | number/number[] | 0      |
| disabled       | 是否禁用                                                           | boolean         | false  |
| readOnly       | 只读模式                                                           | boolean         | false  |
| marks          | 需要显示的数值标签                                                 | object          | {}     |
| tooltipVisible | 是否显示气泡提示,`true`一直显示，`false`一直不显示，默认拖动时显示 | boolean         |        |
| onChange       | 拖动结束的回调                                                     | (value) => void | noop   |
| onMove         | 拖动过程的回调，尽量避免在这里 setState                            | (value) => void |        |

### CSS API

| 名称                               | 说明                                 |
| :--------------------------------- | :----------------------------------- |
| range                              | 最外层样式                           |
| range\_\_track                     | 轨道的样式                           |
| range--disabled\_\_track           | 禁用时轨道的样式                     |
| range\_\_track--selected           | 选中的轨道样式                       |
| range--disabled\_\_track--selected | 禁用时选中部分的样式                 |
| range\_\_thumb                     | 拇指的样式                           |
| range\_\_thumb--active             | 拖动时拇指的样式                     |
| range\_\_mark                      | 刻度线的样式                         |
| range--disabled\_\_mark            | 禁用时刻度线的样式                   |
| range\_\_mark--active              | 刻度线在选中范围的样式               |
| range--disabled\_\_mark--active    | 禁用状态下刻度线在选中范围的样式     |
| range\_\_label                     | 刻度线文案的样式                     |
| range--disabled\_\_label           | 禁用时刻度线文案的样式               |
| range\_\_label--active             | 刻度线文案在选中范围的样式           |
| range--disabled\_\_label--active   | 禁用状态下刻度线文案在选中范围的样式 |
| range\_\_tooltip                   | 气泡的样式                           |
| range\_\_arrow                     | 气泡箭头的样式                       |
npm package: @rax-ui/select
Description: Rax UI Select
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Select
family: Data Entry
---

# Select

选择器，用于从选择数据。


## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| type | 类型<br>可选值：<br> `single`, `cascade`, `muliple` (weex 端只支持 single 和 muliple) | enum | `single` |
| data | 数据源 | array |  |
| label | 选择框文本 | node |  |
| labelWidth | label 宽度 | string | auto |
| actionIcon | 选择框右侧的图标 | node | 'dropdown-down' |
| value | 选择框的值（受控） | any | |
| defaultValue | 选择框的值（非受控）| any | |
| disabled | 是否被禁用 | bool | false |
| solo | 是否只显示选择框内容（不包含 label 和 errorText 、HelpText） | bool | false |
| outline | 是否显示边框 | bool | false |
| placeholder | 选择框的提示文案 | string | |
| helpText | 选择框底部的帮助文案 | node | |
| errorText | 选择框底部的错误文案（设置此项后，选择框变为 `error` 状态，helpText 无效） | node | |
| align | 选择框内容对齐方向 <br>可选值：<br> `left`，`center`，`right` | enum | `left` |
| prepend | 选择框的前置内容 | node | |
| append | 选择框的后置内容 | node | |
| clear | 是否可以被清除 | bool | false |
| delimiter | 分割符 | string | `,` |
| title | 选择器的标题文案 | string |  |
| locale | 按钮文案， | { ok, cancel } | { ok: '确定', cancel: '取消' } | 
| renderSelection | 渲染已选择的内容 |  (value: any, valueLabel: any) => RaxNode | |
| onChange | 选择之后的回调 | (value): void | |
| onFocus | focus 事件的回调 | ():void |  |
| onBlur | blur 事件的回调 | ():void |  |
| onShow | 选择器打开时的回调 | ():void |  |
| onHide | 选择器关闭时的回调 | ():void |  |

### CSS API

继承 TextField + Picker CSS

| 名称 | 说明 |
|:---------------|:--------|
| select__picker | |
| select__picker__toolbar | |
| select__picker__title | |
| select__picker__title__text | |
npm package: @rax-ui/stepper
Description: Rax UI Stepper
Author: jinli.lyy@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Stepper
family: navigation
---

# Stepper

显示一个任务的进度；或者引导用户完成某个复杂任务。

## API

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| current | 当前步骤，从 0 开始记数 | number | 0 |
| shape | 形态，<br>可选值：<br> `circle`, `dot` | enum | `circle` |
| direction | 方向， <br>**可选值：**<br> `horizontal`, `vertical` | enum | vertical |
| steps | 步骤内容 | Step[] | |
| renderStepContent | 渲染步骤内容 | (props: StepProps) => RaxNode | |

### Step

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| title | 标题 | RaxNode | |
| content | 内容 | RaxNode | |
| icon | 图标 | string | |

### StepProps 

|名称 | 说明 | 类型 | 默认值 |
| status | 状态 <br/>**可选值：**<br/> `awaiting`, `processing`, `finished` | enum | awaiting |
| shape | 形态，<br>可选值：<br> `circle`, `dot` | enum | `circle` |
| direction | 方向， <br>**可选值：**<br> `horizontal`, `vertical` | enum | vertical |
| index | 步骤序号，从 0 开始 | number | |
| last | 是否是最后一个步骤 | boolean | |
| title | 标题 | RaxNode | |
| content | 内容 | RaxNode | |
| icon | 图标| string | |


### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| stepper | 步骤条样式 | | 
| stepper--horizontal | `direction="horizontal"` 时步骤条样式 |
| stepper--vertical | `direction="vertical"` 时步骤条样式 |
| stepper__step | 步骤样式 |
| stepper--horizontal__step | `direction="horizontal"` 步骤样式 |
| stepper--vertical__step | `direction="vertical"` 时步骤样式 |
| stepper__step__header | 步骤头部样式 |
| stepper--horizontal__step__header | `direction="horizontal"` 时步骤头部样式 |
| stepper--vertical__step__header | `direction="vertical"` 时步骤头部样式 |
| stepper__step__connector | 步骤连接线样式 |
| stepper--horizontal__step__connector | `direction="horizontal"` 时步骤连接线样式 |
| stepper--vertical__step__connector | `direction="vertical"` 时步骤连接线样式 |
| stepper--horizontal__step--finished__connector | `direction="horizontal"` 时已完成步骤连接线样式  |
| stepper--vertical__step--finished__connector | `direction="vertical"` 时已完成步骤连接线样式  |
| stepper__step__node | 步骤节点样式 |
| stepper__step--finished__node | 已完成步骤节点样式 |
| stepper__step--processing__node | 正在进行的步骤节点样式 |
| stepper--horizontal__step__node | `direction="horizontal"` 时步骤节点样式 |
| stepper--vertical__step__node | `direction="vertical"` 时步骤节点样式 |
| stepper__step__icon | 步骤节点图标样式 |
| stepper__step--finished__icon | 已完成步骤节点图标样式 |
| stepper__step--processing__icon | 正在进行的步骤节点图标样式 |
| stepper__step__number | 步骤节点数字样式 |
| stepper__step--finished__number | 已完成步骤节点数字样式 |
| stepper__step--processing__number | 正在进行的步骤节点数字样式 |
| stepper__step__body | 步骤内容容器样式 |
| stepper--horizontal__step__body | `direction="horizontal"` 时步骤内容容器样式 |
| stepper--vertical__step__body | `direction="vertical"` 时步骤内容容器样式 |
| stepper__step__title | 步骤标题样式 |
| stepper__step--finished__title | 已完成步骤标题样式 |
| stepper__step--processing__title | 正在进行的步骤标题样式 |
| stepper__step__content | 步骤内容样式 |
| stepper__step--finished__content | 已完成步骤内容样式 |
| stepper__step--processing__content | 正在进行的步骤内容样式 |
npm package: @rax-ui/styles
Description: Rax UI Styles
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Styles
family: util
---

# Styles

UI 样式规范, 用于定义样式，提供样式覆盖和主题功能；

## 安装

```shell

npm install @rax-ui/styles --save

```

## 快速上手

定义组件样式, 采用 `CSS BEM` 规范.

```js
// style.js
export default (theme) => {
  return {
    'hello': {
      fontSize: 50,
      color: theme.Hello.color,
    },
    'hello--primary': {
      color:  theme.Hello.primaryColor,
    }
  }
}
```

组件中使用

```jsx
// hello.js
import { createElement } from 'rax';
import Text from 'rax-text';
import { useStyles } from '@rax-ui/styles';
import StyleProvider from './style';

const Hello = ({ primary = false, style, ...others }) => {

  const styles = useStyles(StyleProvider, others, (classNames) => {
    return {
      hello: classNames({
        'hello': true,
        'hello--primary': primary,
      })
    }
  });
  return <Text style={{
    ...styles.hello,
    style
  }}>Hello world</Text>;
}

```

覆盖组件样式

```js
import Hello from './hello';

const customStyles = {
  'hello': {
    fontSize: 18,
    color: 'yellow'
  },
  'hello--primary': {
    color: 'blue'
  }
};

<Hello styles={customStyles} />
```

使用主题

```js
import Hello from 'hello';
import ThemeProvider from '@rax-ui/styles';

const theme = {
  Hello: {
    color: '#333',
    primaryColor: 'red'
  }
};

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Hello />
    </ThemeProvider>
  );
}
```

## API

### ThemeProvider

全局注入主题，`<ThemeProvider theme={} />`

### useStyles(styleProvider, props, flatStyle)

* styleProvider 为之前提供的样式函数。
* props 组件接收的属性, { styles }, styles 为组件上接收的样式
* flatStyle 拼接组件样式函数，会传入一个 `classNames`

### useTheme()

返回 `ThemeProvider` 配置的主题对象
npm package: @rax-ui/switch
Description: Rax UI Switch
Author: ruyun.cry
Latest version: 1.0.0-beta.62

---
display: Switch
family: general
---

# Switch

开关选择器，点击切换开关状态。

## API

### Props

| 名称           | 说明                                   | 类型                                     | 默认值 |
| :------------- | :------------------------------------- | :--------------------------------------- | :----- |
| checked        | 指定当前是否选中，若有值，则为受控模式 | boolean                                  | false  |
| defaultChecked | 初始是否选中                           | boolean                                  | false  |
| disabled       | 是否禁用                               | bool                                     | false  |
| readOnly       | 只读模式                               | boolean                                  | false  |
| className      | Switch 类名                            | string                                   |        |
| onChange       | 点击时回调函数                         | Function(checked: boolean, event: Event) |        |

### CSS API

| 名称                                 | 说明                             |
| :----------------------------------- | :------------------------------- |
| switch\_\_track                      | switch 轨道样式                  |
| switch--checked\_\_track             | 选中时的 switch 轨道样式         |
| switch--unchecked\_\_track           | 未选中时的 switch 轨道样式       |
| switch--checked--disabled\_\_track   | 禁用且选中时的 switch 轨道样式   |
| switch--unchecked--disabled\_\_track | 禁用且未选中时的 switch 轨道样式 |
| switch\_\_thumb                      | 选中时的圆样式                   |
| switch--checked\_\_thumb             | 选中时的 switch 圆样式           |
| switch--unchecked\_\_thumb           | 未选中时的 switch 圆样式         |
| switch--checked--disabled\_\_thumb   | 禁用且选中时 switch 圆样式       |
| switch--unchecked--disabled\_\_thumb | 禁用且未选中时的 switch 圆样式   |
npm package: @rax-ui/table
Description: --- display: Table family: Data Display ---
Author: yuzheng.tz
Latest version: 1.0.0-beta.12

---
display: Table
family: Data Display
---

# Table

表格，展示行列数据

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 表格列的配置描述，具体项见下表 | array | - |
| dataSource | 数据数组 | array | - |
| sortDirections | 支持的排序方式，取值为 'ascend' 'descend' null，设置在 table props 上对所有列生效 | Array | ['ascend', 'descend', null] |
| customStyles | 可自定义所有样式 | Function(defaultStyles):object | - |
| onHeaderRow | 设置头部行属性 | Function(column, index) | - |
| onRow | 设置行属性 | Function(record, index) | - |
| sortIconRender | 排序icon render | Function(column, sortOrder) {} | - |
| descIconRender | 字段说明icon render | Function(column) |  |
| onClickDescIcon | 自定义字段说明icon点击事件 | Function(column, event) |  |
| rowKey(暂未支持) | 表格行 key 的取值，可以是字符串或一个函数 | string / Function(record):string | 'key' |
| onChange | 排序变化时触发 | Function(sorter) |  |

### Column Props

列描述数据对象，是 columns 中的一项。

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| align | 设置列内容的对齐方式 | 'left' / 'right' / 'center' | 'left' |
| colSpan | 表头列合并,设置为 0 时，不渲染(暂未支持) | number | 1 |
| dataIndex | 列数据在数据项中对应的 key | string | - |
| fixed | 列是否固定(固定列需通过customStyles设置fixedTable.left（默认为20）为表格和屏幕左边的距离，详见demo用法) | boolean | false |
| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并 | Function(text, record, index) {} | - |
| defaultSortOrder | 默认排序顺序 | 'ascend' / 'descend' | - |
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` | string | - |
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function / boolean | - |
| sortDirections | 支持的排序方式，取值为 'ascend' 'descend' null | Array | ['ascend', 'descend', null] |
| title | 列头显示文字 | string | - |
| width | 列宽度 | number | - |
| onCell | 设置单元格属性 | Function(record, rowIndex) | - |
| onHeaderCell | 设置头部单元格属性 | Function(column) | - |
| children | 子列 | array，其中元素是column对象 | - |

### onRow 用法

适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。

```jsx
<Table
  onRow={(record) => {
    return {
      onClick: (event) => {},       // 点击行
      onLongPress: (event) => {},   // 长按行，H5不支持
      onAppear: (event) => {},
      onDisappear: (event) => {},
      customStyle: (defaultStyle) => {},         // 设置自定义样式

      // 仅适用于onCell、onHeaderCell
      titleCustomStyle: (defaultStyle) => {},    // 设置标题的自定义样式，
    };
  }}
  onHeaderRow={(column) => {
    return {
      onClick: () => {},        // 点击表头行
    };
  }}
/>
```

## 注意

按照 [React 的规范](https://facebook.github.io/react/docs/lists-and-keys.html#keys)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。

![控制台警告](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)

```js
// 比如你的数据主键是 uid
return <Table rowKey="uid" />;
// 或
return <Table rowKey={record => record.uid} />;
```