預載器（旋轉器）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>
  );
}