⭐️
【Polaris和訳】Components/Feedback indicators
この記事について
この記事は、Polaris/Components/Feedback indicatorsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Banner
重要な変更や永続的な条件をマーチャントに通知します。マーチャントに目立つように伝える必要がある場合、このコンポーネントを使用します。バナーは、適用されるページやセクションの上部、ページやセクションのヘッダーの下に配置されます。
Web
Default banners
-
一般的な情報や、重要ではないアクションを伝えるために使用します。例えば、マーチャントからのフィードバックを求めるバナーを表示する場合などです。
-
デフォルトのバナーには優先度の低い情報が含まれているため、必ず解除してください。
React
<Banner title="Order archived" onDismiss={() => {}}>
<p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
</Banner>
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--hasDismiss Polaris-Banner--withinPage"
tabindex="0"
role="status"
aria-live="polite"
aria-labelledby="PolarisBanner2Heading"
aria-describedby="PolarisBanner2Content"
>
<div class="Polaris-Banner__Dismiss">
<button
class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
aria-label="Dismiss notification"
type="button"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
></path></svg></span></span
></span>
</button>
</div>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
fill-rule="evenodd"
d="M10 20c5.514 0 10-4.486 10-10S15.514 0 10 0 0 4.486 0 10s4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Heading" id="PolarisBanner2Heading">
<p class="Polaris-Heading">Order archived</p>
</div>
<div class="Polaris-Banner__Content" id="PolarisBanner2Content">
<p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックスでの編集
Dismissible banner
重要な情報やマーチャントが取るべき重要なアクションが含まれている場合を除き、すべてのバナーを表示しないようにします。
React
<Banner onDismiss={() => {}}>
<p>
Use your finance report to get detailed information about your business.{" "}
<Link url="">Let us know what you think</Link>
</p>
</Banner>
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--hasDismiss Polaris-Banner--withinPage"
tabindex="0"
role="status"
aria-live="polite"
aria-describedby="PolarisBanner12Content"
>
<div class="Polaris-Banner__Dismiss">
<button
class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
aria-label="Dismiss notification"
type="button"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
></path></svg></span></span
></span>
</button>
</div>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
fill-rule="evenodd"
d="M10 20c5.514 0 10-4.486 10-10S15.514 0 10 0 0 4.486 0 10s4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Content" id="PolarisBanner12Content">
<p>
Use your finance report to get detailed information about your business.
<button type="button" class="Polaris-Link Polaris-Link--monochrome">
Let us know what you think
</button>
</p>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックスでの編集
Banner with footer call-to-action
バナーを読んだマーチャントにアクションを起こしてもらいたい場合に使用します。
React
<Banner
title="Some of your product variants are missing weights"
status="warning"
action={{ content: "Edit variant weights", url: "" }}
secondary={{ content: "Learn more", url: "" }}
onDismiss={() => {}}
>
<p>Add weights to show accurate rates at checkout and when buying shipping labels in Shopify.</p>
</Banner>
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--statusWarning Polaris-Banner--hasDismiss Polaris-Banner--withinPage"
tabindex="0"
role="alert"
aria-live="polite"
aria-labelledby="PolarisBanner4Heading"
aria-describedby="PolarisBanner4Content"
>
<div class="Polaris-Banner__Dismiss">
<button
class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
aria-label="Dismiss notification"
type="button"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
></path></svg></span></span
></span>
</button>
</div>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorWarning Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
fill-rule="evenodd"
d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zM9 6a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0V6zm1 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Heading" id="PolarisBanner4Heading">
<p class="Polaris-Heading">Some of your product variants are missing weights</p>
</div>
<div class="Polaris-Banner__Content" id="PolarisBanner4Content">
<p>
Add weights to show accurate rates at checkout and when buying shipping labels in Shopify.
</p>
<div class="Polaris-Banner__Actions">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<div class="Polaris-Banner__PrimaryAction">
<button class="Polaris-Banner__Button" type="button">Edit variant weights</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックスでの編集
Informational banners
マーチャンダイジングの変更点をお知らせしたり、アドバイスをしたりするときに使います。
React
<Banner
title="USPS has updated their rates"
action={{ content: "Update rates", url: "" }}
secondaryAction={{ content: "Learn more" }}
status="info"
onDismiss={() => {}}
>
<p>Make sure you know how these changes affect your store.</p>
</Banner>
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--statusInfo Polaris-Banner--hasDismiss Polaris-Banner--withinPage"
tabindex="0"
role="status"
aria-live="polite"
aria-labelledby="PolarisBanner6Heading"
aria-describedby="PolarisBanner6Content"
>
<div class="Polaris-Banner__Dismiss">
<button
class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
aria-label="Dismiss notification"
type="button"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
></path></svg></span></span
></span>
</button>
</div>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorHighlight Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
fill-rule="evenodd"
d="M10 20c5.514 0 10-4.486 10-10S15.514 0 10 0 0 4.486 0 10s4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Heading" id="PolarisBanner6Heading">
<p class="Polaris-Heading">USPS has updated their rates</p>
</div>
<div class="Polaris-Banner__Content" id="PolarisBanner6Content">
<p>Make sure you know how these changes affect your store.</p>
<div class="Polaris-Banner__Actions">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<div class="Polaris-Banner__PrimaryAction">
<button class="Polaris-Banner__Button" type="button">Update rates</button>
</div>
</div>
<div class="Polaris-ButtonGroup__Item">
<button class="Polaris-Banner__SecondaryAction" type="button">
<span class="Polaris-Banner__Text">Learn more</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックス内での編集
Success banner
- 成功したメッセージには、フィードバックが遅れたり、持続したり、行動を促すものでない限り、デフォルトで乾杯を使用する。
- 必要に応じて次のステップを含める
React
<Banner
title="Your shipping label is ready to print."
status="success"
action={{ content: "Print label" }}
onDismiss={() => {}}
/>
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--statusSuccess Polaris-Banner--hasDismiss Polaris-Banner--withinPage"
tabindex="0"
role="status"
aria-live="polite"
aria-labelledby="PolarisBanner8Heading"
aria-describedby="PolarisBanner8Content"
>
<div class="Polaris-Banner__Dismiss">
<button
class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
aria-label="Dismiss notification"
type="button"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
></path></svg></span></span
></span>
</button>
</div>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorSuccess Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
fill-rule="evenodd"
d="M0 10a10 10 0 1 0 20 0 10 10 0 0 0-20 0zm15.2-1.8a1 1 0 0 0-1.4-1.4L9 11.6 6.7 9.3a1 1 0 0 0-1.4 1.4l3 3c.4.4 1 .4 1.4 0l5.5-5.5z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Heading" id="PolarisBanner8Heading">
<p class="Polaris-Heading">Your shipping label is ready to print.</p>
</div>
<div class="Polaris-Banner__Content" id="PolarisBanner8Content">
<div class="Polaris-Banner__Actions">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<div class="Polaris-Banner__PrimaryAction">
<button class="Polaris-Banner__Button" type="button">Print label</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックス内での編集
Warning banners
- 注意が必要な情報や、マーチャントがアクションを起こす必要がある情報を表示する場合に使用します。
- このようなバナーを目にすることは、マーチャントにとってストレスになりますので、使用には注意が必要です。
React
<Banner
title="Before you can purchase a shipping label, this change needs to be made:"
action={{ content: "Edit address" }}
status="warning"
>
<List>
<List.Item>
The name of the city you’re shipping to has characters that aren’t allowed. City name can only
include spaces and hyphens.
</List.Item>
</List>
</Banner>
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--statusWarning Polaris-Banner--withinPage"
tabindex="0"
role="alert"
aria-live="polite"
aria-labelledby="PolarisBanner10Heading"
aria-describedby="PolarisBanner10Content"
>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorWarning Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
fill-rule="evenodd"
d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zM9 6a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0V6zm1 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Heading" id="PolarisBanner10Heading">
<p class="Polaris-Heading">
Before you can purchase a shipping label, this change needs to be made:
</p>
</div>
<div class="Polaris-Banner__Content" id="PolarisBanner10Content">
<ul class="Polaris-List">
<li class="Polaris-List__Item">
The name of the city you’re shipping to has characters that aren’t allowed. City name
can only include spaces and hyphens.
</li>
</ul>
<div class="Polaris-Banner__Actions">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<div class="Polaris-Banner__PrimaryAction">
<button class="Polaris-Banner__Button" type="button">Edit address</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックス内での編集
Critical banners
- マーチャントがタスクを完了するために、すぐに解決しなければならない問題を伝えるために使用する
- 例えば、詐欺のリスクが高い注文にはこのバナーを表示します。
- このようなバナーを見ることは、マーチャントにとってストレスになりますので、使用には注意が必要です。
React
<Banner
title="High risk of fraud detected"
action={{ content: "Review risk analysis" }}
status="critical"
>
<p>
Before fulfilling this order or capturing payment, please{" "}
<Link url="">review the Risk Analysis</Link> and determine if this order is fraudulent.
</p>
</Banner>
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--statusCritical Polaris-Banner--withinPage"
tabindex="0"
role="alert"
aria-live="polite"
aria-labelledby="PolarisBanner12Heading"
aria-describedby="PolarisBanner12Content"
>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorCritical Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
d="M11.768.768a2.5 2.5 0 0 0-3.536 0L.768 8.232a2.5 2.5 0 0 0 0 3.536l7.464 7.464a2.5 2.5 0 0 0 3.536 0l7.464-7.464a2.5 2.5 0 0 0 0-3.536L11.768.768zM9 6a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0V6zm2 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Heading" id="PolarisBanner12Heading">
<p class="Polaris-Heading">High risk of fraud detected</p>
</div>
<div class="Polaris-Banner__Content" id="PolarisBanner12Content">
<p>
Before fulfilling this order or capturing payment, please
<button type="button" class="Polaris-Link Polaris-Link--monochrome">
review the Risk Analysis
</button>
and determine if this order is fraudulent.
</p>
<div class="Polaris-Banner__Actions">
<div class="Polaris-ButtonGroup">
<div class="Polaris-ButtonGroup__Item">
<div class="Polaris-Banner__PrimaryAction">
<button class="Polaris-Banner__Button" type="button">Review risk analysis</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックス内での編集
Banner in a modal
モーダルの中のバナーは、コンテンツの文脈に合わせて、間隔を狭くし、デザインを抑えて表示されます。
React
function BannerInModalExample() {
const [active, setActive] = useState(false)
const handleChange = useCallback(() => setActive(!active), [active])
return (
<div style={{ height: "500px" }}>
<Button onClick={handleChange}>Open</Button>
<Modal
open={active}
onClose={handleChange}
title="Reach more shoppers with Instagram product tags"
primaryAction={{
content: "Add Instagram",
onAction: handleChange,
}}
secondaryActions={[
{
content: "Learn more",
onAction: handleChange,
},
]}
>
<Modal.Section>
<TextContainer>
<Banner action={{ content: "Connect account" }} status="warning">
<p>Connect your instagram account to your shop before proceeding.</p>
</Banner>
<p>
Use Instagram posts to share your products with millions of people. Let shoppers buy
from your store without leaving Instagram.
</p>
</TextContainer>
</Modal.Section>
</Modal>
</div>
)
}
HTML
<div>
<div style="height: 500px;">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Open</span></span>
</button>
</div>
<div id="PolarisPortalsContainer">
<div data-portal-id="modal-Polarisportal2">
<div></div>
</div>
</div>
</div>
<div></div>
サンドボックス内での編集
Banner with focus
バナーはプログラムでフォーカスを受けることができます。この機能を使って、マーチャントの注意をバナーに向けさせることができます。
React
function BannerWithFocusExample() {
const banner = useRef()
useEffect(() => banner.current.focus(), [])
return (
<Banner title="High risk of fraud detected" onDismiss={() => {}} status="critical" ref={banner}>
<p>
Before fulfilling this order or capturing payment, please review the fraud analysis and
determine if this order is fraudulent
</p>
</Banner>
)
}
HTML
<div>
<div
class="Polaris-Banner Polaris-Banner--statusCritical Polaris-Banner--hasDismiss Polaris-Banner--keyFocused Polaris-Banner--withinPage"
tabindex="0"
role="alert"
aria-live="polite"
aria-labelledby="PolarisBanner4Heading"
aria-describedby="PolarisBanner4Content"
data-focus-visible-added=""
>
<div class="Polaris-Banner__Dismiss">
<button
class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
aria-label="Dismiss notification"
type="button"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
></path></svg></span></span
></span>
</button>
</div>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorCritical Polaris-Icon--applyColor"
><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path
d="M11.768.768a2.5 2.5 0 0 0-3.536 0L.768 8.232a2.5 2.5 0 0 0 0 3.536l7.464 7.464a2.5 2.5 0 0 0 3.536 0l7.464-7.464a2.5 2.5 0 0 0 0-3.536L11.768.768zM9 6a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0V6zm2 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Heading" id="PolarisBanner4Heading">
<p class="Polaris-Heading">High risk of fraud detected</p>
</div>
<div class="Polaris-Banner__Content" id="PolarisBanner4Content">
<p>
Before fulfilling this order or capturing payment, please review the fraud analysis and
determine if this order is fraudulent
</p>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックス内での編集
Banner in a card
カード内のバナーは、コンテンツの内容に合わせて間隔を狭め、デザインを抑えて表示しています。
React
<Card title="Online store dashboard" sectioned>
<TextContainer>
<Banner onDismiss={() => {}}>
<p>
Use your finance report to get detailed information about your business.{" "}
<Link url="">Let us know what you think</Link>
</p>
</Banner>
<p>View a summary of your online store’s performance.</p>
</TextContainer>
</Card>
HTML
<div>
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Online store dashboard</h2>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-TextContainer">
<div
class="Polaris-Banner Polaris-Banner--hasDismiss Polaris-Banner--withinContentContainer"
tabindex="0"
role="status"
aria-live="polite"
aria-describedby="PolarisBanner6Content"
>
<div class="Polaris-Banner__Dismiss">
<button
class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly"
aria-label="Dismiss notification"
type="button"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
></path></svg></span></span
></span>
</button>
</div>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 20c5.514 0 10-4.486 10-10S15.514 0 10 0 0 4.486 0 10s4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Content" id="PolarisBanner6Content">
<p>
Use your finance report to get detailed information about your business.
<button type="button" class="Polaris-Link Polaris-Link--monochrome">
Let us know what you think
</button>
</p>
</div>
</div>
</div>
<p>View a summary of your online store’s performance.</p>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックス内での編集
Banner in navigation
ナビゲーションの内側にあるバナーは、コンテンツの文脈に合うように、間隔を狭め、控えめなデザインにしています。
React
<Navigation location="/">
<Navigation.Section
items={[
{
url: "/path/to/place",
label: "Home",
icon: HomeMajor,
},
]}
/>
<Banner status="info">
<p>Preview version: 2019-07</p>
</Banner>
</Navigation>
HTML
<div>
<nav class="Polaris-Navigation">
<div
class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--verticalHasScrolling"
data-polaris-scrollable="true"
>
<ul class="Polaris-Navigation__Section">
<li class="Polaris-Navigation__ListItem">
<div class="Polaris-Navigation__ItemWrapper">
<a
class="Polaris-Navigation__Item"
tabindex="0"
href="/path/to/place"
data-polaris-unstyled="true"
>
<div class="Polaris-Navigation__Icon">
<span class="Polaris-Icon"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
></path></svg
></span>
</div>
<span class="Polaris-Navigation__Text">Home</span>
</a>
</div>
</li>
</ul>
<div
class="Polaris-Banner Polaris-Banner--statusInfo Polaris-Banner--withinContentContainer"
tabindex="0"
role="status"
aria-live="polite"
aria-describedby="PolarisBanner8Content"
>
<div class="Polaris-Banner__Ribbon">
<span class="Polaris-Icon Polaris-Icon--colorHighlight Polaris-Icon--applyColor"
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 20c5.514 0 10-4.486 10-10S15.514 0 10 0 0 4.486 0 10s4.486 10 10 10zm1-6a1 1 0 1 1-2 0v-4a1 1 0 1 1 2 0v4zm-1-9a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
></path></svg
></span>
</div>
<div class="Polaris-Banner__ContentWrapper">
<div class="Polaris-Banner__Content" id="PolarisBanner8Content">
<p>Preview version: 2019-07</p>
</div>
</div>
</div>
</div>
</nav>
<div id="PolarisPortalsContainer"></div>
</div>
サンドボックス内での編集
Props
action
Object
accessibilityLabel
type: string
スクリーンリーダー用の視覚的に隠されたテキスト
content
type: string
アクションが表示するコンテンツ
disabled
type: boolean
アクションが無効であるかどうか
external
type: boolean
url を新しいタブで開くようにする
id
type: string
アクションのためのユニークな識別子
url
type: string
アクションの中で表示されるリンク先。
onAction
type: () => void
アクションが発生したときのコールバック
onMouseEnter
type: () => void
マウスが入力されたときのコールバック
onTouchStart
type: () => void
要素がタッチされたときのコールバック
loading
type: boolean
スピナーを表示するかどうか
DisableableAction & LoadableAction
バナー用アクション
children
React.ReactNode
バナーでレンダリングする子要素。
icon
Type
string
type: string
Or
FunctionComponent
type: FunctionComponent
string | FunctionComponent
バナーに表示するアイコンです。メジャーデュオトーンアイコンのみを使用。
secondaryAction
Object
accessibilityLabel
type: string
スクリーンリーダー用の視覚的に隠されたテキスト
content
type: string
アクションが表示するコンテンツ
external
type: boolean
url を新しいタブで開くようにする
id
type: string
アクションのためのユニークな識別子
url
type: string
アクションの中で表示されるリンク先。
onAction
type: () => void
アクションが発生したときのコールバック
onMouseEnter
type: () => void
マウスが入力されたときのコールバック
onTouchStart
type: () => void
要素がタッチされたときのコールバック
Action
アクション｜セカンダリーアクションを表示します
status
Type
success
type: "success"
Or
info
type: "info"
Or
warning
type: "warning"
Or
critical
type: "critical"
"success" | "info" | "warning" | "critical"
バナーのステータスを設定します。
stopAnnouncements
boolean
バナーの内容を変更する際、スクリーンリーダーのアナウンスを無効にする
title
string
バナーのタイトルコンテンツ
onDismiss
() => void
バナーが却下されたときのコールバック
アクセシビリティ
バナーは、障害のあるマーチャントにコンテキストを提供し、ワークフローを支援します。
- 重要なバナーと警告バナーには
role="alert"が設定されており、バナーが表示されると支援技術によって通知されます。 - その他のバナーには
role="status"が設定されており、重要なお知らせが表示された後に読み上げられます。 - すべてのバナーには
aria-live属性があり、コンテンツが更新されると支援技術によって告知されます。これらのアナウンスは、prop stopAnnouncements を使って無効にできます。 - バナーは、発表されたりフォーカスを受けたりするときに、支援技術にその目的を説明するために
aria-describedbyを使用します。バナーにタイトルがある場合は、タイトルの内容が aria-describedby に使用されます。バナーにタイトルがない場合は、バナーのコンテンツのすべてが aria-describedby に使用されます。 - バナーコンテナには
tabindex="0"が設定され、キーボードフォーカスインジケータが表示されます。このため、マーチャントはフォームやその他のインタラクションをタブで開きながらバナーを発見することができ、デベロッパーはプログラムでバナーにフォーカスを移すことができます。 - バナーは、アイコンと色の組み合わせで、マーチャントにとっての意味や重要度を表しています。
フォームのエラー通知
重要バナー
マーチャントが長いフォームや複雑なフォームを送信してエラーが発生した場合、クリティカルバナーを使用して何が問題だったのかを要約します。バナーはフォームの上部に配置し、フォームが送信されるとバナーにフォーカスが移ります。これにより、すべてのマーチャントが論理的な順序でフォームに進み、問題を修正することができます。
インラインエラー
フォームの特定のフィールドには必ずインラインのエラーメッセージを表示し、マーチャントがミスを修正する際に何をすべきかがわかるようにします。
エラーメッセージの作成方法については、エラーメッセージのガイドラインをご覧ください。
Android
Android
デフォルトのバナー
- 重要ではない一般的な情報や行動を伝えるために使用します。例えば、マーチャントのフィードバックを求めるバナーを表示する場合などです。
- 既定のバナーには優先度の低い情報が含まれているため、常に表示しないようにしてください。
フッターコールトゥアクション付きバナー
バナーを読んだマーチャントにアクションを起こしてもらいたい場合に使用します。
お知らせバナー
マーチャントに変更点を知らせたり、アドバイスをしたりする場合に使用します。
成功バナー
- 成功メッセージにはデフォルトで乾杯を使用します。ただし、フィードバックが遅延していたり、持続的であったり、行動を促すものではありません。
- 必要に応じて次のステップを表示します。
警告バナー
- 注意が必要な情報や、マーチャントが行動を起こす必要がある情報を表示する場合に使用します。
- これらのバナーを見ることは、マーチャントにとってストレスになるので、使用には注意が必要です。
クリティカルバナー
- マーチャントがタスクを完了するために、すぐに解決しなければならない問題を伝えるために使用します。
- 例えば、詐欺のリスクが高い注文にこのバナーを表示します。
- このようなバナーを見ることは、マーチャントにとってストレスになりますので、使用には注意が必要です。
アクセシビリティ
Android のアクセシビリティについては、Material Design と開発ドキュメントをご覧ください。
iOS
iOS
デフォルトのバナー
- 重要ではない一般的な情報や行動を伝えるために使用します。例えば、マーチャントのフィードバックを求めるバナーを表示する場合などです。
- 既定のバナーには優先度の低い情報が含まれているため、常に表示しないようにしてください。
フッターコールトゥアクション付きバナー
バナーを読んだマーチャントにアクションを起こしてもらいたい場合に使用します。
お知らせバナー
マーチャントに変更点を知らせたり、アドバイスをしたりする場合に使用します。
成功バナー
- 成功メッセージにはデフォルトで乾杯を使用します。ただし、フィードバックが遅延していたり、持続的であったり、行動を促すものではありません。
- 必要に応じて次のステップを表示します。
警告バナー
- 注意が必要な情報や、マーチャントが行動を起こす必要がある情報を表示する場合に使用します。
- これらのバナーを見ることは、マーチャントにとってストレスになるので、使用には注意が必要です。
クリティカルバナー
- マーチャントがタスクを完了するために、すぐに解決しなければならない問題を伝えるために使用します。
- 例えば、詐欺のリスクが高い注文にこのバナーを表示します。
- このようなバナーを見ることは、マーチャントにとってストレスになりますので、使用には注意が必要です。
アクセシビリティ
iOS のアクセシビリティについては、Apple のヒューマン・インターフェース・ガイドラインや API ドキュメントをご覧ください。
ベストプラクティス
バナーは
- 適切な位置に配置する。
- ページ全体に関連するバナーは、そのページの最上部、ページヘッダーの下に配置します。また、コンテンツエリアの幅いっぱいに配置してください。
- ページのセクション（カード、ポップオーバー、モーダルなど）に関連するバナーは、そのセクション内で、セクションの見出しの下に配置します。これらのバナーは、コンテンツの文脈に合うように、スペースを少なくし、控えめなデザインにします。
- セクションよりも特定の要素に関連するバナーは、その要素のすぐ上か下に配置します。
- 1 つのテーマ、情報、または必要なアクションに焦点を当て、マーチャントを圧倒しないようにします。
- 重要な情報や、顧客が取るべき重要なステップが含まれていない限り、表示しないようにします。
- 簡潔でスキャン可能であること。マーチャントは、何を知り、何をしなければならないかを理解するために多くの時間を費やす必要はありません。
- いくつかの重要なコールトゥアクションに限定し、主要なアクションは 1 つだけにしましょう。
- 最も重要な情報だけに、慎重かつ控えめに使用すること。
- お客様が日常的に必要とする情報や行動を得るための主要な入り口として使用しないこと。
- マーケティング情報やアップセルには、コールアウトカードを使用してください。
- 「成功」、「情報」、「警告」、「重要」の各ステータスには、デフォルトのアイコンを使用してください。アイコンを変更する場合は、主要なデュオトーンのアイコンのみを使用してください。
コンテンツのガイドライン
アクセシビリティに配慮したエラーメッセージの書き方については、「エラーメッセージのガイドライン」を参照してください。
タイトル
バナーのタイトルは、見出しと小見出しのコンテンツガイドラインに従ってください。
ボディコンテンツ
本文の内容は以下の通りです。
- 簡潔であること：可能な限り 1 ～ 2 センテンスに収める。
- メインタスクの利点を明確にする
- 文章は大文字で書き、適切な句読点を使用する。
- 見出しの繰り返しを避ける
- 問題を解決する方法を説明する（特に警告や重要なバナーの場合）。
ボタンとリンク
ボタンとリンクは以下のようにあるべきです。
- 明確で予測可能であること：マーチャントはボタンをクリックしたときに何が起こるかを予測できなければなりません。ボタンのラベルを間違えてマーチャントを騙してはいけません。
- Action-led（行動を促す）：ボタンには必ず行動を促す強い動詞を入れてください。マーチャントに十分なコンテキストを提供するために、Save、Close、Cancel、OK などの一般的なアクションの場合を除き、ボタンには{動詞}+{名詞}のフォーマットを使用します。
- スキャン可能：the、an、a などの不要な単語や冠詞を避けます。
リンクテキストは
- マーチャントがどこに連れて行かれるのかという期待感を持たせる
- 一貫した内容でナビゲーションを表示します。例えば、ナビゲーションリンクが「Orders」というページにつながっている場合、リンクに「Orders」と表示します。
セカンダリーボディコンテンツ
本文の内容は以下のようにします。
- Actionable: マーチャントにどのようなアクションが可能か（特に新しいこと）を伝えるときは、命令形の動詞で文章を始めます。You can」のような寛容な言葉は使わないでください。
- マーチャントの成功のための構造化：常に最も重要な情報を最初に置きます。
- 明確：マーチャントが何かを要求されたときに理解できるように、「必要」という動詞を使います。
関連コンポーネント
Proogress bar
プログレスバーコンポーネントは、タスクや操作の完了を視覚的に表現するために使用されます。タスクがどれだけ完了しているか、どれだけ残っているかを表示します。
Default
タスクや操作の完了を視覚的に表現するためのコンポーネントです。
React
<ProgressBar progress={75} />
HTML
<div>
<div
class="Polaris-ProgressBar Polaris-ProgressBar--sizeMedium Polaris-ProgressBar--colorHighlight"
>
<progress class="Polaris-ProgressBar__Progress" value="75" max="100"></progress>
<div class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__Animated" style="width: 75%;">
<span class="Polaris-ProgressBar__Label">75%</span>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Small progress bar
サイズオプションは、プログレスバーの視覚的な重量を増減させる必要がある場合に使用します。
React
<ProgressBar progress={40} size="small" />
HTML
<div>
<div
class="Polaris-ProgressBar Polaris-ProgressBar--sizeSmall Polaris-ProgressBar--colorHighlight"
>
<progress class="Polaris-ProgressBar__Progress" value="40" max="100"></progress>
<div class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__Animated" style="width: 40%;">
<span class="Polaris-ProgressBar__Label">40%</span>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Colored progress bars
カラーオプションは、成功に向けて進んでいる場合や、プログレスバーが主役になっている場合など、プログレスバーを必要とする状況でブレンドする必要がある場合に使用します。
React
<div>
<ProgressBar progress={70} color="primary" />
<br />
<ProgressBar progress={30} color="success" />
</div>
HTML
<div>
<div>
<div
class="Polaris-ProgressBar Polaris-ProgressBar--sizeMedium Polaris-ProgressBar--colorPrimary"
>
<progress class="Polaris-ProgressBar__Progress" value="70" max="100"></progress>
<div class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__Animated" style="width: 70%;">
<span class="Polaris-ProgressBar__Label">70%</span>
</div>
</div>
<br />
<div
class="Polaris-ProgressBar Polaris-ProgressBar--sizeMedium Polaris-ProgressBar--colorSuccess"
>
<progress class="Polaris-ProgressBar__Progress" value="30" max="100"></progress>
<div class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__Animated" style="width: 30%;">
<span class="Polaris-ProgressBar__Label">30%</span>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Non-animated progress bar
静的なプログレスバーを表示したい場合は、アニメーションプロップを使用します。
React
<ProgressBar progress={80} animated={false} />
HTML
<div>
<div
class="Polaris-ProgressBar Polaris-ProgressBar--sizeMedium Polaris-ProgressBar--colorHighlight"
>
<progress class="Polaris-ProgressBar__Progress" value="80" max="100"></progress>
<div class="Polaris-ProgressBar__Indicator" style="width: 80%;">
<span class="Polaris-ProgressBar__Label">80%</span>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Props
animated
boolean
塗りつぶしのアニメーションが発生するかどうか
color
"highlight" | "primary" | "success" | "critical"
プログレスバーの色
progress
number
特定のタスクの進行状況
size
"small" | "medium" | "large"
プログレスバーのサイズ
ベストプラクティス
プログレスバーコンポーネントは
- マーチャントに、タスクがどれだけ完了し、どれだけ残っているかを示す。
- ページ全体の読み込みには使用しないでください。このような場合は、スケルトンページコンポーネントを使用してください。
関連コンポーネント
- 読み込み時間が短いタスクには、Spinner コンポーネントを使用します。
- ページ全体の読み込みには、Skeleton ページコンポーネントを使用します。
Skeleton body text
スケルトンテキストは、ページに表示される前のコンテンツを低忠実度で表現するために使用され、マーチャントが感じるロードタイムを改善します。カード内またはカード外のコンテンツに使用することができます。
Default paragraph
このコンポーネントは、読み込まれるコンテンツのブロックを表現するために使用します。例えば、商品ページの商品説明カード全体を表すのに使用できます。
Single line content
このコンポーネントは、タイムスタンプのような短い一行のテキストを表現します。
React
<SkeletonBodyText lines={1} />
HTML
<div>
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Props
lines
number
表示するライン数
ベストプラクティス
スケルトンボディのテキストコンポーネントは
- ページコンテンツが一度に読み込まれる場合は、スケルトンページと一緒に使用します。これらのコンポーネントは、ページが読み込まれたときにマーチャントにページのレイアウトを示すものです。
- 単独で使用する場合、コンテンツコンテナコンポーネント（カードなど）の中で使用する場合、およびメインページのロード後にコンテンツがロードされる場合に使用する。
- また、メインページの読み込み後にコンテンツが読み込まれる場合にも使用されます。正確な表現のために、読み込まれるコンテンツに合わせて行数を調整してください。
コンテンツのガイドライン
スケルトンボディテキスト
ページ上で変化することのない静的なコンテンツを表示し、動的なコンテンツにはスケルトンローディングを使用します。スケルトンテキストは、フォームなどの非定型コンテンツを表現するために使用されることがあります。ページが完全に読み込まれたときに変更されるプレースホルダーコンテンツは使用しないでください。
関連コンポーネント
- 読み込み中のページの内容を表現するには、このコンポーネントをスケルトン ページやスケルトン ディスプレイ テキストと一緒に使用します。
- コンテキスト操作のフィードバックを行う場合は、プログレスバーまたはスピナーコンポーネントを使用します。
Skeleton display text
スケルトン表示テキストは、ページに表示される前のコンテンツを低忠実度で表現するために使用され、マーチャントが感じるロードタイムを改善します。カード内またはカード外のコンテンツに使用することができます。
Medium and large display text
このコンポーネントは、レポート一覧ページの大きな測定値やページタイトルなど、中・大サイズの表示テキストを表すために使用します。
React
<SkeletonDisplayText size="medium" />
HTMl
<div>
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeMedium"
></div>
<div id="PolarisPortalsContainer"></div>
</div>
Extra large display text
このコンポーネントは、特大のディスプレイテキストを表現するために使用します。
React
<SkeletonDisplayText size="extraLarge" />
HTML
<div>
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeExtraLarge"
></div>
<div id="PolarisPortalsContainer"></div>
</div>
Small display text
このコンポーネントは、コンテンツの見出しなどの小さな表示テキストを表現するために使用します。
React
<SkeletonDisplayText size="small" />
HTML
<div>
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeSmall"
></div>
<div id="PolarisPortalsContainer"></div>
</div>
Props
size
"small" | "medium" | "large" | "extraLarge"
文字の大きさ
ベストプラクティス
スケルトン表示テキストコンポーネントは
- マーチャントに、ページが読み込まれたときのコンテンツのイメージを伝える。
- 表示テキストには、変更されない実際のコンテンツを使用する
コンテンツのガイドライン
スケルトン表示テキスト
ページ上で変更されることのない静的な表示テキストを表示します。例えば、商品一覧ページでは「商品」などのページタイトルを維持し、商品詳細ページでは変更されるページタイトルにスケルトンローディングを使用します。
関連コンポーネント
- 読み込み前のページの内容を表現するには、このコンポーネントをスケルトンページ、スケルトンボディテキストと一緒に使用します。
- コンテキスト操作のフィードバックを行う場合は、プログレスバーまたはスピナーコンポーネントを使用します。
Skeleton page
スケルトンページは、他のスケルトンローディングコンポーネントとともに使用され、コンテンツがページに表示される前に、ユーザーインターフェース（UI）の忠実度の低い表現を提供します。これにより、マーチャントが感じるロードタイムが改善されます。
Page with dynamic content
このコンポーネントを使用して、ページタイトルとヘッダーコンテンツが動的に変化するページの読み込みバージョンを構成します。
React
<SkeletonPage primaryAction secondaryActions={2}>
<Layout>
<Layout.Section>
<Card sectioned>
<SkeletonBodyText />
</Card>
<Card sectioned>
<TextContainer>
<SkeletonDisplayText size="small" />
<SkeletonBodyText />
</TextContainer>
</Card>
<Card sectioned>
<TextContainer>
<SkeletonDisplayText size="small" />
<SkeletonBodyText />
</TextContainer>
</Card>
</Layout.Section>
<Layout.Section secondary>
<Card>
<Card.Section>
<TextContainer>
<SkeletonDisplayText size="small" />
<SkeletonBodyText lines={2} />
</TextContainer>
</Card.Section>
<Card.Section>
<SkeletonBodyText lines={1} />
</Card.Section>
</Card>
<Card subdued>
<Card.Section>
<TextContainer>
<SkeletonDisplayText size="small" />
<SkeletonBodyText lines={2} />
</TextContainer>
</Card.Section>
<Card.Section>
<SkeletonBodyText lines={2} />
</Card.Section>
</Card>
</Layout.Section>
</Layout>
</SkeletonPage>
HTML
<div>
<div class="Polaris-SkeletonPage__Page" role="status" aria-label="Page loading">
<div class="Polaris-SkeletonPage__Header">
<div class="Polaris-SkeletonPage__TitleAndPrimaryAction">
<div class="Polaris-SkeletonPage__TitleWrapper">
<div class="Polaris-SkeletonPage__SkeletonTitle"></div>
</div>
<div class="Polaris-SkeletonPage__PrimaryAction">
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeLarge"
></div>
</div>
</div>
<div class="Polaris-SkeletonPage__Actions">
<div class="Polaris-SkeletonPage__Action" style="width: 100px;">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
<div class="Polaris-SkeletonPage__Action" style="width: 62px;">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
</div>
<div class="Polaris-SkeletonPage__Content">
<div class="Polaris-Layout">
<div class="Polaris-Layout__Section">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-TextContainer">
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeSmall"
></div>
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
</div>
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-TextContainer">
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeSmall"
></div>
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Layout__Section Polaris-Layout__Section--secondary">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-TextContainer">
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeSmall"
></div>
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
<div class="Polaris-Card Polaris-Card--subdued">
<div class="Polaris-Card__Section">
<div class="Polaris-TextContainer">
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeSmall"
></div>
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Page with static content
このコンポーネントを使用して、ページタイトルとヘッダーコンテンツが既知であり、同じままであるページのローディングバージョンを構成します。
React
<SkeletonPage title="Products" primaryAction secondaryActions={2}>
<Layout>
<Layout.Section>
<Card sectioned>
<SkeletonBodyText />
</Card>
<Card sectioned title="Images">
<SkeletonBodyText />
</Card>
<Card sectioned title="Variants">
<SkeletonBodyText />
</Card>
</Layout.Section>
<Layout.Section secondary>
<Card title="Sales channels">
<Card.Section>
<SkeletonBodyText lines={2} />
</Card.Section>
<Card.Section>
<SkeletonBodyText lines={1} />
</Card.Section>
</Card>
<Card title="Organization" subdued>
<Card.Section>
<SkeletonBodyText lines={2} />
</Card.Section>
<Card.Section>
<SkeletonBodyText lines={2} />
</Card.Section>
</Card>
</Layout.Section>
</Layout>
</SkeletonPage>
HTML
<div>
<div class="Polaris-SkeletonPage__Page" role="status" aria-label="Page loading">
<div class="Polaris-SkeletonPage__Header">
<div class="Polaris-SkeletonPage__TitleAndPrimaryAction">
<div class="Polaris-SkeletonPage__TitleWrapper">
<h1 class="Polaris-SkeletonPage__Title">Products</h1>
</div>
<div class="Polaris-SkeletonPage__PrimaryAction">
<div
class="Polaris-SkeletonDisplayText__DisplayText Polaris-SkeletonDisplayText--sizeLarge"
></div>
</div>
</div>
<div class="Polaris-SkeletonPage__Actions">
<div class="Polaris-SkeletonPage__Action" style="width: 92px;">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
<div class="Polaris-SkeletonPage__Action" style="width: 93px;">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
</div>
<div class="Polaris-SkeletonPage__Content">
<div class="Polaris-Layout">
<div class="Polaris-Layout__Section">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Images</h2>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Variants</h2>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
</div>
<div class="Polaris-Layout__Section Polaris-Layout__Section--secondary">
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Sales channels</h2>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
<div class="Polaris-Card Polaris-Card--subdued">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Organization</h2>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
<div class="Polaris-Card__Section">
<div class="Polaris-SkeletonBodyText__SkeletonBodyTextContainer">
<div class="Polaris-SkeletonBodyText"></div>
<div class="Polaris-SkeletonBodyText"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Props
breadcrumbs
boolean
ブレッドクラムの上にスケルトンを表示
children
React.ReactNode
スケルトンページでレンダリングする子要素です。
fullWidth
boolean
ページの通常の最大幅を削除します。
narrowWidth
boolean
レイアウトの最大幅を減少させます。シングルコラムのレイアウトを意図しています
primaryAction
boolean
プライマリアクションの上にスケルトンを表示します。
secondaryActions
number
表示するページレベルのセカンダリアクションの数
title
string
大きな文字で表示されるページタイトル
ベストプラクティス
スケルトンページコンポーネントは
- すべてのコンテンツが同時に読み込まれるページに使用してください。
- マーチャントに、読み込まれたときのページのレイアウトを示す。これは、ロードされる状態と同様にレイアウトを模倣することで行います。
コンテンツのガイドライン
ページのタイトルは変更しないようにしてください。例えば、商品一覧ページでは「商品」というタイトルを維持しますが、商品詳細ページでは変化するタイトルにスケルトンローディングを使用します。ページが完全にロードされたときに変更されるタイトルには、プレースホルダーコンテンツを使用しないでください。
セカンダリーアクションは常にスケルトンコンテンツで表現されます。スケルトンアクションの数は、一度読み込まれたアクションの数を最もよく表現するように変更できます。
関連コンポーネント
- コンテンツのブロックを表現するには、Skeleton body text コンポーネントと Skeleton display text コンポーネントを使用します。
- インコンテクスト操作のフィードバックには、プログレスバーまたはスピナーコンポーネントを使用します。
Skeleton thumbnail
スケルトンサムネイルは、ページに表示される前の画像を低忠実度で表現するために使用され、マーチャントが感じるロード時間を改善します。カード内またはカード外のサムネールに使用します。
Medium thumbnail
中型のサムネイルを表現するには、このコンポーネントを使用します。
React
<SkeletonThumbnail size="medium" />
HTML
<div>
<div class="Polaris-SkeletonThumbnail Polaris-SkeletonThumbnail--sizeMedium"></div>
<div id="PolarisPortalsContainer"></div>
</div>
Large thubnail
このコンポーネントは、大きなサムネイルを表現するために使用します。
React
<SkeletonThumbnail size="large" />
HTML
<div>
<div class="Polaris-SkeletonThumbnail Polaris-SkeletonThumbnail--sizeLarge"></div>
<div id="PolarisPortalsContainer"></div>
</div>
Small thumbnail
このコンポーネントは、小さなサムネイルを表現するために使用します。
React
<SkeletonThumbnail size="small" />
HTML
<div>
<div class="Polaris-SkeletonThumbnail Polaris-SkeletonThumbnail--sizeSmall"></div>
<div id="PolarisPortalsContainer"></div>
</div>
Props
size
"small" | "medium" | "large"
サムネイルのサイズ
ベストプラクティス
スケルトンサムネイルコンポーネントは
- サムネイルのサイズは、読み込まれるコンテンツに合わせて正確に表示するようにしてください。
関連コンポーネント
- 読み込み中のカードの内容を表現するには、このコンポーネントを Skeleton Display Text と一緒に使用します。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion