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

作者：Cpp五条 | 2024-05-11 15:45:00

踩

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>
  );
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/555323