# Progress linear

v-progress-linear コンポーネントは、データをユーザーに視覚的に伝えるために使用されます。 また、読み込みや処理などの不確定量を表すこともできます。

# 使い方

最もシンプルな形式では、 v-progress-linear は水平方向のプログレスバーを表示します。 value プロパティを使用して進行状況を制御します。

# API

# サンプル

# Props

# Buffer value

バッファ状態は2つの値を同時に表します。 プライマリ値は v-modelで制御されますが、バッファは buffer-value prop で制御されます。

# Colors

colorbackground-color プロパティを使用して色と背景色を設定することもできます。

# Indeterminate

indeterminate プロパティを使用して、 v-progress-linear を連続的にアニメーションします。

# Reversed

進行状況を逆に表示します(右から左、RTLでは左から右)。

# Rounded

rounded prop は、 v-progress-linear コンポーネントにborder radius を追加する代替スタイルです。

# Stream

stream propはbuffer-valueと連携して、何らかのアクションが起こっていることをユーザーに伝えます。 buffer-valuevalueを自由に組み合わせて、あなたのデザインを実現することができます。

# Striped

v-progress-linearの値部分をストライプ模様の縞々背景にします。

# Query

query propがtrueに設定されているとき、query propの値はindeterminateの真偽によって制御されます。

# Slots

# デフォルト

v-progress-linearコンポーネントは、v-modelを使うとユーザー入力に反応するようになります。 デフォルトのスロットを使ったりローカルのモデルをバインドしたりすることで、プログレスバーの中に表示することができます。 線形タイプのコンポーネントで高度な機能をお探しなら、v-sliderをチェックしてみてください。

# その他

# Determinate

progress linear コンポーネントは、 v-model によってdeterminate 状態を変更することができます。

# ファイルローダー

v-progress-linear コンポーネントは、応答を待っていることをユーザーに伝えるのに適しています。

# ツールバーのローダー

absolute prop を使用すると、v-progress-linear コンポーネントを v-toolbarの下部に配置することができます。 また、プログレスの表示/非表示を制御できるactive propも使っています。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:07/05/2022, 9:08:15 PM