Tuya Mini Program Ray Framework Button Component

https://images.tuyacn.com/rms-static/
Admin
The Button component is a basic form component within the Tuya Mini Program Ray framework, designed...
Tokens:1,661
Snippets:9
Trust Score:7.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Ray Button Event Handling

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Provides an example of handling click events and asynchronous operations with the `ray-button` component. It shows how to bind a `@click` event handler and use the `loading` state to indicate processing during an asynchronous task.

```html
<template>
  <view class="demo-section">
    <ray-button type="primary" @click="handleClick">点击事件</ray-button>
    <ray-button type="success" @click="handleAsyncClick" :loading="loading"> {{ loading ? '处理中...' : '异步操作' }} </ray-button>
  </view>
</template>
```

```javascript
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了')
      // 可以在这里处理点击逻辑
    },
    async handleAsyncClick() {
      this.loading = true
      try {
        // 模拟异步操作
        await this.mockAsyncOperation()
        console.log('异步操作完成')
      } catch (error) {
        console.error('操作失败:', error)
      } finally {
        this.loading = false
      }
    },
    mockAsyncOperation() {
      return new Promise(resolve => {
        setTimeout(resolve, 2000)
      })
    }
  }
}
```

--------------------------------

### Ray Button Block Style

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Demonstrates the 'block' attribute for the `ray-button` component, which makes the button occupy the full width of its parent container. This includes examples of a standard block button and a block button with a plain style.

```html
<template>
  <view class="demo-section">
    <ray-button block type="primary">块级按钮</ray-button>
    <ray-button block plain type="primary">块级朴素按钮</ray-button>
  </view>
</template>
```

--------------------------------

### Ray Button Icon Usage

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Shows how to add icons to the `ray-button` component using the 'icon' attribute. Examples include adding a star icon, a plus icon, and a delete icon to primary, success, and danger buttons respectively.

```html
<template>
  <view class="demo-section">
    <ray-button icon="star-o" type="primary">收藏</ray-button>
    <ray-button icon="plus" type="success">添加</ray-button>
    <ray-button icon="delete" type="danger">删除</ray-button>
  </view>
</template>
```

--------------------------------

### Basic Button Usage in Ray Framework

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Demonstrates the fundamental usage of the `ray-button` component in a Vue.js template within the Ray framework. It shows how to render a default button and buttons with different predefined types like 'primary', 'success', 'warning', and 'danger'.

```html
<template>
  <view class="button-demo">
    <!-- 基础按钮 -->
    <ray-button>默认按钮</ray-button>
    <!-- 不同类型的按钮 -->
    <ray-button type="primary">主要按钮</ray-button>
    <ray-button type="success">成功按钮</ray-button>
    <ray-button type="warning">警告按钮</ray-button>
    <ray-button type="danger">危险按钮</ray-button>
  </view>
</template>
```

--------------------------------

### Ray Button Different Types

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Illustrates how to use the `ray-button` component with various `type` attributes to display different colored buttons: default, primary, success, warning, and danger. This showcases the component's theming capabilities.

```html
<template>
  <view class="demo-section">
    <ray-button type="default">默认按钮</ray-button>
    <ray-button type="primary">主要按钮</ray-button>
    <ray-button type="success">成功按钮</ray-button>
    <ray-button type="warning">警告按钮</ray-button>
    <ray-button type="danger">危险按钮</ray-button>
  </view>
</template>
```

--------------------------------

### Customizing Ray Button Styles with CSS Variables

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Demonstrates how to customize the appearance of the `ray-button` component using CSS variables. It shows overriding default variables for height, font size, border-radius, and colors for different button types, as well as creating custom gradient backgrounds.

```css
/* 按钮基础样式变量 */
.ray-button {
  --button-height: 44px;
  --button-font-size: 16px;
  --button-border-radius: 4px;
  --button-padding: 0 16px;
  /* 主要按钮样式 */
  --button-primary-color: #fff;
  --button-primary-background: #1890ff;
  --button-primary-border: #1890ff;
  /* 成功按钮样式 */
  --button-success-color: #fff;
  --button-success-background: #52c41a;
  --button-success-border: #52c41a;
  /* 警告按钮样式 */
  --button-warning-color: #fff;
  --button-warning-background: #faad14;
  --button-warning-border: #faad14;
  /* 危险按钮样式 */
  --button-danger-color: #fff;
  --button-danger-background: #ff4d4f;
  --button-danger-border: #ff4d4f;
}

/* 自定义按钮样式示例 */
.custom-button {
  --button-primary-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --button-border-radius: 20px;
}
```

--------------------------------

### Ray Button Different Sizes

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Shows how to control the size of the `ray-button` component using the `size` attribute. It demonstrates the 'large', 'normal', 'small', and 'mini' size options for buttons, allowing for flexible UI design.

```html
<template>
  <view class="demo-section">
    <ray-button size="large" type="primary">大型按钮</ray-button>
    <ray-button size="normal" type="primary">普通按钮</ray-button>
    <ray-button size="small" type="primary">小型按钮</ray-button>
    <ray-button size="mini" type="primary">迷你按钮</ray-button>
  </view>
</template>
```

--------------------------------

### Ray Button Plain Style

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Demonstrates the 'plain' attribute for the `ray-button` component, which creates a button with a hollow or outlined appearance. This is shown for primary, success, warning, and danger button types.

```html
<template>
  <view class="demo-section">
    <ray-button plain type="primary">朴素按钮</ray-button>
    <ray-button plain type="success">朴素按钮</ray-button>
    <ray-button plain type="warning">朴素按钮</ray-button>
    <ray-button plain type="danger">朴素按钮</ray-button>
  </view>
</template>
```

--------------------------------

### Ray Button Disabled and Loading States

Source: https://images.tuyacn.com/rms-static/0a8ca130-992a-11f0-acc5-73add60e0a28-1758706629315

Illustrates how to apply disabled and loading states to the `ray-button` component. The 'disabled' attribute prevents interaction, while the 'loading' attribute shows a visual indicator and disables clicks.

```html
<template>
  <view class="demo-section">
    <ray-button disabled type="primary">禁用状态</ray-button>
    <ray-button loading type="primary">加载中</ray-button>
    <ray-button loading loading-text="提交中..." type="primary"></ray-button>
  </view>
</template>
```
Tokens:
Raw