Shopify Polarisでタイトルバーにボタンを2個以上配置する方法

[daikussi]

数日前からShopifyのアプリ開発を始めたのですが、Polarisの情報が全くなく、困っていたので質問させていただきます。

内容としましては、このような形でボタンを4つ配置したいと考えています。

Titlebarの中にボタンを4つ配置する方法がわからず、試しにButtonGroupを

使用しても実装が出来なかったので、どなたかお力を貸していただけないでしょうか。

よろしくお願いいたします。

[株式会社フルバランス]

Daikussi 様

はじめまして、フルバランスの道家です。

ご質問を確認いたしました。

Polarisの実例が少なく、困るときありますよね。

以下のコードでできませんでしょうか。

import { Page, ButtonGroup } from '@shopify/polaris';
import { ButtonA ,ButtonB, ButtonC }from'@/components/buttons'

const ToolButtons = () => {
  return (
    <ButtonGroup>
      <ButtonA />
      <ButtonB />
      <ButtonC />
    </ButtonGroup>
  );
};

const TopPage = () => {
  <Page
    title="トップページ"
    primaryAction={ <ToolButtons />}
  ></Page>;
};

export default TopPage;

ButtonA, B, Cは適当なコードですので、置き換えて試していただけると幸いです。

なにかヒントになりましたら、嬉しいです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス　道家

[daikussi]

株式会社フルバランス　道家様

初めまして。Daikussiと申します。

ご回答いただきありがとうございます。

せっかくコードまで書いていただいて申し訳ないのですが、

@/components/buttons'のところで

「Failed to resolve import "@/components/buttons" from "pages\settings.jsx". Does the file exist?」

このようなエラーが出てしまい、試すことが出来ませんでした。

差し支えなければこちらについても教えて頂くことは可能でしょうか。

何卒宜しくお願いいたします。

Daikussi

[株式会社フルバランス]

お世話になっております。

早速にご確認いただきありがとうございます。

ButtonA,B,Cはダミーとして記述しておりましたので、以下で試していただけますでしょうか。

どうぞよろしくお願いいたします。

import { Page, ButtonGroup, Button } from '@shopify/polaris';

const ToolButtons = () => {
  return (
    <ButtonGroup>
      <Button>ButtonA</Button>
      <Button>ButtonB</Button>
      <Button>ButtonC</Button>
    </ButtonGroup>
  );
};

const TopPage = () => {
  <Page
    title="トップページ"
    primaryAction={<ToolButtons />}
  ></Page>;
};

export default TopPage;

[daikussi]

株式会社フルバランス様

お世話になっております。

ご回答いただきありがとうございます。

またコードを書いていただきありがとうございます。

申し訳ないのですが、こちらのコードを使っても実装することが出来ませんでした・・。

教えて頂いたこのコードを応用して実装させるところまでやりたいと思います。

出来ましたらサンプルコード集のところにコードを書こうと思います。

また、質問することがあるかと思いますが、その時は何卒、よろしくお願いいたします。

[daikussi · Accepted solution]

お世話になっております。

下記に記載のコードで解決することが出来ましたので、共有させていただきます。

<Page>
      <TitleBar
        title="タイトル"
        primaryAction={{
          content: "1番目",
          onAction: () => console.log("Primary action"),
        }}
        secondaryActions={[
          {
            content: "2番目",
            onAction: () => console.log("Secondary action"),
          },
          {
            content: "3番目",
            onAction: () => console.log("Secondary action"),
          },
          {
            content: "4番目",
            onAction: () => console.log("Secondary action"),
          }
        ]}
      />
<Page>

この度はボタンについて回答いただきありがとうございました。

今後もアプリについて質問をすることがあると思いますが、

その際は何卒よろしくお願いいたします。