⭐️

【Polaris和訳】Components/Navigation③

2021/11/06に公開約43,100字

この記事について

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

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

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

Pagenation

ページネーションを使うと、マーチャントはページに分割されたアイテムのコレクションを順に見ていくことができます。ウェブ上では、ページネーションはボタンを使ってページ間を行き来します。iOS や Android では、無限スクロールを使ってページネーションを行います。

Web

Default pagenation

リストの下部にあるページネーションに使用します。

Image from Gyazo

React
<Pagination
  hasPrevious
  onPrevious={() => {
    console.log("Previous")
  }}
  hasNext
  onNext={() => {
    console.log("Next")
  }}
/>
HTML
<div>
  <nav aria-label="Pagination">
    <div
      class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented"
      data-buttongroup-segmented="true"
    >
      <div class="Polaris-ButtonGroup__Item">
        <button
          id="previousURL"
          class="Polaris-Button Polaris-Button--outline Polaris-Button--iconOnly"
          aria-label="Previous"
          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
                    d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"
                  ></path></svg></span></span
          ></span>
        </button>
      </div>
      <div class="Polaris-ButtonGroup__Item">
        <button
          id="nextURL"
          class="Polaris-Button Polaris-Button--outline Polaris-Button--iconOnly"
          aria-label="Next"
          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
                    d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"
                  ></path></svg></span></span
          ></span>
        </button>
      </div>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

Pagination with keyboard navigation

重要なページネーションコントロールには、標準的なキーボードショートカットを付ける。

Image from Gyazo

React
<div style={{ height: "100px" }}>
  <Pagination
    hasPrevious
    previousKeys={[74]}
    previousTooltip="j"
    onPrevious={() => {
      console.log("Previous")
    }}
    hasNext
    nextKeys={[75]}
    nextTooltip="k"
    onNext={() => {
      console.log("Next")
    }}
  />
</div>
HTML
<div>
  <div style="height: 100px;">
    <nav aria-label="Pagination">
      <div
        class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented"
        data-buttongroup-segmented="true"
      >
        <div class="Polaris-ButtonGroup__Item">
          <span
            ><button
              id="previousURL"
              class="Polaris-Button Polaris-Button--outline Polaris-Button--iconOnly"
              aria-label="Previous"
              type="button"
              tabindex="0"
              aria-describedby="PolarisTooltipContent3"
              data-polaris-tooltip-activator="true"
            >
              <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="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"
                      ></path></svg></span></span
              ></span></button
          ></span>
        </div>
        <div class="Polaris-ButtonGroup__Item">
          <span
            ><button
              id="nextURL"
              class="Polaris-Button Polaris-Button--outline Polaris-Button--iconOnly"
              aria-label="Next"
              type="button"
              tabindex="0"
              aria-describedby="PolarisTooltipContent4"
              data-polaris-tooltip-activator="true"
            >
              <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="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"
                      ></path></svg></span></span
              ></span></button
          ></span>
        </div>
      </div>
    </nav>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="tooltip-Polarisportal1"></div>
    <div data-portal-id="tooltip-Polarisportal2"></div>
  </div>
</div>
,

Pagenation with label

ナビゲーションボタンの間にラベルを追加することで、ユーザーが見ているコンテンツの内容をより詳しく伝えることができます。

Image from Gyazo

React
<Pagination
  label="Results"
  hasPrevious
  onPrevious={() => {
    console.log("Previous")
  }}
  hasNext
  onNext={() => {
    console.log("Next")
  }}
/>
HTML
<div>
  <nav aria-label="Pagination">
    <div class="Polaris-ButtonGroup" data-buttongroup-segmented="false">
      <div class="Polaris-ButtonGroup__Item">
        <button
          id="previousURL"
          class="Polaris-Button Polaris-Button--outline Polaris-Button--iconOnly"
          aria-label="Previous"
          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
                    d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"
                  ></path></svg></span></span
          ></span>
        </button>
      </div>
      <div class="Polaris-ButtonGroup__Item">
        <div aria-live="polite"><span class="">Results</span></div>
      </div>
      <div class="Polaris-ButtonGroup__Item">
        <button
          id="nextURL"
          class="Polaris-Button Polaris-Button--outline Polaris-Button--iconOnly"
          aria-label="Next"
          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
                    d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"
                  ></path></svg></span></span
          ></span>
        </button>
      </div>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

