进度条 Vue 组件

进度条组件
进度条 Props
示例

除了预加载器以外，还有一个确定性进度条来指示活动。

进度条组件

包含以下组件：

进度条

进度条 Props

名称	类型	默认	描述
colors	对象		包含 Tailwind CSS 颜色类的对象
colors.bgIos	字符串	'bg-primary'
colors.bgMaterial	字符串	'bg-md-light-primary dark:bg-md-dark-primary'
component	字符串	'span'	组件的 HTML 元素
progress	数字	0	确定性进度（从 0 到 1）

示例

Progressbar.vue

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

    <k-block-title>Determinate Progress Bar</k-block-title>
    <k-block strong inset-material outline-ios>
      <div class="my-4">
        <k-progressbar :progress="progress" />
      </div>
      <k-segmented raised>
        <k-segmented-button
          :active="progress === 0.1"
          @click="() => (progress = 0.1)"
        >
          10%
        </k-segmented-button>
        <k-segmented-button
          :active="progress === 0.3"
          @click="() => (progress = 0.3)"
        >
          30%
        </k-segmented-button>
        <k-segmented-button
          :active="progress === 0.5"
          @click="() => (progress = 0.5)"
        >
          50%
        </k-segmented-button>
        <k-segmented-button
          :active="progress === 1.0"
          @click="() => (progress = 1.0)"
        >
          100%
        </k-segmented-button>
      </k-segmented>
    </k-block>

    <k-block-title>Colors</k-block-title>
    <k-block strong inset-material outline-ios class="space-y-4">
      <k-progressbar class="k-color-brand-red" :progress="0.25" />
      <k-progressbar class="k-color-brand-green" :progress="0.5" />
      <k-progressbar class="k-color-brand-yellow" :progress="0.75" />
      <k-progressbar class="k-color-brand-purple" :progress="1" />
    </k-block>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlock,
    kBlockTitle,
    kProgressbar,
    kSegmented,
    kSegmentedButton,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlock,
      kBlockTitle,
      kProgressbar,
      kSegmented,
      kSegmentedButton,
    },
    setup() {
      const progress = ref(0.1);
      return {
        progress,
      };
    },
  };
</script>