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

时间：2024-05-10 10:23:31

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 小程序开发。 

相关文章