Image Uploader

ImageUploaderは、画像ファイルをアップロードする際に使用されるコンポーネントです。
選択済みの画像プレビューを表示し、スロットで未選択時と選択後のUIを切り替えられます。

プロパティ

ImageUploaderは、以下のプロパティをサポートしています。

名前 デフォルト値 説明
disabled boolean false 入力を無効化します。操作できません。
isError boolean false エラー状態を視覚的に示します。バリデーション用など。
src string | null null 選択された画像のURLをバインドします。
readonly boolean false 表示専用の状態にします。操作できません。

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー&ペーストします。
パスは実際のプロジェクトの構成にあわせて更新してください。

使い方


サンプル

Default

特に操作が行われていない、デフォルトの状態です。

Filled

画像が選択され、プレビューが表示されている状態です。

Error

入力内容に問題があり、エラーが表示されている状態です。

Disabled

操作不可の状態です。

Readonly

写真の選択ができない、表示のみの状態です。

Slot

任意の見た目やレイアウトをスロットで上書きできます。