進捗状況

タスクの完了状況を示すインジケーターを表示します。通常はプログレスバーとして表示されます。

import React from 'react';
import * as Progress from '@radix-ui/react-progress';
import './styles.css';

const ProgressDemo = () => {
  const [progress, setProgress] = React.useState(13);

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return (
    <Progress.Root className="ProgressRoot" value={progress}>
      <Progress.Indicator
        className="ProgressIndicator"
        style={{ transform: `translateX(-${100 - progress}%)` }}
      />
    </Progress.Root>
  );
};

export default ProgressDemo;

機能

支援技術がタスクの進捗状況を読み取るためのコンテキストを提供します。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-progress

構造

すべてのパーツをインポートして組み立てます。

import * as Progress from '@radix-ui/react-progress';

export default () => (
  <Progress.Root>
    <Progress.Indicator />
  </Progress.Root>
);

アクセシビリティ

progressbar ロールの要件に準拠しています。

APIリファレンス

ルート

すべての進捗状況パーツが含まれています。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`value`	`number \| null`	デフォルト値なし
`max`	`number`	デフォルト値なし
`getValueLabel`	`function`	デフォルト値なし

データ属性	値
`[data-state]`	`"complete" \|"indeterminate" \|"loading"`
`[data-value]`	現在の値
`[data-max]`	最大値

インジケーター

進捗状況を視覚的に表示するために使用されます。また、支援技術がアクセスできるようにします。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-state]`	`"complete" \|"indeterminate" \|"loading"`
`[data-value]`	現在の値
`[data-max]`	最大値

前へポップオーバー

次へラジオグループ

GitHubでこのページを編集する