Slider
滑动选择器
导入
import { Slider } from '@ray-js/ray';
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
---|---|---|---|---|---|
min | number | 0 | 否 | 最小值 | 涂鸦、微信 |
max | number | 100 | 否 | 最大值 | 涂鸦、微信 |
step | number | 1 | 否 | 步长,取值必须大于 0,并且可被(max - min)整除 | 涂鸦、微信 |
disabled | boolean | false | 否 | 是否禁用 | 涂鸦、微信 |
value | number | 0 | 否 | 当前取值 | 涂鸦、微信 |
activeColor | color | #007aff | 否 | 已选择的颜色 | 涂鸦、微信 |
backgroundColor | color | rgba(0,0,0,.2) | 否 | 背景条的颜色 | 涂鸦、微信 |
blockSize | number | 28 | 否 | 滑块的大小,取值范围为 12 - 28 | 涂鸦、微信 |
blockColor | color | #ffffff | 否 | 滑块的颜色 | 涂鸦、微信 |
showValue | boolean | false | 否 | 是否显示当前 value | 涂鸦、微信 |
onChange | eventhandle | 否 | 完成一次拖动后触发的事件,event.value | 涂鸦、微信 | |
onChanging | eventhandle | 否 | 拖动过程中触发的事件,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';
属性说明
属性 | 类型 | 默认值 | 说明 | 支持平台 |
---|---|---|---|---|
checked | boolean | false | 当前是否选中 | 涂鸦、微信 |
disabled | boolean | false | 是否禁用 | 涂鸦、微信 |
color | string | #007AFF | Switch 的颜色,同 css 的 color | 涂鸦、微信 |
type | string | switch | 可选值 switch checkbox | 涂鸦、微信 |
onChange | func(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';
属性说明
属性 | 类型 | 默认值 | 说明 | 支持平台 |
---|---|---|---|---|
id | string | 组件的 id | 涂鸦、微信、RN | |
style | CSSProperties | 标签栏样式 | 涂鸦、微信、RN | |
className | string | 标签栏样式名 | 涂鸦、微信、RN | |
name | string | 输入框的名字 | 涂鸦、微信、RN | |
value | string | 输入框的内容 | 涂鸦、微信、RN | |
placeholder | string | 输入框为空时占位符 | 涂鸦、微信、RN | |
placeholderStyle | string | 指定 placeholder 的样式,目前仅支持 color,fontSize 和 fontWeight | 涂鸦、微信、RN | |
disabled | boolean | false | 是否禁用 | 涂鸦、微信、RN |
maxlength | number | 140 | 最大输入长度,设置为 -1 的时候不限制最大长度 | 涂鸦、微信、RN |
autoHeight | boolean | false | 是否自动增高,设置 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 小程序开发。