MDUIDocs
llms.txt のリンクをコピーllms-full.txt のリンクをコピーMarkdown 形式でこのページを表示このページの内容について ChatGPT と相談するプロジェクトの完全なドキュメントについて ChatGPT と相談する
プリセットカラー
カスタムカラー
壁紙から色を抽出
壁紙を選択してください
開発ガイド
AI 補助開発
スタイル
フレームワークとの統合
コンポーネント
Avatar アバターBadge バッジBottomAppBar ボトムアプリバーButton ボタンButtonIcon アイコンボタンCard カードCheckbox チェックボックスChip チップCircularProgress 円形プログレスCollapse 折りたたみDialog ダイアログDivider 区切り線Dropdown ドロップダウンFab フローティングアクションボタンIcon アイコンLayout レイアウトLinearProgress 線形プログレスList リストMenu メニューNavigationBar ボトムナビゲーションバーNavigationDrawer ナビゲーションドロワーNavigationRail ナビゲーションレールRadio ラジオボタンRangeSlider レンジスライダーSelect セレクトSegmentedButton セグメントボタンSlider スライダーSnackbar スナックバーSwitch スイッチTabs タブTextField テキストフィールドTooltip ツールチップTopAppBar トップアプリバー
関数
独立パッケージ

LinearProgress線形プログレス

線形プログレスは、データ読み込みやフォーム送信など、タスクの実行進捗をユーザーに表示するための横長のインジケーターです。

使用方法

コンポーネントを必要に応じてインポートします:

import 'mdui/components/linear-progress.js';

コンポーネントの TypeScript 型を必要に応じてインポートします:

import type { LinearProgress } from 'mdui/components/linear-progress.js';

使用例:

<mdui-linear-progress></mdui-linear-progress>

進捗の設定

線形プログレスはデフォルトで不確定な進捗です。value 属性を使用して現在の進捗を設定できます。デフォルトの進捗最大値は 1 です。

max 属性を使用して進捗の最大値を設定することもできます。

API

プロパティ

HTML 属性JavaScript プロパティReflectデフォルト値
maxmaxnumber1

プログレスインジケーターの最大値です。デフォルトは 1 です。

valuevaluenumber-

プログレスインジケーターの現在の値です。この値が指定されていない場合は、不確定状態になります。

CSS Parts

名前
indicator

インジケーター部分

CSS カスタムプロパティ

名前
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。

このページの目次