⭐️

【Polaris和訳】Components/Actions/Button~SetToggle

2021/10/29に公開

Shopify

polaris

tech

この記事について

この記事は、Polaris/Components/Actionsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Button

ボタンは、主に「追加」「閉じる」「キャンセル」「保存」などのアクションに使用されます。リンクに似たプレーンなボタンは、「配送設定を見る」など、重要度が低く、あまり使われないアクションに使われます。

文章の中や直後に表示されるナビゲーション用のアクションには、link コンポーネントを使用します。

Android

例 | Examples

ベーシックボタン | Basic button

インターフェイスで最も多く使用されます。多少なりとも視覚的な重みを必要とするボタンの場合にのみ、他のスタイルを使用します。

プレーンボタン | Plain button

目立たないので、あまり重要ではない、またはよく使われないアクションに使用します。例えば、プレーンボタンはカードのアクションとして使用されます。

プレーンデストラクションボタン | Plain destruction button

加盟店のデータを削除するなど、復旧が困難なアクションに使用します。目立たないので、重要度の低い、またはあまり使われない破壊的なアクションに使用します。例えば、カードのアクションとしてプレーンボタンが使われています。

プライマリボタン | Primary button

経験上、最も重要なアクションを強調するために使用します。マーチャントを圧倒しないように、1 つのセクションや画面に複数のプライマリボタンを使用しないでください。

デストラクションボタン | Destructive button

マーチャントのデータが削除されたり、回復が困難なアクションの場合に使用します。破壊的なボタンは、アクションが完了する前に確認ダイアログを表示する必要があります。破壊ボタンは、マーチャントにストレスを与える可能性があるため、使用には注意が必要です。

無効な状態 | Disabled

現在利用できないアクションに使用します。なぜボタンが無効なのか、有効にするためには何が必要なのかを周囲のインターフェースで明確にしてください。

アクセシビリティ | Accessibility

Android のアクセシビリティについては、Material Design と開発ドキュメントを参照してください。

iOS

例 | Examples

ベーシックボタン | Basic button

インターフェイスで最も多く使用されます。多少なりとも視覚的な重みを必要とするボタンの場合にのみ、他のスタイルを使用します。

プレーンボタン | Plain button

プレーンデストラクションボタン | Plain destruction button

プライマリボタン | Primary button

デストラクションボタン | Destructive button

無効な状態 | Disabled

アクセシビリティ | Accessibility

iOS のアクセシビリティについては、Apple のヒューマンインターフェイスガイドラインや API ドキュメントを参照してください。

例 | Examples

基本ボタン | Basic button

インターフェイスで最も使用されます。

ボタンが多かれ少なかれ視覚的な重みを必要とする場合にのみ、他のスタイルを使用します。

React

<Button>Add product</Button>

HTML

<div><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add product</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

アウトラインボタン | Outline button

陰影のある背景やカラフルな背景に使用します。

アウトライン化されたボタンは、適切な視覚的重みを維持し、背景色と衝突することはありません。

React

<Button outline>Add product</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--outline" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add product</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

アウトラインモノクロームボタン | Outline monochrome button

陰影のある背景やカラフルな背景では、現在のアウトラインテーマよりも現在のテキストカラーに合わせた方が適切な場合に使用します。

React

<div style={{color: '#bf0711'}}>
  <Button monochrome outline>
    Retry
  </Button>
</div>

HTML

<div>
  <div style="color: rgb(191, 7, 17);"><button class="Polaris-Button Polaris-Button--outline Polaris-Button--monochrome" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Retry</span></span></button></div>
  <div id="PolarisPortalsContainer"></div>
</div>

無地ボタン | Plain button

目立たないので、重要度の低いアクションやよく使われないアクションに使用します。

例えば、無地のボタンはカードのアクションとして使われます。

React

<Button plain>View shipping settings</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--plain" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">View shipping settings</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

モノクローム・プレーンボタン | Plain monochrome button

重要度が低く、あまり使用されないアクションで、現在のテキストカラーに合わせたい場合に使用します。

例えば、InlineError コンポーネントの場合です。

React

<div>
  Could not retrieve data.{' '}
  <Button plain monochrome>
    Try again
  </Button>
</div>

HTML

<div>
  <div>Could not retrieve data. <button class="Polaris-Button Polaris-Button--plain Polaris-Button--monochrome" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Try again</span></span></button></div>
  <div id="PolarisPortalsContainer"></div>
</div>

無彩色ボタン | Plain destructive button

マーチャントデータを削除したり、回復が困難なアクションに使用します。

目立たないので、重要度の低い、またはあまり使用されない破壊的なアクションに使用してください。例えば、無地のボタンはカードのアクションとして使われます。

React

<Button plain destructive>
  Remove
</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--destructive Polaris-Button--plain" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Remove</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

プライマリボタン | Primary button

エクスペリエンスの中で最も重要なアクションを強調するために使用します。

マーチャントを圧倒しないように、1 つのセクションや画面に複数の主要ボタンを使用しないでください。

React

<Button primary>Save theme</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save theme</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

破壊的ボタン | Destructive button

マーチャントデータが削除されたり、回復が困難なアクションの場合に使用します。

破壊的なボタンは、アクションが完了する前に確認ダイアログを表示する必要があります。

破壊ボタンは、マーチャントにストレスを与える可能性があるため、慎重に使用してください。

React

<Button destructive>Delete theme</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--destructive" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Delete theme</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

スリムボタン | Slim button

テーブルやリストの各アイテムにアクションが設定されている場合に使用し、アイテムが必要以上に高くならないようにします。

スリムなボタンを主要なアクションに使用しないでください。

React

<Button size="slim">Save variant</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--sizeSlim" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save variant</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

ラージボタン | Large button

空の状態でのメインのコールトゥアクションや、大きなイラストで見せるコールトゥアクションに使用します。

React

<Button size="large">Create store</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--sizeLarge" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Create store</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

全角ボタン | Full-width button

狭いカラムにボタンを配置する場合（特に複数のボタンを重ねる場合）や、同じ幅のボタンのセットを作成する場合に使用します。

全角のボタンは、幅が 320px を超えることはほとんどありません。

React

<Button fullWidth>Add customer</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--fullWidth" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add customer</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

文字寄せボタン | Text-aligned button

無地や単色のボタンで、長さが長くなる可能性があり、次の行にはみ出す可能性がある場合に、整列させる必要があります。

React

<Button plain textAlign="left">
  This is a really long string of text that overflows onto the next line we need
  to put in a lot of words now you can see the alignment. It is very long but a
  customer could potentially name something this long.
</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--plain Polaris-Button--textAlignLeft" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">This is a really long string of text that overflows onto the next line we need to put in a lot of words now you can see the alignment. It is very long but a customer could potentially name something this long.</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

押すボタン | Pressed button

ボタンは、ユーザーインターフェースの他の部分のトグルとして使われることもあります。

React

function PressedButton() {
  const [isFirstButtonActive, setIsFirstButtonActive] = useState(true);

  const handleFirstButtonClick = useCallback(() => {
    if (isFirstButtonActive) return;
    setIsFirstButtonActive(true);
  }, [isFirstButtonActive]);

  const handleSecondButtonClick = useCallback(() => {
    if (!isFirstButtonActive) return;
    setIsFirstButtonActive(false);
  }, [isFirstButtonActive]);

  return (
    <ButtonGroup segmented>
      <Button pressed={isFirstButtonActive} onClick={handleFirstButtonClick}>
        First button
      </Button>
      <Button pressed={!isFirstButtonActive} onClick={handleSecondButtonClick}>
        Second button
      </Button>
    </ButtonGroup>
  );
}

HTML

<div>
  <div class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented" data-buttongroup-segmented="true">
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--pressed" type="button" aria-pressed="true"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">First button</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button" aria-pressed="false"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Second button</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

プレーン・ディスクロージャー・ボタン | Plain disclosure button

折りたたみ式のテキストのように、クリックするとより多くのコンテンツが表示されることを示すために使用します。

React

function DisclosureButtion() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Button
      plain
      disclosure={expanded ? 'up' : 'down'}
      onClick={() => {
        setExpanded(!expanded);
      }}
    >
      {expanded ? 'Show less' : 'Show more'}
    </Button>
  );
}