accessibilityLabel
string
ページネーションのアクセシビリティラベル


accessibilityLabels
AccessibilityLabels
ボタンと UnstyledLinks のアクセシブルなラベル


hasNext
boolean
次に表示するページがあるかどうか


hasPrevious
boolean
表示する前のページがあるかどうか


label
React.ReactNode
矢印ボタンの間に、より多くのコンテキストを提供するためのテキスト


nextKeys
Key[]
次のボタンのキーボードショートカット


nextTooltip
string
次のボタンのツールチップ


nextURL
string
次のページの URL


previousKeys
Key[]
前のボタンのキーボードショートカット


previousTooltip
string
前のボタンのツールチップ


previousURL
string
前のページの URL


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


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

Android

ラベル付きページネーション

ナビゲーションボタンの間にラベルを追加して、ユーザーが見ているコンテンツのコンテキストを提供します。

無限スクロール

項目数が 25 以上のリストに使用します。モバイルアプリでは、より多くの項目を読み込むために画面の下までスクロールするのが自然です。

Image from Gyazo

iOS

ラベル付きページネーション

ナビゲーションボタンの間にラベルを追加して、ユーザーが見ているコンテンツのコンテキストを提供します。

無限スクロール

項目数が 25 以上のリストに使用します。モバイルアプリでは、より多くの項目を読み込むために画面の下までスクロールするのが自然です。

Image from Gyazo

ベストプラクティス

すべてのプラットフォームにおいて、ページネーションは

  • アイテム数が 25 以上のリストにのみ使用する。
    ウェブページネーションは

  • ページに分割された長いリストの一番下に配置する。

  • ページネーションでは、ページングされたリストの前後のアイテムに移動する。

  • マーチャントが最初のページまたは最後のページにいるときは、対応するボタンを無効にしてヒントを表示すること
    iOS および Android のページネーションでは

  • マーチャントが一番下に近づいたときに、アイテムのロードを開始する。

  • リストの下にスピナーを表示し、アイテムがリクエストされたことを示す

関連コンポーネント

Tabs

同じコンテキスト内で、関連するビューを交互に表示します。

Web

Default tabs

ほとんどの場合、特にタブの数が 3 つ以上になる可能性がある場合に使用します。

Image from Gyazo

