open-index/open-npm huggingface dataset:
npm package: @rax-ui/tabs
Description: Rax UI Tabs
Author: jinli.lyy
Latest version: 1.0.0-beta.62

---
display: Tabs
family: Navigation
---

# Tabs

用于让用户在不同的视图中进行切换。

## API

### Props

| 名称               | 说明                                         | 类型          | 默认值 |
| :----------------- | :------------------------------------------- | :------------ | :----- |
| activeValue        | （受控）指定激活 `Tabs.Tab` 的 `value`       | string/number |        |
| defaultActiveValue | （非受控）指定默认激活 `Tabs.Tab` 的 `value` | string/number |        |
| type               | 类型 <br>可选值：<br> `normal`, `primary`    | enum          | normal |
| bottom             | 是否是底部导航                               | bool          | false  |
| tabs               | 标签页                                      | TabProps[]    |        |
| fullWidth          | 是否占满空间                                 | bool          | true   |
| renderTab          | 渲染标签页                                   | ({ title, icon, active, styles: { title, icon } }) => RaxNode | |
| renderTool         | 渲染 tabs 最右侧的部分                       | (): node      |        |
| onChange           | tab 变化时触发的回调                         | (key): void   |        |

### TabProps

| 名称               | 说明                                         | 类型          | 默认值 |
| :----------------- | :------------------------------------------- | :------------ | :----- |
| value | 标签页的值，与 activeValue 一致是被选中 | string / number | |
| title | 标题 | string | |
| icon | 图标 | string | |

### CSS API

| 名称                              | 说明                           |
| :-------------------------------- | :----------------------------- |
| tabs                              | 容器样式                       |
| tabs\_\_divider                   | 底部分割线样式                 |
| tabs\_\_container                 | 滚动容器样式                   |
| tabs\_\_tab                       | tab 项样式                     |
| tabs\_\_tab--full-width           | 设置 `fullWidth` 时的 tab 样式 |
| tabs\_\_active-line               |                                |
| tabs\_\_tab-text                  | tab 文字样式                   |
| tabs\_\_tab-icon                  | tab 图标样式                   |
| tabs\_\_tab--active-text          | 激活 tab 文字样式              |
| tabs\_\_tab--active-icon          | 激活 tab 图标样式              |
| tabs--primary                     | primary 类型下 tabs 容器样式   |
| tabs--primary\_\_active-line      |                                |
| tabs--primary\_\_tab-text         | primay 类型下 tab 文字样式     |
| tabs--primary\_\_tab-icon         | primay 类型下 tab 图标样式     |
| tabs--primary\_\_tab--active-text | primay 类型下激活 tab 文字样式 |
| tabs--primary\_\_tab--active-icon | primay 类型下激活 tab 图标样式 |
| tabs--bottom                      | 底部导航 tabs 样式             |
| tabs--bottom\_\_divider           | 底部导航分割线样式             |
| tabs--bottom\_\_tab               | 底部导航 tab 样式              |
| tabs--bottom\_\_tab-text          | 底部导航 tab 文字样式          |
| tabs--bottom\_\_tab-icon          | 底部导航 tab 图标样式          |
npm package: @rax-ui/toast
Description: Toast of Rax UI
Author: lianmin.slm
Latest version: 1.0.0-beta.62

# Toast

弱提示

## API

### Props

| 名称        | 说明                 | 类型                   | 默认值 |
| :---------- | :------------------- | :--------------------- | :----- |
| `visible`   | 是否可见（受控）     | `boolean`              | false  |
| `content`   | 提示内容（必填）     | `string` or `RAX Node` |        |
| `title`     | 提示标题             | `string`               |        |
| `icon`      | 提示图标             | `string`               |        |
| `image`     | 图片路径             | `string`               |        |
| `duration`  | 多久后消失           | `number`               | `2000` |
| `onHide`    | 需要被关闭时的回调   | (reason, e) => void    |        |
| `onEntered` | 进入动画结束后的回调 |                        |        |
| `onExited`  | 退出动画结束后的回调 |                        |        |

### 快捷调用 （WEB, Weex）

【不推荐】

```js
import Toast from '@rax-ui/toast';

Toast.show('content content content');
Toast.show('content content content', 3000); // hide after 3000ms
Toast.show({
  // custom
  center: true,
  icon: 'icon',
  title: 'title',
  duration: 4000,
  content: 'content content content',
});

Toast.hide(); // hide immediately
```

### CSS API

