Rsmax
文档
API
FAQ
GITHUB
文档
API
FAQ
GITHUB

rsmax/one 导出的组件，意味着在所有 Rsmax 支持的平台都可以使用，并且 Rsmax 尽量保证了行为一致。

Button

按钮组件

import { Button } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
disabled boolean 是否禁用
hoverClassName string 按住按钮后对应的样式类
hoverStartTime number 按住后多久出现点击态，单位毫秒
hoverStayTime boolean 手指松开后点击态保留时间
type 'submit' | 'reset' 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
onTap ((event: TapEvent)) => void 点击事件

注意

微信中，由于受控行为不一致，在 Form 中执行 reset 后，即使表单组件受控后，value 也会被清空

Form

表单组件

import { Form } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
onSubmit ((event: FormEvent)) => void 提交事件
onReset ((event: FormEvent)) => void 重置表单事件

Image

图片组件

import { Image } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
src string 图片资源地址
mode 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right' 图片裁剪，缩放模式
onLoad ((event: ImageLoadEvent)) => void 当图片加入完毕时触发
onError ((event: ImageErrorEvent)) => void 当错误发生时触发
onTap ((event: TapEvent)) => void 点击事件
onTouchStart ((event: TouchStartEvent)) => void 触碰开始事件
onTouchMove ((event: TouchMoveEvent)) => void 触碰移动事件
onTouchEnd ((event: TouchMoveEvent)) => void 触碰结束事件
onTouchCancel ((event: TouchCancelEvent)) => void 触碰取消事件

Input

Input 组件

import { Input } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
defaultValue string 默认值
value string 输入框的值
name string 输入框的名称
type 'text' | 'number' | 'idcard' | 'digit' 输入框类型
password boolean 是否密码类型
placeholder string 输入框占位符
placeholderStyle React.CSSProperties 占位符 inline style
disabled boolean 是否禁用
maxLength number 最大输入长度
focus boolean 是否获取焦点
onInput ((event: InputEvent)) => any 输入回调事件
onConfirm ((event: InputEvent)) => void 键盘确认回调事件
onFocus ((event: InputEvent)) => void focus 事件
onBlur ((event: InputEvent)) => void blur 事件

注意

受微信平台限制，在微信里 Input 必须通过 onInput 事件的返回值做受控，详见微信文档。

Input 的 type 类型在 web 中没有 'idcard' 和 'digit' 这两个选项

Label

Label 组件

import { Label } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
htmlFor string 绑定控件的 id

Text

Text 组件

import { Text } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
selectable boolean 文本是否可选
onTap ((event: TapEvent)) => void 点击事件

Textarea

Textarea 组件

import { Textarea } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
defaultValue string 默认值
value string 输入框的值
name string 输入框的名称
placeholder string 输入框占位符
placeholderStyle React.CSSProperties 占位符 inline style
disabled boolean 是否禁用
maxLength number 最大输入长度
focus boolean 是否获取焦点
autoHeight boolean 是否随文本内容增加增高
onInput ((event: InputEvent)) => any 输入回调事件
onConfirm ((event: InputEvent)) => void 键盘确认回调事件
onFocus ((event: InputEvent)) => void focus 事件
onBlur ((event: InputEvent)) => void blur 事件

注意

受微信平台限制，Textarea 在微信里无法受控。

View

View 组件

import { View } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
slot string slot 标识
hoverClassName string 按住按钮后对应的样式类
hoverStartTime number 按住后多久出现点击态，单位毫秒
hoverStayTime boolean 手指松开后点击态保留时间
role string aria role
onTap ((event: TapEvent)) => void 点击事件
onLongTap ((event: TapEvent)) => void 长按点击事件
onTouchStart ((event: TouchStartEvent)) => void 触碰开始事件
onTouchMove ((event: TouchMoveEvent)) => void 触碰移动事件
onTouchEnd ((event: TouchMoveEvent)) => void 触碰结束事件
onTouchCancel ((event: TouchCancelEvent)) => void 触碰取消事件
onLongTap ((event: TapEvent)) => void 长按点击事件

WebView

WebView 组件

import { WebView } from 'rsmax/one';

属性

名称 类型 描述
id string 节点 id
className string 节点样式类
style React.CssProperties 节点 inline style
src string 地址
onMessage (event: Event) => void 通信回调

Modal

turboPages 暂不支持使用 Modal

Modal 组件是一种简单的覆盖在其他视图之上显示内容的方式。

import { Modal, View } from 'rsmax/one';

export default function PageIndex() {
  return (
    <View>
      <Modal>
        <View> modal </View>
      </Modal>
      <View>Page Index</View>
    </View>
  );
}

属性

无。

ON THIS PAGE