海尔网站建设目的,中国做网站公司排名,中英企业网站系统,淄博网站制作建设优化Button
多端按钮基础组件#xff0c;可用于进行强交互的操作。
导入
import { Button } from ray-js/ray; 属性说明
属性类型默认值必填说明支持平台sizekeyof Sizedefault否按钮的大小涂鸦、微信typekeyof Typedefault否按钮的样式类型涂鸦、微信plainbooleanfalse否按钮…Button
多端按钮基础组件可用于进行强交互的操作。
导入
import { Button } from ray-js/ray; 属性说明
属性类型默认值必填说明支持平台sizekeyof Sizedefault否按钮的大小涂鸦、微信typekeyof Typedefault否按钮的样式类型涂鸦、微信plainbooleanfalse否按钮是否镂空背景色透明涂鸦、微信disabledbooleanfalse否是否禁用涂鸦、微信loadingbooleanfalse否名称前是否带 loading 图标涂鸦、微信formTypekeyof FormType否用于 form 组件点击分别会触发 form 组件的 submit/reset 事件涂鸦、微信openTypeOpenType否微信开放能力微信hoverClassNamestringbutton-hover否指定按下去的样式类。当 hover-classnone 时没有点击态效果涂鸦、微信 hoverStop Propagation booleanfalse否指定是否阻止本节点的祖先节点出现点击态微信hoverStartTimenumber20否按住后多久出现点击态单位毫秒涂鸦、微信hoverStayTimenumber70否手指松开后点击态保留时间单位毫秒涂鸦、微信 示例代码
基本使用
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 /ButtonButton loading style{{ marginLeft: 8px, marginRight: 8px }}Loading/ButtonButton 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} typeprimary style{{ marginRight: 20 }} Plain Primary /Button Button plain{true} typewarn 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} typeprimary style{{ marginRight: 20 }}Plain Primary/ButtonButton plain{true} typewarnPlain 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 /ButtonButton sizemini 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 typeprimary Primary /ButtonButton typedefault style{{ marginLeft: 8px, marginRight: 8px }}Default/ButtonButton typewarn Warn /Button/View);
} Checkbox
多选项目。
导入
import { Checkbox } from ray-js/ray;
属性说明
属性类型默认值说明支持平台valuestringcheckbox 标识选中时触发 checkbox-group 的 change 事件并携带 checkbox 的 valueRN、微信、涂鸦、Webdisabledbooleanfalse是否禁用RN、微信、涂鸦、Webcheckedbooleanfalse当前是否选中可用来设置默认选中RN、微信、涂鸦、Webcolorstring#007AFFcheckbox 的颜色同 css 的 colorRN、微信、涂鸦、Web 示例代码
基本使用
import React from react;
import { Checkbox } from ray-js/components;export default function () {return Checkbox color#ff0000 checked /;
} 立即免费领取开发资源体验涂鸦 MiniApp 小程序开发。
