Vuetify

ショップ

企業向け

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

最も単純な形式では、 v-progress-linearは水平のプログレスバー(進捗状況)を表示します。進捗を制御するには、 valueプロパティを使用します。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

The progress linear component can have a determinate state modified by v-model.

Using the indeterminate prop, v-progress-linear continuously animates.

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

The query state is controlled by the truthiness of indeterminate, while the query prop set to true.

colorbackground-colorpropを使用して、色と背景色を設定することもできます。

The rounded prop is an alternative style that adds a border radius to the v-progress-linear component.

The stream property works with buffer-value to convey to the user that there is some action taking place. You can use any combination of buffer-value and value to achieve your design.

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

Displays reversed progress (right to left in LTR mode and left to right in RTL).

Using the absolute prop we are able to position the v-progress-linear component at the bottom of the v-toolbar. We also use the active prop which allows us to control the visibility of the progress.

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

The v-progress-linear component will be responsive to user input when using v-model. You can use the default slot or bind a local model to display inside of the progress. If you are looking for advanced features on a linear type component, check out v-slider.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!