Button

版本要求:

@ray-js/ray≥0.5.10

描述

多端按钮基础组件，可用于进行强交互的操作。

属性

属性	类型	必填	默认值	说明
`size`	"default" \| "mini"	否	default	按钮的大小
`type`	"default" \| "primary" \| "warn"	否	default	按钮的样式类型
`plain`	boolean	否	false	按钮是否镂空，背景色透明
`disabled`	boolean	否	false	是否禁用
`loading`	boolean	否	false	名称前是否带 loading 图标
`formType`	"submit" \| "reset"	否	-	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
`hoverStartTime`	number	否	20	按住后多久出现点击态，单位毫秒
`hoverStayTime`	number	否	70	手指松开后点击态保留时间，单位毫秒

合法值

`size`

值	说明	最低版本
`default`	默认尺寸	-
`mini`	小尺寸	-

`type`

值	说明	最低版本
`default`	默认样式按钮	-
`primary`	主要操作按钮	-
`warn`	警告类操作按钮	-

`formType`

值	说明	最低版本
`submit`	提交表单，触发 Form 的 onSubmit 回调	-
`reset`	重置表单，触发 Form 的 onReset 回调	-

示例代码

基础用法

import React from 'react';
import { Button, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button>默认按钮</Button>
      <Button style={{ marginTop: '10px' }}>普通按钮</Button>
    </View>
  );
}

按钮类型

import React from 'react';
import { Button, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button type="primary">主要按钮</Button>
      <Button type="default" style={{ marginTop: '10px' }}>
        默认按钮
      </Button>
      <Button type="warn" style={{ marginTop: '10px' }}>
        警告按钮
      </Button>
      <Button disabled> Disabled </Button>
    </View>
  );
}

按钮尺寸

import React from 'react';
import { Button, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button size="default">默认尺寸</Button>
      <Button size="mini" style={{ marginTop: '10px' }}>
        迷你尺寸
      </Button>
    </View>
  );
}

按钮状态

import React from 'react';
import { Button, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button loading>加载中</Button>
      <Button disabled style={{ marginTop: '10px' }}>
        禁用状态
      </Button>
      <Button plain type="primary" style={{ marginTop: '10px' }}>
        镂空按钮
      </Button>
    </View>
  );
}

Hover 点击态与表单

import React from 'react';
import { Button, Form, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button
        hoverStartTime={50}
        hoverStayTime={200}
      >
        自定义 Hover 效果
      </Button>
      <Form
        onSubmit={(e) => console.log('提交:', e.detail.value)}
        onReset={() => console.log('重置')}
      >
        <Button formType="submit" type="primary" style={{ marginTop: '10px' }}>
          提交表单
        </Button>
        <Button formType="reset" style={{ marginTop: '10px' }}>
          重置表单
        </Button>
      </Form>
    </View>
  );
}