Liquid、JavaScriptなどに関する質問
数日前からShopifyのアプリ開発を始めたのですが、Polarisの情報が全くなく、困っていたので質問させていただきます。
内容としましては、このような形でボタンを4つ配置したいと考えています。
Titlebarの中にボタンを4つ配置する方法がわからず、試しにButtonGroupを
使用しても実装が出来なかったので、どなたかお力を貸していただけないでしょうか。
よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
お世話になっております。
下記に記載のコードで解決することが出来ましたので、共有させていただきます。
<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>
この度はボタンについて回答いただきありがとうございました。
今後もアプリについて質問をすることがあると思いますが、
その際は何卒よろしくお願いいたします。
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と申します。
ご回答いただきありがとうございます。
せっかくコードまで書いていただいて申し訳ないのですが、
@/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;
株式会社フルバランス様
お世話になっております。
ご回答いただきありがとうございます。
またコードを書いていただきありがとうございます。
申し訳ないのですが、こちらのコードを使っても実装することが出来ませんでした・・。
教えて頂いたこのコードを応用して実装させるところまでやりたいと思います。
出来ましたらサンプルコード集のところにコードを書こうと思います。
また、質問することがあるかと思いますが、その時は何卒、よろしくお願いいたします。
成功
お世話になっております。
下記に記載のコードで解決することが出来ましたので、共有させていただきます。
<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>
この度はボタンについて回答いただきありがとうございました。
今後もアプリについて質問をすることがあると思いますが、
その際は何卒よろしくお願いいたします。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024