更新记录

1.0.4（2024-08-06） 下载此版本

修改文档

1.0.3（2024-07-29） 下载此版本

修改文档

1.0.2（2024-07-23） 下载此版本

修复控制台警告

平台兼容性

r-space

r-space 间距，设置元素之间的间距。

示例

<template>
  <r-config-provider>
    <view style="padding: 20rpx">
      <r-divider content-position="left">基本使用</r-divider>
      <r-space>
        <r-button type="primary">按钮</r-button>
        <r-button type="primary">按钮</r-button>
        <r-button type="primary">按钮</r-button>
        <r-button type="primary">按钮</r-button>
      </r-space>

      <r-divider content-position="left">垂直排列</r-divider>
      <r-space direction="vertical" fill>
        <r-button type="primary" style="width: 100%" block>按钮</r-button>
        <r-button type="primary" style="width: 100%" block>按钮</r-button>
        <r-button type="primary" style="width: 100%" block>按钮</r-button>
      </r-space>

      <r-divider content-position="left">自定义间距</r-divider>
      <r-space size="20px">
        <r-button type="primary">按钮</r-button>
        <r-button type="primary">按钮</r-button>
        <r-button type="primary">按钮</r-button>
      </r-space>

      <r-divider content-position="left">对齐方式</r-divider>

      <r-radio-group
        v-model:value="align"
        direction="horizontal"
        style="margin-bottom: 16px"
      >
        <r-radio name="start">start</r-radio>
        <r-radio name="center">center</r-radio>
        <r-radio name="end">end</r-radio>
        <r-radio name="baseline">baseline</r-radio>
      </r-radio-group>

      <r-space :align="align" style="padding: 16px; background: #f3f2f5">
        <r-button type="primary">{{ align }}</r-button>
        <div style="padding: 40px 20px; background: #fff">Block</div>
      </r-space>

      <r-divider content-position="left">自动换行</r-divider>

      <r-space wrap>
        <r-button type="primary" block>按钮</r-button>
        <r-button type="primary" block>按钮</r-button>
        <r-button type="primary" block>按钮</r-button>
        <r-button type="primary" block>按钮</r-button>
        <r-button type="primary" block>按钮</r-button>
        <r-button type="primary" block>按钮</r-button>
        <r-button type="primary" block>按钮</r-button>
        <r-button type="primary" block>按钮</r-button>
      </r-space>
    </view>
  </r-config-provider>
</template>

<script setup>
import { ref } from "vue";
const align = ref("center");
</script>

API

Props

Slots

更多组件，请前往rainui