SDropZone `<s-drop-zone>`

ドラッグ＆ドロップやファイル選択でファイルを受け付けるアップロード領域。 SDropZone は、Shopify Polaris の <s-drop-zone> web component 向けの型付き Vue 3 wrapper です。

import { SDropZone } from 'polaris-vue-elements'

ベストプラクティス

accept でファイルの制限を示す。 ドロップゾーンが受け付けるファイル形式に明確な制限を設定します。
droprejected には役立つメッセージで対応する。 ファイルが検証に失敗したときは、このイベントをリッスンし、何が問題だったのかをマーチャントに伝えます。
処理中は disabled を検討する。 アップロード中にドロップゾーンを無効にすると、その間にマーチャントがさらにファイルを追加するのを防げます。

vue

<SDropZone label="Product images" accept="image/*" />

詳しいガイダンスについては、<s-drop-zone> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Value: (empty)

vue

<script setup>
import { ref } from 'vue'
import { SDropZone } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SDropZone label="Upload a file" accept="image/*" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

<SDropZone> の v-model は value プロパティにバインドされ、input DOM イベントを監視します。

template

<SDropZone v-model="value" />

これは次と同等です：

template

<SDropZone :value="value" @input="value = $event.target.value" />

Props

Prop	型	説明
`accept`	`string`	ドロップゾーンで受け付けるファイルの種類を表す文字列です。この文字列は一意のファイル種別指定子をカンマ区切りで並べたもので、各指定子は次のいずれかです。 - ピリオド（"."）で始まるファイル拡張子（例: .jpg, .pdf, .doc） - 拡張子を含まない有効な MIME タイプ文字列省略した場合、すべてのファイルの種類を受け付けます。
`accessibilityLabel`	`string`	アイテムの目的や内容を説明するラベルです。設定すると、支援技術を使用する購入者に読み上げられ、より多くのコンテキストを提供します。
`disabled`	`boolean`	フィールドを無効にし、あらゆる操作を受け付けないようにします。
`error`	`any`	ユーザーにエラーを示します。すぐに解決する必要がある問題を伝えるため、フィールドに特定のスタイルが適用されます。
`files`	`readonly File[]`	ユーザーが現在選択しているファイルを表す File オブジェクトの配列です。このプロパティは読み取り専用で、直接変更することはできません。選択されたファイルをクリアするには、`value` prop に空文字列または null を設定します。
`label`	`any`	フィールドのラベルとして使用するコンテンツです。
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	コンポーネントのラベルの表示状態を変更します。 - `visible`: ラベルはすべてのユーザーに表示されます。 - `exclusive`: ラベルは視覚的に非表示になりますが、アクセシビリティツリーには残ります。
`multiple`	`boolean`	複数のファイルを一度に選択またはドロップできるかどうか。
`name`	`string`	最も近い親のフォーム内で一意となる、フィールドの識別子です。
`required`	`boolean`	フィールドに値が必要かどうか。この要件はフィールドにセマンティックな意味を加えますが、エラーが自動的に表示されるわけではありません。このフィールドが空のときにエラーを表示したい場合は、`error` プロパティを使用してください。
`value`	`string`	選択されたファイルへのパスを表す文字列です。まだファイルが選択されていない場合、値は空文字列（""）です。ユーザーが複数のファイルを選択した場合、値は選択されたファイルのリストの最初のファイルを表します。値は常にファイル名の前に "C:\fakepath" が付いたもので、ファイルの実際のパスではありません。

Events

Event	型
`change`	`Event`
`droprejected`	`CustomEvent`
`input`	`Event`

これらのイベントは <SDropZone> 上で @change 形式のリスナーで受け取れます。

Slots

Slot	説明
`default`	ドロップゾーンコンテナ内に含めるコンテンツです

SDropZone <s-drop-zone> ​

ベストプラクティス ​

例 ​

v-model ​

Props ​

Events ​

Slots ​