智能小程序 Ray 开发——表单组件 Slider、Switch 和 Textarea 实操讲解

Slider

滑动选择器

导入

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

属性说明

属性名类型默认值必填说明支持平台
minnumber0最小值涂鸦、微信
maxnumber100最大值涂鸦、微信
stepnumber1步长,取值必须大于 0,并且可被(max - min)整除涂鸦、微信
disabledbooleanfalse是否禁用涂鸦、微信
valuenumber0当前取值涂鸦、微信
activeColorcolor#007aff已选择的颜色涂鸦、微信
backgroundColorcolorrgba(0,0,0,.2)背景条的颜色涂鸦、微信
blockSizenumber28滑块的大小,取值范围为 12 - 28涂鸦、微信
blockColorcolor#ffffff滑块的颜色涂鸦、微信
showValuebooleanfalse是否显示当前 value涂鸦、微信
onChangeeventhandle完成一次拖动后触发的事件,event.value涂鸦、微信
onChangingeventhandle拖动过程中触发的事件,event.value涂鸦、微信

示例代码

基本使用
import React from 'react';
 
import { Slider } from '@ray-js/components';
 
export default function HorizontalScroll() {
  return (
    <Slider
      step={5}
      showValue
      activeColor="orange"
      blockColor="pink"
      min={50}
      max={200}
      onChange={(e) => {
        console.log('SliderChange', e);
      }}
    />
  );
}

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

 

Switch

开关选择器。

导入

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

属性说明

属性类型默认值说明支持平台
checkedbooleanfalse当前是否选中涂鸦、微信
disabledbooleanfalse是否禁用涂鸦、微信
colorstring#007AFFSwitch 的颜色,同 css 的 color涂鸦、微信
typestringswitch可选值 switch checkbox涂鸦、微信
onChangefunc(event)checked 改变时触发 change 事件,event.detail={ value}涂鸦、微信

示例代码

基本使用
import React from 'react';
import { Switch } from '@ray-js/components';
 
export default function () {
  const handleSwitchChange = (e) => {
    console.log('switch changed', e);
  };
  return <Switch color="#ff0000" onChange={handleSwitchChange} />;
}

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

 

Textarea

文本域输入框

导入

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

属性说明

属性类型默认值说明支持平台
idstring组件的 id涂鸦、微信、RN
styleCSSProperties标签栏样式涂鸦、微信、RN
classNamestring标签栏样式名涂鸦、微信、RN
namestring输入框的名字涂鸦、微信、RN
valuestring输入框的内容涂鸦、微信、RN
placeholderstring输入框为空时占位符涂鸦、微信、RN
placeholderStylestring指定 placeholder 的样式,目前仅支持 color,fontSize 和 fontWeight涂鸦、微信、RN
disabledbooleanfalse是否禁用涂鸦、微信、RN
maxlengthnumber140最大输入长度,设置为 -1 的时候不限制最大长度涂鸦、微信、RN
autoHeightbooleanfalse是否自动增高,设置 autoHeight 时,style.height 不生效涂鸦、微信、RN
onFocus(event: any) => any;输入框聚焦时触发涂鸦、微信、RN
onBlur(event: any) => any;输入框失去焦点时触发涂鸦、微信、RN
onInput(event: TextareaEvent) => any;当键盘输入时,触发 input 事件,event = {value: value}涂鸦、微信、RN
onConfirm(event: any) => any;点击完成时, 触发 confirm 事件,event = {value: value}涂鸦、微信、RN

示例代码

基本使用
import React from 'react';
 
import { Textarea, Button } from '@ray-js/components';
 
export default function TextareaDemo() {
  const [focus, setFocus] = React.useState(false);
 
  return (
    <React.Fragment>
      <Textarea
        focus={focus}
        style={{ fontSize: 40, color: '#89aaff' }}
        value="默认文案"
        placeholder="请输入..."
        placeholderStyle={{
          color: '#999',
        }}
        onConfirm={(event) => {
          console.log('onConfirm', event);
        }}
        onBlur={(event) => {
          console.log('onBlur', event);
          setFocus(false);
        }}
        onFocus={(event) => {
          console.log('onFocus', event);
        }}
        onInput={(event) => {
          console.log('onInput', event);
        }}
      />
      <Button
        style={{ marginTop: 24 }}
        onClick={() => {
          setFocus((v) => !v);
        }}
      >
        {focus ? '丢焦' : '聚焦'}
      </Button>
    </React.Fragment>
  );
}

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

  • 34
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值