Rainui

Appearance

r-button ​

r-button按钮组件，按钮用于触发一个操作，如提交表单。

示例 ​

vue
<template>
  <r-config-provider>
    <view style="padding: 20rpx">
      <view style="padding: 20rpx 0">按钮类型</view>
      <r-space wrap>
        <r-button type="primary">主要按钮</r-button>
        <r-button type="success">成功按钮</r-button>
        <r-button type="default">默认按钮</r-button>
        <r-button type="danger">危险按钮</r-button>
        <r-button type="warning">警告按钮</r-button>
      </r-space>

      <view style="padding: 20rpx 0">朴素按钮</view>
      <r-space wrap>
        <r-button plain type="primary">朴素按钮</r-button>
        <r-button plain type="success">朴素按钮</r-button>
      </r-space>
      <view style="padding: 20rpx 0">禁用状态</view>
      <r-space wrap>
        <r-button disabled type="primary">禁用状态</r-button>
        <r-button disabled type="success">禁用状态</r-button>
      </r-space>

      <view style="padding: 20rpx 0">加载状态</view>
      <r-space wrap>
        <r-button loading type="primary" />
        <r-button loading type="primary" loading-type="spinner" />
        <r-button loading type="success" loading-text="加载中..." />
      </r-space>

      <view style="padding: 20rpx 0">按钮形状</view>
      <r-space wrap>
        <r-button square type="primary">方形按钮</r-button>
        <r-button round type="success">圆形按钮</r-button>
      </r-space>

      <view style="padding: 20rpx 0">图标按钮</view>

      <r-space wrap>
        <r-button icon="plus" type="primary" />
        <r-button icon="plus" type="primary">按钮</r-button>
      </r-space>

      <view style="padding: 20rpx 0">按钮尺寸</view>
      <r-button type="primary" size="large">大号按钮</r-button>
      <r-space wrap>
        <r-button type="primary" size="normal">普通按钮</r-button>
        <r-button type="primary" size="small">小型按钮</r-button>
        <r-button type="primary" size="mini">迷你按钮</r-button>
      </r-space>

      <view style="padding: 20rpx 0">块级元素</view>

      <r-button type="primary" block>块级元素</r-button>

      <view style="padding: 20rpx 0">自定义颜色</view>

      <r-space wrap>
        <r-button color="#7232dd">单色按钮</r-button>
        <r-button color="#7232dd" plain>单色按钮</r-button>
        <r-button color="linear-gradient(to right, #ff6034, #ee0a24)">
          渐变色按钮
        </r-button>
      </r-space>
    </view>
  </r-config-provider>
</template>

API ​

Props ​

名称说明类型默认值可选值
type类型Stringdefaultprimary success warning danger
size尺寸Stringnormallarge small mini
text按钮文字String--
color按钮颜色，支持传入 linear-gradient 渐变色String--
icon左侧图标名称或图片链接，等同于 r-icon 组件的 name 属性String--
iconPrefix图标类名前缀，等同于 r-icon 组件的 prefix 属性String--
iconPosition图标展示位置Stringtop-righttop-left bottom-left bottom-right
block是否为块级元素Booleanfalsetrue
plain是否为朴素按钮Booleanfalsetrue
square是否为方形按钮Booleanfalsetrue
round是否为圆形按钮Booleanfalsetrue
disabled是否禁用按钮Booleanfalsetrue
loading是否显示为加载状态Booleanfalsetrue
loadingText加载状态提示文字String-
loadingSize加载图标大小，默认单位为 rpxString40rpx
themeNamer-theme的主题名称Stringdefault
其他支持uniapp的button的属性

Slots ​

名称说明
default按钮内容
icon自定义图标
loading自定义加载图标

Events ​

名称说明回调参数
click点击按钮，且按钮状态不为加载或禁用时触发e
其他支持uniapp的button的事件

更多组件，请前往rainui