| 名称                         | 说明           |
| :--------------------------- | :------------- |
| `toast`                      | 容器           |
| `toast__title`               | 标题容器       |
| `toast__icon`                | 图标           |
| `toast__title__text`         | 标题           |
| `toast__content`             | 内容容器       |
| `toast__content--only`       | 只有内容的容器 |
| `toast__content__text`       | 内容           |
| `toast__content__text--only` | 只有内容       |
npm package: @rax-ui/transition
Description: Rax UI Transition
Author: jinli.lyy@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Transition
family: utils
---

# Transition

过渡动画组件, 兼容三端，小程序端要在 `Transition` 与 `Transition.View` 组件上加上统一的 `transitionKey`。


## API

### Transition

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| in | 显示组件；触发进入或退出状态 | boolean | false |
| appear | 第一次挂载就执行动画 | boolean | false |
| mountOnEnter | 第一次进入后挂载组件，默认与 Transition 一起挂载 | boolean | false |
| unmountOnExit | 退出后卸载此组件 | boolean | false |
| transition | 必选, 设置过渡效果属性 `TransitionType` | { enter: TransitionType, exit: TransitionType } | |
| styles | 必选, 设置进入和退出状态的样式 | { enter, exit } | |
| onEnter | 开始进入时回调函数 | () => void |  |
| onExit | 开始退出时回调函数 | () => void |  |
| onEntering | 正在进入时回调函数 | () => void |  |
| onExiting | 正在退出时回调函数 | () => void |  |
| onEntered | 进入后回调函数 | () => void |  |
| onExited | 退出后回调函数 | () => void |  |
| children | 关联子组件 | RaxNode | |


### Transition.View

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| properties | 过渡属性 | Array<keyof CSSProperties> | [] |
| delay | 延迟时间 | number | 0 |
| duration | 动画持续时间 | number | |
| timingFunction | 动画函数 |  'linear' / 'ease' / 'ease-in' / 'ease-out' / 'ease-in-out' / 'cubic-bezier(x1, y1, x2, y2)' | 'ease' |
| onTransitionEnd | 动画结束后回调函数 | () => void | |
| transitionKey | 与 Transition 组件配置使用时，在小程序端必选，与 `Transition` 组件的该属性值一致 | string | |

### TransitionType

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| properties | 过渡属性 | Array<keyof CSSProperties> | [] |
| delay | 延迟时间 | number | 0 |
| duration | 动画持续时间 | number | |
| timingFunction | 动画函数 |  'linear' / 'ease' / 'ease-in' / 'ease-out' / 'ease-in-out' / 'cubic-bezier(x1, y1, x2, y2)' | 'ease' |
npm package: @rax-ui/upload
Description: Rax UI Number Picker
Author: xiangzhi.wsl
Latest version: 1.0.0-beta.62

---
display: Upload
family: Data Entry
---

# Upload

用于图片文件上传

## API

### Props

| 名称      | 说明                 | 类型                    | 默认值   |
| :-------- | :------------------- | :---------------------- | :------- |
| fileList  | 文件列表             | `IFile[]`               |          |
| limit     | 最大文件上传个数     | number                  | Infinity |
| onChange  | 上传文件改变时的状态 | (file: IFile[]) => void |          |
| onRemove  | 移除文件回调函数     | (file: IFile) => void   |          |
| onPreview | 点击图片回调         | (file: IFile) => void   |          |

### IFile

| 名称      | 说明                                                                   | 类型           | 默认值 |
| :-------- | :--------------------------------------------------------------------- | :------------- | :----- |
| uid       | 文件唯一标识                                                           | string         |        |
| name      | 文件名                                                                 | string         |        |
| thumbUrl  | 缩略图                                                                 | string         |        |
| size      | 文件大小                                                               | string         |        |
| url       | 文件 URL 地址                                                          | string         |        |
| status    | 文件状态：<br/>可选值：<br/> `fail`, `success`, `uploading`, `removed` | enum           |        |
| percent   | 进度                                                                   | number (1-100) |        |
| canRemove | 是否可被删除                                                           | boolean        |        |

### CSS API

| 名称                    | 说明               |
| :---------------------- | :----------------- |
| upload                  | 容器样式           |
| upload\_\_add           | 增加图片样式       |
| upload\_\_add\_\_icon   | 增加图片中图标样式 |
| upload\_\_add\_\_text   | 增加图片中文字样式 |
| upload\_\_item          | file 显示样式      |
| upload\_\_item-image    | file 图片样式      |
| upload\_\_item-progress | 进度条样式         |
| upload\_\_remove        | 删除样式           |
| upload\_\_remove-image  | 删除图标样式       |
| upload\_\_fail          | 上传失败样式       |
| upload\_\_fail-image    | 失败图标样式       |
| upload\_\_item--fail    | 上传失败样式       |