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

Button

按钮组件

import { Button } from 'remax/one';

属性

名称类型描述
idstring节点 id
classNamestring节点样式类
styleReact.CssProperties节点 inline style
disabledboolean是否禁用
hoverClassNamestring按住按钮后对应的样式类
hoverStartTimenumber按住后多久出现点击态,单位毫秒
hoverStayTimeboolean手指松开后点击态保留时间
type'submit' | 'reset'用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件
onTap((event: TapEvent)) => void点击事件

注意

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

Form

表单组件

import { Form } from 'remax/one';

属性

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

Image

图片组件

import { Image } from 'remax/one';

属性

名称类型描述
idstring节点 id
classNamestring节点样式类
styleReact.CssProperties节点 inline style
srcstring图片资源地址
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 'remax/one';

属性

名称类型描述
idstring节点 id
classNamestring节点样式类
styleReact.CssProperties节点 inline style
defaultValuestring默认值
valuestring输入框的值
namestring输入框的名称
type'text' | 'number' | 'idcard' | 'digit'输入框类型
passwordboolean是否密码类型
placeholderstring输入框占位符
placeholderStyleReact.CSSProperties占位符 inline style
disabledboolean是否禁用
maxlengthnumber最大输入长度
focusboolean是否获取焦点
onInput((event: InputEvent)) => any输入回调事件
onConfirm((event: InputEvent)) => void键盘确认回调事件
onFocus((event: InputEvent)) => voidfocus 事件
onBlur((event: InputEvent)) => voidblur 事件

注意

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

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

Label

Label 组件

import { Label } from 'remax/one';

属性

名称类型描述
idstring节点 id
classNamestring节点样式类
styleReact.CssProperties节点 inline style
htmlForstring绑定控件的 id

Text

Text 组件

import { Text } from 'remax/one';

属性

名称类型描述
idstring节点 id
classNamestring节点样式类
styleReact.CssProperties节点 inline style
selectableboolean文本是否可选
onTap((event: TapEvent)) => void点击事件

Textarea

Textarea 组件

import { Textarea } from 'remax/one';

属性

名称类型描述
idstring节点 id
classNamestring节点样式类
styleReact.CssProperties节点 inline style
defaultValuestring默认值
valuestring输入框的值
namestring输入框的名称
placeholderstring输入框占位符
placeholderStyleReact.CSSProperties占位符 inline style
disabledboolean是否禁用
maxlengthnumber最大输入长度
focusboolean是否获取焦点
autoHeightboolean是否随文本内容增加增高
onInput((event: InputEvent)) => any输入回调事件
onConfirm((event: InputEvent)) => void键盘确认回调事件
onFocus((event: InputEvent)) => voidfocus 事件
onBlur((event: InputEvent)) => voidblur 事件

注意

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

View

View 组件

import { View } from 'remax/one';

属性

名称类型描述
idstring节点 id
classNamestring节点样式类
styleReact.CssProperties节点 inline style
slotstringslot 标识
hoverClassNamestring按住按钮后对应的样式类
hoverStartTimenumber按住后多久出现点击态,单位毫秒
hoverStayTimeboolean手指松开后点击态保留时间
rolestringaria 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 'remax/one';

属性

名称类型描述
idstring节点 id
classNamestring节点样式类
styleReact.CssProperties节点 inline style
srcstring地址
onMessage(event: Event) => void通信回调

turboPages 暂不支持使用 Modal

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

import { Modal, View } from 'remax/one';
export default function PageIndex() {
return (
<View>
<Modal>
<View> modal </View>
</Modal>
<View>Page Index</View>
</View>
);
}

属性

无。