データとフィードバック@neumorphism-ui/progress

Progress

Base UI Progress の progressbar semantics を使用します。有効な max と value を正規化し、value が未指定または無効な場合は indeterminate 状態を公開します。

@neumorphism-ui/progress

Registry JSON

プレビュー

Registry ビルド82%

テーマトークン12 / 16

データを待機中—

インストール

npx shadcn@latest add @neumorphism-ui/progress

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

import { Progress } from "@/components/ui/progress"

Example

<div className="grid gap-2">
  <div id="upload-label" className="flex justify-between">
    <span>ファイルのアップロード</span>
    <span>72%</span>
  </div>
  <Progress value={72} max={100} aria-labelledby="upload-label" />
</div>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`Progress`	`value`	`number \| null`	`null`	0 から max の間に正規化される現在の進捗値です。
`Progress`	`max`	`number`	`100`	0より大きい全体範囲です。無効な値の場合は100を使用します。
`Progress`	`aria-label / aria-labelledby`	`string`	`—`	進行中のタスクを表すアクセシブルな名前です。
`Progress`	`getValueLabel`	`(value, max) => string`	`—`	数値以外の説明が必要な場合に aria-valuetext を生成します。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