⭐️
【Polaris和訳】Components/Structure④
この記事について
この記事は、Polaris/Components/Structureの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Top bar
マーチャントはトップバーコンポーネントを使って、検索、メニューへのアクセス、ロゴをクリックしてのナビゲートができます。トップバーは、Shopify や Shopify Plus などのインターフェースの上部に常に表示されています。トップバーを使用するサードパーティのアプリは、アプリプロバイダコンポーネントを使用して、自社ブランドに合わせて色をカスタマイズすることができますが、独自のロゴを使用する必要があります。
Top bar with all of its elements
アプリケーションの最上部の構造を提供するために使用します。テーマ付きのアプリプロバイダコンポーネントを使用して、トップバーコンポーネントのスタイルを設定します。トップバーコンポーネントのテーマに背景キーだけを与えると、インテリジェントなデフォルトとして、コントラストのあるテキストを持つ補色が設定されます。
React
function TopBarExample() {
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false)
const [isSecondaryMenuOpen, setIsSecondaryMenuOpen] = useState(false)
const [isSearchActive, setIsSearchActive] = useState(false)
const [searchValue, setSearchValue] = useState("")
const toggleIsUserMenuOpen = useCallback(
() => setIsUserMenuOpen((isUserMenuOpen) => !isUserMenuOpen),
[]
)
const toggleIsSecondaryMenuOpen = useCallback(
() => setIsSecondaryMenuOpen((isSecondaryMenuOpen) => !isSecondaryMenuOpen),
[]
)
const handleSearchResultsDismiss = useCallback(() => {
setIsSearchActive(false)
setSearchValue("")
}, [])
const handleSearchChange = useCallback((value) => {
setSearchValue(value)
setIsSearchActive(value.length > 0)
}, [])
const handleNavigationToggle = useCallback(() => {
console.log("toggle navigation visibility")
}, [])
const theme = {
logo: {
width: 124,
topBarSource:
"https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999",
url: "http://jadedpixel.com",
accessibilityLabel: "Jaded Pixel",
},
}
const userMenuMarkup = (
<TopBar.UserMenu
actions={[
{
items: [{ content: "Back to Shopify", icon: ArrowLeftMinor }],
},
{
items: [{ content: "Community forums" }],
},
]}
name="Dharma"
detail="Jaded Pixel"
initials="D"
open={isUserMenuOpen}
onToggle={toggleIsUserMenuOpen}
/>
)
const searchResultsMarkup = (
<ActionList items={[{ content: "Shopify help center" }, { content: "Community forums" }]} />
)
const searchFieldMarkup = (
<TopBar.SearchField
onChange={handleSearchChange}
value={searchValue}
placeholder="Search"
showFocusBorder
/>
)
const secondaryMenuMarkup = (
<TopBar.Menu
activatorContent={
<span>
<Icon source={QuestionMarkMajor} />
<VisuallyHidden>Secondary menu</VisuallyHidden>
</span>
}
open={isSecondaryMenuOpen}
onOpen={toggleIsSecondaryMenuOpen}
onClose={toggleIsSecondaryMenuOpen}
actions={[
{
items: [{ content: "Community forums" }],
},
]}
/>
)
const topBarMarkup = (
<TopBar
showNavigationToggle
userMenu={userMenuMarkup}
secondaryMenu={secondaryMenuMarkup}
searchResultsVisible={isSearchActive}
searchField={searchFieldMarkup}
searchResults={searchResultsMarkup}
onSearchResultsDismiss={handleSearchResultsDismiss}
onNavigationToggle={handleNavigationToggle}
/>
)
return (
<div style={{ height: "250px" }}>
<AppProvider
theme={theme}
i18n={{
Polaris: {
Avatar: {
label: "Avatar",
labelWithInitials: "Avatar with initials {initials}",
},
Frame: { skipToContent: "Skip to content" },
TopBar: {
toggleMenuLabel: "Toggle menu",
SearchField: {
clearButtonLabel: "Clear",
search: "Search",
},
},
},
}}
>
<Frame topBar={topBarMarkup} />
</AppProvider>
</div>
)
}
HTML
<div>
<div
style='--p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px;'
>
<div class="Polaris-Frame Polaris-Frame--hasTopBar" data-polaris-layer="true">
<div class="Polaris-Frame__Skip"><a href="#AppFrameMain">Skip to content</a></div>
<div
class="Polaris-Frame__TopBar"
data-polaris-layer="true"
data-polaris-top-bar="true"
id="AppFrameTopBar"
>
<div class="Polaris-TopBar">
<button type="button" class="Polaris-TopBar__NavigationIcon" aria-label="Toggle menu">
<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="M19 11H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14H1a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z"
></path></svg
></span>
</button>
<div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
<a
class="Polaris-TopBar__LogoLink"
href="http://jadedpixel.com"
data-polaris-unstyled="true"
style="width: 124px;"
><img
src="https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999"
alt="Jaded Pixel"
class="Polaris-TopBar__Logo"
style="width: 124px;"
/></a>
</div>
<div class="Polaris-TopBar__Contents">
<div class="Polaris-TopBar__SearchField">
<div class="Polaris-TopBar-SearchField">
<span class="Polaris-VisuallyHidden"
><label for="PolarisSearchField1">Search</label></span
><input
id="PolarisSearchField1"
class="Polaris-TopBar-SearchField__Input"
placeholder="Search"
type="search"
autocapitalize="off"
autocomplete="off"
autocorrect="off"
value=""
/><span class="Polaris-TopBar-SearchField__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 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
></path></svg></span
></span>
<div
class="Polaris-TopBar-SearchField__Backdrop Polaris-TopBar-SearchField__BackdropShowFocusBorder"
></div>
</div>
<div class="Polaris-TopBar-Search">
<div
style='--p-background:rgba(11, 12, 13, 1); --p-background-hovered:rgba(11, 12, 13, 1); --p-background-pressed:rgba(11, 12, 13, 1); --p-background-selected:rgba(11, 12, 13, 1); --p-surface:rgba(32, 33, 35, 1); --p-surface-neutral:rgba(49, 51, 53, 1); --p-surface-neutral-hovered:rgba(49, 51, 53, 1); --p-surface-neutral-pressed:rgba(49, 51, 53, 1); --p-surface-neutral-disabled:rgba(49, 51, 53, 1); --p-surface-neutral-subdued:rgba(68, 71, 74, 1); --p-surface-subdued:rgba(26, 28, 29, 1); --p-surface-disabled:rgba(26, 28, 29, 1); --p-surface-hovered:rgba(47, 49, 51, 1); --p-surface-pressed:rgba(62, 64, 67, 1); --p-surface-depressed:rgba(80, 83, 86, 1); --p-surface-search-field:rgba(47, 49, 51, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(33, 33, 33, 0.5); --p-shadow-from-dim-light:rgba(255, 255, 255, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(255, 255, 255, 0.15); --p-hint-from-direct-light:rgba(185, 185, 185, 0.2); --p-border:rgba(80, 83, 86, 1); --p-border-neutral-subdued:rgba(130, 135, 139, 1); --p-border-hovered:rgba(80, 83, 86, 1); --p-border-disabled:rgba(103, 107, 111, 1); --p-border-subdued:rgba(130, 135, 139, 1); --p-border-depressed:rgba(142, 145, 145, 1); --p-border-shadow:rgba(91, 95, 98, 1); --p-border-shadow-subdued:rgba(130, 135, 139, 1); --p-divider:rgba(69, 71, 73, 1); --p-icon:rgba(166, 172, 178, 1); --p-icon-hovered:rgba(225, 227, 229, 1); --p-icon-pressed:rgba(166, 172, 178, 1); --p-icon-disabled:rgba(84, 87, 90, 1); --p-icon-subdued:rgba(120, 125, 129, 1); --p-text:rgba(227, 229, 231, 1); --p-text-disabled:rgba(111, 115, 119, 1); --p-text-subdued:rgba(153, 159, 164, 1); --p-interactive:rgba(54, 163, 255, 1); --p-interactive-disabled:rgba(38, 98, 182, 1); --p-interactive-hovered:rgba(103, 175, 255, 1); --p-interactive-pressed:rgba(136, 188, 255, 1); --p-icon-interactive:rgba(54, 163, 255, 1); --p-focused:rgba(38, 98, 182, 1); --p-surface-selected:rgba(2, 14, 35, 1); --p-surface-selected-hovered:rgba(7, 29, 61, 1); --p-surface-selected-pressed:rgba(13, 43, 86, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(77, 80, 83, 1); --p-action-secondary-disabled:rgba(32, 34, 35, 1); --p-action-secondary-hovered:rgba(84, 87, 91, 1); --p-action-secondary-pressed:rgba(96, 100, 103, 1); --p-action-secondary-depressed:rgba(123, 127, 132, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(0, 86, 64, 1); --p-action-primary-hovered:rgba(0, 150, 113, 1); --p-action-primary-pressed:rgba(0, 164, 124, 1); --p-action-primary-depressed:rgba(0, 179, 136, 1); --p-icon-on-primary:rgba(230, 255, 244, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 141, 106, 1); --p-text-primary-hovered:rgba(0, 158, 120, 1); --p-text-primary-pressed:rgba(0, 176, 133, 1); --p-surface-primary-selected:rgba(12, 18, 16, 1); --p-surface-primary-selected-hovered:rgba(40, 48, 44, 1); --p-surface-primary-selected-pressed:rgba(54, 64, 59, 1); --p-border-critical:rgba(227, 47, 14, 1); --p-border-critical-subdued:rgba(227, 47, 14, 1); --p-border-critical-disabled:rgba(131, 23, 4, 1); --p-icon-critical:rgba(218, 45, 13, 1); --p-surface-critical:rgba(69, 7, 1, 1); --p-surface-critical-subdued:rgba(69, 7, 1, 1); --p-surface-critical-subdued-hovered:rgba(68, 23, 20, 1); --p-surface-critical-subdued-pressed:rgba(107, 16, 3, 1); --p-surface-critical-subdued-depressed:rgba(135, 24, 5, 1); --p-text-critical:rgba(233, 128, 122, 1); --p-action-critical:rgba(205, 41, 12, 1); --p-action-critical-disabled:rgba(187, 37, 10, 1); --p-action-critical-hovered:rgba(227, 47, 14, 1); --p-action-critical-pressed:rgba(250, 53, 17, 1); --p-action-critical-depressed:rgba(253, 87, 73, 1); --p-icon-on-critical:rgba(255, 248, 247, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(253, 114, 106, 1); --p-interactive-critical-disabled:rgba(254, 172, 168, 1); --p-interactive-critical-hovered:rgba(253, 138, 132, 1); --p-interactive-critical-pressed:rgba(253, 159, 155, 1); --p-border-warning:rgba(153, 112, 0, 1); --p-border-warning-subdued:rgba(153, 112, 0, 1); --p-icon-warning:rgba(104, 75, 0, 1); --p-surface-warning:rgba(153, 112, 0, 1); --p-surface-warning-subdued:rgba(77, 59, 29, 1); --p-surface-warning-subdued-hovered:rgba(82, 63, 32, 1); --p-surface-warning-subdued-pressed:rgba(87, 67, 34, 1); --p-text-warning:rgba(202, 149, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(68, 157, 167, 1); --p-icon-highlight:rgba(44, 108, 115, 1); --p-surface-highlight:rgba(0, 105, 113, 1); --p-surface-highlight-subdued:rgba(18, 53, 57, 1); --p-surface-highlight-subdued-hovered:rgba(20, 58, 62, 1); --p-surface-highlight-subdued-pressed:rgba(24, 65, 70, 1); --p-text-highlight:rgba(162, 239, 250, 1); --p-border-success:rgba(0, 135, 102, 1); --p-border-success-subdued:rgba(0, 135, 102, 1); --p-icon-success:rgba(0, 94, 70, 1); --p-surface-success:rgba(0, 94, 70, 1); --p-surface-success-subdued:rgba(28, 53, 44, 1); --p-surface-success-subdued-hovered:rgba(31, 58, 48, 1); --p-surface-success-subdued-pressed:rgba(35, 65, 54, 1); --p-text-success:rgba(88, 173, 142, 1); --p-decorative-one-icon:rgba(255, 186, 67, 1); --p-decorative-one-surface:rgba(142, 102, 9, 1); --p-decorative-one-text:rgba(255, 255, 255, 1); --p-decorative-two-icon:rgba(245, 182, 192, 1); --p-decorative-two-surface:rgba(206, 88, 20, 1); --p-decorative-two-text:rgba(255, 255, 255, 1); --p-decorative-three-icon:rgba(0, 227, 141, 1); --p-decorative-three-surface:rgba(0, 124, 90, 1); --p-decorative-three-text:rgba(255, 255, 255, 1); --p-decorative-four-icon:rgba(0, 221, 218, 1); --p-decorative-four-surface:rgba(22, 124, 121, 1); --p-decorative-four-text:rgba(255, 255, 255, 1); --p-decorative-five-icon:rgba(244, 183, 191, 1); --p-decorative-five-surface:rgba(194, 51, 86, 1); --p-decorative-five-text:rgba(255, 255, 255, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(227, 229, 231);'
>
<div class="Polaris-TopBar-Search__SearchContent">
<div class="Polaris-TopBar-Search__Results">
<div class="Polaris-ActionList">
<div class="Polaris-ActionList__Section--withoutTitle">
<ul class="Polaris-ActionList__Actions">
<li>
<button type="button" class="Polaris-ActionList__Item">
<span class="Polaris-ActionList__Content"
><span class="Polaris-ActionList__Text"
>Shopify help center</span
></span
>
</button>
</li>
<li>
<button type="button" class="Polaris-ActionList__Item">
<span class="Polaris-ActionList__Content"
><span class="Polaris-ActionList__Text"
>Community forums</span
></span
>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-TopBar__SecondaryMenu">
<div>
<div class="Polaris-TopBar-Menu__ActivatorWrapper">
<button
type="button"
class="Polaris-TopBar-Menu__Activator"
tabindex="0"
aria-controls="Polarispopover1"
aria-owns="Polarispopover1"
aria-expanded="false"
>
<span
><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
fill-rule="evenodd"
d="M0 10C0 4.478 4.478 0 10 0c5.523 0 10 4.478 10 10 0 5.523-4.477 10-10 10-5.522 0-10-4.477-10-10zm11.125 2.002H8.989v-.141c.01-1.966.492-2.254 1.374-2.782.093-.056.19-.114.293-.178.73-.459 1.292-1.038 1.292-1.883 0-.948-.743-1.564-1.666-1.564-.851 0-1.657.398-1.712 1.533H6.304C6.364 4.693 8.18 3.5 10.294 3.5c2.306 0 3.894 1.447 3.894 3.488 0 1.382-.695 2.288-1.805 2.952l-.238.144c-.79.475-1.009.607-1.02 1.777V12zm.17 3.012a1.344 1.344 0 0 1-1.327 1.328 1.32 1.32 0 0 1-1.328-1.328 1.318 1.318 0 0 1 1.328-1.316c.712 0 1.322.592 1.328 1.316z"
></path></svg></span
><span class="Polaris-VisuallyHidden">Secondary menu</span></span
>
</button>
</div>
</div>
</div>
<div>
<div class="Polaris-TopBar-Menu__ActivatorWrapper">
<button
type="button"
class="Polaris-TopBar-Menu__Activator"
tabindex="0"
aria-controls="Polarispopover2"
aria-owns="Polarispopover2"
aria-expanded="false"
>
<div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
<span
aria-label="Avatar with initials D"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeSmall Polaris-Avatar--styleFour"
><span class="Polaris-Avatar__Initials"
><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<text
x="50%"
y="50%"
dy="0.35em"
fill="currentColor"
font-size="20"
text-anchor="middle"
>
D
</text>
</svg></span
></span
>
</div>
<span class="Polaris-TopBar-UserMenu__Details">
<p class="Polaris-TopBar-UserMenu__Name">Dharma</p>
<p class="Polaris-TopBar-UserMenu__Detail">Jaded Pixel</p>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Frame__ContextualSaveBar Polaris-Frame-CSSAnimation--startFade"></div>
<main class="Polaris-Frame__Main" id="AppFrameMain" data-has-global-ribbon="false">
<div class="Polaris-Frame__Content"></div>
</main>
</div>
<div id="PolarisPortalsContainer">
<div data-portal-id="popover-Polarisportal2"></div>
<div data-portal-id="popover-Polarisportal3"></div>
<div data-portal-id="Polarisportal1">
<div class="Polaris-Frame-ToastManager" aria-live="assertive"></div>
</div>
</div>
</div>
</div>
,,
<div class="Polaris-Frame-ToastManager" aria-live="assertive"></div>
Top bar themed with colorsScheme
トップバーのテーマに特定のキーとそれに対応する色を与えることで、より細かい制御が可能になります。背景だけではなく、すべてのキーを提供することで、デフォルトの色に戻らないようにする必要があります。
React
function TopBarExample() {
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false)
const [isSearchActive, setIsSearchActive] = useState(false)
const [searchValue, setSearchValue] = useState("")
const [isDarkTheme, setIsDarkTheme] = useState(false)
const toggleIsUserMenuOpen = useCallback(
() => setIsUserMenuOpen((isUserMenuOpen) => !isUserMenuOpen),
[]
)
const handleThemeChange = useCallback(() => setIsDarkTheme((isDarkTheme) => !isDarkTheme), [])
const handleSearchResultsDismiss = useCallback(() => {
setIsSearchActive(false)
setSearchValue("")
}, [])
const handleSearchChange = useCallback((value) => {
setSearchValue(value)
setIsSearchActive(value.length > 0)
}, [])
const handleNavigationToggle = useCallback(() => {
console.log("toggle navigation visibility")
}, [])
const theme = {
colors: {
surface: "#FFFFFF",
onsurface: "#212B36",
},
colorScheme: isDarkTheme ? "dark" : "light",
logo: {
width: 124,
topBarSource: `data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 446 92.6' fill='%23${
isDarkTheme ? "fff" : "000"
}'%3E%3Cpath d='M112.2 51.6c-2.8-1.5-4.2-2.8-4.2-4.5 0-2.2 2-3.7 5.1-3.7 3.6 0 6.9 1.5 6.9 1.5l2.5-7.8s-2.3-1.8-9.2-1.8c-9.6 0-16.3 5.5-16.3 13.2 0 4.4 3.1 7.7 7.3 10.1 3.3 1.9 4.5 3.3 4.5 5.3 0 2.1-1.7 3.7-4.8 3.7-4.6 0-9-2.4-9-2.4L92.3 73s4 2.7 10.8 2.7c9.9 0 17-4.9 17-13.6 0-4.7-3.6-8-7.9-10.5zM151.5 35.2c-4.9 0-8.7 2.3-11.6 5.8l-.2-.1 4.2-22.1h-11L122.3 75h11l3.7-19.2c1.4-7.3 5.2-11.7 8.7-11.7 2.5 0 3.4 1.7 3.4 4.1 0 1.5-.2 3.3-.5 4.9l-4.1 22h11l4.3-22.7c.5-2.4.8-5.3.8-7.2-.1-6.3-3.3-10-9.1-10zM185.4 35.2c-13.2 0-22 12-22 25.3 0 8.5 5.3 15.4 15.1 15.4 13 0 21.8-11.6 21.8-25.3 0-7.9-4.6-15.4-14.9-15.4zM180 67.4c-3.7 0-5.3-3.2-5.3-7.2 0-6.3 3.3-16.6 9.2-16.6 3.9 0 5.2 3.3 5.2 6.6 0 6.8-3.3 17.2-9.1 17.2zM228.4 35.2c-7.4 0-11.6 6.5-11.6 6.5h-.2l.6-5.9h-9.7c-.5 4-1.4 10-2.2 14.6l-7.6 40.2h11l3-16.3h.2s2.3 1.4 6.5 1.4c12.9 0 21.4-13.2 21.4-26.6 0-7.3-3.3-13.9-11.4-13.9zm-10.5 32.3c-2.9 0-4.5-1.6-4.5-1.6l1.8-10.3c1.3-6.9 4.9-11.4 8.7-11.4 3.3 0 4.4 3.1 4.4 6.1 0 7.1-4.2 17.2-10.4 17.2zM255.5 19.4c-3.5 0-6.3 2.8-6.3 6.4 0 3.3 2.1 5.5 5.2 5.5h.2c3.4 0 6.4-2.3 6.5-6.4-.2-3.2-2.3-5.5-5.6-5.5zM240.1 75h11l7.5-38.9h-11.1zM286.5 36h-7.6l.4-1.8c.6-3.7 2.9-7.1 6.5-7.1 2 0 3.5.6 3.5.6l2.2-8.6s-1.9-1-6-1c-3.9 0-7.8 1.1-10.8 3.7-3.7 3.2-5.5 7.8-6.4 12.4L268 36h-5.1l-1.6 8.3h5.1L260.6 75h11l5.8-30.8h7.6l1.5-8.2zM313 36.1s-6.9 17.3-10 26.8h-.2c-.2-3-2.7-26.8-2.7-26.8h-11.6l6.6 35.8c.2.8.1 1.3-.2 1.8-1.3 2.5-3.4 4.9-6 6.6-2.1 1.5-4.4 2.5-6.2 3.1l3 9.3c2.2-.5 6.9-2.3 10.8-6 5-4.7 9.6-12 14.4-21.8l13.5-28.8H313zM54.3 10.8s-1 .3-2.7.8c-.3-.9-.7-2-1.3-3.2-1.9-3.6-4.7-5.6-8.1-5.6h-.7c-.1-.1-.2-.2-.3-.4C39.7.8 37.8.1 35.6.1 31.2.2 26.9 3.4 23.4 9c-2.5 3.9-4.4 8.9-4.9 12.7-5 1.6-8.5 2.6-8.6 2.7-2.5.8-2.6.9-2.9 3.3-.3 1.8-6.9 53-6.9 53l55 9.5V10.7c-.4 0-.7.1-.8.1zm-12.7 3.9c-2.9.9-6.1 1.9-9.3 2.9.9-3.4 2.6-6.8 4.7-9.1.8-.8 1.9-1.8 3.1-2.3 1.3 2.5 1.5 6.1 1.5 8.5zM35.7 3.2c1 0 1.9.2 2.6.7-1.2.6-2.3 1.5-3.4 2.6-2.8 3-4.9 7.6-5.7 12.1-2.6.8-5.2 1.6-7.6 2.4C23 13.9 28.9 3.4 35.7 3.2zm-8.5 40c.3 4.7 12.6 5.7 13.3 16.6.5 8.6-4.6 14.5-11.9 15-8.8.6-13.7-4.7-13.7-4.7l1.9-8s4.9 3.7 8.8 3.4c2.6-.2 3.5-2.2 3.4-3.7-.4-6.1-10.4-5.7-11-15.8-.5-8.4 5-17 17.2-17.8 4.7-.3 7.1.9 7.1.9l-2.8 10.5s-3.1-1.4-6.8-1.2c-5.5.5-5.6 3.9-5.5 4.8zm17.3-29.4c0-2.2-.3-5.3-1.3-7.9 3.3.6 4.9 4.4 5.6 6.6-1.3.4-2.7.8-4.3 1.3zm12.3 76.3l22.8-5.7S69.8 18 69.7 17.6c-.1-.5-.5-.7-.8-.7-.3 0-6.7-.1-6.7-.1s-3.9-3.8-5.4-5.2v78.5zM347.7 35.4c-5.7 0-10.3 2-13.6 5.8l.6-3.3c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9L321 88.7c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l3.6-18.9c1.3 2.4 4.4 5.7 11.4 5.7 5.5 0 10-1.7 13.6-5 3.7-3.4 6.2-8.5 7.5-15.1 1.3-6.6.7-11.7-1.7-15.1-2.2-3.2-6.1-4.9-11.6-4.9zm-7 36.6c-8.3 0-11.6-5.7-9.5-16.5 2.1-10.9 7.4-16.5 15.6-16.5 9 0 12.4 5.4 10.2 16.5-2.1 11.2-7.3 16.5-16.3 16.5zm91.6-18.7c-4.9-1.8-9.6-3.5-8.7-8.1.4-2.3 2.3-6.2 9.9-6.2 4.2 0 6.9 1.2 9.2 4 .4.5.9.5 1.1.5 1 0 1.9-.8 2.1-1.8.1-.5 0-.8-.2-1.2-2.4-3.4-6.2-5.1-11.6-5.1-7.7 0-13.3 3.7-14.4 9.7-1.4 7.2 5 9.6 10.6 11.7 4.9 1.8 9.4 3.6 8.6 8-1.2 6.2-7.7 7.1-11.5 7.1-5.2 0-8.4-1.4-10.8-4.7-.3-.4-.7-.5-1.1-.5-.9 0-1.9.7-2.1 1.8-.1.5 0 .8.2 1.2 1.6 2.9 6.2 5.8 13.1 5.8 8.8 0 14.8-4 16.1-10.7 1.4-7.1-4.9-9.5-10.5-11.5zm-11.8-28h-4.1l.8-4.1c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9l-.8 4.1h-4.1c-1.1 0-2.1.9-2.3 1.9-.2 1.1.5 1.9 1.6 1.9h4.1l-.8 4.1c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l.8-4.1h4.1c1.1 0 2.1-.9 2.3-1.9.2-1-.5-1.9-1.6-1.9zm-9 14.3c-1.1 0-2.1.9-2.3 1.9l-3.7 19.3c-2 9.8-8.1 11.2-13.7 11.2-10.2 0-10.4-5.8-9.4-11.5l4.4-22.7c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9l-4.4 22.7c-.9 4.6-.6 8 1 10.4 1.9 3.1 5.8 4.6 11.6 4.6s10.3-1.6 13.4-4.6c2.5-2.4 4.1-5.9 5-10.4l3.7-19c.1-1-.6-1.9-1.7-1.9zm-35.1-20.2c-1.1 0-2.1.9-2.3 1.9l-10 51.8c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l10-51.8c.2-1-.5-1.9-1.6-1.9z'/%3E%3C/svg%3E`,
url: "https://plus.shopify.com",
accessibilityLabel: "Shopify Plus",
},
}
const userMenuMarkup = (
<TopBar.UserMenu
actions={[
{
items: [{ content: "Back to Shopify Plus", icon: ArrowLeftMinor }],
},
{
items: [{ content: "Community forums" }],
},
]}
name="Scott"
detail="Snow Devil"
initials="S"
open={isUserMenuOpen}
onToggle={toggleIsUserMenuOpen}
/>
)
const searchResultsMarkup = (
<ActionList items={[{ content: "Shopify help center" }, { content: "Community forums" }]} />
)
const searchFieldMarkup = (
<TopBar.SearchField
onChange={handleSearchChange}
value={searchValue}
placeholder="Search"
showFocusBorder
/>
)
const topBarMarkup = (
<TopBar
showNavigationToggle
userMenu={userMenuMarkup}
searchResultsVisible={isSearchActive}
searchField={searchFieldMarkup}
searchResults={searchResultsMarkup}
onSearchResultsDismiss={handleSearchResultsDismiss}
onNavigationToggle={handleNavigationToggle}
/>
)
return (
<div style={{ height: "250px" }}>
<AppProvider
theme={theme}
i18n={{
Polaris: {
Avatar: {
label: "Avatar",
labelWithInitials: "Avatar with initials {initials}",
},
Frame: { skipToContent: "Skip to content" },
TopBar: {
toggleMenuLabel: "Toggle menu",
SearchField: {
clearButtonLabel: "Clear",
search: "Search",
},
},
},
}}
>
<Frame topBar={topBarMarkup}>
<Button onClick={handleThemeChange}>Toggle between dark and light themes</Button>
</Frame>
</AppProvider>
</div>
)
}
HTML
<div>
<div
style='--p-background:rgba(246, 246, 246, 1); --p-background-hovered:rgba(242, 242, 242, 1); --p-background-pressed:rgba(238, 238, 238, 1); --p-background-selected:rgba(238, 238, 238, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(229, 229, 229, 1); --p-surface-neutral-hovered:rgba(221, 221, 221, 1); --p-surface-neutral-pressed:rgba(204, 204, 204, 1); --p-surface-neutral-disabled:rgba(242, 242, 242, 1); --p-surface-neutral-subdued:rgba(246, 246, 246, 1); --p-surface-subdued:rgba(251, 251, 251, 1); --p-surface-disabled:rgba(251, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 246, 1); --p-surface-pressed:rgba(242, 242, 242, 1); --p-surface-depressed:rgba(238, 238, 238, 1); --p-surface-search-field:rgba(242, 242, 242, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px;'
>
<div class="Polaris-Frame Polaris-Frame--hasTopBar" data-polaris-layer="true">
<div class="Polaris-Frame__Skip"><a href="#AppFrameMain">Skip to content</a></div>
<div
class="Polaris-Frame__TopBar"
data-polaris-layer="true"
data-polaris-top-bar="true"
id="AppFrameTopBar"
>
<div class="Polaris-TopBar">
<button type="button" class="Polaris-TopBar__NavigationIcon" aria-label="Toggle menu">
<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="M19 11H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14H1a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z"
></path></svg
></span>
</button>
<div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
<a
class="Polaris-TopBar__LogoLink"
href="https://plus.shopify.com"
data-polaris-unstyled="true"
style="width: 124px;"
><img
src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 446 92.6' fill='%23000'%3E%3Cpath d='M112.2 51.6c-2.8-1.5-4.2-2.8-4.2-4.5 0-2.2 2-3.7 5.1-3.7 3.6 0 6.9 1.5 6.9 1.5l2.5-7.8s-2.3-1.8-9.2-1.8c-9.6 0-16.3 5.5-16.3 13.2 0 4.4 3.1 7.7 7.3 10.1 3.3 1.9 4.5 3.3 4.5 5.3 0 2.1-1.7 3.7-4.8 3.7-4.6 0-9-2.4-9-2.4L92.3 73s4 2.7 10.8 2.7c9.9 0 17-4.9 17-13.6 0-4.7-3.6-8-7.9-10.5zM151.5 35.2c-4.9 0-8.7 2.3-11.6 5.8l-.2-.1 4.2-22.1h-11L122.3 75h11l3.7-19.2c1.4-7.3 5.2-11.7 8.7-11.7 2.5 0 3.4 1.7 3.4 4.1 0 1.5-.2 3.3-.5 4.9l-4.1 22h11l4.3-22.7c.5-2.4.8-5.3.8-7.2-.1-6.3-3.3-10-9.1-10zM185.4 35.2c-13.2 0-22 12-22 25.3 0 8.5 5.3 15.4 15.1 15.4 13 0 21.8-11.6 21.8-25.3 0-7.9-4.6-15.4-14.9-15.4zM180 67.4c-3.7 0-5.3-3.2-5.3-7.2 0-6.3 3.3-16.6 9.2-16.6 3.9 0 5.2 3.3 5.2 6.6 0 6.8-3.3 17.2-9.1 17.2zM228.4 35.2c-7.4 0-11.6 6.5-11.6 6.5h-.2l.6-5.9h-9.7c-.5 4-1.4 10-2.2 14.6l-7.6 40.2h11l3-16.3h.2s2.3 1.4 6.5 1.4c12.9 0 21.4-13.2 21.4-26.6 0-7.3-3.3-13.9-11.4-13.9zm-10.5 32.3c-2.9 0-4.5-1.6-4.5-1.6l1.8-10.3c1.3-6.9 4.9-11.4 8.7-11.4 3.3 0 4.4 3.1 4.4 6.1 0 7.1-4.2 17.2-10.4 17.2zM255.5 19.4c-3.5 0-6.3 2.8-6.3 6.4 0 3.3 2.1 5.5 5.2 5.5h.2c3.4 0 6.4-2.3 6.5-6.4-.2-3.2-2.3-5.5-5.6-5.5zM240.1 75h11l7.5-38.9h-11.1zM286.5 36h-7.6l.4-1.8c.6-3.7 2.9-7.1 6.5-7.1 2 0 3.5.6 3.5.6l2.2-8.6s-1.9-1-6-1c-3.9 0-7.8 1.1-10.8 3.7-3.7 3.2-5.5 7.8-6.4 12.4L268 36h-5.1l-1.6 8.3h5.1L260.6 75h11l5.8-30.8h7.6l1.5-8.2zM313 36.1s-6.9 17.3-10 26.8h-.2c-.2-3-2.7-26.8-2.7-26.8h-11.6l6.6 35.8c.2.8.1 1.3-.2 1.8-1.3 2.5-3.4 4.9-6 6.6-2.1 1.5-4.4 2.5-6.2 3.1l3 9.3c2.2-.5 6.9-2.3 10.8-6 5-4.7 9.6-12 14.4-21.8l13.5-28.8H313zM54.3 10.8s-1 .3-2.7.8c-.3-.9-.7-2-1.3-3.2-1.9-3.6-4.7-5.6-8.1-5.6h-.7c-.1-.1-.2-.2-.3-.4C39.7.8 37.8.1 35.6.1 31.2.2 26.9 3.4 23.4 9c-2.5 3.9-4.4 8.9-4.9 12.7-5 1.6-8.5 2.6-8.6 2.7-2.5.8-2.6.9-2.9 3.3-.3 1.8-6.9 53-6.9 53l55 9.5V10.7c-.4 0-.7.1-.8.1zm-12.7 3.9c-2.9.9-6.1 1.9-9.3 2.9.9-3.4 2.6-6.8 4.7-9.1.8-.8 1.9-1.8 3.1-2.3 1.3 2.5 1.5 6.1 1.5 8.5zM35.7 3.2c1 0 1.9.2 2.6.7-1.2.6-2.3 1.5-3.4 2.6-2.8 3-4.9 7.6-5.7 12.1-2.6.8-5.2 1.6-7.6 2.4C23 13.9 28.9 3.4 35.7 3.2zm-8.5 40c.3 4.7 12.6 5.7 13.3 16.6.5 8.6-4.6 14.5-11.9 15-8.8.6-13.7-4.7-13.7-4.7l1.9-8s4.9 3.7 8.8 3.4c2.6-.2 3.5-2.2 3.4-3.7-.4-6.1-10.4-5.7-11-15.8-.5-8.4 5-17 17.2-17.8 4.7-.3 7.1.9 7.1.9l-2.8 10.5s-3.1-1.4-6.8-1.2c-5.5.5-5.6 3.9-5.5 4.8zm17.3-29.4c0-2.2-.3-5.3-1.3-7.9 3.3.6 4.9 4.4 5.6 6.6-1.3.4-2.7.8-4.3 1.3zm12.3 76.3l22.8-5.7S69.8 18 69.7 17.6c-.1-.5-.5-.7-.8-.7-.3 0-6.7-.1-6.7-.1s-3.9-3.8-5.4-5.2v78.5zM347.7 35.4c-5.7 0-10.3 2-13.6 5.8l.6-3.3c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9L321 88.7c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l3.6-18.9c1.3 2.4 4.4 5.7 11.4 5.7 5.5 0 10-1.7 13.6-5 3.7-3.4 6.2-8.5 7.5-15.1 1.3-6.6.7-11.7-1.7-15.1-2.2-3.2-6.1-4.9-11.6-4.9zm-7 36.6c-8.3 0-11.6-5.7-9.5-16.5 2.1-10.9 7.4-16.5 15.6-16.5 9 0 12.4 5.4 10.2 16.5-2.1 11.2-7.3 16.5-16.3 16.5zm91.6-18.7c-4.9-1.8-9.6-3.5-8.7-8.1.4-2.3 2.3-6.2 9.9-6.2 4.2 0 6.9 1.2 9.2 4 .4.5.9.5 1.1.5 1 0 1.9-.8 2.1-1.8.1-.5 0-.8-.2-1.2-2.4-3.4-6.2-5.1-11.6-5.1-7.7 0-13.3 3.7-14.4 9.7-1.4 7.2 5 9.6 10.6 11.7 4.9 1.8 9.4 3.6 8.6 8-1.2 6.2-7.7 7.1-11.5 7.1-5.2 0-8.4-1.4-10.8-4.7-.3-.4-.7-.5-1.1-.5-.9 0-1.9.7-2.1 1.8-.1.5 0 .8.2 1.2 1.6 2.9 6.2 5.8 13.1 5.8 8.8 0 14.8-4 16.1-10.7 1.4-7.1-4.9-9.5-10.5-11.5zm-11.8-28h-4.1l.8-4.1c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9l-.8 4.1h-4.1c-1.1 0-2.1.9-2.3 1.9-.2 1.1.5 1.9 1.6 1.9h4.1l-.8 4.1c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l.8-4.1h4.1c1.1 0 2.1-.9 2.3-1.9.2-1-.5-1.9-1.6-1.9zm-9 14.3c-1.1 0-2.1.9-2.3 1.9l-3.7 19.3c-2 9.8-8.1 11.2-13.7 11.2-10.2 0-10.4-5.8-9.4-11.5l4.4-22.7c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9l-4.4 22.7c-.9 4.6-.6 8 1 10.4 1.9 3.1 5.8 4.6 11.6 4.6s10.3-1.6 13.4-4.6c2.5-2.4 4.1-5.9 5-10.4l3.7-19c.1-1-.6-1.9-1.7-1.9zm-35.1-20.2c-1.1 0-2.1.9-2.3 1.9l-10 51.8c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l10-51.8c.2-1-.5-1.9-1.6-1.9z'/%3E%3C/svg%3E"
alt="Shopify Plus"
class="Polaris-TopBar__Logo"
style="width: 124px;"
/></a>
</div>
<div class="Polaris-TopBar__Contents">
<div class="Polaris-TopBar__SearchField">
<div class="Polaris-TopBar-SearchField">
<span class="Polaris-VisuallyHidden"
><label for="PolarisSearchField1">Search</label></span
><input
id="PolarisSearchField1"
class="Polaris-TopBar-SearchField__Input"
placeholder="Search"
type="search"
autocapitalize="off"
autocomplete="off"
autocorrect="off"
value=""
/><span class="Polaris-TopBar-SearchField__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 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
></path></svg></span
></span>
<div
class="Polaris-TopBar-SearchField__Backdrop Polaris-TopBar-SearchField__BackdropShowFocusBorder"
></div>
</div>
<div class="Polaris-TopBar-Search">
<div
style='--p-background:rgba(12, 12, 12, 1); --p-background-hovered:rgba(12, 12, 12, 1); --p-background-pressed:rgba(12, 12, 12, 1); --p-background-selected:rgba(12, 12, 12, 1); --p-surface:rgba(33, 33, 33, 1); --p-surface-neutral:rgba(50, 50, 50, 1); --p-surface-neutral-hovered:rgba(50, 50, 50, 1); --p-surface-neutral-pressed:rgba(50, 50, 50, 1); --p-surface-neutral-disabled:rgba(50, 50, 50, 1); --p-surface-neutral-subdued:rgba(71, 71, 71, 1); --p-surface-subdued:rgba(27, 27, 27, 1); --p-surface-disabled:rgba(27, 27, 27, 1); --p-surface-hovered:rgba(48, 48, 48, 1); --p-surface-pressed:rgba(64, 64, 64, 1); --p-surface-depressed:rgba(82, 82, 82, 1); --p-surface-search-field:rgba(48, 48, 48, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(33, 33, 33, 0.5); --p-shadow-from-dim-light:rgba(255, 255, 255, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(255, 255, 255, 0.15); --p-hint-from-direct-light:rgba(185, 185, 185, 0.2); --p-border:rgba(80, 83, 86, 1); --p-border-neutral-subdued:rgba(130, 135, 139, 1); --p-border-hovered:rgba(80, 83, 86, 1); --p-border-disabled:rgba(103, 107, 111, 1); --p-border-subdued:rgba(130, 135, 139, 1); --p-border-depressed:rgba(142, 145, 145, 1); --p-border-shadow:rgba(91, 95, 98, 1); --p-border-shadow-subdued:rgba(130, 135, 139, 1); --p-divider:rgba(69, 71, 73, 1); --p-icon:rgba(166, 172, 178, 1); --p-icon-hovered:rgba(225, 227, 229, 1); --p-icon-pressed:rgba(166, 172, 178, 1); --p-icon-disabled:rgba(84, 87, 90, 1); --p-icon-subdued:rgba(120, 125, 129, 1); --p-text:rgba(227, 229, 231, 1); --p-text-disabled:rgba(111, 115, 119, 1); --p-text-subdued:rgba(153, 159, 164, 1); --p-interactive:rgba(54, 163, 255, 1); --p-interactive-disabled:rgba(38, 98, 182, 1); --p-interactive-hovered:rgba(103, 175, 255, 1); --p-interactive-pressed:rgba(136, 188, 255, 1); --p-icon-interactive:rgba(54, 163, 255, 1); --p-focused:rgba(38, 98, 182, 1); --p-surface-selected:rgba(2, 14, 35, 1); --p-surface-selected-hovered:rgba(7, 29, 61, 1); --p-surface-selected-pressed:rgba(13, 43, 86, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(77, 80, 83, 1); --p-action-secondary-disabled:rgba(32, 34, 35, 1); --p-action-secondary-hovered:rgba(84, 87, 91, 1); --p-action-secondary-pressed:rgba(96, 100, 103, 1); --p-action-secondary-depressed:rgba(123, 127, 132, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(0, 86, 64, 1); --p-action-primary-hovered:rgba(0, 150, 113, 1); --p-action-primary-pressed:rgba(0, 164, 124, 1); --p-action-primary-depressed:rgba(0, 179, 136, 1); --p-icon-on-primary:rgba(230, 255, 244, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 141, 106, 1); --p-text-primary-hovered:rgba(0, 158, 120, 1); --p-text-primary-pressed:rgba(0, 176, 133, 1); --p-surface-primary-selected:rgba(12, 18, 16, 1); --p-surface-primary-selected-hovered:rgba(40, 48, 44, 1); --p-surface-primary-selected-pressed:rgba(54, 64, 59, 1); --p-border-critical:rgba(227, 47, 14, 1); --p-border-critical-subdued:rgba(227, 47, 14, 1); --p-border-critical-disabled:rgba(131, 23, 4, 1); --p-icon-critical:rgba(218, 45, 13, 1); --p-surface-critical:rgba(69, 7, 1, 1); --p-surface-critical-subdued:rgba(69, 7, 1, 1); --p-surface-critical-subdued-hovered:rgba(68, 23, 20, 1); --p-surface-critical-subdued-pressed:rgba(107, 16, 3, 1); --p-surface-critical-subdued-depressed:rgba(135, 24, 5, 1); --p-text-critical:rgba(233, 128, 122, 1); --p-action-critical:rgba(205, 41, 12, 1); --p-action-critical-disabled:rgba(187, 37, 10, 1); --p-action-critical-hovered:rgba(227, 47, 14, 1); --p-action-critical-pressed:rgba(250, 53, 17, 1); --p-action-critical-depressed:rgba(253, 87, 73, 1); --p-icon-on-critical:rgba(255, 248, 247, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(253, 114, 106, 1); --p-interactive-critical-disabled:rgba(254, 172, 168, 1); --p-interactive-critical-hovered:rgba(253, 138, 132, 1); --p-interactive-critical-pressed:rgba(253, 159, 155, 1); --p-border-warning:rgba(153, 112, 0, 1); --p-border-warning-subdued:rgba(153, 112, 0, 1); --p-icon-warning:rgba(104, 75, 0, 1); --p-surface-warning:rgba(153, 112, 0, 1); --p-surface-warning-subdued:rgba(77, 59, 29, 1); --p-surface-warning-subdued-hovered:rgba(82, 63, 32, 1); --p-surface-warning-subdued-pressed:rgba(87, 67, 34, 1); --p-text-warning:rgba(202, 149, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(68, 157, 167, 1); --p-icon-highlight:rgba(44, 108, 115, 1); --p-surface-highlight:rgba(0, 105, 113, 1); --p-surface-highlight-subdued:rgba(18, 53, 57, 1); --p-surface-highlight-subdued-hovered:rgba(20, 58, 62, 1); --p-surface-highlight-subdued-pressed:rgba(24, 65, 70, 1); --p-text-highlight:rgba(162, 239, 250, 1); --p-border-success:rgba(0, 135, 102, 1); --p-border-success-subdued:rgba(0, 135, 102, 1); --p-icon-success:rgba(0, 94, 70, 1); --p-surface-success:rgba(0, 94, 70, 1); --p-surface-success-subdued:rgba(28, 53, 44, 1); --p-surface-success-subdued-hovered:rgba(31, 58, 48, 1); --p-surface-success-subdued-pressed:rgba(35, 65, 54, 1); --p-text-success:rgba(88, 173, 142, 1); --p-decorative-one-icon:rgba(255, 186, 67, 1); --p-decorative-one-surface:rgba(142, 102, 9, 1); --p-decorative-one-text:rgba(255, 255, 255, 1); --p-decorative-two-icon:rgba(245, 182, 192, 1); --p-decorative-two-surface:rgba(206, 88, 20, 1); --p-decorative-two-text:rgba(255, 255, 255, 1); --p-decorative-three-icon:rgba(0, 227, 141, 1); --p-decorative-three-surface:rgba(0, 124, 90, 1); --p-decorative-three-text:rgba(255, 255, 255, 1); --p-decorative-four-icon:rgba(0, 221, 218, 1); --p-decorative-four-surface:rgba(22, 124, 121, 1); --p-decorative-four-text:rgba(255, 255, 255, 1); --p-decorative-five-icon:rgba(244, 183, 191, 1); --p-decorative-five-surface:rgba(194, 51, 86, 1); --p-decorative-five-text:rgba(255, 255, 255, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(227, 229, 231);'
>
<div class="Polaris-TopBar-Search__SearchContent">
<div class="Polaris-TopBar-Search__Results">
<div class="Polaris-ActionList">
<div class="Polaris-ActionList__Section--withoutTitle">
<ul class="Polaris-ActionList__Actions">
<li>
<button type="button" class="Polaris-ActionList__Item">
<span class="Polaris-ActionList__Content"
><span class="Polaris-ActionList__Text"
>Shopify help center</span
></span
>
</button>
</li>
<li>
<button type="button" class="Polaris-ActionList__Item">
<span class="Polaris-ActionList__Content"
><span class="Polaris-ActionList__Text"
>Community forums</span
></span
>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-TopBar__SecondaryMenu"></div>
<div>
<div class="Polaris-TopBar-Menu__ActivatorWrapper">
<button
type="button"
class="Polaris-TopBar-Menu__Activator"
tabindex="0"
aria-controls="Polarispopover1"
aria-owns="Polarispopover1"
aria-expanded="false"
>
<div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
<span
aria-label="Avatar with initials S"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeSmall Polaris-Avatar--styleFour"
><span class="Polaris-Avatar__Initials"
><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<text
x="50%"
y="50%"
dy="0.35em"
fill="currentColor"
font-size="20"
text-anchor="middle"
>
S
</text>
</svg></span
></span
>
</div>
<span class="Polaris-TopBar-UserMenu__Details">
<p class="Polaris-TopBar-UserMenu__Name">Scott</p>
<p class="Polaris-TopBar-UserMenu__Detail">Snow Devil</p>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Frame__ContextualSaveBar Polaris-Frame-CSSAnimation--startFade"></div>
<main class="Polaris-Frame__Main" id="AppFrameMain" data-has-global-ribbon="false">
<div class="Polaris-Frame__Content">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Toggle between dark and light themes</span></span
>
</button>
</div>
</main>
</div>
<div id="PolarisPortalsContainer">
<div data-portal-id="popover-Polarisportal2"></div>
<div data-portal-id="Polarisportal1">
<div class="Polaris-Frame-ToastManager" aria-live="assertive"></div>
</div>
</div>
</div>
</div>
,
<div class="Polaris-Frame-ToastManager" aria-live="assertive"></div>
Props
contextControl
React.ReactNode
ユーザーが異なるコンテキストを切り替えるのを助けるために使用されるコンポーネントを受け入れます。
onSearchResultsDismiss
onDismiss
検索結果の棄却を処理するコールバック関数
searchField
React.ReactNode
トップバーコンポーネントのTextFieldスタティックメンバーとして利用可能になる検索フィールドコンポーネントを受け入れます。
searchResults
React.ReactNode
行動可能な検索結果のリストを含むカードコンポーネントで理想的に構成される検索結果コンポーネントを受け入れます。
searchResultsOverlayVisible
boolean
検索結果オーバーレイの背景が見えるかどうか。
searchResultsVisible
boolean
検索結果が現在表示されているかどうかを示す boolean プロパティ。
secondaryMenu
React.ReactNode
トップバーコンポーネントの静的メンバーとして利用可能になるメニューコンポーネントを受け入れる。
showNavigationToggle
boolean
ナビゲーションコンポーネントが提供されているかどうかをトグルする。モバイルナビのトグルボタンの存在を制御する。
userMenu
React.ReactNode
トップバーコンポーネントの静的メンバーとして利用可能になったユーザーコンポーネントを受け入れ、プライマリーメニューとしてレンダリングする。
onNavigationToggle
() => void
モバイルナビゲーションの非表示と表示を処理するコールバック関数です
必要なコンポーネント
トップバーコンポーネントをフレームコンポーネントに渡す必要があります。
ベストプラクティス
トップバーコンポーネントは
- アプリケーションのグローバルナビゲーションを提供しない。
- 代わりにナビゲーションコンポーネントを使用してください。
- マーチャントがリソースを見つけたり、アプリケーションをナビゲートするのに役立つ検索を含める。
- ログインしたマーチャントを示し、グローバルアクションを提供するために、ユーザーメニューコンポーネントを含める。
- 背景のスタイルを決めるために、アプリ・プロバイダ・コンポーネントで色を提供する。
- グローバルメニューのテキストは、トップバーの他の部分とコントラストをつけ、WCAG 2.0 ガイドラインの最小コントラスト比を満たすようにします。
- ロゴには SVG ファイルを使用する
- トップバーの背景色と比較して、WCAG 2.0 ガイドラインの最小コントラスト比を満たすロゴを使用する。
- ナビゲーションのトグルを表示し、小さな画面でも表示されるようにする。
コンテンツに関するガイドライン
プレースホルダーコンテンツ
検索フィールドのプレースホルダーコンテンツは以下の通りです。
- 常に "Search "と表示する
- 省略記号を入れない
トップバーメニュー
アクティベーターと、アクションリストを含むポップオーバーを組み合わせて、ドロップダウンメニューを作成するコンポーネントです。
メニューのプロパティ
| プロップ | タイプ | 説明 |
|---|---|---|
| activatorContent | React.ReactNode | メニューを開くボタンの中にレンダリングされるアクチベーターコンポーネントを受け入れます。 |
| actions | ActionListProps['section'] | このメニューで起動されるポップオーバーの中でレンダリングされるアクションオブジェクトの配列です。 |
| message | MessageProps | メニューを通じてマーチャントとの直接かつ緊急のコミュニケーションを容易にするメッセージを受け付ける。 |
| open | boolean | メニューが現在開かれているかどうかを示す boolean プロパティです。 |
| onOpen() | function | メニュー・ポップオーバを開くためのコールバック関数 |
| onClose() | function | メニュー・ポップオーバーを閉じるためのコールバック関数 |
ユーザーのアバターによって起動される、特殊なメニューコンポーネントです。
メニューのプロパティ
| プロップ | タイプ | 説明 |
|---|---|---|
| アクション | {items: IconableAction[]}[] | このメニューによって引き起こされるポップオーバーの中でレンダリングされるアクションオブジェクトの配列 |
| メッセージ | メッセージプロップス | ユーザーメニューを通じてマーチャントとの直接かつ緊急のコミュニケーションを可能にするメッセージを受け入れます。 |
| name | string | ユーザーメニューに表示されるマーチャントのフルネームを示す文字列。 |
| detail | string | ユーザーメニューに表示されるマーチャントの名前の詳細を許可する文字列。 |
| initials | AvatarProps['initials'] | マーチャントのイニシャル、提供されていない場合はアバター画像の代わりにレンダリングされる |
| avatar | AvatarProps['s source'] | マーチャントを表すアバター画像。 |
| open | boolean | ユーザーメニューが現在開かれているかどうかを示す boolean プロパティ |
| onToggle() | function | ユーザーメニューの開閉を処理するコールバック関数 |
トップバーメニューメッセージ
メッセージのプロパティ
| プロップ | タイプ | 説明 |
|---|---|---|
| title | string | メッセージのタイトル |
| description | string | メッセージの説明 |
| action | {onClick(): void; content: string} | メッセージの近くに表示するアクション |
| link | {to: string; content: string} | メッセージの内容を見るためのリンク。 |
| badge | {content: string; status: BadgeProps['status']} | メッセージの近くに表示されるバッジ |
トップバー検索フィールド
検索の用途に合わせて作られたテキストフィールドコンポーネントです。
検索フィールドのプロパティ
| プロップ | タイプ | 説明 |
|---|---|---|
| value | string | 入力の初期値 |
| placeholder | string | 表示するためのヒントテキスト |
| focused | boolean | 入力のフォーカス状態を強制します |
| active | boolean | 検索は有効だがテキストフィールドコンポーネントがフォーカスされていない状態を強制します。 |
| onChange(value: string) | function | 値が変更された際のコールバック |
| onFocus() | function | 入力がフォーカスされたときのコールバック |
| onBlur() | funciton | フォーカスが外されたときのコールバック |
関連コンポーネント
- トップバーコンポーネントの構造と主要なナビゲーションを提供するには、フレームコンポーネントを使用します。
- アプリケーションのフレーム内に主要なナビゲーションを表示するには、navigation コンポーネントを使用します。
- マーチャントがページ上のフォームに変更を加えたときのオプションを伝えるには、contextual save bar コンポーネントを使用します。
- アクションの結果をひと目でわかるように表示するには、トーストコンポーネントを使用します。
- ページの読み込み中やアップロードの処理中をマーチャントに示すには、loading コンポーネントを使用します。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion