智能小程序 Ray 开发——表单组件 Button 和 Checkbox 实操讲解

Button

多端按钮基础组件，可用于进行强交互的操作。

导入

import { Button } from '@ray-js/ray';

属性说明

属性	类型	默认值	必填	说明	支持平台
size	keyof Size	default	否	按钮的大小	涂鸦、微信
type	keyof Type	default	否	按钮的样式类型	涂鸦、微信
plain	boolean	false	否	按钮是否镂空，背景色透明	涂鸦、微信
disabled	boolean	false	否	是否禁用	涂鸦、微信
loading	boolean	false	否	名称前是否带 loading 图标	涂鸦、微信
formType	keyof FormType		否	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件	涂鸦、微信
openType	OpenType		否	微信开放能力	微信
hoverClassName	string	button-hover	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	涂鸦、微信
hoverStop Propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	微信
hoverStartTime	number	20	否	按住后多久出现点击态，单位毫秒	涂鸦、微信
hoverStayTime	number	70	否	手指松开后点击态保留时间，单位毫秒	涂鸦、微信

示例代码

基本使用

import React from 'react';
import { Button, View } from '@ray-js/ray';
import styles from './index.module.less';
 
export default function () {
  return (
    <View className={styles.buttonWrapper}>
      <Button> Button </Button>
      <Button loading style={{ marginLeft: '8px', marginRight: '8px' }}>
        Loading
      </Button>
      <Button disabled> Disabled </Button>
    </View>
  );
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

镂空

import React from 'react';import { Button, View } from '@ray-js/ray';import styles from './index.module.less'; export default function () {  return (    <View className={styles.buttonWrapper}>      <Button plain={true} type="primary" style={{ marginRight: 20 }}>        Plain + Primary      </Button>      <Button plain={true} type="warn">        Plain + Warn      </Button>    </View>  );}import React from 'react';
import { Button, View } from '@ray-js/ray';
import styles from './index.module.less';
 
export default function () {
  return (
    <View className={styles.buttonWrapper}>
      <Button plain={true} type="primary" style={{ marginRight: 20 }}>
        Plain + Primary
      </Button>
      <Button plain={true} type="warn">
        Plain + Warn
      </Button>
    </View>
  );
}

尺寸

import React from 'react';
import { Button, View } from '@ray-js/ray';
import styles from './index.module.less';
 
export default function () {
  return (
    <View className={styles.buttonWrapper}>
      <Button style={{ marginRight: 24 }}> Default </Button>
      <Button size="mini"> Mini </Button>
    </View>
  );
}

类型

import React from 'react';
import { Button, View } from '@ray-js/components';
import styles from './index.module.less';
 
export default function () {
  return (
    <View className={styles.buttonWrapper}>
      <Button type="primary"> Primary </Button>
      <Button type="default" style={{ marginLeft: '8px', marginRight: '8px' }}>
        Default
      </Button>
      <Button type="warn"> Warn </Button>
    </View>
  );
}

Checkbox

多选项目。

导入

import { Checkbox } from '@ray-js/ray';

属性说明

属性	类型	默认值	说明	支持平台
value	string		checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value	RN、微信、涂鸦、Web
disabled	boolean	false	是否禁用	RN、微信、涂鸦、Web
checked	boolean	false	当前是否选中，可用来设置默认选中	RN、微信、涂鸦、Web
color	string	'#007AFF'	checkbox 的颜色，同 css 的 color	RN、微信、涂鸦、Web

示例代码

基本使用

import React from 'react';
import { Checkbox } from '@ray-js/components';
 
export default function () {
  return <Checkbox color="#ff0000" checked />;
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。