プログレスバー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>