更新记录

1.0.8（2024-08-07） 下载此版本

修改文档

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

修改文档

1.0.6（2024-07-30） 下载此版本

适配r-theme

平台兼容性

uni-app

uni-app x

r-loading

r-loading 是一个加载图标，用于表示加载中的过渡状态。

示例

<template>
  <r-config-provider :themeName="themeName">
    <page-header title="加载"></page-header>
    <view style="padding: 20px">
      <r-divider content-position="left">基础使用</r-divider>
      <r-loading type="circular"></r-loading>
      <r-loading type="spinner"></r-loading>

      <r-divider content-position="left">自定义颜色</r-divider>
      <r-loading type="circular" color="red">加载中。。。</r-loading>
      <r-divider content-position="left">垂直排列 </r-divider>
      <r-loading type="spinner" color="red" vertical>加载中。。。</r-loading>

      <r-divider content-position="left">自定义图标</r-divider>
      <r-loading type="circular">
        <template #icon>
          <r-icon
            prefix="iconfont"
            name="icon-left-circle"
            hoverClass="animate__fadeIn"
          />
        </template>
      </r-loading>
      <r-divider content-position="left">自定义大小</r-divider>
      <r-loading type="circular" size="24rpx"></r-loading>
      <r-loading type="spinner" size="24rpx"></r-loading>
    </view>
  </r-config-provider>
</template>
<script setup>
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
</script>

API

Props

Slots

更多组件，请前往rainui