ショップ

企業向け

v-file-inputコンポーネントは、ファイルを選択するためのクリーンなインターフェースを提供する特殊な入力であり、詳細な選択情報とアップロードの進行状況を表示します。これは、標準のファイル入力を直接置き換えるものです。

v-file-inputコンポーネントはv-text-field を拡張するコンテナです。

Options

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

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

The v-file-input can contain multiple files at the same time when using the multiple prop.

v-file-input component can accept only specific media formats/file types if you want. For more information, checkout the documentation on the accept attribute.

A selected file can be displayed as a chip. When using the chips and multiple props, each chip will be displayed (as opposed to the file count).

The displayed size of the selected file(s) can be configured with the show-size property. Display sizes can be either 1024 (the default used when providing true) or 1000.

When using the show-size property along with counter, the total number of files and size will be displayed under the input.

The v-file-input has a default prepended icon that can be set on the component or adjusted globally. More information on changing global components can be found on the customizing icons page.

You can reduces the file input height with dense prop.

Using the selection slot, you can customize the appearance of your input selections. This is typically done with chips, however any component or markup can be used.

Similar to other inputs, you can use the rules prop to can create your own custom validation parameters.

The flexibility of the selection slot allows you accomodate complex use-cases. In this example we show the first 2 selections as chips while adding a number indicator for the remaining amount.

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

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