HTML

<div><button class="Polaris-Button Polaris-Button--plain" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Show more</span><span class="Polaris-Button__Icon">
        <div class=""><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
              <path d="m5 8 5 5 5-5H5z"></path>
            </svg></span></div>
      </span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

右寄せ開示 | Right-aligned disclosure

fullWidth + textAlign="left"で作業すると、disclosureは右端に配置されます。

React

function RightAlignedDisclosureButton() {
  const [expanded, setExpanded] = useState(false);

  return (
    <div style={{width: '200px'}}>
      <Button
        fullWidth
        textAlign="left"
        disclosure={expanded ? 'up' : 'down'}
        onClick={() => setExpanded(!expanded)}
      >
        {expanded ? 'Show less' : 'Show more'}
      </Button>
    </div>
  );
}

HTML

<div>
  <div style="width: 200px;"><button class="Polaris-Button Polaris-Button--textAlignLeft Polaris-Button--fullWidth" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Show more</span><span class="Polaris-Button__Icon">
          <div class=""><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                <path d="m5 8 5 5 5-5H5z"></path>
              </svg></span></div>
        </span></span></button></div>
  <div id="PolarisPortalsContainer"></div>
</div>

ディスクロージャー選択ボタン | Select disclosure button

<select /> HTML 要素と同様に、このコントロールから複数のオプションが利用可能であることを示すために使用します。

React

<div style={{height: '100px'}}>
  <Button disclosure="select" onClick={() => console.log('Open Popover')}>
    Select options
  </Button>
</div>

HTML

<div>
  <div style="height: 100px;"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Select options</span><span class="Polaris-Button__Icon">
          <div class=""><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                <path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path>
              </svg></span></div>
        </span></span></button></div>
  <div id="PolarisPortalsContainer"></div>
</div>

分割ボタン | Split button

プライマリ・アクションは 1 つだけだが、関連する他のアクションを取ることができる場合に使用します。

React

<div style={{height: '100px'}}>
  <Button
    primary
    connectedDisclosure={{
      accessibilityLabel: 'Other save actions',
      actions: [{content: 'Save as draft'}],
    }}
  >
    Save
  </Button>
</div>

HTML

<div>
  <div style="height: 100px;">
    <div class="Polaris-Button__ConnectedDisclosureWrapper"><button class="Polaris-Button Polaris-Button--primary Polaris-Button--connectedDisclosure" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save</span></span></button>
      <div><button type="button" class="Polaris-Button Polaris-Button--primary Polaris-Button--iconOnly Polaris-Button__ConnectedDisclosure" aria-label="Other save actions" tabindex="0" aria-controls="Polarispopover2" aria-owns="Polarispopover2" aria-expanded="false"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                <path d="m5 8 5 5 5-5H5z"></path>
              </svg></span></span></button></div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal1"></div>
  </div>
</div>

無効な状態 | Disabled state

現在利用できないアクションに使用します。

周囲のインターフェイスでは、ボタンが無効になっている理由と、有効にするために何をすべきかを明確にする必要があります。

React

<ButtonGroup>
  <Button disabled>Buy shipping label</Button>
  <Button primary disabled>
    Buy shipping label
  </Button>
  <Button destructive disabled>
    Buy shipping label
  </Button>
  <Button outline disabled>
    Buy shipping label
  </Button>
  <span style={{color: '#bf0711'}}>
    <Button outline monochrome disabled>
      Buy shipping label
    </Button>
  </span>
  <Button plain disabled>
    Buy shipping label
  </Button>
  <Button plain destructive disabled>
    Buy shipping label
  </Button>
</ButtonGroup>

HTML

<div>
  <div class="Polaris-ButtonGroup">
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--disabled" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Buy shipping label</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary Polaris-Button--disabled" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Buy shipping label</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--destructive Polaris-Button--disabled" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Buy shipping label</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--outline Polaris-Button--disabled" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Buy shipping label</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><span style="color: rgb(191, 7, 17);"><button class="Polaris-Button Polaris-Button--outline Polaris-Button--disabled Polaris-Button--monochrome" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Buy shipping label</span></span></button></span></div>
    <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain"><button class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Buy shipping label</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain"><button class="Polaris-Button Polaris-Button--destructive Polaris-Button--disabled Polaris-Button--plain" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Buy shipping label</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

ローディング状態 | Loading state

ボタンが押されて、関連するアクションが進行しているときに使用します。

React

<Button loading>Save product</Button>

HTML

<div><button class="Polaris-Button Polaris-Button--disabled Polaris-Button--loading" type="button" disabled="" aria-busy="true"><span class="Polaris-Button__Content"><span class="Polaris-Button__Spinner"><span class="Polaris-Spinner Polaris-Spinner--sizeSmall"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"></path>
          </svg></span><span role="status"><span class="Polaris-VisuallyHidden">Loading</span></span></span><span class="Polaris-Button__Text">Save product</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>

プロップス | Props

accessibilityLabel
string
スクリーンリーダー用の視覚的に隠されたテキスト

ariaControls
string
ボタンがコントロールする要素の ID

ariaDescribedBy
string
ボタンを説明する要素の ID を示す

ariaExpanded
boolean
コントロールされている要素が拡張されていることをスクリーンリーダーに知らせる

children

型の配列 | Array of type: string | string[]

string
type: string

string
type: string[]

string | string[]
ボタンの内側に表示するコンテンツ

connectedDisclosure

オブジェクト | Object

accessibilityLabel
type: string
接続された開示ボタンの視覚的に隠されたラベル。

actionsRequired

ActionListItemDescriptor[]
> accessibilityLabel > type: string
スクリーンリーダー用の視覚的に隠されたテキスト
> active > type: boolean
アクションがアクティブであるかどうか
> badge > type: {content: string, status: "new"}
> content > type: string
アクションが表示するコンテンツ
> destructive > type: boolean
破壊的なアクション
disabled > type: boolean
アクションが無効であるかどうか
> ellipsis > type: boolean
アクションの内容にエリプシスのサフィックスを追加する。
> external > type: boolean
url を新しいタブで開くようにする
> helpText > type: string
アイテムと一緒に表示する追加のヒントテキスト
> icon > type: React.SFC | "placeholder" | string
アイコンのソース
> id > type: string
アクションの一意の識別子
> image > type: string
画像のソース
> prefix > type: React.ReactNode
プレフィックスのソース
> role > type: string
アクションのロールを定義します。
> suffix > type: React.ReactNode
サフィックスのソース
> url > type: string
アクションでレンダリングされるリンク先。
> onAction > type: () => void
アクションが発生したときのコールバック
> onMouseEnter > type: () => void
マウスが入力されたときのコールバック
> onTouchStart > type: () => void
要素がタッチされたときのコールバック

type: ActionListItemDescriptor[]
アクションのリスト

disabled
type: boolean
開示が無効であるかどうか

ConnectedDisclosure
ボタンの右に接続されたディスクロージャーボタン。

ポップオーバーのアクションリストをトグルします。

destructive
boolean
危険または否定的な可能性のあるアクションを示す

disabled
boolean
ボタンを無効にし、マーチャントのインタラクションを禁止する

disclosure

型 | Type

down
type: "down"

Or

up
type: "up"

Or

select
type: "select"

Or

boolean
type: boolean

"down" | "up" | "select" | boolean
ボタンにディスクロージャーアイコンを表示します。true に設定するとデフォルトでdownになります。

download

型 | Type

string
type: string

Or

boolean
type: boolean

string | boolean
URL を開くのではなく、ダウンロードするようにブラウザに指示します。ダウンロードしたファイル名が文字列の場合は、ヒントを提供します。

external
boolean
url を新しいタブで開くようにする

fullWidth
boolean
ボタンをそのコンテナの幅まで拡大することを許可

icon

型 | Type

ReactElement
type: ReactElement

Or

IconSource

React.SFC | "placeholder" | string
> React.SFC > type: React.SFC
> placeholder > type: "placeholder"
> string > type: string

type: React.SFC | "placeholder" | string

ReactElement | React.SFC | "placeholder" | string
ボタンのコンテンツの左に表示するアイコン

