プリローダー（スピナー）Reactコンポーネント

プリローダーコンポーネント
プリローダープロパティ
例

プリローダーコンポーネント

以下のコンポーネントが含まれています

プリローダー

プリローダープロパティ

名前	型	デフォルト値	説明
colors	オブジェクト		Tailwind CSSカラークラスを含むオブジェクト
colors.iconIos	文字列	'text-primary'
colors.iconMaterial	文字列	'text-md-light-primary dark:text-md-dark-primary'
component	文字列	'span'	コンポーネントのHTML要素
size	文字列	'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>
  );
}