進度條 React 元件

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

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

進度條元件

包含以下元件

進度條

進度條屬性

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

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  BlockTitle,
  Progressbar,
  Segmented,
  SegmentedButton,
} from 'konsta/react';

export default function ProgressbarPage() {
  const [progress, setProgress] = useState(0.1);
  return (
    <Page>
      <Navbar
        title="Progressbar"
        />

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

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