id
string
ボタンの一意の識別子

loading
boolean
バックグラウンドアクションの実行中に、ボタンテキストをスピナーに置き換える

monochrome
boolean
plainとoutlineのボタンの色(テキスト、ボーダー、アイコン)を現在のテキストカラーと同じにする。また、plain ボタンに下線を追加します。

outline
boolean
デフォルトのボタンスタイルに代わり、特定の背景に適したボタンを提供する。

plain
boolean
リンクのようなボタンをレンダリングする。

pressed
boolean
ボタンを押した状態にする

primary
boolean
視覚的な重みを与え、ボタン群の中の主要なアクションを識別する。

removeUnderline
boolean
monochromeとplainが true の場合、ボタンテキストからアンダーラインを削除する（インタラクション時を含む）。

role
string
この要素の意味的な値を定義するための有効な WAI-ARIA ロール

size

型 | Type

slim
type: "slim"

Or

medium
type: "medium"

Or

large
type: "large"

"slim" | "medium" | "large"
ボタンのサイズを変更し、パディングを増やしたり減らしたりします。

submit
boolean
ボタンがフォームを送信することを許可する

textAlign

型 | Type

left
type: "left"

Or

right
type: "right"

Or

center
type: "center"

textAlign
"left" | "right" | "center"
ボタンの内側のテキスト配置を変更する

url
string
リンクの href 属性に表示されるリンク先の文字列

onBlur
() => void
フォーカスがボタンから離れたときのコールバック

onClick
() => void
ボタンがクリックされたときのコールバック

onFocus
() => void
ボタンがフォーカスされたときのコールバック

onKeyDown

関数のパラメータ | Function parameters

event Required
type: KeyboardEvent

戻り値 | Return value

void

(event: KeyboardEvent) => void
ボタンにキーダウンイベントが登録されたときのコールバック

onKeyPress

関数のパラメータ | Function parameters

event Required
type: KeyboardEvent

戻り値 | Return value

void

onKeyPress
(event: KeyboardEvent) => void
ボタンのキープレスイベントが登録されたときのコールバック

onKeyUp

関数のパラメータ | Function parameters

event Required
type: KeyboardEvent

戻り値 | Return value

void

onKeyUp
(event: KeyboardEvent) => void
ボタンのキーアップイベントが登録されたときのコールバック

onMouseEnter
() => void
マウス入力時のコールバック

onTouchStart
() => void
要素がタッチされたときのコールバック

アクセシビリティ | Accessibility

ボタンは、マーチャントに視覚的およびプログラム的に伝達される異なる状態を持つことができます。

ariaControlsプロップを使って、ボタンにaria-controls属性を追加します。この属性を使って、ボタンが管理するコンテンツのユニークな ID を指定します。
もしボタンが隣接するコンテンツを拡大または縮小するならば、ariaExpandedプロップスを使ってボタンにaria-expanded属性を追加してください。コンテンツの現在の展開(true)または折りたたみ(false)の状態を伝えるために値を設定します。
disabledプロップスを使って、ボタンの無効な状態を設定します。
これにより、マーチャントはボタンを操作することができなくなり、支援技術にはその非アクティブな状態が伝えられます。
pressedプロップスを使って、ボタンにaria-pressed属性を追加します。

ナビゲーション | Navigation

マーチャントは一般的に、ボタンがデータを送信したりアクションを起こしたり、リンクがナビゲートしたりすることを期待しています。

ボタンコンポーネントにナビゲーションが必要な場合は、url prop を使用してください。

コントロールは、この違いを伝えるために、HTML のボタンの代わりに、ボタンとしてスタイリングされたアンカーを出力します。

アクセシブルなリンクの作成についての詳細は、link コンポーネントを参照してください。

ラベリング | Labeling

accessibilityLabelプロップはボタンにaria-label属性を追加し、スクリーンリーダーのような支援技術からアクセスできるようにします。通常、このラベルテキストは、支援技術を使用するマーチャントのために、ボタンの可視テキストを置き換えます。

次の場合は、ボタンにaccessibilityLabelを使用してください。

ボタンの可視テキストでは、視覚を持たないマーチャントにボタンの目的を十分に伝えられない。
ボタンにテキストがなく、アイコンだけで目的を伝えている。

音声起動ソフトウェアを使用するマーチャントや目の見えるスクリーンリーダーのユーザーをサポートするために、aria-labelテキストにボタンの可視テキストが含まれていることを確認してください。目に見えるラベルとプログラム上のラベルの不一致は、混乱の原因となり、音声認識コマンドの動作を妨げる可能性があります。

可能であれば、accessibilityLabelを使用せずに、ボタンの目的を明確に伝える可視テキストを与えてください。追加のコンテンツが必要ない場合は、ボタンのテキストをaccessibilityLabelと重複させる必要はありません。

外部リンク | External links

ボタンコンポーネントを使用して、外部リソースへのリンクを作成する場合。

externalプロップスを使用して、リンクを新しいタブ（またはマーチャントのブラウザ設定に応じたウィンドウ）で開くようにする
ボタンにexternalアイコンを追加するには、iconプロップスを使用します。
accessibilityLabelプロップスを使って、非視覚的なスクリーンリーダーのユーザーのために、新しいタブを開くことについての警告をボタンのテキストに含めます。

アクセシブルなリンクの作成についての詳細は、link コンポーネントを参照してください。

キーボード対応 | Keyboard support

ボタンのキーボード操作には、ブラウザのデフォルトが使用されます。

tabキーでボタンにキーボードフォーカスを与える（逆方向にタブする場合はshift＋tab）。
enter/returnキーまたはspaceキーでボタンをアクティブにします。

カスタムキーイベント | Custom key events

ボタンのカスタムイベントを作成するには、onKeyDown、onKeyPress、onKeyUpの各プロップを使用します。

これらのプロップを使用すると、ボタンを使用して、ドラッグ＆ドロップ・インターフェースのような複雑でカスタムなインタラクションを作成することができます。

これらのプロップはボタンに非標準的な機能を導入するので、マーチャントがこれらの機能の使用方法を理解できるように、アクセス可能な説明を必ず含めるようにしてください。

ベストプラクティス | Best practices

ボタンは下記の条件を満たす必要があります。

明確で正確なラベルを付ける。
強くて実行可能な動詞でリードする。
決められたボタンの色を適切に使用する。例えば、元に戻すことが難しい、または不可能なアクションには、赤いボタンのみを使用する。
最も重要なアクションを優先してください。コールトゥアクションが多すぎると、マーチャントが次に何をすべきかわからなくなり、混乱を招く恐れがあります。
インターフェイス内の一貫した位置に配置する。

ボタンとリンクの違い | Buttons versus links

ボタンは、主に「追加」「閉じる」「キャンセル」「保存」などのアクションに使用されます。リンクに似たプレーンなボタンは、「配送設定を見る」など、それほど重要ではない、あるいはあまり使用されないアクションに使用されます。

リンクは、主にナビゲーションのために使用され、通常、文の中または文の直後に表示されます。

ButtonコンポーネントとLinkコンポーネントで表示される HTML には意味があります。これらのコンポーネントを意図的かつ一貫して使用することで、以下のことが実現します。

支援技術ユーザーにとってより包括的な体験となる
目の見えるユーザーにとって、よりまとまりのある視覚体験を提供する。
スケールアップしてもメンテナンスが容易な製品

コンテンツガイドライン | Content guidelines

ボタンは、ボタンのコンテンツガイドラインに従ってください。

複数のボタンを組み合わせてレイアウトするには、ボタングループコンポーネントを使用します。
文章の中や直後に表示されるナビゲーション用のアクションには、link コンポーネントを使用します。

GitHub でのソース編集

Button group

ボタングループは、関連する複数のアクションを重ねて表示したり、横一列に並べて表示したりして、配置や間隔の調整に役立ちます。

Android

例 | Examples

デフォルトのボタングループ | Default button group

複数のボタンがある場合に使用して、ボタンを均等に配置します。

セグメント化されたボタンを持つ BUtton グループ | BUtton group with segmented buttons

いくつかのボタンをテーマに沿ったセットとして他のコントロールの中で強調したい場合に使用します。

