加载器

用于页面和区块的加载中状态 - 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

演示

import { Spinner } from "@resolid/react-ui";

export default function App() {
  return <Spinner />;
}

用法

import { Spinner } from "@resolid/react-ui";

举例

颜色

通过传递 color 属性来更改加载器的颜色。加载器支持 primary、secondary、success、warning、danger 和 neutral 这些颜色。

import { Spinner } from "@resolid/react-ui";

export default function App() {
  const colors = ["primary", "secondary", "success", "warning", "danger", "neutral"];

  return (
    <div className={"flex flex-row gap-3"}>
      {colors.map((color) => (
        <Spinner key={color} color={color} />
      ))}
    </div>
  );
}

大小

通过传递 size 属性来更改加载器的大小。加载器支持 xs、sm、md、lg 和 xl 这些大小。

import { Spinner } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <Spinner size={"xs"} />
      <Spinner size={"sm"} />
      <Spinner size={"md"} />
      <Spinner size={"lg"} />
      <Spinner size={"xl"} />
    </div>
  );
}

属性

属性	类型	默认值	必须
属性color	简介颜色	类型"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "neutral"	默认值"primary"	必须false
属性size	简介大小	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值"md"	必须false
属性label	简介标签	类型string	默认值"加载中"	必须false

建议更改此页面