進度條 Svelte 組件

進度條組件
進度條屬性
範例

除了預載器之外，還有確定進度的進度條來指示活動。

進度條組件

包含以下組件

進度條

進度條屬性

名稱	類型	預設值	描述
colors	物件		具有 Tailwind CSS 色彩類別的物件
colors.bgIos	字串	'bg-primary'
colors.bgMaterial	字串	'bg-md-light-primary dark:bg-md-dark-primary'
progress	數字	0	確定進度（從 0 到 1）

範例

Progressbar.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Block,
    BlockTitle,
    Progressbar,
    Segmented,
    SegmentedButton,
  } from 'konsta/svelte';

  let progress = 0.1;
</script>

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

  <BlockTitle>Determinate Progress Bar</BlockTitle>
  <Block strong insetMaterial outlineIos>
    <div class="my-4">
      <Progressbar {progress} />
    </div>
    <Segmented raised>
      <SegmentedButton
        active={progress === 0.1}
        onClick={() => (progress = 0.1)}
      >
        10%
      </SegmentedButton>
      <SegmentedButton
        active={progress === 0.3}
        onClick={() => (progress = 0.3)}
      >
        30%
      </SegmentedButton>
      <SegmentedButton
        active={progress === 0.5}
        onClick={() => (progress = 0.5)}
      >
        50%
      </SegmentedButton>
      <SegmentedButton
        active={progress === 1.0}
        onClick={() => (progress = 1.0)}
      >
        100%
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Colors</BlockTitle>
  <Block strong insetMaterial outlineIos class="space-y-4">
    <Progressbar class="k-color-brand-red" progress={0.25} />
    <Progressbar class="k-color-brand-green" progress={0.5} />
    <Progressbar class="k-color-brand-yellow" progress={0.75} />
    <Progressbar class="k-color-brand-purple" progress={1} />
  </Block>
</Page>