セグメント化されたボタンを持つアウトラインボタングループ | Outline button group with segmented buttons

他のコントロールの中で、テーマに沿って複数のボタンを強調したい場合に使用します。

iOS

例 | Examples

デフォルトのボタングループ | Default button group

複数のボタンがある場合に使用して、ボタンを均等に配置します。

セグメント化されたボタンを持つ BUtton グループ | BUtton group with segmented buttons

いくつかのボタンをテーマに沿ったセットとして他のコントロールの中で強調したい場合に使用します。

セグメント化されたボタンを持つアウトラインボタングループ | Outline button group with segmented buttons

他のコントロールの中で、テーマに沿って複数のボタンを強調したい場合に使用します。

ベストプラクティス | Best practices

ボタングループは以下の項目を満たす必要があります。

ボタンコンポーネントに記載されているベストプラクティスに従ったボタンのみを使用してください。
関連性のあるコールトゥアクションをグループ化する。
コールトゥアクションの数が多すぎると、マーチャントが次に何をすべきかわからなくなる可能性があることを考慮して使用してください。
小さな画面では、複数のボタンがどのように見えるか、どのように機能するかを考慮してください。
最大 6 つのボタンをグループ化して使用する場合は、ボタンにテキストのないアイコンが含まれている場合に限ります。

コンテンツガイドライン | Content guidelines

ボタングループは、ボタンのコンテンツガイドラインに従ってください。

個々のボタンの使用方法については、button コンポーネントをご参照ください。
アクションやナビゲーションをテキストの行に埋め込むには、link コンポーネントを使用します。

例 | Examples

デフォルトのボタングループ | Default button group

複数のボタンがある場合に使用すると、ボタンの間隔が均等になります。

React

<ButtonGroup>
  <Button>Cancel</Button>
  <Button primary>Save</Button>
</ButtonGroup>

HTML

<div>
  <div class="Polaris-ButtonGroup">
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

セグメント化されたボタンを持つボタングループ | Button group with segmented buttons

他のコントロールの中で、いくつかのボタンをテーマに沿ったセットとして強調したい場合に使用します。

React

<ButtonGroup segmented>
  <Button>Bold</Button>
  <Button>Italic</Button>
  <Button>Underline</Button>
</ButtonGroup>

HTML

<div>
  <div class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented" data-buttongroup-segmented="true">
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Bold</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Italic</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Underline</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

セグメントボタンを持つアウトラインボタングループ | Outline button group with segmented buttons

他のコントロールの中で、いくつかのボタンをテーマに沿ったセットとして強調したい場合に使用します。

React

<ButtonGroup segmented>
  <Button outline>Bold</Button>
  <Button outline>Italic</Button>
  <Button outline>Underline</Button>
</ButtonGroup>

HTML

<div>
  <div class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented" data-buttongroup-segmented="true">
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--outline" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Bold</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--outline" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Italic</span></span></button></div>
    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--outline" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Underline</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

プロップス | Props

children
React.ReactNode
ボタンコンポーネント

connectedTop
boolean
上部の左右の境界線の半径を取り除く

fullWidth
boolean
ボタンは全幅を占めるようにストレッチ/縮小される

segmented
boolean
ボタンをセグメント化されたグループとして結合する。

spacing

型 | Type

extraTight
type: "extraTight"

Or

tight
type: "tight"

Or

loose
type: "loose"

"extraTight" | "tight" | "loose"
ボタンのグループアイテム間のスペースを決定する

ベストプラクティス | Best practices

ボタングループは以下の項目を満たす必要があります。

ボタンコンポーネントに記載されているボタングループは、ボタンのコンテンツガイドラインに従ってください。
関連性のあるコールトゥアクションをグループ化する。
コールトゥアクションの数が多すぎると、マーチャントが次に何をすべきかわからなくなる可能性があることを考慮して使用してください。
小さな画面では、複数のボタンがどのように見えるか、どのように機能するかを考慮してください。
最大 6 つのボタンをグループ化して使用する場合は、ボタンにテキストのないアイコンが含まれている場合に限ります。

コンテンツガイドライン | Content guidelines

ボタングループは、ボタンのコンテンツガイドラインに従ってください。

個々のボタンの使用方法については、button コンポーネントをご参照ください。
アクションやナビゲーションをテキストの行に埋め込むには、link コンポーネントを使用します。

GitHub でのソース編集

Drop zone

ドロップゾーンコンポーネントは、ユーザーがファイルをページ上のエリアにドラッグ＆ドロップするか、ボタンを押してファイルをアップロードすることができるコンポーネントです。

例 | Examples

マーチャントがファイルをアップロードするために使用します。破線部分にファイルをドラッグ＆ドロップするか、「ファイルを追加」ボタンまたは破線部分の任意の場所をクリックして伝統的にアップロードすることができます。

ファイルアップロード付きドロップゾーン | Drop zone with file upload

マーチャントがファイルをアップロードするために使用します。

破線部分にファイルをドラッグ＆ドロップするか、「ファイルを追加」ボタンまたは破線部分の任意の場所をクリックして伝統的にアップロードすることができます。

React

function DropZoneExample() {
  const [files, setFiles] = useState([]);

  const handleDropZoneDrop = useCallback(
    (_dropFiles, acceptedFiles, _rejectedFiles) =>
      setFiles((files) => [...files, ...acceptedFiles]),
    [],
  );

  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

  const fileUpload = !files.length && <DropZone.FileUpload />;
  const uploadedFiles = files.length > 0 && (
    <Stack vertical>
      {files.map((file, index) => (
        <Stack alignment="center" key={index}>
          <Thumbnail
            size="small"
            alt={file.name}
            source={
              validImageTypes.includes(file.type)
                ? window.URL.createObjectURL(file)
                : NoteMinor
            }
          />
          <div>
            {file.name} <Caption>{file.size} bytes</Caption>
          </div>
        </Stack>
      ))}
    </Stack>
  );

  return (
    <DropZone onDrop={handleDropZoneDrop}>
      {uploadedFiles}
      {fileUpload}
    </DropZone>
  );
}

HTML

<div>
  <div class="Polaris-Labelled--hidden">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisDropZone2Label" for="PolarisDropZone2" class="Polaris-Label__Text">Upload files</label></div>
    </div>
    <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone2" type="file" multiple="" autocomplete="off"></span>
      <div class="Polaris-DropZone__Container">
        <div class="Polaris-DropZone-FileUpload">
          <div class="Polaris-Stack Polaris-Stack--vertical">
            <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
            <div class="Polaris-Stack__Item">
              <div class="Polaris-DropZone-FileUpload__Button">Add files</div>
            </div>
            <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop files to upload</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

ラベル付きドロップゾーン | Drop zone with a label

ラベルと組み合わせて使用することで、アクセス性が向上します。

React

<DropZone label="Theme files">
  <DropZone.FileUpload />
</DropZone>

HTML

<div>
  <div class="">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisDropZone4Label" for="PolarisDropZone4" class="Polaris-Label__Text">Theme files</label></div>
    </div>
    <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone4" type="file" multiple="" autocomplete="off"></span>
      <div class="Polaris-DropZone__Container">
        <div class="Polaris-DropZone-FileUpload">
          <div class="Polaris-Stack Polaris-Stack--vertical">
            <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
            <div class="Polaris-Stack__Item">
              <div class="Polaris-DropZone-FileUpload__Button">Add files</div>
            </div>
            <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop files to upload</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

画像ファイルをアップロードするドロップゾーン | Drop zone with image file upload

画像ファイル形式を受け付ける場合に使用します。

React

function DropZoneWithImageFileUpload() {
  const [files, setFiles] = useState([]);
  const [rejectedFiles, setRejectedFiles] = useState([]);
  const hasError = rejectedFiles.length > 0;

  const handleDrop = useCallback(
    (_droppedFiles, acceptedFiles, rejectedFiles) => {
      setFiles((files) => [...files, ...acceptedFiles]);
      setRejectedFiles(rejectedFiles);
    },
    [],
  );

  const fileUpload = !files.length && <DropZone.FileUpload />;
  const uploadedFiles = files.length > 0 && (
    <Stack vertical>
      {files.map((file, index) => (
        <Stack alignment="center" key={index}>
          <Thumbnail
            size="small"
            alt={file.name}
            source={window.URL.createObjectURL(file)}
          />
          <div>
            {file.name} <Caption>{file.size} bytes</Caption>
          </div>
        </Stack>
      ))}
    </Stack>
  );

  const errorMessage = hasError && (
    <Banner
      title="The following images couldn’t be uploaded:"
      status="critical"
    >
      <List type="bullet">
        {rejectedFiles.map((file, index) => (
          <List.Item key={index}>
            {`"${file.name}" is not supported. File type must be .gif, .jpg, .png or .svg.`}
          </List.Item>
        ))}
      </List>
    </Banner>
  );

  return (
    <Stack vertical>
      {errorMessage}
      <DropZone accept="image/*" type="image" onDrop={handleDrop}>
        {uploadedFiles}
        {fileUpload}
      </DropZone>
    </Stack>
  );
}

HTML

