預加載器（旋轉圖示）Vue 元件

預加載器元件
預加載器屬性
範例

預加載器元件

包含以下元件

預加載器

預加載器屬性

名稱	類型	預設值	描述
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.vue

<template>
  <k-page>
    <k-navbar title="Preloader" />

    <k-block-title>Default</k-block-title>
    <k-block strong inset-material outline-ios class="text-center">
      <k-preloader />
    </k-block>

    <k-block-title>Colors</k-block-title>
    <k-block strong inset-material outline-ios class="grid grid-cols-4">
      <div class="text-center">
        <k-preloader class="k-color-brand-red" />
      </div>
      <div class="text-center">
        <k-preloader class="k-color-brand-green" />
      </div>
      <div class="text-center">
        <k-preloader class="k-color-brand-purple" />
      </div>
      <div class="text-center">
        <k-preloader class="k-color-brand-yellow" />
      </div>
    </k-block>

    <k-block-title>Sizes</k-block-title>
    <k-block
      strong
      inset-material
      outline-ios
      class="grid grid-cols-4 items-center"
    >
      <div class="text-center">
        <k-preloader size="w-4 h-4" />
      </div>
      <div class="text-center">
        <k-preloader size="w-8 h-8" />
      </div>
      <div class="text-center">
        <k-preloader size="w-12 h-12" />
      </div>
      <div class="text-center">
        <k-preloader size="w-16 h-16" />
      </div>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlock,
    kBlockTitle,
    kPreloader,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlock,
      kBlockTitle,
      kPreloader,
    },

  };
</script>