⭐️

【Polaris和訳】Components/Lists and tables⓾

2021/11/06に公開約53,300字

この記事について

この記事は、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

Resource list with item shortcut actions

ショートカットアクションは、リソースの詳細ページから人気のあるアクションに素早くアクセスできることを目的としています。ショートカットアクションは、マウスをリストアイテムの上に置いたときに表示されますが、小さな画面のデバイスでは表示されないため、アクションには別の方法でアクセスする必要があります。

Image from Gyazo

React
<Card>
  <ResourceList
    resourceName={{ singular: "customer", plural: "customers" }}
    items={[
      {
        id: 109,
        url: "customers/341",
        name: "Mae Jemison",
        location: "Decatur, USA",
        latestOrderUrl: "orders/1456",
      },
      {
        id: 209,
        url: "customers/256",
        name: "Ellen Ochoa",
        location: "Los Angeles, USA",
        latestOrderUrl: "orders/1457",
      },
    ]}
    renderItem={(item) => {
      const { id, url, name, location, latestOrderUrl } = item
      const media = <Avatar customer size="medium" name={name} />
      const shortcutActions = latestOrderUrl
        ? [
            {
              content: "View latest order",
              accessibilityLabel: `View ${name}’s latest order`,
              url: latestOrderUrl,
            },
          ]
        : null

      return (
        <ResourceItem
          id={id}
          url={url}
          media={media}
          accessibilityLabel={`View details for ${name}`}
          shortcutActions={shortcutActions}
        >
          <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="109"
                aria-label="View details for Mae Jemison"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay35"
                href="customers/341"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="109">
                <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 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"
                        aria-label="View Mae Jemison’s latest order"
                        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>
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div class="Polaris-ResourceItem" data-href="customers/256">
              <a
                aria-describedby="209"
                aria-label="View details for Ellen Ochoa"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay36"
                href="customers/256"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="209">
                <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 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"
                        aria-label="View Ellen Ochoa’s latest order"
                        href="orders/1457"
                        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>

Resource list with persistent item shortcut actions

永続的なショートカットアクションは、アイテムの詳細ページでアクションを利用できない稀なケースで使用します。永続的なショートカットアクションは、小さな画面ではオーバーフローメニューとして表示されます。

Image from Gyazo

React
<Card>
  <ResourceList
    resourceName={{ singular: "customer", plural: "customers" }}
    items={[
      {
        id: 110,
        url: "customers/341",
        name: "Mae Jemison",
        location: "Decatur, USA",
        latestOrderUrl: "orders/1456",
      },
      {
        id: 210,
        url: "customers/256",
        name: "Ellen Ochoa",
        location: "Los Angeles, USA",
        latestOrderUrl: "orders/1457",
      },
    ]}
    renderItem={(item) => {
      const { id, url, name, location, latestOrderUrl } = item
      const media = <Avatar customer size="medium" name={name} />
      const shortcutActions = latestOrderUrl
        ? [
            {
              content: "View latest order",
              accessibilityLabel: `View ${name}’s latest order`,
              url: latestOrderUrl,
            },
          ]
        : null

      return (
        <ResourceItem
          id={id}
          url={url}
          media={media}
          accessibilityLabel={`View details for ${name}`}
          shortcutActions={shortcutActions}
          persistActions
        >
          <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 Polaris-ResourceItem--persistActions"
              data-href="customers/341"
            >
              <a
                aria-describedby="110"
                aria-label="View details for Mae Jemison"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay39"
                href="customers/341"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="110">
                <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 class="Polaris-ResourceItem__Actions">
                  <div class="Polaris-ButtonGroup">
                    <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain">
                      <a
                        class="Polaris-Button Polaris-Button--plain"
                        aria-label="View Mae Jemison’s latest order"
                        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 class="Polaris-ResourceItem__Disclosure">
                  <div>
                    <button
                      class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
                      aria-label="Actions dropdown"
                      type="button"
                      tabindex="0"
                      aria-controls="Polarispopover6"
                      aria-owns="Polarispopover6"
                      aria-expanded="false"
                    >
                      <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
                                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>
          </div>
        </li>
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div
              class="Polaris-ResourceItem Polaris-ResourceItem--persistActions"
              data-href="customers/256"
            >
              <a
                aria-describedby="210"
                aria-label="View details for Ellen Ochoa"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay40"
                href="customers/256"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="210">
                <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 class="Polaris-ResourceItem__Actions">
                  <div class="Polaris-ButtonGroup">
                    <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain">
                      <a
                        class="Polaris-Button Polaris-Button--plain"
                        aria-label="View Ellen Ochoa’s latest order"
                        href="orders/1457"
                        data-polaris-unstyled="true"
                        ><span class="Polaris-Button__Content"
                          ><span class="Polaris-Button__Text">View latest order</span></span
                        ></a
                      >
                    </div>
                  </div>
                </div>
                <div class="Polaris-ResourceItem__Disclosure">
                  <div>
                    <button
                      class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
                      aria-label="Actions dropdown"
                      type="button"
                      tabindex="0"
                      aria-controls="Polarispopover7"
                      aria-owns="Polarispopover7"
                      aria-expanded="false"
                    >
                      <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
                                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>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal9"></div>
    <div data-portal-id="popover-Polarisportal10"></div>
  </div>
</div>
,

Resource list with multiselect

マーチャントが複数のアイテムを一度に選択・解除することができます。
Image from Gyazo

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

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

  const items = [
    {
      id: 111,
      url: "customers/231",
      name: "Mae Jemison",
      location: "Decatur, USA",
    },
    {
      id: 211,
      url: "customers/246",
      name: "Ellen Ochoa",
      location: "Los Angeles, USA",
    },
    {
      id: 311,
      url: "customers/276",
      name: "Joe Smith",
      location: "Arizona, USA",
    },
    {
      id: 411,
      url: "customers/349",
      name: "Haden Jerado",
      location: "Decatur, USA",
    },
    {
      id: 511,
      url: "customers/419",
      name: "Tom Thommas",
      location: "Florida, USA",
    },
    {
      id: 611,
      url: "customers/516",
      name: "Emily Amrak",
      location: "Texas, 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}
        resolveItemId={resolveItemIds}
      />
    </Card>
  )

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

    return (
      <ResourceItem
        id={id}
        url={url}
        media={media}
        sortOrder={index}
        accessibilityLabel={`View details for ${name}`}
      >
        <h3>
          <TextStyle variation="strong">{name}</TextStyle>
        </h3>
        <div>{location}</div>
      </ResourceItem>
    )
  }

  function resolveItemIds({ id }) {
    return id
  }
}
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 6 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="PolarisCheckbox8"
                        ><span class="Polaris-Choice__Control"
                          ><span class="Polaris-Checkbox"
                            ><input
                              id="PolarisCheckbox8"
                              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 6 customers</span></label
                      >
                    </div>
                    <span class="Polaris-CheckableButton__Label">Showing 6 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="PolarisCheckbox9"
                                ><span class="Polaris-Choice__Control"
                                  ><span class="Polaris-Checkbox"
                                    ><input
                                      id="PolarisCheckbox9"
                                      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 6 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="Polarispopover8"
                                  aria-owns="Polarispopover8"
                                  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/231"
            >
              <a
                aria-describedby="111"
                aria-label="View details for Mae Jemison"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay47"
                href="customers/231"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="111">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox47"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox47"
                                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/246"
            >
              <a
                aria-describedby="211"
                aria-label="View details for Ellen Ochoa"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay48"
                href="customers/246"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="211">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox48"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox48"
                                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>
        <li class="Polaris-ResourceItem__ListItem">
          <div class="Polaris-ResourceItem__ItemWrapper">
            <div
              class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
              data-href="customers/276"
            >
              <a
                aria-describedby="311"
                aria-label="View details for Joe Smith"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay49"
                href="customers/276"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="311">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox49"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox49"
                                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 Joe Smith</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Joe Smith"
                      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">Joe Smith</span></h3>
                  <div>Arizona, 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/349"
            >
              <a
                aria-describedby="411"
                aria-label="View details for Haden Jerado"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay50"
                href="customers/349"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="411">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox50"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox50"
                                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 Haden Jerado</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Haden Jerado"
                      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">Haden Jerado</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/419"
            >
              <a
                aria-describedby="511"
                aria-label="View details for Tom Thommas"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay51"
                href="customers/419"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="511">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox51"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox51"
                                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 Tom Thommas</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Tom Thommas"
                      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">Tom Thommas</span></h3>
                  <div>Florida, 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/516"
            >
              <a
                aria-describedby="611"
                aria-label="View details for Emily Amrak"
                class="Polaris-ResourceItem__Link"
                tabindex="0"
                id="PolarisResourceListItemOverlay52"
                href="customers/516"
                data-polaris-unstyled="true"
              ></a>
              <div class="Polaris-ResourceItem__Container" id="611">
                <div class="Polaris-ResourceItem__Owned">
                  <div class="Polaris-ResourceItem__Handle">
                    <div class="Polaris-ResourceItem__CheckboxWrapper">
                      <div>
                        <label
                          class="Polaris-Choice Polaris-Choice--labelHidden"
                          for="PolarisResourceListItemCheckbox52"
                          ><span class="Polaris-Choice__Control"
                            ><span class="Polaris-Checkbox"
                              ><input
                                id="PolarisResourceListItemCheckbox52"
                                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 Emily Amrak</span
                          ></label
                        >
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-ResourceItem__Media">
                    <span
                      aria-label="Emily Amrak"
                      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">Emily Amrak</span></h3>
                  <div>Texas, USA</div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal11"></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

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