加载器 (Spinner) Vue 组件

加载器组件
加载器 Props
示例

加载器组件

包括以下组件

加载器

加载器 Props

名称	类型	默认值	描述
colors	object		包含 Tailwind CSS 颜色类的对象
colors.iconIos	string	'text-primary'
colors.iconMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'span'	组件的 HTML 元素
size	string	'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>