React
function TabsExample() {
  const [selected, setSelected] = useState(0)

  const handleTabChange = useCallback((selectedTabIndex) => setSelected(selectedTabIndex), [])

  const tabs = [
    {
      id: "all-customers-1",
      content: "All",
      accessibilityLabel: "All customers",
      panelID: "all-customers-content-1",
    },
    {
      id: "accepts-marketing-1",
      content: "Accepts marketing",
      panelID: "accepts-marketing-content-1",
    },
    {
      id: "repeat-customers-1",
      content: "Repeat customers",
      panelID: "repeat-customers-content-1",
    },
    {
      id: "prospects-1",
      content: "Prospects",
      panelID: "prospects-content-1",
    },
  ]

  return (
    <Card>
      <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange}>
        <Card.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
        </Card.Section>
      </Tabs>
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <div>
      <div class="Polaris-Tabs__Wrapper">
        <div class="Polaris-Tabs Polaris-Tabs__TabMeasurer">
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="all-customers-1Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected"
              aria-selected="true"
            >
              <span class="Polaris-Tabs__Title">All</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="accepts-marketing-1Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
            >
              <span class="Polaris-Tabs__Title">Accepts marketing</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="repeat-customers-1Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
            >
              <span class="Polaris-Tabs__Title">Repeat customers</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="prospects-1Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
            >
              <span class="Polaris-Tabs__Title">Prospects</span>
            </button>
          </li>
          <button type="button" class="Polaris-Tabs__DisclosureActivator" aria-label="More tabs">
            <span class="Polaris-Tabs__Title"
              ><span class="Polaris-Icon Polaris-Icon--colorSubdued Polaris-Icon--applyColor"
                ><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>
          </button>
        </div>
        <ul role="tablist" class="Polaris-Tabs">
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="all-customers-1"
              role="tab"
              type="button"
              tabindex="0"
              class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected"
              aria-selected="true"
              aria-controls="all-customers-content-1"
              aria-label="All customers"
            >
              <span class="Polaris-Tabs__Title">All</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="accepts-marketing-1"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
              aria-controls="accepts-marketing-content-1"
            >
              <span class="Polaris-Tabs__Title">Accepts marketing</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="repeat-customers-1"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
              aria-controls="repeat-customers-content-1"
            >
              <span class="Polaris-Tabs__Title">Repeat customers</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="prospects-1"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
              aria-controls="prospects-content-1"
            >
              <span class="Polaris-Tabs__Title">Prospects</span>
            </button>
          </li>
          <li class="Polaris-Tabs__DisclosureTab" role="presentation">
            <div>
              <button
                type="button"
                class="Polaris-Tabs__DisclosureActivator"
                aria-label="More tabs"
                tabindex="0"
                aria-controls="Polarispopover2"
                aria-owns="Polarispopover2"
                aria-expanded="false"
              >
                <span class="Polaris-Tabs__Title"
                  ><span class="Polaris-Icon Polaris-Icon--colorSubdued Polaris-Icon--applyColor"
                    ><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>
              </button>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="Polaris-Tabs__Panel"
        id="all-customers-content-1"
        role="tabpanel"
        aria-labelledby="all-customers-1"
        tabindex="-1"
      >
        <div class="Polaris-Card__Section">
          <div class="Polaris-Card__SectionHeader">
            <h3 aria-label="All" class="Polaris-Subheading">All</h3>
          </div>
          <p>Tab 0 selected</p>
        </div>
      </div>
      <div
        class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden"
        id="accepts-marketing-content-1"
        role="tabpanel"
        aria-labelledby="accepts-marketing-1"
        tabindex="-1"
      ></div>
      <div
        class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden"
        id="repeat-customers-content-1"
        role="tabpanel"
        aria-labelledby="repeat-customers-1"
        tabindex="-1"
      ></div>
      <div
        class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden"
        id="prospects-content-1"
        role="tabpanel"
        aria-labelledby="prospects-1"
        tabindex="-1"
      ></div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal1"></div>
  </div>
</div>

Fitted tabs

タブが狭いカラムの中に数個(2 ~ 3 個)のアイテムを含む場合に使用します。

Image from Gyazo

React
function FittedTabsExample() {
  const [selected, setSelected] = useState(0)

  const handleTabChange = useCallback((selectedTabIndex) => setSelected(selectedTabIndex), [])

  const tabs = [
    {
      id: "all-customers-fitted-2",
      content: "All",
      accessibilityLabel: "All customers",
      panelID: "all-customers-fitted-content-2",
    },
    {
      id: "accepts-marketing-fitted-2",
      content: "Accepts marketing",
      panelID: "accepts-marketing-fitted-Ccontent-2",
    },
  ]

  return (
    <Card>
      <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange} fitted>
        <Card.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
        </Card.Section>
      </Tabs>
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <div>
      <div class="Polaris-Tabs__Wrapper">
        <div class="Polaris-Tabs Polaris-Tabs__TabMeasurer">
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="all-customers-fitted-2Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected"
              aria-selected="true"
            >
              <span class="Polaris-Tabs__Title">All</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="accepts-marketing-fitted-2Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
            >
              <span class="Polaris-Tabs__Title">Accepts marketing</span>
            </button>
          </li>
          <button type="button" class="Polaris-Tabs__DisclosureActivator" aria-label="More tabs">
            <span class="Polaris-Tabs__Title"
              ><span class="Polaris-Icon Polaris-Icon--colorSubdued Polaris-Icon--applyColor"
                ><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>
          </button>
        </div>
        <ul role="tablist" class="Polaris-Tabs Polaris-Tabs--fitted">
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="all-customers-fitted-2"
              role="tab"
              type="button"
              tabindex="0"
              class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected"
              aria-selected="true"
              aria-controls="all-customers-fitted-content-2"
              aria-label="All customers"
            >
              <span class="Polaris-Tabs__Title">All</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="accepts-marketing-fitted-2"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
              aria-controls="accepts-marketing-fitted-Ccontent-2"
            >
              <span class="Polaris-Tabs__Title">Accepts marketing</span>
            </button>
          </li>
          <li class="Polaris-Tabs__DisclosureTab" role="presentation">
            <div>
              <button
                type="button"
                class="Polaris-Tabs__DisclosureActivator"
                aria-label="More tabs"
                tabindex="0"
                aria-controls="Polarispopover4"
                aria-owns="Polarispopover4"
                aria-expanded="false"
              >
                <span class="Polaris-Tabs__Title"
                  ><span class="Polaris-Icon Polaris-Icon--colorSubdued Polaris-Icon--applyColor"
                    ><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>
              </button>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="Polaris-Tabs__Panel"
        id="all-customers-fitted-content-2"
        role="tabpanel"
        aria-labelledby="all-customers-fitted-2"
        tabindex="-1"
      >
        <div class="Polaris-Card__Section">
          <div class="Polaris-Card__SectionHeader">
            <h3 aria-label="All" class="Polaris-Subheading">All</h3>
          </div>
          <p>Tab 0 selected</p>
        </div>
      </div>
      <div
        class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden"
        id="accepts-marketing-fitted-Ccontent-2"
        role="tabpanel"
        aria-labelledby="accepts-marketing-fitted-2"
        tabindex="-1"
      ></div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal2"></div>
  </div>
</div>

Tabs with badge content

タブに関する情報の一部を知らせるために使用します。

Image from Gyazo

React
function TabsWithBadgeExample() {
  const [selected, setSelected] = useState(0)

  const handleTabChange = useCallback((selectedTabIndex) => setSelected(selectedTabIndex), [])

  const tabs = [
    {
      id: "all-customers-fitted-3",
      content: (
        <span>
          All <Badge status="new">10+</Badge>
        </span>
      ),
      accessibilityLabel: "All customers",
      panelID: "all-customers-fitted-content-3",
    },
    {
      id: "accepts-marketing-fitted-3",
      content: (
        <span>
          Accepts marketing <Badge status="new">4</Badge>
        </span>
      ),
      panelID: "accepts-marketing-fitted-content-3",
    },
  ]

  return (
    <Card>
      <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange} fitted>
        <Card.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
        </Card.Section>
      </Tabs>
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <div>
      <div class="Polaris-Tabs__Wrapper">
        <div class="Polaris-Tabs Polaris-Tabs__TabMeasurer">
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="all-customers-fitted-3Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected"
              aria-selected="true"
            >
              <span class="Polaris-Tabs__Title"
                ><span
                  >All
                  <span class="Polaris-Badge Polaris-Badge--statusNew"
                    ><span class="Polaris-VisuallyHidden">New </span>10+</span
                  ></span
                ></span
              >
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="accepts-marketing-fitted-3Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
            >
              <span class="Polaris-Tabs__Title"
                ><span
                  >Accepts marketing
                  <span class="Polaris-Badge Polaris-Badge--statusNew"
                    ><span class="Polaris-VisuallyHidden">New </span>4</span
                  ></span
                ></span
              >
            </button>
          </li>
          <button type="button" class="Polaris-Tabs__DisclosureActivator" aria-label="More tabs">
            <span class="Polaris-Tabs__Title"
              ><span class="Polaris-Icon Polaris-Icon--colorSubdued Polaris-Icon--applyColor"
                ><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>
          </button>
        </div>
        <ul role="tablist" class="Polaris-Tabs Polaris-Tabs--fitted">
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="all-customers-fitted-3"
              role="tab"
              type="button"
              tabindex="0"
              class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected"
              aria-selected="true"
              aria-controls="all-customers-fitted-content-3"
              aria-label="All customers"
            >
              <span class="Polaris-Tabs__Title"
                ><span
                  >All
                  <span class="Polaris-Badge Polaris-Badge--statusNew"
                    ><span class="Polaris-VisuallyHidden">New </span>10+</span
                  ></span
                ></span
              >
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="accepts-marketing-fitted-3"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
              aria-controls="accepts-marketing-fitted-content-3"
            >
              <span class="Polaris-Tabs__Title"
                ><span
                  >Accepts marketing
                  <span class="Polaris-Badge Polaris-Badge--statusNew"
                    ><span class="Polaris-VisuallyHidden">New </span>4</span
                  ></span
                ></span
              >
            </button>
          </li>
          <li class="Polaris-Tabs__DisclosureTab" role="presentation">
            <div>
              <button
                type="button"
                class="Polaris-Tabs__DisclosureActivator"
                aria-label="More tabs"
                tabindex="0"
                aria-controls="Polarispopover6"
                aria-owns="Polarispopover6"
                aria-expanded="false"
              >
                <span class="Polaris-Tabs__Title"
                  ><span class="Polaris-Icon Polaris-Icon--colorSubdued Polaris-Icon--applyColor"
                    ><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>
              </button>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="Polaris-Tabs__Panel"
        id="all-customers-fitted-content-3"
        role="tabpanel"
        aria-labelledby="all-customers-fitted-3"
        tabindex="-1"
      >
        <div class="Polaris-Card__Section">
          <div class="Polaris-Card__SectionHeader">
            <span
              >All
              <span class="Polaris-Badge Polaris-Badge--statusNew"
                ><span class="Polaris-VisuallyHidden">New </span>10+</span
              ></span
            >
          </div>
          <p>Tab 0 selected</p>
        </div>
      </div>
      <div
        class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden"
        id="accepts-marketing-fitted-content-3"
        role="tabpanel"
        aria-labelledby="accepts-marketing-fitted-3"
        tabindex="-1"
      ></div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal3"></div>
  </div>
</div>

Tabs with custom disclosure

ポップオーバーの内容に関する情報を提供するために使用する

Image from Gyazo

React
function TabsWithCustomDisclosureExample() {
  const [selected, setSelected] = useState(0)

  const handleTabChange = useCallback((selectedTabIndex) => setSelected(selectedTabIndex), [])

  const tabs = [
    {
      id: "all-customers-4",
      content: "All",
      accessibilityLabel: "All customers",
      panelID: "all-customers-content-4",
    },
    {
      id: "accepts-marketing-4",
      content: "Accepts marketing",
      panelID: "accepts-marketing-content-4",
    },
    {
      id: "repeat-customers-4",
      content: "Repeat customers",
      panelID: "repeat-customers-content-4",
    },
    {
      id: "prospects-4",
      content: "Prospects",
      panelID: "prospects-content-4",
    },
  ]

  return (
    <Card>
      <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange} disclosureText="More views">
        <Card.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
        </Card.Section>
      </Tabs>
    </Card>
  )
}
HTML
<div>
  <div class="Polaris-Card">
    <div>
      <div class="Polaris-Tabs__Wrapper">
        <div class="Polaris-Tabs Polaris-Tabs__TabMeasurer">
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="all-customers-4Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected"
              aria-selected="true"
            >
              <span class="Polaris-Tabs__Title">All</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="accepts-marketing-4Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
            >
              <span class="Polaris-Tabs__Title">Accepts marketing</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="repeat-customers-4Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
            >
              <span class="Polaris-Tabs__Title">Repeat customers</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="prospects-4Measurer"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
            >
              <span class="Polaris-Tabs__Title">Prospects</span>
            </button>
          </li>
          <div class="Polaris-Tabs__TabContainer">
            <button
              type="button"
              class="Polaris-Tabs__DisclosureActivator Polaris-Tabs__Tab"
              aria-label="More tabs"
            >
              <span class="Polaris-Tabs__Title Polaris-Tabs--titleWithIcon"
                >More views<span
                  class="Polaris-Icon Polaris-Icon--colorSubdued Polaris-Icon--applyColor"
                  ><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
              ></span>
            </button>
          </div>
        </div>
        <ul role="tablist" class="Polaris-Tabs">
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="all-customers-4"
              role="tab"
              type="button"
              tabindex="0"
              class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected"
              aria-selected="true"
              aria-controls="all-customers-content-4"
              aria-label="All customers"
            >
              <span class="Polaris-Tabs__Title">All</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="accepts-marketing-4"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
              aria-controls="accepts-marketing-content-4"
            >
              <span class="Polaris-Tabs__Title">Accepts marketing</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="repeat-customers-4"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
              aria-controls="repeat-customers-content-4"
            >
              <span class="Polaris-Tabs__Title">Repeat customers</span>
            </button>
          </li>
          <li class="Polaris-Tabs__TabContainer" role="presentation">
            <button
              id="prospects-4"
              role="tab"
              type="button"
              tabindex="-1"
              class="Polaris-Tabs__Tab"
              aria-selected="false"
              aria-controls="prospects-content-4"
            >
              <span class="Polaris-Tabs__Title">Prospects</span>
            </button>
          </li>
          <li class="Polaris-Tabs__DisclosureTab" role="presentation">
            <div>
              <div class="Polaris-Tabs__TabContainer">
                <button
                  type="button"
                  class="Polaris-Tabs__DisclosureActivator Polaris-Tabs__Tab"
                  aria-label="More tabs"
                  tabindex="0"
                  aria-controls="Polarispopover8"
                  aria-owns="Polarispopover8"
                  aria-expanded="false"
                >
                  <span class="Polaris-Tabs__Title Polaris-Tabs--titleWithIcon"
                    >More views<span
                      class="Polaris-Icon Polaris-Icon--colorSubdued Polaris-Icon--applyColor"
                      ><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
                  ></span>
                </button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="Polaris-Tabs__Panel"
        id="all-customers-content-4"
        role="tabpanel"
        aria-labelledby="all-customers-4"
        tabindex="-1"
      >
        <div class="Polaris-Card__Section">
          <div class="Polaris-Card__SectionHeader">
            <h3 aria-label="All" class="Polaris-Subheading">All</h3>
          </div>
          <p>Tab 0 selected</p>
        </div>
      </div>
      <div
        class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden"
        id="accepts-marketing-content-4"
        role="tabpanel"
        aria-labelledby="accepts-marketing-4"
        tabindex="-1"
      ></div>
      <div
        class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden"
        id="repeat-customers-content-4"
        role="tabpanel"
        aria-labelledby="repeat-customers-4"
        tabindex="-1"
      ></div>
      <div
        class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden"
        id="prospects-content-4"
        role="tabpanel"
        aria-labelledby="prospects-4"
        tabindex="-1"
      ></div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal4"></div>
  </div>
</div>

Props

children
React.ReactNode
タブに表示するコンテンツ


disclosureText
string
ディスクロージャーの水平方向のドットを置き換えるためのテキスト


fitted
boolean
タブをコンテナに合わせる


selectedRequired
number
選択されたタブのインデックス


tabsRequired
TabDescriptor[]
タブのリスト


onSelect
{(selectedTabIndex: number) => void}
タブが選択されたときのコールバック

Android

デフォルトのタブ

ほとんどの場合、特にタブの数が 3 つ以上になる可能性がある場合に使用します。

Image from Gyazo

フィットしたタブ

狭い列の中にタブの数が少ない(2 ~ 3 個)場合に使用します。

Image from Gyazo

バッジコンテンツ付きタブ

タブの情報を知らせるために使用します。

カスタムディスクロージャーのあるタブ

ポップオーバーの内容に関する情報を提供するために使用する

iOS

デフォルトのタブ

ほとんどの場合、特にタブの数が 3 つ以上になる可能性がある場合に使用します。

Image from Gyazo

フィットしたタブ

狭い列の中に数個(2 ~ 3 個)のタブがある場合に使用します。

iOS では Segmented controls とも呼ばれます。

Image from Gyazo

バッジコンテンツ付きタブ

タブの情報を知らせるために使用します。

カスタムディスクロージャーのあるタブ

ポップオーバーのコンテンツに関する情報を提供するために使用します。

ベストプラクティス

タブは

  • 異なるフィルタを適用したリストビューなど、同じ種類のコンテンツを表すこと。同種でないコンテンツのグループ化にタブを使用しないこと。
  • 一度に 1 つだけ有効にしてください。
  • マーチャントが 1 つのタスクを行うために、あちこちに移動することを強要しないこと。マーチャントは、それぞれのタブの下で必要なものを見つけ、作業を終えることができなければなりません。
  • 主要なナビゲーションには使用しないこと。

コンテンツガイドライン

タブ

タブは以下の通りです。

  • タブの下にある異なるセクションを区別するために、明確にラベル付けされていること。

  • 短く、スキャンしやすいラベルにしてください(通常は 1 語にしてください)。

  • タブは Shopify のセクションに関連していなければなりません。ページセクションのタイトルは、タブの後にある見えない名詞だと想像してください。例えば、注文セクションのタブは次の通りです。

    • すべて
    • オープン
    • 未処理
    • 未払い

ギフトカード」セクションのタブは

  • すべて
  • 新規
  • 一部使用
  • 使用済み
  • 使用不可

また、お客様のセクションでは、タブが

  • すべて
  • 新規
  • 戻る
  • 放棄されたチェックアウト
  • メール購読者

可能な限り、このパターンでタブを作成してください。

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

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