<div>
  <div class="Polaris-Stack Polaris-Stack--vertical">
    <div class="Polaris-Stack__Item">
      <div class="Polaris-Labelled--hidden">
        <div class="Polaris-Labelled__LabelWrapper">
          <div class="Polaris-Label"><label id="PolarisDropZone6Label" for="PolarisDropZone6" class="Polaris-Label__Text">Upload images</label></div>
        </div>
        <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone6" accept="image/*" type="file" multiple="" autocomplete="off"></span>
          <div class="Polaris-DropZone__Container">
            <div class="Polaris-DropZone-FileUpload">
              <div class="Polaris-Stack Polaris-Stack--vertical">
                <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
                <div class="Polaris-Stack__Item">
                  <div class="Polaris-DropZone-FileUpload__Button">Add images</div>
                </div>
                <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop images to upload</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

シングルファイルアップロード付きドロップゾーン | Drop zone with single file upload

1 つのファイルしか受け付けない場合に使用します。

React

function DropZoneExample() {
  const [file, setFile] = useState();

  const handleDropZoneDrop = useCallback(
    (_dropFiles, acceptedFiles, _rejectedFiles) =>
      setFile((file) => acceptedFiles[0]),
    [],
  );

  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

  const fileUpload = !file && <DropZone.FileUpload />;
  const uploadedFile = file && (
    <Stack>
      <Thumbnail
        size="small"
        alt={file.name}
        source={
          validImageTypes.includes(file.type)
            ? window.URL.createObjectURL(file)
            : NoteMinor
        }
      />
      <div>
        {file.name} <Caption>{file.size} bytes</Caption>
      </div>
    </Stack>
  );

  return (
    <DropZone allowMultiple={false} onDrop={handleDropZoneDrop}>
      {uploadedFile}
      {fileUpload}
    </DropZone>
  );
}

HTML

<div>
  <div class="Polaris-Labelled--hidden">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisDropZone8Label" for="PolarisDropZone8" class="Polaris-Label__Text">Upload file</label></div>
    </div>
    <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone8" type="file" autocomplete="off"></span>
      <div class="Polaris-DropZone__Container">
        <div class="Polaris-DropZone-FileUpload">
          <div class="Polaris-Stack Polaris-Stack--vertical">
            <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
            <div class="Polaris-Stack__Item">
              <div class="Polaris-DropZone-FileUpload__Button">Add file</div>
            </div>
            <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop file to upload</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

ドロップゾーンは、ページにドロップする機能を備えています。 | Drop zone with drop on page

ページ上の任意の場所にドロップしたファイルのアップロードを受け付けるために使用します。

React

function DropZoneWithDropOnPageExample() {
  const [files, setFiles] = useState([]);

  const handleDropZoneDrop = useCallback(
    (dropFiles, _acceptedFiles, _rejectedFiles) =>
      setFiles((files) => [...files, ...dropFiles]),
    [],
  );

  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

  const uploadedFiles = files.length > 0 && (
    <Stack vertical>
      {files.map((file, index) => (
        <Stack alignment="center" key={index}>
          <Thumbnail
            size="small"
            alt={file.name}
            source={
              validImageTypes.includes(file.type)
                ? window.URL.createObjectURL(file)
                : NoteMinor
            }
          />
          <div>
            {file.name} <Caption>{file.size} bytes</Caption>
          </div>
        </Stack>
      ))}
    </Stack>
  );

  return (
    <Page
      breadcrumbs={[{content: 'Products'}]}
      title="Jar With Lock-Lid"
      primaryAction={{content: 'Save', disabled: true}}
      secondaryActions={[
        {content: 'Duplicate'},
        {content: 'View on your store'},
      ]}
      pagination={{
        hasPrevious: true,
        hasNext: true,
      }}
    >
      <DropZone dropOnPage onDrop={handleDropZoneDrop}>
        {uploadedFiles}
      </DropZone>
    </Page>
  );
}

HTML

<div>
  <div class="Polaris-Page">
    <div class="Polaris-Page-Header Polaris-Page-Header--hasNavigation Polaris-Page-Header--hasActionMenu Polaris-Page-Header--mobileView Polaris-Page-Header--mediumTitle">
      <div class="Polaris-Page-Header__Row">
        <div class="Polaris-Page-Header__BreadcrumbWrapper">
          <nav role="navigation"><button class="Polaris-Breadcrumbs__Breadcrumb" type="button"><span class="Polaris-Breadcrumbs__ContentWrapper"><span class="Polaris-Breadcrumbs__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                      <path d="M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2z"></path>
                    </svg></span></span><span class="Polaris-VisuallyHidden">Products</span></span></button></nav>
        </div>
        <div class="Polaris-Page-Header__TitleWrapper">
          <div>
            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
              <h1 class="Polaris-Header-Title">Jar With Lock-Lid</h1>
            </div>
          </div>
        </div>
        <div class="Polaris-Page-Header__RightAlign">
          <div class="Polaris-Page-Header__Actions">
            <div class="Polaris-ActionMenu Polaris-ActionMenu--rollup">
              <div>
                <div class="Polaris-ActionMenu-RollupActions__RollupActivator"><button class="Polaris-Button Polaris-Button--outline Polaris-Button--iconOnly" aria-label="Actions" type="button" tabindex="0" aria-controls="Polarispopover2" aria-owns="Polarispopover2" aria-expanded="false"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                            <path d="M6 10a2 2 0 1 1-4.001-.001A2 2 0 0 1 6 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 12 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 18 10z"></path>
                          </svg></span></span></span></button></div>
              </div>
            </div>
            <div class="Polaris-Page-Header__PrimaryActionWrapper"><button class="Polaris-Button Polaris-Button--primary Polaris-Button--disabled" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save</span></span></button></div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Page__Content">
      <div class="Polaris-Labelled--hidden">
        <div class="Polaris-Labelled__LabelWrapper">
          <div class="Polaris-Label"><label id="PolarisDropZone10Label" for="PolarisDropZone10" class="Polaris-Label__Text">Upload files</label></div>
        </div>
        <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone10" type="file" multiple="" autocomplete="off"></span>
          <div class="Polaris-DropZone__Container"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal1"></div>
  </div>
</div>

ドロップゾーンは SVG ファイルのみ対応 | Drop zone accepts only SVG files

SVG ファイルのみを受け付ける場合に使用します。

React

function DropZoneAcceptingSVGFilesExample() {
  const [files, setFiles] = useState([]);
  const [rejectedFiles, setRejectedFiles] = useState([]);
  const hasError = rejectedFiles.length > 0;

  const handleDropZoneDrop = useCallback(
    (_dropFiles, acceptedFiles, rejectedFiles) => {
      setFiles((files) => [...files, ...acceptedFiles]);
      setRejectedFiles(rejectedFiles);
    },
    [],
  );

  const uploadedFiles = files.length > 0 && (
    <Stack vertical>
      {files.map((file, index) => (
        <Stack alignment="center" key={index}>
          <Thumbnail
            size="small"
            alt={file.name}
            source={window.URL.createObjectURL(file)}
          />
          <div>
            {file.name} <Caption>{file.size} bytes</Caption>
          </div>
        </Stack>
      ))}
    </Stack>
  );

  const errorMessage = hasError && (
    <Banner
      title="The following images couldn’t be uploaded:"
      status="critical"
    >
      <List type="bullet">
        {rejectedFiles.map((file, index) => (
          <List.Item key={index}>
            {`"${file.name}" is not supported. File type must be .svg.`}
          </List.Item>
        ))}
      </List>
    </Banner>
  );

  return (
    <Stack vertical>
      {errorMessage}
      <DropZone
        accept="image/svg+xml"
        type="image"
        errorOverlayText="File type must be .svg"
        onDrop={handleDropZoneDrop}
      >
        {uploadedFiles}
      </DropZone>
    </Stack>
  );
}

HTML

<div>
  <div class="Polaris-Stack Polaris-Stack--vertical">
    <div class="Polaris-Stack__Item">
      <div class="Polaris-Labelled--hidden">
        <div class="Polaris-Labelled__LabelWrapper">
          <div class="Polaris-Label"><label id="PolarisDropZone12Label" for="PolarisDropZone12" class="Polaris-Label__Text">Upload images</label></div>
        </div>
        <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone12" accept="image/svg+xml" type="file" multiple="" autocomplete="off"></span>
          <div class="Polaris-DropZone__Container"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

入れ子になったドロップゾーン | Nested drop zone

マーチャントがファイルをアップロードする際に、表示されているドロップゾーンよりも広い範囲で使用します。

React

function NestedDropZoneExample() {
  const [files, setFiles] = useState([]);

  const handleDrop = useCallback((dropFiles) => {
    setFiles((files) => [...files, dropFiles]);
  }, []);

  const handleDropZoneClick = useCallback(() => {}, []);

  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

  const fileUpload = !files.length && <DropZone.FileUpload />;
  const uploadedFiles = files.length > 0 && (
    <Stack vertical>
      {files.map((file, index) => (
        <Stack alignment="center" key={index}>
          <Thumbnail
            size="small"
            alt={file.name}
            source={
              validImageTypes.includes(file.type)
                ? window.URL.createObjectURL(file)
                : NoteMinor
            }
          />
          <div>
            {file.name} <Caption>{file.size} bytes</Caption>
          </div>
        </Stack>
      ))}
    </Stack>
  );

  return (
    <DropZone outline={false} onDrop={handleDrop}>
      <Card sectioned>
        <DropZone onClick={handleDropZoneClick}>
          {uploadedFiles}
          {fileUpload}
        </DropZone>
      </Card>
    </DropZone>
  );
}

HTML

<div>
  <div class="Polaris-Labelled--hidden">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisDropZone15Label" for="PolarisDropZone15" class="Polaris-Label__Text">Upload files</label></div>
    </div>
    <div class="Polaris-DropZone Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone15" type="file" multiple="" autocomplete="off"></span>
      <div class="Polaris-DropZone__Container">
        <div class="Polaris-Card">
          <div class="Polaris-Card__Section">
            <div class="Polaris-Labelled--hidden">
              <div class="Polaris-Labelled__LabelWrapper">
                <div class="Polaris-Label"><label id="PolarisDropZone16Label" for="PolarisDropZone16" class="Polaris-Label__Text">Upload files</label></div>
              </div>
              <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone16" type="file" multiple="" autocomplete="off"></span>
                <div class="Polaris-DropZone__Container">
                  <div class="Polaris-DropZone-FileUpload">
                    <div class="Polaris-Stack Polaris-Stack--vertical">
                      <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
                      <div class="Polaris-Stack__Item">
                        <div class="Polaris-DropZone-FileUpload__Button">Add files</div>
                      </div>
                      <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop files to upload</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

中型ドロップゾーン | Medium sized drop zone

スペースが限られている場合に使用します。

使いやすさを向上させるために、アウトラインのない大きなドロップゾーンの中に、中程度のサイズのドロップゾーンを入れ子にします。

入れ子になったドロップゾーンの例をご覧ください。

React

<div style={{width: 114, height: 114}}>
  <DropZone>
    <DropZone.FileUpload />
  </DropZone>
</div>

HTML

<div>
  <div style="width: 114px; height: 114px;">
    <div class="Polaris-Labelled--hidden">
      <div class="Polaris-Labelled__LabelWrapper">
        <div class="Polaris-Label"><label id="PolarisDropZone18Label" for="PolarisDropZone18" class="Polaris-Label__Text">Upload files</label></div>
      </div>
      <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeMedium" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone18" type="file" multiple="" autocomplete="off"></span>
        <div class="Polaris-DropZone__Container">
          <div class="Polaris-DropZone-FileUpload">
            <div class="Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight">
              <div class="Polaris-Stack__Item">
                <div class="Polaris-DropZone-FileUpload__ActionTitle">Add files</div>
              </div>
              <div class="Polaris-Stack__Item">
                <p class="Polaris-Caption"><span class="Polaris-TextStyle--variationSubdued">or drop files to upload</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

小サイズのドロップゾーン | Small-sized drop zone

商品詳細ページのバリエーションのサムネイルなど、スペースに制約がある場合に使用します。

使いやすさを向上させるには、小さいサイズのドロップゾーンを、アウトラインのない大きいドロップゾーンの中に入れ子にします。

入れ子になったドロップゾーンの例をご覧ください。

React

<div style={{width: 50, height: 50}}>
  <DropZone>
    <DropZone.FileUpload />
  </DropZone>
</div>

HTML

<div>
  <div style="width: 50px; height: 50px;">
    <div class="Polaris-Labelled--hidden">
      <div class="Polaris-Labelled__LabelWrapper">
        <div class="Polaris-Label"><label id="PolarisDropZone20Label" for="PolarisDropZone20" class="Polaris-Label__Text">Upload files</label></div>
      </div>
      <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeSmall" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone20" type="file" multiple="" autocomplete="off"></span>
        <div class="Polaris-DropZone__Container">
          <div class="Polaris-DropZone-FileUpload Polaris-DropZone-FileUpload__FileUploadSmallView"><img width="20" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

サイズ可変のドロップゾーン | Drop zone with variable size

ドロップゾーンの子コンテンツで高さを決定したい場合に使用します。

React

function DropZoneExample() {
  const [files, setFiles] = useState([]);

  const handleDropZoneDrop = useCallback(
    (_dropFiles, acceptedFiles, _rejectedFiles) =>
      setFiles((files) => [...files, ...acceptedFiles]),
    [],
  );

  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

  const fileUpload = !files.length && (
    <div style={{padding: '1rem'}}>
      <Stack distribution="center">
        <Stack vertical>
          <Button>Add files</Button>
          <TextStyle variation="subdued">or drop to upload</TextStyle>
        </Stack>
      </Stack>
    </div>
  );
  const uploadedFiles = files.length > 0 && (
    <Stack vertical>
      {files.map((file, index) => (
        <Stack alignment="center" key={index}>
          <Thumbnail
            size="small"
            alt={file.name}
            source={
              validImageTypes.includes(file.type)
                ? window.URL.createObjectURL(file)
                : NoteMinor
            }
          />
          <div>
            {file.name} <Caption>{file.size} bytes</Caption>
          </div>
        </Stack>
      ))}
    </Stack>
  );

  return (
    <DropZone onDrop={handleDropZoneDrop} variableHeight>
      {uploadedFiles}
      {fileUpload}
    </DropZone>
  );
}

HTML

<div>
  <div class="Polaris-Labelled--hidden">
    <div class="Polaris-Labelled__LabelWrapper">
      <div class="Polaris-Label"><label id="PolarisDropZone22Label" for="PolarisDropZone22" class="Polaris-Label__Text">Upload files</label></div>
    </div>
    <div class="Polaris-DropZone Polaris-DropZone--hasOutline" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone22" type="file" multiple="" autocomplete="off"></span>
      <div class="Polaris-DropZone__Container">
        <div style="padding: 1rem;">
          <div class="Polaris-Stack Polaris-Stack--distributionCenter">
            <div class="Polaris-Stack__Item">
              <div class="Polaris-Stack Polaris-Stack--vertical">
                <div class="Polaris-Stack__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add files</span></span></button></div>
                <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop to upload</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

カスタムファイルダイアログのトリガーを持つドロップゾーン | Drop zone with custom file dialog trigger

ページ上の他の場所でのアクションからファイルダイアログを起動するために使用します。

React

function DropZoneWithCustomFileDialogExample() {
  const [files, setFiles] = useState([]);
  const [openFileDialog, setOpenFileDialog] = useState(false);

  const handleDropZoneDrop = useCallback(
    (dropFiles, _acceptedFiles, _rejectedFiles) =>
      setFiles((files) => [...files, ...dropFiles]),
    [],
  );
  const toggleOpenFileDialog = useCallback(
    () => setOpenFileDialog((openFileDialog) => !openFileDialog),
    [],
  );

  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

  const uploadedFiles = files.length > 0 && (
    <Stack vertical>
      {files.map((file, index) => (
        <Stack alignment="center" key={index}>
          <Thumbnail
            size="small"
            alt={file.name}
            source={
              validImageTypes.indexOf(file.type) > -1
                ? window.URL.createObjectURL(file)
                : NoteMinor
            }
          />
          <div>
            {file.name} <Caption>{file.size} bytes</Caption>
          </div>
        </Stack>
      ))}
    </Stack>
  );

  return (
    <Card
      sectioned
      title="Product Images"
      actions={[
        {
          content: 'Upload Image',
          onAction: toggleOpenFileDialog,
        },
      ]}
    >
      <DropZone
        openFileDialog={openFileDialog}
        onDrop={handleDropZoneDrop}
        onFileDialogClose={toggleOpenFileDialog}
      >
        {uploadedFiles}
      </DropZone>
    </Card>
  );
}

HTML

<div>
  <div class="Polaris-Card">
    <div class="Polaris-Card__Header">
      <div class="Polaris-Stack Polaris-Stack--alignmentBaseline">
        <div class="Polaris-Stack__Item Polaris-Stack__Item--fill">
          <h2 class="Polaris-Heading">Product Images</h2>
        </div>
        <div class="Polaris-Stack__Item">
          <div class="Polaris-ButtonGroup">
            <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain"><button class="Polaris-Button Polaris-Button--plain" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Upload Image</span></span></button></div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Card__Section">
      <div class="Polaris-Labelled--hidden">
        <div class="Polaris-Labelled__LabelWrapper">
          <div class="Polaris-Label"><label id="PolarisDropZone24Label" for="PolarisDropZone24" class="Polaris-Label__Text">Upload files</label></div>
        </div>
        <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone24" type="file" multiple="" autocomplete="off"></span>
          <div class="Polaris-DropZone__Container"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

プロップス | Props

accept
string
許可されるファイルタイプ

active
boolean
アクティブな状態を設定する

allowMultiple
boolean
一度に複数のファイルをアップロードすることを許可する

children

型 | Type

string
type: string

Or

React.ReactNode
type: React.ReactNode

string | React.ReactNode
ドロップゾーンでレンダリングする子要素です。

disabled
boolean
無効な状態を設定

dropOnPage
boolean
ファイルをページ上の任意の場所にドロップすることを許可する

error
boolean
エラー状態を設定する

errorOverlayText
string
エラー状態に設定されたときにオーバーレイに表示されるテキスト

id
string
ファイル入力用の ID

label
React.ReactNode
ファイル入力用のラベル

labelAction
Action
ラベルにアクションを追加します

labelHidden
boolean
ラベルを視覚的に隠す

openFileDialog
boolean
デフォルトのファイルダイアログの状態を設定する

outline
boolean
アウトラインボーダーの表示

overlay
boolean
ホバー時にオーバーレイを表示する

overlayText
string
オーバーレイに表示されるテキスト

type

型 | Type

file
type: "file"

Or

image
type: "image"

"file" | "image"
ファイルなのか画像なのか

variableHeight
boolean
子コンテンツの高さを調整できるようにする

customValidator

関数パラメータ | Function parameters

file Required
type: File

戻り値 | Return value

void

(file: File) => boolean
カスタムバリデーションを追加します

onClick

関数パラメータ | Function parameters

event Required
type: MouseEvent

戻り値 | Return value

void

(event: MouseEvent) => void
クリックしたときにコールバックを実行します。

onDragEnter
() => void
1 つまたは複数のファイルがドラッグエリアに入ったときに発生するコールバック

onDragLeave
() => void
複数のファイルがドラッグエリアを出たときにコールバックされます。

onDragOver
() => void
1 つまたは複数のファイルがドラッグエリアを超えたときにコールバックが発生します。

onDrop

関数パラメータ | Function parameters

files Required
type: File[]

acceptedFiles Required
type: File[]

rejectedFiles Required
type: File[]

戻り値 | Return value

void

(files: File[], acceptedFiles: File[], rejectedFiles: File[]) => void
ファイルがドロップされたときに実行されるコールバック

onDropAccepted

関数パラメータ | Function parameters

acceptedFiles Required
type: File[]

戻り値 | Return value

void

(acceptedFiles: File[]) => void
ドロップされたファイルのうち、少なくともひとつが受け入れられたときに発生するコールバックです。

onDropRejected

関数パラメータ | Function parameters

rejectedFilesRequired
type: File[]

戻り値 | Return value

void

(rejectedFiles: File[]) => void
ドロップしたファイルのうち少なくとも 1 つが拒否されたときにコールバックされます。

onFileDialogClose
() => void
ファイルダイアログがキャンセルされたときに発生するコールバック

アクセシビリティー | Accessibility

ドロップゾーンコンポーネントは、ネイティブな HTML の<input type="upload">要素をベースにしています。

このコンポーネントには、視覚的な<button>と、キーボードフォーカスを受けられるドラッグ＆ドロップエリアが含まれています。

キーボードサポート | Keyboard support

キーボードを使ってファイルをアップロードするには、マーチャントはドラッグ＆ドロップ領域で操作します。

入力にキーボードフォーカスを与えるには、tabキーを使用します（逆方向にタブする場合はshift+tabを使用します）。
入力を有効にするには、enter/return または spaceキーを使用します。

ベストプラクティス | Best practices

ドロップゾーン | Drop zone

ドロップゾーンは以下の項目を満たす必要があります。

アップロードできないファイルがある場合、マーチャントに通知する。
- 可能であれば、ドラッグ時の検証エラーを利用して、ファイルサイズの制限や受け入れ可能なファイルタイプなどを検出し、説明する。
- サーバー上で発生したエラーを伝えるために、クリティカルステータスのbanner コンポーネントを使用します。
ファイルがドロップされ、アップロードが開始されたら、フィードバックを提供する。
dropOnPageを有効にすることで、ページ上の任意の場所にファイルをドロップできるようにします。
ファイルアップロードボタンを用意し、マーチャントが従来の方法でアップロードするファイルを選択できるようにする。これには、DropZone.FileUploadサブコンポーネントを使用します。

バリデーションエラー | Validation errors

ドロップゾーンコンポーネントは、デフォルトでファイルタイプを検証します。

受け付けたいファイルタイプは、acceptプロパティを編集して定義できます。このコンポーネントは、customValidator プロパティを使用してカスタムバリデーションも受け入れます。

バリデーションが失敗すると、このコンポーネントは自分自身をエラーモードに設定します。

コンテンツガイドライン | Content guidelines

クライアント側の検証エラーメッセージ | Clint-side validation error messages

クライアントサイドのバリデーションエラーは、即座にフィードバックされます。

検証エラーのメッセージは以下の項目を満たす必要があります。

明示的：マーチャントがファイルをアップロードできない理由と、ファイルを正常にアップロードするために何を変更すべきかを理解できるようにする。
文章の場合：メッセージの最初の単語のみを大文字にする。
簡潔：一目でわかるように、シンプルでわかりやすい言葉を使う。例えば、以下のようになります。

ファイルサイズは20MB以下であること

ファイルの種類は、.gif、.jpg、.png、.svgのいずれかであること

サーバー側のアップロードエラーメッセージ | Sever-side upload error messages

サーバーサイドのアップロードエラーは、ファイル送信後にフィードバックされます。

アップロードエラーのメッセージは以下の項目を満たす必要があります。

危機的状況を示すbannerを表示する。
アップロードに失敗したファイルの名前を表示する。
ファイルがアップロードできなかった理由と、正常にアップロードするためにマーチャントが変更すべき点を説明する（以下参照

ドロップゾーンファイルのアップロード | Drop zone file upload

ドロップゾーンコンポーネントでファイルアップロードを使用すると、マーチャントは従来の方法でアップロードするファイルを選択できます。

ファイルアップロードのプロパティ | File upload properties

プロップ (Prop)	型 (Type)	説明 (Description)	デフォルト (Default)
actionTitle	string	ファイルアップロード時に表示される文字列	'Add file'
actionHint	string	ファイルアップロード時に表示される文字列	'or drop files to upload'

アップロードエラーが発生したときにコンテキストを提供するには、banner コンポーネントを使用します。
ファイルのアップロード中にフィードバックを提供するには、spinner コンポーネントを使用します。

GitHub でソースを編集

Setting toggle

オンまたはオフにできる機能やオプションをマーチャントにコントロールさせるために使用します。

例 | Examples

設定ページで使用し、マーチャントが有効または無効の状態を持つ設定を切り替えられるようにします。

React

function SettingToggleExample() {
  const [active, setActive] = useState(false);

  const handleToggle = useCallback(() => setActive((active) => !active), []);

  const contentStatus = active ? 'Deactivate' : 'Activate';
  const textStatus = active ? 'activated' : 'deactivated';

  return (
    <SettingToggle
      action={{
        content: contentStatus,
        onAction: handleToggle,
      }}
      enabled={active}
    >
      This setting is <TextStyle variation="strong">{textStatus}</TextStyle>.
    </SettingToggle>
  );
}

HTML

<div>
  <div class="Polaris-Card">
    <div class="Polaris-Card__Section">
      <div class="Polaris-SettingAction">
        <div class="Polaris-SettingAction__Setting">This setting is <span class="Polaris-TextStyle--variationStrong">deactivated</span>.</div>
        <div class="Polaris-SettingAction__Action"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Activate</span></span></button></div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

プロップス | Props

action

オブジェクト | Object

accessibilityLabel
type: string
スクリーンリーダー用の視覚的に隠されたテキスト

content
type: string
アクションが表示するコンテンツ

destructive
type: boolean
破壊的なアクション

disabled
type: boolean
アクションが無効であるかどうか

external
type: boolean
url を新しいタブで開くようにする

icon

React.SFC | "placeholder" | string
> React.SFC > type: React.SFC
> placeholder > type: "placeholder"
> string > type: string

type: React.SFC | "placeholder" | string
アイコンのソース

id
type: string
アクションの一意の識別子

loading
type: boolean
スピナーを表示するかどうか

outline
type: boolean
アクションをアウトライン化されたボタンとして表示するか

url
type: string
アクションの中で表示されるリンク先。

onAction
type: () => void
アクションが発生したときのコールバック

onMouseEnter
type: () => void
マウスが入力されたときのコールバック

onTouchStart
type: () => void
要素がタッチされたときのコールバック

ComplexAction
カードヘッダーアクション

children
React.ReactNode
カードの内部コンテンツ

enabled
boolean
トグルの状態を活性化または非活性化に設定します。

アクセシビリティ | Accessibility

setting toggle コンポーネントは、HTML の<button>として実装されています。

現在のラベルは、ボタンが押されたときに何が起こるかを伝える必要があります。

ボタンのアクセシビリティについての詳細は、button コンポーネントをご覧ください。

ベストプラクティス | Best practices

設定のトグルは、以下の項目も満たす必要があります。

有効化された状態と無効化された状態で異なるボディコンテンツを含むこと。
設定が有効なのか無効なのかを明確に示し、設定の状態がマーチャントに与える影響を説明する。(「自動メッセージは無効になっています。あなたの顧客は自動配送の更新情報を受け取ることはありません」）。)
設定や機能が利用できない場合、その理由を明確に記載する。マーチャントが機能を解除するための実行可能なステップを提供する。

コンテンツガイドライン | Content guidelines

トグルの説明文 | Toggle description

トグルの説明は以下の項目を満たす必要があります。

設定が有効であるか無効であるかを明確に示す。
設定状態の意味をマーチャントに説明する（自動メッセージが解除されました。あなたのお客様は自動配送の更新情報を受け取りません）。

プライマリボタン | Primary button

設定トグルのプライマリボタンには、その設定がオンかオフかに応じて、常に"有効 (Activate)"または"解除 (Deactivate)"のいずれかを表示する必要があります。

例えば、設定トグルがオンの場合、マーチャントが設定をオフにできるようにボタンには"解除 (Deactivate)"と表示してください。設定のトグルがオフの場合、ボタンには"有効 (Activate)"と表示し、マーチャントがオンにできるようにします。

マーチャントがサードパーティのサービスやアプリを接続・切断するには、アカウント接続コンポーネントを使用します。

GitHub でソースを編集

Shopify アプリのご紹介

Discussion

ログインするとコメントできます

この記事について

Shopify アプリのご紹介

Button

例 | Examples

ベーシックボタン | Basic button

プレーンボタン | Plain button

プレーンデストラクションボタン | Plain destruction button

プライマリボタン | Primary button

デストラクションボタン | Destructive button

無効な状態 | Disabled

アクセシビリティ | Accessibility

例 | Examples

ベーシックボタン | Basic button

プレーンボタン | Plain button

プレーンデストラクションボタン | Plain destruction button

プライマリボタン | Primary button

デストラクションボタン | Destructive button

無効な状態 | Disabled

アクセシビリティ | Accessibility

例 | Examples

基本ボタン | Basic button

アウトラインボタン | Outline button

アウトラインモノクロームボタン | Outline monochrome button

無地ボタン | Plain button

モノクローム・プレーンボタン | Plain monochrome button

無彩色ボタン | Plain destructive button

プライマリボタン | Primary button

破壊的ボタン | Destructive button

スリムボタン | Slim button

ラージボタン | Large button

全角ボタン | Full-width button

文字寄せボタン | Text-aligned button

押すボタン | Pressed button

プレーン・ディスクロージャー・ボタン | Plain disclosure button

右寄せ開示 | Right-aligned disclosure

ディスクロージャー選択ボタン | Select disclosure button

分割ボタン | Split button

無効な状態 | Disabled state

ローディング状態 | Loading state

プロップス | Props

アクセシビリティ | Accessibility

ナビゲーション | Navigation

ラベリング | Labeling

外部リンク | External links

キーボード対応 | Keyboard support

カスタムキーイベント | Custom key events

ベストプラクティス | Best practices

ボタンとリンクの違い | Buttons versus links

コンテンツガイドライン | Content guidelines

関連コンポーネント | Related components

Button group

例 | Examples

デフォルトのボタングループ | Default button group

セグメント化されたボタンを持つ BUtton グループ | BUtton group with segmented buttons

セグメント化されたボタンを持つアウトラインボタングループ | Outline button group with segmented buttons

例 | Examples

デフォルトのボタングループ | Default button group

セグメント化されたボタンを持つ BUtton グループ | BUtton group with segmented buttons

セグメント化されたボタンを持つアウトラインボタングループ | Outline button group with segmented buttons

ベストプラクティス | Best practices

コンテンツガイドライン | Content guidelines

関連コンポーネント | Related components

例 | Examples

デフォルトのボタングループ | Default button group

セグメント化されたボタンを持つボタングループ | Button group with segmented buttons

セグメントボタンを持つアウトラインボタングループ | Outline button group with segmented buttons

プロップス | Props

ベストプラクティス | Best practices

コンテンツガイドライン | Content guidelines

関連コンポーネント | Related components

Drop zone

例 | Examples

ファイルアップロード付きドロップゾーン | Drop zone with file upload

ラベル付きドロップゾーン | Drop zone with a label

画像ファイルをアップロードするドロップゾーン | Drop zone with image file upload

シングルファイルアップロード付きドロップゾーン | Drop zone with single file upload

ドロップゾーンは、ページにドロップする機能を備えています。 | Drop zone with drop on page

ドロップゾーンは SVG ファイルのみ対応 | Drop zone accepts only SVG files

入れ子になったドロップゾーン | Nested drop zone

中型ドロップゾーン | Medium sized drop zone