🔥 遇见我们的新项目 t0ggles - 你终极的项目管理工具! 🔥

预加载器(旋转器)React 组件

预加载器组件

包含以下组件

  • 预加载器

预加载器属性

名称类型默认值描述
颜色对象

包含 Tailwind CSS 颜色类的对象

colors.iconIos字符串'text-primary'
colors.iconMaterial字符串'text-md-light-primary dark:text-md-dark-primary'
组件字符串'span'

组件的 HTML 元素

尺寸字符串'w-8 h-8'

Tailwind CSS 尺寸类

示例

Preloader.jsx
import React from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Block,
BlockTitle,
Preloader,
} from 'konsta/react';
export default function PreloaderPage() {
return (
<Page>
<Navbar
title="Preloader"
/>
<BlockTitle>Default</BlockTitle>
<Block strong insetMaterial outlineIos className="text-center">
<Preloader />
</Block>
<BlockTitle>Colors</BlockTitle>
<Block strong insetMaterial outlineIos className="grid grid-cols-4">
<div className="text-center">
<Preloader className="k-color-brand-red" />
</div>
<div className="text-center">
<Preloader className="k-color-brand-green" />
</div>
<div className="text-center">
<Preloader className="k-color-brand-purple" />
</div>
<div className="text-center">
<Preloader className="k-color-brand-yellow" />
</div>
</Block>
<BlockTitle>Sizes</BlockTitle>
<Block
strong
insetMaterial
outlineIos
className="grid grid-cols-4 items-center"
>
<div className="text-center">
<Preloader size="w-4 h-4" />
</div>
<div className="text-center">
<Preloader size="w-8 h-8" />
</div>
<div className="text-center">
<Preloader size="w-12 h-12" />
</div>
<div className="text-center">
<Preloader size="w-16 h-16" />
</div>
</Block>
</Page>
);
}
代码许可证 MIT.
2022 © Konsta UI 由 nolimits4web.