⭐️

【Polaris和訳】Components/Lists and tables⑧

2021/11/06に公開約72,000字

この記事について

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

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

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Simple resource item

基本的なリソースアイテムで、使用時に詳細が記入されています。

Image from Gyazo

React
function ResourceItemExample() {
  const [selectedItems, setSelectedItems] = useState([])

  return (
    <Card>
      <ResourceList
        resourceName={{ singular: "blog post", plural: "blog posts" }}
        items={[
          {
            id: 6,
            url: "posts/6",
            title: "How To Get Value From Wireframes",
            author: "Jonathan Mangrove",
          },
        ]}
        selectedItems={selectedItems}
        onSelectionChange={setSelectedItems}
        selectable
        renderItem={(item) => {
          const { id, url, title, author } = item
          const authorMarkup = author ? <div>by {author}</div> : null
          return (
            <ResourceItem
              id={id}
              url={url}
              accessibilityLabel={`View details for ${title}`}
              name={title}
            >
              <h3>
                <TextStyle variation="strong">{title}</TextStyle>
              </h3>
              {authorMarkup}
            </ResourceItem>
          )
        }}
      />
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-ResourceList__ResourceListWrapper">
      <div class="Polaris-ResourceList__HeaderOuterWrapper">
        <div>
          <div></div>
          <div>
            <div
              class="Polaris-ResourceList__HeaderWrapper Polaris-ResourceList__HeaderWrapper--hasSelect"
            >
              <div class="Polaris-ResourceList__HeaderContentWrapper">
                <div class="Polaris-ResourceList__HeaderTitleWrapper">Showing 1 blog post</div>
                <div class="Polaris-ResourceList__CheckableButtonWrapper">
                  <div
                    class="Polaris-CheckableButton Polaris-CheckableButton__CheckableButton--plain"
                  >
                    <div class="Polaris-CheckableButton__Checkbox">
                      <label
                        class="Polaris-Choice Polaris-Choice--labelHidden"
                        for="PolarisCheckbox1"
                        ><span class="Polaris-Choice__Control"
                          ><span class="Polaris-Checkbox"
                            ><input
                              id="PolarisCheckbox1"
                              type="checkbox"
                              class="Polaris-Checkbox__Input"
                              aria-invalid="false"
                              role="checkbox"
                              aria-checked="false"
                              value="" /><span class="Polaris-Checkbox__Backdrop"></span
                            ><span class="Polaris-Checkbox__Icon"
                              ><span class="Polaris-Icon"
                                ><span class="Polaris-VisuallyHidden"></span
                                ><svg
                                  viewBox="0 0 20 20"
                                  class="Polaris-Icon__Svg"
                                  focusable="false"
                                  aria-hidden="true"
                                >
                                  <path
                                    d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                  ></path></svg></span></span></span></span
                        ><span class="Polaris-Choice__Label">Select blog post</span></label
                      >
                    </div>
                    <span class="Polaris-CheckableButton__Label">Showing 1 blog post</span>
                  </div>
                </div>
                <div class="Polaris-ResourceList__SelectButtonWrapper">
                  <button class="Polaris-Button" type="button">
                    <span class="Polaris-Button__Content"
                      ><span class="Polaris-Button__Icon"
                        ><span class="Polaris-Icon"
                          ><span class="Polaris-VisuallyHidden"></span
                          ><svg
                            viewBox="0 0 20 20"
                            class="Polaris-Icon__Svg"
                            focusable="false"
                            aria-hidden="true"
                          >
                            <path
                              fill-rule="evenodd"
                              d="M4.5 3A1.5 1.5 0 0 0 3 4.5v11A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 15.5 3h-11zm9.207 5.707a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
                            ></path></svg></span></span
                      ><span class="Polaris-Button__Text">Select</span></span
                    >
                  </button>
                </div>
              </div>
              <div class="Polaris-ResourceList__BulkActionsWrapper">
                <div>
                  <div
                    class="Polaris-BulkActions__Group Polaris-BulkActions__Group--largeScreen Polaris-BulkActions__Group--exited"
                  >
                    <div class="Polaris-BulkActions__ButtonGroupWrapper">
                      <div class="Polaris-CheckableButton">
                        <div class="Polaris-CheckableButton__Checkbox">
                          <label
                            class="Polaris-Choice Polaris-Choice--labelHidden"
                            for="PolarisCheckbox3"
                            ><span class="Polaris-Choice__Control"
                              ><span class="Polaris-Checkbox"
                                ><input
                                  id="PolarisCheckbox3"
                                  type="checkbox"
                                  class="Polaris-Checkbox__Input"
                                  aria-invalid="false"
                                  role="checkbox"
                                  aria-checked="false"
                                  value="" /><span class="Polaris-Checkbox__Backdrop"></span
                                ><span class="Polaris-Checkbox__Icon"
                                  ><span class="Polaris-Icon"
                                    ><span class="Polaris-VisuallyHidden"></span
                                    ><svg
                                      viewBox="0 0 20 20"
                                      class="Polaris-Icon__Svg"
                                      focusable="false"
                                      aria-hidden="true"
                                    >
                                      <path
                                        d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                      ></path></svg></span></span></span></span
                            ><span class="Polaris-Choice__Label">Select blog post</span></label
                          >
                        </div>
                        <span class="Polaris-CheckableButton__Label">0 selected</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="Polaris-ResourceList" aria-live="polite">
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div class="Polaris-ResourceItem Polaris-ResourceItem--selectable" data-href="posts/6">
              <a
                aria-describedby="6"
                aria-label="View details for How To Get Value From Wireframes"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay2"
                href="posts/6"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="6">
                <div class="Polaris-ResourceItem__Owned Polaris-ResourceItem__OwnedNoMedia">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox2"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox2"
                                type="checkbox"
                                class="Polaris-Checkbox__Input"
                                aria-invalid="false"
                                role="checkbox"
                                aria-checked="false"
                                value="" /><span class="Polaris-Checkbox__Backdrop"></span
                              ><span class="Polaris-Checkbox__Icon"
                                ><span class="Polaris-Icon"
                                  ><span class="Polaris-VisuallyHidden"></span
                                  ><svg
                                    viewBox="0 0 20 20"
                                    class="Polaris-Icon__Svg"
                                    focusable="false"
                                    aria-hidden="true"
                                  >
                                    <path
                                      d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                    ></path></svg></span></span></span></span
                          ><span class="Polaris-Choice__Label"
                            >How To Get Value From Wireframes</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3>
                    <span class="Polaris-TextStyle--variationStrong"
                      >How To Get Value From Wireframes</span
                    >
                  </h3>
                  <div>by Jonathan Mangrove</div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Item with media

メディア要素には、アバターやサムネイルなどの小サイズの画像を入れることができます。

Image from Gyazo

React
<Card>
  <ResourceList
    resourceName={{ singular: "customer", plural: "customers" }}
    items={[
      {
        id: 145,
        url: "customers/145",
        avatarSource:
          "https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746",
        name: "Yi So-Yeon",
        location: "Gwangju, South Korea",
      },
    ]}
    renderItem={(item) => {
      const { id, url, avatarSource, name, location } = item

      return (
        <ResourceItem
          id={id}
          url={url}
          media={<Avatar customer size="medium" name={name} source={avatarSource} />}
          accessibilityLabel={`View details for ${name}`}
          name={name}
        >
          <h3>
            <TextStyle variation="strong">{name}</TextStyle>
          </h3>
          <div>{location}</div>
        </ResourceItem>
      )
    }}
  />
</Card>
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-ResourceList__ResourceListWrapper">
      <ul class="Polaris-ResourceList" aria-live="polite">
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div class="Polaris-ResourceItem" data-href="customers/145">
              <a
                aria-describedby="145"
                aria-label="View details for Yi So-Yeon"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay4"
                href="customers/145"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="145">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Yi So-Yeon"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--hasImage"
                      ><img
                        src="https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746"
                        class="Polaris-Avatar__Image"
                        alt=""
                        role="presentation"
                    /></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Yi So-Yeon</span></h3>
                  <div>Gwangju, South Korea</div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Item with shortcut actions

ショートカットアクションは、リソースの詳細ページから人気のあるアクションを表示し、簡単にアクセスできるようにします。ショートカットアクションは、リストのすべてのアイテムで利用できます。

Image from Gyazo

React
<Card>
  <ResourceList
    resourceName={{ singular: "customer", plural: "customers" }}
    items={[
      {
        id: 145,
        url: "customers/145",
        avatarSource:
          "https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746",
        name: "Yi So-Yeon",
        location: "Gwangju, South Korea",
        latestOrderUrl: "orders/1456",
      },
    ]}
    renderItem={(item) => {
      const { id, url, avatarSource, name, location, latestOrderUrl } = item
      const shortcutActions = latestOrderUrl
        ? [{ content: "View latest order", url: latestOrderUrl }]
        : null

      return (
        <ResourceItem
          id={id}
          url={url}
          media={<Avatar customer size="medium" name={name} source={avatarSource} />}
          shortcutActions={shortcutActions}
          accessibilityLabel={`View details for ${name}`}
          name={name}
        >
          <h3>
            <TextStyle variation="strong">{name}</TextStyle>
          </h3>
          <div>{location}</div>
        </ResourceItem>
      )
    }}
  />
</Card>
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-ResourceList__ResourceListWrapper">
      <ul class="Polaris-ResourceList" aria-live="polite">
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div class="Polaris-ResourceItem" data-href="customers/145">
              <a
                aria-describedby="145"
                aria-label="View details for Yi So-Yeon"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay6"
                href="customers/145"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="145">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Yi So-Yeon"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--hasImage"
                      ><img
                        src="https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746"
                        class="Polaris-Avatar__Image"
                        alt=""
                        role="presentation"
                    /></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Yi So-Yeon</span></h3>
                  <div>Gwangju, South Korea</div>
                </div>
                <div class="Polaris-ResourceItem__Actions">
                  <div
                    class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented"
                    data-buttongroup-segmented="true"
                  >
                    <div class="Polaris-ButtonGroup__Item">
                      <a
                        class="Polaris-Button Polaris-Button--sizeSlim"
                        href="orders/1456"
                        data-polaris-unstyled="true"
                        ><span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">View latest order</span></span
                        ></a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Item with vercel alignment

アイテムのコンテンツの垂直方向の配置を調整します。

React
<Card>
  <ResourceList
    resourceName={{ singular: "customer", plural: "customers" }}
    items={[
      {
        id: 145,
        url: "customers/145",
        avatarSource:
          "https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746",
        name: "Yi So-Yeon",
        location: "Gwangju, South Korea",
        lastOrder: "Emerald Silk Gown",
      },
    ]}
    renderItem={(item) => {
      const { id, url, avatarSource, name, location, lastOrder } = item
      return (
        <ResourceItem
          verticalAlignment="center"
          id={id}
          url={url}
          media={<Avatar customer size="medium" name={name} source={avatarSource} />}
          accessibilityLabel={`View details for ${name}`}
          name={name}
        >
          <h3>
            <TextStyle variation="strong">{name}</TextStyle>
          </h3>
          <div>{location}</div>
          <div>{lastOrder}</div>
        </ResourceItem>
      )
    }}
  />
</Card>
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-ResourceList__ResourceListWrapper">
      <ul class="Polaris-ResourceList" aria-live="polite">
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div class="Polaris-ResourceItem" data-href="customers/145">
              <a
                aria-describedby="145"
                aria-label="View details for Yi So-Yeon"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay8"
                href="customers/145"
                data-polaris-unstyled="true"
              ></a>
              <div
                class="Polaris-ResourceItem__Container Polaris-ResourceItem--alignmentCenter"
                id="145"
              >
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Yi So-Yeon"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--hasImage"
                      ><img
                        src="https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746"
                        class="Polaris-Avatar__Image"
                        alt=""
                        role="presentation"
                    /></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Yi So-Yeon</span></h3>
                  <div>Gwangju, South Korea</div>
                  <div>Emerald Silk Gown</div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

アクセシビリティ

リソースアイテムは、そのアイテムの全ページ表現へのリンクとして機能します。それぞれのアイテムは固有の name prop を持つべきです。各 ResourceItem に対して、accessibilityLabel prop は、リンクにユニークな aria-label 値を与えるために使われるべきである。aria-label 値は、name 値を使ってリンクの目的を伝えるべきです。スクリーン・リーダーやその他の音声合成ツールを使用しているマーチャントは、各リンクを他のリンクと簡単に区別できるはずです。

リソースアイテムにカスタムコンテンツを追加する際には、すべてのテキストがすべてのユーザーに利用可能であること、また、すべてのカスタムコントロールにアクセス可能な固有の名前を付け、コントロールがアクティブになったときに何が起こるかをユーザーが理解できるようにすることを確認してください。

キーボード

リンクはデフォルトでは、enter/return キーで起動できます。

カスタムコントロールをリソースアイテムに追加する場合は、そのコントロールが以下のようになっていることを確認してください。

  • キーボードで使用可能であること
  • 論理的な順序でキーボードフォーカスを受ける
  • フォーカスインジケータが表示されること

必須コンポーネント

リソースアイテムコンポーネントは、リソースリストコンポーネントにラップされている必要があります。

ベストプラクティス

リソースアイテムは

  • 表示されるコンテキストの種類に合わせて作成する。

  • クリックされたときにアクションを実行する。アクションは、リソースの詳細ページに移動するか、アイテムの詳細を提供します。
    リソースアイテムは、オプションで

  • リソースの詳細ページから頻繁に行うアクションに素早くアクセスするためのショートカットアクションを提供する。

コンテンツのガイドライン

リソースアイテムは

  • マーチャントが探しているアイテムを見つけるために必要な情報を提供する。
  • リソースの種類に応じて、マーチャントのタスクをサポートする。
  • コロンは避けてください。
  • ショートカットアクションは、ボタンのための完全な動詞+名詞の公式に従う必要はありません。

関連コンポーネント

関連コンテンツのシンプルなリストを表示するには、リストコンポーネントを使用します。

Resource list

リソースリストは、商品や顧客など、同じタイプのオブジェクトの集まりを表示します。リソースリストの主な役割は、マーチャントがオブジェクトを見つけて、そのオブジェクトの全ページ表示にナビゲートすることです。

リソースリストには以下の機能もあります。

Simple resource list

シンプルなアイテムを持つリソースリストで、バルクアクション、ソート、フィルタリングはありません。

Image from Gyazo

React
<Card>
  <ResourceList
    resourceName={{ singular: "customer", plural: "customers" }}
    items={[
      {
        id: 100,
        url: "customers/341",
        name: "Mae Jemison",
        location: "Decatur, USA",
      },
      {
        id: 200,
        url: "customers/256",
        name: "Ellen Ochoa",
        location: "Los Angeles, USA",
      },
    ]}
    renderItem={(item) => {
      const { id, url, name, location } = item
      const media = <Avatar customer size="medium" name={name} />

      return (
        <ResourceItem
          id={id}
          url={url}
          media={media}
          accessibilityLabel={`View details for ${name}`}
        >
          <h3>
            <TextStyle variation="strong">{name}</TextStyle>
          </h3>
          <div>{location}</div>
        </ResourceItem>
      )
    }}
  />
</Card>
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-ResourceList__ResourceListWrapper">
      <ul class="Polaris-ResourceList" aria-live="polite">
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div class="Polaris-ResourceItem" data-href="customers/341">
              <a
                aria-describedby="100"
                aria-label="View details for Mae Jemison"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay3"
                href="customers/341"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="100">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Mae Jemison"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                      ><span class="Polaris-Avatar__Initials"
                        ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                          <path
                            fill="currentColor"
                            d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                          ></path></svg></span
                    ></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
                  <div>Decatur, USA</div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div class="Polaris-ResourceItem" data-href="customers/256">
              <a
                aria-describedby="200"
                aria-label="View details for Ellen Ochoa"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay4"
                href="customers/256"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="200">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Ellen Ochoa"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                      ><span class="Polaris-Avatar__Initials"
                        ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                          <path
                            fill="currentColor"
                            d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                          ></path></svg></span
                    ></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
                  <div>Los Angeles, USA</div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Resource list with empty state

まだリソースが存在しないときに、リソースのリストの目的を説明するために使用します。これにより、読み込み状態のリストから、ゼロ、1、または多数のリソースが存在するリストへとスムーズに移行することができます。

Image from Gyazo

React
function ResourceListWithEmptyStateExample() {
  const items = []
  const appliedFilters = []
  const filters = []

  const filterControl = (
    <Filters
      disabled={!items.length}
      queryValue=""
      filters={filters}
      appliedFilters={appliedFilters}
    />
  )

  const emptyStateMarkup =
    !appliedFilters.length && !items.length ? (
      <EmptyState
        heading="Upload a file to get started"
        action={{ content: "Upload files" }}
        image="https://cdn.shopify.com/s/files/1/2376/3301/products/emptystate-files.png"
      >
        <p>You can use the Files section to upload images, videos, and other documents</p>
      </EmptyState>
    ) : undefined

  return (
    <Page title="Files">
      <Layout>
        <Layout.Section>
          <Card>
            <ResourceList
              emptyState={emptyStateMarkup}
              items={items}
              renderItem={() => {}}
              filterControl={filterControl}
              resourceName={{ singular: "file", plural: "files" }}
            />
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  )
}
HTML
<div>
  <div class="Polaris-Page">
    <div
      class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"
    >
      <div class="Polaris-Page-Header__Row">
        <div class="Polaris-Page-Header__TitleWrapper">
          <div>
            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
              <h1 class="Polaris-Header-Title">Files</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Page__Content">
      <div class="Polaris-Layout">
        <div class="Polaris-Layout__Section">
          <div class="Polaris-Card">
            <div class="Polaris-ResourceList__ResourceListWrapper">
              <div class="Polaris-ResourceList__FiltersWrapper">
                <div class="Polaris-Filters">
                  <div
                    class="Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer"
                    aria-hidden="true"
                  ></div>
                  <div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
                    <div
                      class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right"
                    >
                      <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
                        <div class="Polaris-Filters-ConnectedFilterControl__Item">
                          <div class="Polaris-Labelled--hidden">
                            <div class="Polaris-Labelled__LabelWrapper">
                              <div class="Polaris-Label">
                                <label
                                  id="PolarisTextField2Label"
                                  for="PolarisTextField2"
                                  class="Polaris-Label__Text"
                                  >Filter files</label
                                >
                              </div>
                            </div>
                            <div class="Polaris-Connected">
                              <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                <div class="Polaris-TextField Polaris-TextField--disabled">
                                  <div
                                    class="Polaris-TextField__Prefix"
                                    id="PolarisTextField2Prefix"
                                  >
                                    <span class="Polaris-Filters__SearchIcon"
                                      ><span class="Polaris-Icon"
                                        ><span class="Polaris-VisuallyHidden"></span
                                        ><svg
                                          viewBox="0 0 20 20"
                                          class="Polaris-Icon__Svg"
                                          focusable="false"
                                          aria-hidden="true"
                                        >
                                          <path
                                            d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                                          ></path></svg></span
                                    ></span>
                                  </div>
                                  <input
                                    id="PolarisTextField2"
                                    disabled=""
                                    placeholder="Filter files"
                                    autocomplete="off"
                                    class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
                                    aria-labelledby="PolarisTextField2Label PolarisTextField2Prefix"
                                    aria-invalid="false"
                                    value=""
                                  />
                                  <div class="Polaris-TextField__Backdrop"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <span class="Polaris-VisuallyHidden">
                    <div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
                  </span>
                </div>
              </div>
              <div class="Polaris-EmptyState Polaris-EmptyState--withinContentContainer">
                <div class="Polaris-EmptyState__Section">
                  <div class="Polaris-EmptyState__DetailsContainer">
                    <div class="Polaris-EmptyState__Details">
                      <div class="Polaris-TextContainer">
                        <p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">
                          Upload a file to get started
                        </p>
                        <div class="Polaris-EmptyState__Content">
                          <p>
                            You can use the Files section to upload images, videos, and other
                            documents
                          </p>
                        </div>
                      </div>
                      <div class="Polaris-EmptyState__Actions">
                        <div
                          class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--distributionCenter Polaris-Stack--alignmentCenter"
                        >
                          <div class="Polaris-Stack__Item">
                            <button class="Polaris-Button Polaris-Button--primary" type="button">
                              <span class="Polaris-Button__Content"
                                ><span class="Polaris-Button__Text">Upload files</span></span
                              >
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-EmptyState__ImageContainer">
                    <img
                      src="https://cdn.shopify.com/s/files/1/2376/3301/products/emptystate-files.png"
                      role="presentation"
                      alt=""
                      class="Polaris-EmptyState__Image"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="sheet-Polarisportal2"></div>
  </div>
</div>

Resource list with selection and no bulk actions

シンプルなアイテムとセレクションを持つリソースリストです。

Image from Gyazo

React
function ResourceListWithSelectionExample() {
  const [selectedItems, setSelectedItems] = useState([])

  const resourceName = {
    singular: "customer",
    plural: "customers",
  }

  const items = [
    {
      id: 101,
      url: "customers/341",
      name: "Mae Jemison",
      location: "Decatur, USA",
    },
    {
      id: 201,
      url: "customers/256",
      name: "Ellen Ochoa",
      location: "Los Angeles, USA",
    },
  ]

  return (
    <Card>
      <ResourceList
        resourceName={resourceName}
        items={items}
        renderItem={renderItem}
        selectedItems={selectedItems}
        onSelectionChange={setSelectedItems}
        selectable
      />
    </Card>
  )

  function renderItem(item) {
    const { id, url, name, location } = item
    const media = <Avatar customer size="medium" name={name} />

    return (
      <ResourceItem id={id} url={url} media={media} accessibilityLabel={`View details for ${name}`}>
        <h3>
          <TextStyle variation="strong">{name}</TextStyle>
        </h3>
        <div>{location}</div>
      </ResourceItem>
    )
  }
}
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-ResourceList__ResourceListWrapper">
      <div class="Polaris-ResourceList__HeaderOuterWrapper">
        <div>
          <div></div>
          <div>
            <div
              class="Polaris-ResourceList__HeaderWrapper Polaris-ResourceList__HeaderWrapper--hasSelect"
            >
              <div class="Polaris-ResourceList__HeaderContentWrapper">
                <div class="Polaris-ResourceList__HeaderTitleWrapper">Showing 2 customers</div>
                <div class="Polaris-ResourceList__CheckableButtonWrapper">
                  <div
                    class="Polaris-CheckableButton Polaris-CheckableButton__CheckableButton--plain"
                  >
                    <div class="Polaris-CheckableButton__Checkbox">
                      <label
                        class="Polaris-Choice Polaris-Choice--labelHidden"
                        for="PolarisCheckbox1"
                        ><span class="Polaris-Choice__Control"
                          ><span class="Polaris-Checkbox"
                            ><input
                              id="PolarisCheckbox1"
                              type="checkbox"
                              class="Polaris-Checkbox__Input"
                              aria-invalid="false"
                              role="checkbox"
                              aria-checked="false"
                              value="" /><span class="Polaris-Checkbox__Backdrop"></span
                            ><span class="Polaris-Checkbox__Icon"
                              ><span class="Polaris-Icon"
                                ><span class="Polaris-VisuallyHidden"></span
                                ><svg
                                  viewBox="0 0 20 20"
                                  class="Polaris-Icon__Svg"
                                  focusable="false"
                                  aria-hidden="true"
                                >
                                  <path
                                    d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                  ></path></svg></span></span></span></span
                        ><span class="Polaris-Choice__Label">Select all 2 customers</span></label
                      >
                    </div>
                    <span class="Polaris-CheckableButton__Label">Showing 2 customers</span>
                  </div>
                </div>
                <div class="Polaris-ResourceList__SelectButtonWrapper">
                  <button class="Polaris-Button" type="button">
                    <span class="Polaris-Button__Content"
                      ><span class="Polaris-Button__Icon"
                        ><span class="Polaris-Icon"
                          ><span class="Polaris-VisuallyHidden"></span
                          ><svg
                            viewBox="0 0 20 20"
                            class="Polaris-Icon__Svg"
                            focusable="false"
                            aria-hidden="true"
                          >
                            <path
                              fill-rule="evenodd"
                              d="M4.5 3A1.5 1.5 0 0 0 3 4.5v11A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 15.5 3h-11zm9.207 5.707a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
                            ></path></svg></span></span
                      ><span class="Polaris-Button__Text">Select</span></span
                    >
                  </button>
                </div>
              </div>
              <div class="Polaris-ResourceList__BulkActionsWrapper">
                <div>
                  <div
                    class="Polaris-BulkActions__Group Polaris-BulkActions__Group--largeScreen Polaris-BulkActions__Group--exited"
                  >
                    <div class="Polaris-BulkActions__ButtonGroupWrapper">
                      <div class="Polaris-CheckableButton">
                        <div class="Polaris-CheckableButton__Checkbox">
                          <label
                            class="Polaris-Choice Polaris-Choice--labelHidden"
                            for="PolarisCheckbox3"
                            ><span class="Polaris-Choice__Control"
                              ><span class="Polaris-Checkbox"
                                ><input
                                  id="PolarisCheckbox3"
                                  type="checkbox"
                                  class="Polaris-Checkbox__Input"
                                  aria-invalid="false"
                                  role="checkbox"
                                  aria-checked="false"
                                  value="" /><span class="Polaris-Checkbox__Backdrop"></span
                                ><span class="Polaris-Checkbox__Icon"
                                  ><span class="Polaris-Icon"
                                    ><span class="Polaris-VisuallyHidden"></span
                                    ><svg
                                      viewBox="0 0 20 20"
                                      class="Polaris-Icon__Svg"
                                      focusable="false"
                                      aria-hidden="true"
                                    >
                                      <path
                                        d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                      ></path></svg></span></span></span></span
                            ><span class="Polaris-Choice__Label"
                              >Select all 2 customers</span
                            ></label
                          >
                        </div>
                        <span class="Polaris-CheckableButton__Label">0 selected</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="Polaris-ResourceList" aria-live="polite">
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div
              class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
              data-href="customers/341"
            >
              <a
                aria-describedby="101"
                aria-label="View details for Mae Jemison"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay7"
                href="customers/341"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="101">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox7"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox7"
                                type="checkbox"
                                class="Polaris-Checkbox__Input"
                                aria-invalid="false"
                                role="checkbox"
                                aria-checked="false"
                                value="" /><span class="Polaris-Checkbox__Backdrop"></span
                              ><span class="Polaris-Checkbox__Icon"
                                ><span class="Polaris-Icon"
                                  ><span class="Polaris-VisuallyHidden"></span
                                  ><svg
                                    viewBox="0 0 20 20"
                                    class="Polaris-Icon__Svg"
                                    focusable="false"
                                    aria-hidden="true"
                                  >
                                    <path
                                      d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                    ></path></svg></span></span></span></span
                          ><span class="Polaris-Choice__Label"
                            >View details for Mae Jemison</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Mae Jemison"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                      ><span class="Polaris-Avatar__Initials"
                        ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                          <path
                            fill="currentColor"
                            d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                          ></path></svg></span
                    ></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
                  <div>Decatur, USA</div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div
              class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
              data-href="customers/256"
            >
              <a
                aria-describedby="201"
                aria-label="View details for Ellen Ochoa"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay8"
                href="customers/256"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="201">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox8"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox8"
                                type="checkbox"
                                class="Polaris-Checkbox__Input"
                                aria-invalid="false"
                                role="checkbox"
                                aria-checked="false"
                                value="" /><span class="Polaris-Checkbox__Backdrop"></span
                              ><span class="Polaris-Checkbox__Icon"
                                ><span class="Polaris-Icon"
                                  ><span class="Polaris-VisuallyHidden"></span
                                  ><svg
                                    viewBox="0 0 20 20"
                                    class="Polaris-Icon__Svg"
                                    focusable="false"
                                    aria-hidden="true"
                                  >
                                    <path
                                      d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                    ></path></svg></span></span></span></span
                          ><span class="Polaris-Choice__Label"
                            >View details for Ellen Ochoa</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Ellen Ochoa"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                      ><span class="Polaris-Avatar__Initials"
                        ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                          <path
                            fill="currentColor"
                            d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                          ></path></svg></span
                    ></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
                  <div>Los Angeles, USA</div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Resource list with bulk actions

マーチャントがアイテムを選択し、その選択に対してアクションを実行することができます。

Image from Gyazo

React
function ResourceListWithBulkActionsExample() {
  const [selectedItems, setSelectedItems] = useState([])

  const resourceName = {
    singular: "customer",
    plural: "customers",
  }

  const items = [
    {
      id: 103,
      url: "customers/341",
      name: "Mae Jemison",
      location: "Decatur, USA",
    },
    {
      id: 203,
      url: "customers/256",
      name: "Ellen Ochoa",
      location: "Los Angeles, USA",
    },
  ]

  const promotedBulkActions = [
    {
      content: "Edit customers",
      onAction: () => console.log("Todo: implement bulk edit"),
    },
  ]

  const bulkActions = [
    {
      content: "Add tags",
      onAction: () => console.log("Todo: implement bulk add tags"),
    },
    {
      content: "Remove tags",
      onAction: () => console.log("Todo: implement bulk remove tags"),
    },
    {
      content: "Delete customers",
      onAction: () => console.log("Todo: implement bulk delete"),
    },
  ]

  return (
    <Card>
      <ResourceList
        resourceName={resourceName}
        items={items}
        renderItem={renderItem}
        selectedItems={selectedItems}
        onSelectionChange={setSelectedItems}
        promotedBulkActions={promotedBulkActions}
        bulkActions={bulkActions}
      />
    </Card>
  )

  function renderItem(item) {
    const { id, url, name, location } = item
    const media = <Avatar customer size="medium" name={name} />

    return (
      <ResourceItem id={id} url={url} media={media} accessibilityLabel={`View details for ${name}`}>
        <h3>
          <TextStyle variation="strong">{name}</TextStyle>
        </h3>
        <div>{location}</div>
      </ResourceItem>
    )
  }
}
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-ResourceList__ResourceListWrapper">
      <div class="Polaris-ResourceList__HeaderOuterWrapper">
        <div>
          <div></div>
          <div>
            <div
              class="Polaris-ResourceList__HeaderWrapper Polaris-ResourceList__HeaderWrapper--hasSelect"
            >
              <div class="Polaris-ResourceList__HeaderContentWrapper">
                <div class="Polaris-ResourceList__HeaderTitleWrapper">Showing 2 customers</div>
                <div class="Polaris-ResourceList__CheckableButtonWrapper">
                  <div
                    class="Polaris-CheckableButton Polaris-CheckableButton__CheckableButton--plain"
                  >
                    <div class="Polaris-CheckableButton__Checkbox">
                      <label
                        class="Polaris-Choice Polaris-Choice--labelHidden"
                        for="PolarisCheckbox4"
                        ><span class="Polaris-Choice__Control"
                          ><span class="Polaris-Checkbox"
                            ><input
                              id="PolarisCheckbox4"
                              type="checkbox"
                              class="Polaris-Checkbox__Input"
                              aria-invalid="false"
                              role="checkbox"
                              aria-checked="false"
                              value="" /><span class="Polaris-Checkbox__Backdrop"></span
                            ><span class="Polaris-Checkbox__Icon"
                              ><span class="Polaris-Icon"
                                ><span class="Polaris-VisuallyHidden"></span
                                ><svg
                                  viewBox="0 0 20 20"
                                  class="Polaris-Icon__Svg"
                                  focusable="false"
                                  aria-hidden="true"
                                >
                                  <path
                                    d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                  ></path></svg></span></span></span></span
                        ><span class="Polaris-Choice__Label">Select all 2 customers</span></label
                      >
                    </div>
                    <span class="Polaris-CheckableButton__Label">Showing 2 customers</span>
                  </div>
                </div>
                <div class="Polaris-ResourceList__SelectButtonWrapper">
                  <button class="Polaris-Button" type="button">
                    <span class="Polaris-Button__Content"
                      ><span class="Polaris-Button__Icon"
                        ><span class="Polaris-Icon"
                          ><span class="Polaris-VisuallyHidden"></span
                          ><svg
                            viewBox="0 0 20 20"
                            class="Polaris-Icon__Svg"
                            focusable="false"
                            aria-hidden="true"
                          >
                            <path
                              fill-rule="evenodd"
                              d="M4.5 3A1.5 1.5 0 0 0 3 4.5v11A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 15.5 3h-11zm9.207 5.707a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
                            ></path></svg></span></span
                      ><span class="Polaris-Button__Text">Select</span></span
                    >
                  </button>
                </div>
              </div>
              <div class="Polaris-ResourceList__BulkActionsWrapper">
                <div>
                  <div
                    class="Polaris-BulkActions__Group Polaris-BulkActions__Group--largeScreen Polaris-BulkActions__Group--exited"
                  >
                    <div class="Polaris-BulkActions__ButtonGroupWrapper">
                      <div
                        class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented"
                        data-buttongroup-segmented="true"
                      >
                        <div class="Polaris-ButtonGroup__Item">
                          <div class="Polaris-CheckableButton">
                            <div class="Polaris-CheckableButton__Checkbox">
                              <label
                                class="Polaris-Choice Polaris-Choice--labelHidden"
                                for="PolarisCheckbox5"
                                ><span class="Polaris-Choice__Control"
                                  ><span class="Polaris-Checkbox"
                                    ><input
                                      id="PolarisCheckbox5"
                                      type="checkbox"
                                      class="Polaris-Checkbox__Input"
                                      aria-invalid="false"
                                      role="checkbox"
                                      aria-checked="false"
                                      value="" /><span class="Polaris-Checkbox__Backdrop"></span
                                    ><span class="Polaris-Checkbox__Icon"
                                      ><span class="Polaris-Icon"
                                        ><span class="Polaris-VisuallyHidden"></span
                                        ><svg
                                          viewBox="0 0 20 20"
                                          class="Polaris-Icon__Svg"
                                          focusable="false"
                                          aria-hidden="true"
                                        >
                                          <path
                                            d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                          ></path></svg></span></span></span></span
                                ><span class="Polaris-Choice__Label"
                                  >Select all 2 customers</span
                                ></label
                              >
                            </div>
                            <span class="Polaris-CheckableButton__Label">0 selected</span>
                          </div>
                        </div>
                        <div class="Polaris-ButtonGroup__Item">
                          <div class="Polaris-BulkActions__BulkActionButton">
                            <button class="Polaris-Button" type="button">
                              <span class="Polaris-Button__Content"
                                ><span class="Polaris-Button__Text">Edit customers</span></span
                              >
                            </button>
                          </div>
                        </div>
                        <div class="Polaris-ButtonGroup__Item">
                          <div>
                            <div>
                              <div class="Polaris-BulkActions__BulkActionButton">
                                <button
                                  class="Polaris-Button"
                                  type="button"
                                  tabindex="0"
                                  aria-controls="Polarispopover2"
                                  aria-owns="Polarispopover2"
                                  aria-expanded="false"
                                >
                                  <span class="Polaris-Button__Content"
                                    ><span class="Polaris-Button__Text">More actions</span
                                    ><span class="Polaris-Button__Icon">
                                      <div class="">
                                        <span class="Polaris-Icon"
                                          ><span class="Polaris-VisuallyHidden"></span
                                          ><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>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="Polaris-ResourceList" aria-live="polite">
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div
              class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
              data-href="customers/341"
            >
              <a
                aria-describedby="103"
                aria-label="View details for Mae Jemison"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay11"
                href="customers/341"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="103">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox11"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox11"
                                type="checkbox"
                                class="Polaris-Checkbox__Input"
                                aria-invalid="false"
                                role="checkbox"
                                aria-checked="false"
                                value="" /><span class="Polaris-Checkbox__Backdrop"></span
                              ><span class="Polaris-Checkbox__Icon"
                                ><span class="Polaris-Icon"
                                  ><span class="Polaris-VisuallyHidden"></span
                                  ><svg
                                    viewBox="0 0 20 20"
                                    class="Polaris-Icon__Svg"
                                    focusable="false"
                                    aria-hidden="true"
                                  >
                                    <path
                                      d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                    ></path></svg></span></span></span></span
                          ><span class="Polaris-Choice__Label"
                            >View details for Mae Jemison</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Mae Jemison"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                      ><span class="Polaris-Avatar__Initials"
                        ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                          <path
                            fill="currentColor"
                            d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                          ></path></svg></span
                    ></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
                  <div>Decatur, USA</div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div
              class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
              data-href="customers/256"
            >
              <a
                aria-describedby="203"
                aria-label="View details for Ellen Ochoa"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay12"
                href="customers/256"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="203">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox12"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox12"
                                type="checkbox"
                                class="Polaris-Checkbox__Input"
                                aria-invalid="false"
                                role="checkbox"
                                aria-checked="false"
                                value="" /><span class="Polaris-Checkbox__Backdrop"></span
                              ><span class="Polaris-Checkbox__Icon"
                                ><span class="Polaris-Icon"
                                  ><span class="Polaris-VisuallyHidden"></span
                                  ><svg
                                    viewBox="0 0 20 20"
                                    class="Polaris-Icon__Svg"
                                    focusable="false"
                                    aria-hidden="true"
                                  >
                                    <path
                                      d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
                                    ></path></svg></span></span></span></span
                          ><span class="Polaris-Choice__Label"
                            >View details for Ellen Ochoa</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Ellen Ochoa"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeMedium"
                      ><span class="Polaris-Avatar__Initials"
                        ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                          <path
                            fill="currentColor"
                            d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
                          ></path></svg></span
                    ></span>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Content">
                  <h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
                  <div>Los Angeles, USA</div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal3"></div>
  </div>
</div>

Shopify アプリのご紹介

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

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

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

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

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