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