【Shopify.dev和訳】App Bridge/React components/TitleBar

2021/09/05に公開約5,500字

この記事について

この記事は、App Bridge/React component/TitleBar の記事を和訳したものです。

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

TitleBar

設定方法

ProviderTitleBarコンポーネントを@shopify/app-bridge-reactからインポートします。アプリケーションに必要なProbiderは 1 つだけです。

import React from "react"
import ReactDOM from "react-dom"
import { Provider, TitleBar } from "@shopify/app-bridge-react"

function MyApp() {
  const config = { apiKey: "12345", host: host }

  const primaryAction = { content: "Foo", url: "/foo" }
  const secondaryActions = [{ content: "Bar", url: "/bar" }]
  const actionGroups = [{ title: "Baz", actions: [{ content: "Baz", url: "/baz" }] }]

  return (
    <Provider config={config}>
      <TitleBar
        title="Hello world!"
        primaryAction={primaryAction}
        secondaryActions={secondaryActions}
        actionGroups={actionGroups}
      />
    </Provider>
  )
}

const root = document.createElement("div")
document.body.appendChild(root)
ReactDOM.render(<MyApp />, root)

Props

名前 タイプ 説明 必須
title string タイトルバーのタイトル yes
breadcrumbs Breadcrumb[] パンくずの配列
primaryAction ActionProps TitleBar のプライマリアクション
secondaryActions ActionProps[] TitleBar のセカンダリーアクションの配列
actionGroups ActionGroupProps[] セカンダリーアクションのタイトルバーグループの配列
名前 タイプ 説明 必須
content string アクションが表示するコンテンツ
url string リンク先を指定します。
target "ADMIN_PATH", "REMOTE", "APP" リンク先を表示する場所
onAction () => void アクションが起きたときのコールバック

ActionProps

名前 タイプ 説明 必須
content string アクションが表示するコンテンツ
destructive boolean アクションを破壊的なスタイルにします。
disabled boolean アクションを無効にします。
external boolean 強制的に URL を新しいタブで開きます。
target "ADMIN_PATH", "REMOTE", "APP" ターゲットリンクを表示する場所。
url string リンク先を指定します。
onAction () => void アクションが発生したときのコールバック

ActionGroupProps

名前 タイプ 説明 必須
title string アクショングループのタイトル Yes
actions ActionProps[] アクションのリスト Yes

Polaris の<Page>コンポーネントで<TitleBar>を使用する

埋め込みアプリの機能と一緒に使用する場合、Polaris <Page>コンポーネントはまだ重要なレイアウト要素をレンダリングします。App Bridge React の<TitleBar>はそうではありません。このため、推奨される移行パスは、<Page>要素を維持しつつ、そのプロップを代わりに<TitleBar>に渡すことです。

以下の例では、非推奨の Polaris 埋め込みアプリ機能の使用から始まる移行パスを示しています。

import { AppProvider, Page } from "@shopify/polaris"

render(
  <AppProvider apiKey="api_key" host="example.myshopify.com">
    <Page
      title="My App using legacy code"
      breadcrumbs={[{ content: "Breadcrumb" }]}
      primaryAction={primaryAction}
      secondaryActions={secondaryActions}
      actionGroups={actionGroups}
    >
      {content}
    </Page>
  </AppProvider>
)

推奨される移行パスでは、App Bridge React と Polaris の<Page>コンポーネントを使用します。

import { AppProvider, Page } from "@shopify/polaris"
import { Provider as AppBridgeProvider, TitleBar } from "@shopify/app-bridge-react"

render(
  <AppProvider>
    <AppBridgeProvider config={{ apiKey: "api_key", host: "example.myshopify.com" }}>
      <Page>
        <TitleBar
          title="My App using up-to-date code"
          breadcrumbs={[{ content: "Breadcrumb" }]}
          primaryAction={primaryAction}
          secondaryActions={secondaryActions}
          actionGroups={actionGroups}
        />
        {content}
      </Page>
    </AppBridgeProvider>
  </AppProvider>
)

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

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