🔥 新しいプロジェクトをご紹介します t0ggles - 最高のプロジェクト管理ツール! 🔥

プレローダー (スピナー) Svelte コンポーネント

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

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

  • プレローダー

プレローダーのプロップ

名前タイプデフォルト説明
colorsオブジェクト

Tailwind CSS カラー クラスのオブジェクト

colors.iconIos文字列'text-primary'
colors.iconMaterial文字列'text-md-light-primary dark:text-md-dark-primary'
size文字列'w-8 h-8'

Tailwind CSS サイズ クラス

例

Preloader.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Block,
    BlockTitle,
    Preloader,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="Preloader" />


  <BlockTitle>Default</BlockTitle>
  <Block strong insetMaterial outlineIos class="text-center">
    <Preloader />
  </Block>


  <BlockTitle>Colors</BlockTitle>
  <Block strong insetMaterial outlineIos class="grid grid-cols-4">
    <div class="text-center">
      <Preloader class="k-color-brand-red" />
    </div>
    <div class="text-center">
      <Preloader class="k-color-brand-green" />
    </div>
    <div class="text-center">
      <Preloader class="k-color-brand-purple" />
    </div>
    <div class="text-center">
      <Preloader class="k-color-brand-yellow" />
    </div>
  </Block>


  <BlockTitle>Sizes</BlockTitle>
  <Block strong insetMaterial outlineIos class="grid grid-cols-4 items-center">
    <div class="text-center">
      <Preloader size="w-4 h-4" />
    </div>
    <div class="text-center">
      <Preloader size="w-8 h-8" />
    </div>
    <div class="text-center">
      <Preloader size="w-12 h-12" />
    </div>
    <div class="text-center">
      <Preloader size="w-16 h-16" />
    </div>
  </Block>
</Page>
コードは以下でライセンスされています MIT.
© 2022 Konsta UI nolimits4web.