顶部酒吧- Shopify北极星</标题><链接rel="preload" href="//www.theturtleeffect.com/polaris/_next/static/css/2c3f0280e29889f8.css" as="style"> <link rel="stylesheet" href="//www.theturtleeffect.com/polaris/_next/static/css/2c3f0280e29889f8.css" data-n-g=""> <link rel="preload" href="//www.theturtleeffect.com/polaris/_next/static/css/fe3eda917477465b.css" as="style"> <link rel="stylesheet" href="//www.theturtleeffect.com/polaris/_next/static/css/fe3eda917477465b.css" data-n-p=""> <style data-href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZs.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZs.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZs.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZs.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style> </head> <body> <div id="__next"> <div style="background:unset" class="styles-for-site-but-not-polaris-examples"> <div class="Frame_Header__ADK22"> <a class="Frame_SkipToContentLink__E3k31" href="//www.theturtleeffect.com/polaris/components/#main">跳到内容</a> <button id="menu-button" aria-label="Open menu" aria-controls="nav" aria-expanded="false" class="Frame_NavToggle__NCniE"> <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M19 11h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14h-18a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z"></path> </svg></button> <a class="Frame_Logo__PanQr" href="//www.theturtleeffect.com/polaris/"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:24px;height:24px;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><img alt="Shopify标志" src="//www.theturtleeffect.com/polaris/components/data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fixed" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"> <noscript> <img alt="Shopify标志" srcSet="/images/shopify-logo.svg 1x, /images/shopify-logo.svg 2x" src="//www.theturtleeffect.com/polaris/images/shopify-logo.svg" decoding="async" data-nimg="fixed" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"> </noscript></span>北极星</a> <button class="Frame_DarkModeToggle__pQNF8"> <div class="Frame_DarkModeIcon__cgpO8"> </div></button> <button class="GlobalSearch_ToggleButton__PMalg" aria-label="Search"> <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M2 8c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6zm17.707 10.293l-5.395-5.396A7.946 7.946 0 0016 8c0-4.411-3.589-8-8-8S0 3.589 0 8s3.589 8 8 8a7.954 7.954 0 004.897-1.688l5.396 5.395A.998.998 0 0020 19a1 1 0 00-.293-.707z" fill="currentColor"></path> </svg>搜索<跨度class="GlobalSearch_KeyboardShortcutHint__b5uqe">/</跨度></button> <div style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div> </div> <div class="Frame_NavAndContent__Zsneu"> <nav class="Frame_Nav__6ospS" id="nav"> <ul> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/whats-new">有什么新鲜事</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/getting-started">开始OB欧宝娱乐APP</a><button class="Frame_Toggle__Ks3iQ" aria-label="Toggle section" aria-expanded="false"></button></span></li> <li class="Frame_newSection__KUb1F"><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/foundations">基金会</a><button class="Frame_Toggle__Ks3iQ" aria-label="Toggle section" aria-expanded="false"></button></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/design">设计</a><button class="Frame_Toggle__Ks3iQ" aria-label="Toggle section" aria-expanded="false"></button></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/content">内容</a><button class="Frame_Toggle__Ks3iQ" aria-label="Toggle section" aria-expanded="false"></button></span></li> <li class="Frame_newSection__KUb1F"><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/patterns">模式</a><button class="Frame_Toggle__Ks3iQ" aria-label="Toggle section" aria-expanded="false"></button></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components">组件</a><button class="Frame_Toggle__Ks3iQ" aria-label="Toggle section" aria-expanded="true" aria-controls="nav-components"></button></span> <ul id="nav-components" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/account-connection">账户连接</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/action-list">动作列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/alpha-card">α卡<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/alpha-stack">α堆栈<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/app-provider">应用提供商</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/autocomplete">自动完成</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/avatar">《阿凡达》</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/badge">徽章</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/banner">横幅</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/bleed">流血<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/box">盒子<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/button">按钮</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/button-group">按钮组</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/callout-card">Callout卡</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/caption">标题</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/card">卡</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/checkbox">复选框</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/choice-list">选择列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/collapsible">可折叠的</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/color-picker">颜色选择器</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/columns">列<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/combobox">组合框</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/content-block">内容块<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/contextual-save-bar">上下文保存栏</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/data-table">数据表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/date-picker">日期选择器</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/description-list">描述表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/display-text">显示文本</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/drop-zone">降落区</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/empty-state">空的状态</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/exception-list">例外列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/filters">过滤器</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/footer-help">页脚的帮助</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/form">形式</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/form-layout">表格布局</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/frame">框架</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/fullscreen-bar">全屏酒吧</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/grid">网格<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/heading">标题</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/icon">图标</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/index-table">索引表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/inline">内联<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/inline-error">内联错误</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/keyboard-key">键盘键</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout">布局</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/link">链接</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/list">列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/listbox">列表框</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/loading">加载</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/media-card">媒体卡</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/modal">模态</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation">导航</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/option-list">选项列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/page">页面</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/page-actions">页面动作</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/pagination">分页</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/popover">弹出窗口</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/progress-bar">进度条</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/radio-button">单选按钮</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/range-slider">滑块范围</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/resource-item">资源项目</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/resource-list">资源列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/scrollable">可滚动</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/select">选择</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/setting-toggle">设置切换</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/sheet">表<divclass="StatusBadge_StatusBadge__0tTyU" data-value="deprecated"> 弃用</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/skeleton-body-text">正文正文</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/skeleton-display-text">骨架显示文本</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/skeleton-page">框架页面</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/skeleton-tabs">骨架的标签</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/skeleton-thumbnail">骨架缩略图</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/spinner">微调控制项</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/stack">堆栈</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/subheading">副标题</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/tabs">选项卡</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/tag">标签</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/text">文本<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/text-container">文本容器</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/text-field">文本字段</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/text-style">文本样式</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/thumbnail">缩略图</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/tile">瓷砖<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/toast">烤面包</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/tooltip">工具提示</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0 Frame_isCurrent__EePN_"><a aria-current="page" href="//www.theturtleeffect.com/polaris/components/top-bar">窗口的顶部</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/video-thumbnail">视频缩略图</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/visually-hidden">视觉上隐藏</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/tokens/colors">令牌</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/icons">图标</a></span></li> <li class="Frame_newSection__KUb1F"><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/contributing">贡献</a><button class="Frame_Toggle__Ks3iQ" aria-label="Toggle section" aria-expanded="false"></button></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/sandbox?code=N4Igxg9gJgpiBcIA8BhAhgJygHQHYAJ8BnGSXKTATwDEIIAXGDAQTHoEsJciBeYAbWBlGuevHwByACLsiAW1lEJAXwC6yvIQAOGdnKq0GTVhy58hXEWMkBRAB5aIGevgBKMR85UbcAPk34qJhQAHQAEjBosBj4aGyc3HyC%2BMIwouISACoMaAA2%2BADKeTBK%2BGrK%2BBz0uTA82CBFNUT1-gSEgQAKEI4AbkwB7bHxfXwAZnkkPoOEcRw9aPROfAPTSABCAK70iwRQsmC5EEQbGDD4Wrlo7H4r0-gAauwwAO6Fxc1td0gA9JvbXK07lNplwUIcSHwABQASnwPF8%2BGAymBhEBqxMCQAMrIXOxGHJeAILKI0tYJABxDBHIhvJoqAA0iNS6UkADkYC5GiUVOp8N80YQfl1ekw0T90FhwpFomKJaECqRTDdPoFMjA7PQUJYrrhRbd8ABNCAbFJoAgbEjEd74U6eeg0xbEGBna6jJz6JWxABGxpclGNMTAFsWciYREAmAT6pzRGletAkKD4LgpXSMXRoYgbMAAC1iNKI1ogfRiHFDjK9lBS2bNutyjKc%2BAr%2BqI9DQo1GIRWPzVGq1oh1era4uCIQV8QBASCkrHnqqNTqIGyrfyXJpa1OaAA1lAIM9cC0u%2B4iAGwDBsS39adjydT6y0KHzERrgBzDaXDAZAs1CSMi4nPKfu83j6niMAEkk%2BqEMAkHtF%2BJQZAA8lgYY-jBMxyMaLISAAqgUUgACQAAwhIRhGoSqdwnLkGS2k49rfNGKH0jByjMRR7TQexgxwUQGTuPQJzcORdyDPemFkgAtLhBEAEwAKzEaRwkiYQVE0R4dFEN8pwCRgQlsSprH6uol5pNEACS%2BJQqBciwvCiIwWQLaIjxjJiRsoiMlRFQ8PgNkANwwTpgn4JCaGBEeJ5njiISWWB4WqRguR8N5CVDKeRBPl67C5HilCYmgXowMlwAAAaPC8tIlPgboxPhwA8copUoip%2BACq1SAFK2YCbu1rWBF1cSbrF%2BI1TluS%2BA17zKD8g09SNYF9R1c3DXFciTe5ogzd8K0LetaWzd1vXhT8kU3tFLZ7UthDQoF7HIvq-KTt8cqjoqCSyiOM4JJUeLzvUUiRMMCwwImtHOM0ICZl6UAbKD7VIOe9BLYjMVrb4HRoP6WxED8SNXfqqOXejS55FVa6Vig1a4LWeNo-iCPfEjYovV970TkOr3fcmc61PUrJGAeKpID2mratcg53Jk2ZnDxNoaRDsSnLE8w5YVNRJrguSVuwoz4NjMQtk4Lo0jzMuFNm3S65Q%2BoXGaSYxNm7DPjLGCdsL3yi32rYSxgLNc%2BzyrDlgvggPSID0DLoZEAg-AgIcYDFPAaQgKo4fPOwUCRzH8D8OoQA">沙盒<divclass="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> </ul> <button aria-label="Close menu" class="Frame_CloseButton__z2r_d"> <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414l-6.293 6.293-6.293-6.293a1 1 0 0 0-1.414 1.414l6.293 6.293-6.293 6.293a1 1 0 1 0 1.414 1.414l6.293-6.293 6.293 6.293a.998.998 0 0 0 1.707-.707.999.999 0 0 0-.293-.707l-6.293-6.293z"></path> </svg></button> </nav> <div class="Frame_PageContent__LP9lk"> <div class="Container_Container__G2fbY Page_Page__k_goF"> <article class="Page_Post__zBRzR" id="main"> <nav class="Breadcrumbs_Breadcrumbs__HlBDV" aria-label="Breadcrumb"> <ul> <li aria-current="false"><a href="//www.theturtleeffect.com/polaris/">首页</a></li> <li aria-current="false"><a href="//www.theturtleeffect.com/polaris/components">组件</a></li> <li aria-current="page"><a href="//www.theturtleeffect.com/polaris/components/top-bar">窗口的顶部</a></li> </ul> </nav> <div class="Longform_Longform__qNwjb"> <div class="Longform_Content__Q1ZR9 Longform_firstParagraphIsLede__iB9hY"> <h1>窗口的顶部</h1> </div> </div> <div class="Longform_Longform__qNwjb"> <div class="Longform_Content__Q1ZR9 Longform_firstParagraphIsLede__iB9hY"> <p>顶部栏是一个头部组件，允许商家通过点击logo进行搜索、访问菜单和导航。它总是在Shopify或Shopify Plus等界面的顶部可见。使用顶部栏的第三方应用程序可以自定义颜色以匹配其品牌<a href="//www.theturtleeffect.com/polaris/components/app-provider">应用提供商</a>组件，并要求使用自己的标识。</p> <button type="button" aria-hidden="true" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button> <div role="tablist" aria-orientation="horizontal"> <div class="ComponentExamples_ExamplesList__Y4pcV" id="examples"> <button id="headlessui-tabs-tab-:R2r9mn6:" role="tab" type="button" aria-selected="true" tabindex="0"><span>默认的</跨度></button> </div> </div> <div> <div id="headlessui-tabs-panel-:R3b9mn6:" role="tabpanel" tabindex="0"> <p>用于为应用程序的顶部提供结构。使用带有主题的应用程序提供程序组件样式化顶部栏组件。只提供<code>背景</code>顶部栏组件主题的键将导致智能默认设置为互补色与对比文本。</p> <div class="ComponentExamples_ExampleFrame__M2N8M"> <iframe src="//www.theturtleeffect.com/polaris/examples/top-bar-default" height="400" id="example-iframe"></iframe> <div class="ComponentExamples_Buttons__CX93w light-mode"> <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"> <input type="hidden" name="parameters" value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPgyQAATgALUighgAngHoUpcfwgJR4ydr2HjZy9bS24CiDXL2Gk4gAL4hsnYAQhDkXqZIYGhQcDDhIACCKCjE9tR0DCIgECpW_LQABMAAOuTl5QAqRpFe0jV16Ri0EBQAMna0rbXlAJL-g3UAanYArklQpgASECxc4-UAYvxoKjCDIeVg_KrlAOQuRiYWVjZ2JwDcNcWlFcDp_EcA7j0wYLQAsjFSPxpOUAIrTLTdch_LxYGFEIH7Q7HM4GC7ua5eOy-fxwe6PEpAl7TFIAZVomhBJJgAGE5gAjTBYJFHFSneSdfHkGpgabcLoUBpNLwAUQAHtsULAABQASkqbXKuIqAG07ABVFL8P4MaYAeQ45BBKVowzgmpg2t1BoYAF1ygBecrU8maaWJZIwWUPIbK8pquCkmD-FhxHXkfWG40wU2B4MUUP8UzhyN2x3OskU-jupIpb2Kv0BoNeDD6DpdABuu3KJrNxf4pfLECr9qdLqzMBznvzvooUn9KRL-gmSQh0do9dLI6gENbGZgruzJxOPYLfYqtFIuFwsDNFqtEZttTbKTpUCgjOw0sVdTljoAfDWY3utSmj9LpRrX9bDfKHY-AEIv0tN9fzWOoVVtNZV17AINy3HcYDreNyETZMfwYdNqTPC8mWvIZbz_R9azjEMwww8gPzsIMyKTUCGCI8ogNIhNyMPMCb39KDFRguo_X0NBUNgSd9AAJXgaYoFoOAABE7BUOw4Cw08GTwu9_wVAin1jESmyrLs8x9Oo6hNETpwhaVlx7Opwi43ilXXcoBKEhchAbfQaWc_BlNpVSr2lCtRy9B9NOM7SzKCgKgus4ySN0zpm07QKZ0IWByFwWh9HKR8AAYYtsyD7P4wSWFgAA5NAKwgXAJChRpt1gHycMvLAP0Y6otNxaxUq3SzNwamByliKqaoFWoqrgCB6WgCBaFMFcjPKArbSKxyoC3Uh0w6sKPmWTLEHKABGAAmAAWcDyk3FBmn4UlSGmBsYEQTi6hOfRaFoFA4EQcxzAwFhyAINE3FMAgaBUcw4HMSBYChw7zBy07ToANnMZGAE4AGYAHZoegeBzCINA2BYBRjDFGAoAUdbcFIBQaHW_ggYrXAAH5keOw6AFZkdOgAORGcpy7GhcOnL0Ylk4LoeqADrej6UB-wniZgFhycpsHVClzjMAweBJumqBZtMHo0HpSm5YAKRVlhygABQgCmoG1oYQh9Nc4PnA9phhfgsGmFB03wsKAB5GmurwCH3FMXvKYQoTgB1gBVWO6m2sKM9mmAVG -_1gH8ehGDl5psEuzbSVcS4pfKPwKAOt5Pm-X4AXIRFuK0sLwlT0KM7CrOc4OlV8_yIvThpVQVD5Y2DiBaYc5OEJ297myLrqW0Qlj2IdgdKoQBkgT-BUNBd9jtgKWgHeQGtkn7cdymT47mvyFmiBc0vmSH97owGCT4DvaPDej8KD1UQknfqiEXwgQooAsK5h7w8XdrBfsg53LiTgJJaSvt_aBydMHYyIcmy9H6LHfuidk7D0YAUOWFd0SmCcpTQOetKH8AXiCChhdaBy3HioSez85oz34HPPEi8YHGTgQgmoHtkFuVLOsXgUAWBYIDkHTiYdhRMxEnIymLBY4UE8oJfASdnKlVckOfR6VUix2ShCJOKCpxBVEWFKUmAYCGAUZaS-IlP4ZzRB8dYpAMAkkiECNg_BOLiKGKtT2KRaLoQjEonB5Q8F1DURHJmMdH7x0Cpufg49KGMCTt3EOcB0DkHgY_UOoxBRkAenrJO4JIQUCwfCRE5QInL3wVMdBcxFjLC4PeGirEkzlB2BGEO5gumzHPL0lYDBykdPGSUwS8yM6OOMt_cgv8WKoTYqmcgay6gUCPGAhCu5tloXovs3R5AaTrRSCcgayFYmXIOXHBKfYk4pwqT3 dppdb7skowpceu9-fgfnvpreq9jjd0fuvcjkyon9iujdbjkitkpjurhxxfurq1waacmasdqteytsslmctxkxkgxe6ytiuixn1bsrfmixissknalpu1ybbpipwsxj87h6c0qoulq5hwknhahsllk0eyliyk2v7kmvapicjrv0k5jwaunamhxjhiyrzrq-silxkubxdvpf5aqhcuahqma5rrp1qjws9p5r7kcfoa9woytyghxym2gsc0bw2pgnvd6ctjpcxyigmuc8qgrndpsbyg1kvebowkil5qaakcttm_yrqunmh9rwbfppagspidamuzxyhsesbgouatxsslghceaeq4drfiembiuzugrfqlwnizac4fhuasgt4lhahfzouxehjac7x9e8iklqltyhokjugpakgsmopooqnqlcqd-kbaos6j2rsyihzebjd4ehmnei9z9crldxdeu2rwqqhkwjo_duhgaxa8dcoaz6v1vswreudahK4Yk8N4cw60MBJAJgwHIFAwOvoqLvc4INgNYihvSaY0AWDmHgBDKQphYZgx1c-v0Bc0AxEtOmZQgTRm0AIPgWgIpYDsciKYYYLBrxyG3YukAPY_RHB3emDAG6YBbp3dKBjTH-A9ikxxwQg7-B4IIVkT9pBv3MYgIdPmmzgAMHjao69bSVnjI_V-5Ylpyk9nbUUTtMQ4i9s9GkGIbAxQEHeioKAI6R6FD9QG5Yl91O73vOM4t95XNRA8z2xAHoUhhBCEAA"> <input type="hidden" name="query" value="模块= App.js"> <button type="submit" class="CodesandboxButton_Button__4Enoo">在CodeSandbox中编辑</button> </form> </div> </div> <div class="Code_Code__EM5CC"> <button type="button" aria-hidden="true" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button> <div class="Code_TopBar__2nQ5k"> <div class="Code_Tabs__kfTvA" role="tablist" aria-orientation="horizontal"> <button class="Code_Tab__OlJDp" id="headlessui-tabs-tab-:R2mvb9mn6:" role="tab" type="button" aria-selected="true" tabindex="0">反应</button> <button class="Code_Tab__OlJDp" id="headlessui-tabs-tab-:R4mvb9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1">超文本标记语言</button> </div> <div> <button type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard"> <svg viewbox="0 0 20 20" class="Icon_Icon__Dm3QW" style="width:16px;height:16px"> <path d="M15 2a1 1 0 0 1 1 1v13.5a1.5 1.5 0 0 1-1.5 1.5h-9a1.5 1.5 0 0 1-1.5-1.5v-13.5a1 1 0 1 1 2 0v1a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-1a1 1 0 0 1 1-1zm-4 2h-2a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2z"></path> </svg></button> </div> </div> <div> <div id="headlessui-tabs-panel-:Rqvb9mn6:" role="tabpanel" tabindex="0"> <pre><code class="Code_ActualCode__QPVrq"><span class="token keyword">进口</跨度><跨度class="token punctuation">｛</跨度>TopBar<跨度class="token punctuation">，</跨度>ActionList<跨度class="token punctuation">，</跨度>图标<跨度class="token punctuation">，</跨度>VisuallyHidden<跨度class="token punctuation">，</跨度>框架<跨度class="token punctuation">，</跨度><跨度class="token punctuation">｝</跨度><跨度class="token keyword">从</跨度><跨度class="token string">“@shopify /北极星”</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">进口</跨度><跨度class="token punctuation">｛</跨度>ArrowLeftMinor<跨度class="token punctuation">，</跨度>QuestionMarkMajor<跨度class="token punctuation">｝</跨度><跨度class="token keyword">从</跨度><跨度class="token string">“@shopify / polaris-icons”</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">进口</跨度><跨度class="token punctuation">｛</跨度>useState<跨度class="token punctuation">，</跨度>useCallback<跨度class="token punctuation">｝</跨度><跨度class="token keyword">从</跨度><跨度class="token string">“反应”</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">函数</跨度><跨度class="token function">TopBarExample</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">｛</跨度><跨度class="token keyword">常量</跨度><跨度class="token punctuation">［</跨度>isUserMenuOpen<跨度class="token punctuation">，</跨度>setIsUserMenuOpen<跨度class="token punctuation">］</跨度><跨度class="token operator">＝</跨度><跨度class="token function">useState</跨度><跨度class="token punctuation">（</跨度><跨度class="token boolean">假</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度><跨度class="token punctuation">［</跨度>isSecondaryMenuOpen<跨度class="token punctuation">，</跨度>setIsSecondaryMenuOpen<跨度class="token punctuation">］</跨度><跨度class="token operator">＝</跨度><跨度class="token function">useState</跨度><跨度class="token punctuation">（</跨度><跨度class="token boolean">假</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度><跨度class="token punctuation">［</跨度>isSearchActive<跨度class="token punctuation">，</跨度>setIsSearchActive<跨度class="token punctuation">］</跨度><跨度class="token operator">＝</跨度><跨度class="token function">useState</跨度><跨度class="token punctuation">（</跨度><跨度class="token boolean">假</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度><跨度class="token punctuation">［</跨度>searchValue<跨度class="token punctuation">，</跨度>setSearchValue<跨度class="token punctuation">］</跨度><跨度class="token operator">＝</跨度><跨度class="token function">useState</跨度><跨度class="token punctuation">（</跨度><跨度class="token string">”</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>toggleIsUserMenuOpen<跨度class="token operator">＝</跨度><跨度class="token function">useCallback</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">）</跨度><跨度class="token operator">= ></跨度><跨度class="token function">setIsUserMenuOpen</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">（</跨度><跨度class="token parameter">isUserMenuOpen</跨度><跨度class="token punctuation">）</跨度><跨度class="token operator">= ></跨度><跨度class="token operator">！</跨度>isUserMenuOpen<跨度class="token punctuation">）</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>toggleIsSecondaryMenuOpen<跨度class="token operator">＝</跨度><跨度class="token function">useCallback</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">）</跨度><跨度class="token operator">= ></跨度><跨度class="token function">setIsSecondaryMenuOpen</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">（</跨度><跨度class="token parameter">isSecondaryMenuOpen</跨度><跨度class="token punctuation">）</跨度><跨度class="token operator">= ></跨度><跨度class="token operator">！</跨度>isSecondaryMenuOpen<跨度class="token punctuation">）</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>handleSearchResultsDismiss<跨度class="token operator">＝</跨度><跨度class="token function">useCallback</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">）</跨度><跨度class="token operator">= ></跨度><跨度class="token punctuation">｛</跨度><跨度class="token function">setIsSearchActive</跨度><跨度class="token punctuation">（</跨度><跨度class="token boolean">假</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token function">setSearchValue</跨度><跨度class="token punctuation">（</跨度><跨度class="token string">”</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>handleSearchChange<跨度class="token operator">＝</跨度><跨度class="token function">useCallback</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">（</跨度><跨度class="token parameter">价值</跨度><跨度class="token punctuation">）</跨度><跨度class="token operator">= ></跨度><跨度class="token punctuation">｛</跨度><跨度class="token function">setSearchValue</跨度><跨度class="token punctuation">（</跨度>价值<跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token function">setIsSearchActive</跨度><跨度class="token punctuation">（</跨度>价值<跨度class="token punctuation">．</跨度>长度<跨度class="token operator">></跨度><跨度class="token number">0</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>handleNavigationToggle<跨度class="token operator">＝</跨度><跨度class="token function">useCallback</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">（</跨度><跨度class="token punctuation">）</跨度><跨度class="token operator">= ></跨度><跨度class="token punctuation">｛</跨度>控制台<跨度class="token punctuation">．</跨度><跨度class="token function">日志</跨度><跨度class="token punctuation">（</跨度><跨度class="token string">“切换导航可见性”</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>标志<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">宽度</跨度><跨度class="token operator">：</跨度><跨度class="token number">124</跨度><跨度class="token punctuation">，</跨度><跨度class="token literal-property property">topBarSource</跨度><跨度class="token operator">：</跨度><跨度class="token string">“https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999”</跨度><跨度class="token punctuation">，</跨度><跨度class="token literal-property property">url</跨度><跨度class="token operator">：</跨度><跨度class="token string">“http://jadedpixel.com”</跨度><跨度class="token punctuation">，</跨度><跨度class="token literal-property property">accessibilityLabel</跨度><跨度class="token operator">：</跨度><跨度class="token string">“厌倦像素”</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>userMenuMarkup<跨度class="token operator">＝</跨度><跨度class="token punctuation">（</跨度><跨度class="token operator"><</跨度>TopBar<跨度class="token punctuation">．</跨度>UserMenu行动<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">项目</跨度><跨度class="token operator">：</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">内容</跨度><跨度class="token operator">：</跨度><跨度class="token string">“回到Shopify”</跨度><跨度class="token punctuation">，</跨度><跨度class="token literal-property property">图标</跨度><跨度class="token operator">：</跨度>ArrowLeftMinor<跨度class="token punctuation">｝</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">项目</跨度><跨度class="token operator">：</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">内容</跨度><跨度class="token operator">：</跨度><跨度class="token string">“社区论坛”</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">｝</跨度>的名字<跨度class="token operator">＝</跨度><跨度class="token string">“佛法”</跨度>细节<跨度class="token operator">＝</跨度><跨度class="token string">“厌倦像素”</跨度>名字的首字母<跨度class="token operator">＝</跨度><跨度class="token string">“D”</跨度>开放<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>isUserMenuOpen<跨度class="token punctuation">｝</跨度>onToggle<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>toggleIsUserMenuOpen<跨度class="token punctuation">｝</跨度><跨度class="token operator">/</跨度><跨度class="token operator">></跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>searchResultsMarkup<跨度class="token operator">＝</跨度><跨度class="token punctuation">（</跨度><跨度class="token operator"><</跨度>ActionList物品<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">内容</跨度><跨度class="token operator">：</跨度><跨度class="token string">“Shopify帮助中心”</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">内容</跨度><跨度class="token operator">：</跨度><跨度class="token string">“社区论坛”</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">｝</跨度><跨度class="token operator">/</跨度><跨度class="token operator">></跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>searchFieldMarkup<跨度class="token operator">＝</跨度><跨度class="token punctuation">（</跨度><跨度class="token operator"><</跨度>TopBar<跨度class="token punctuation">．</跨度>SearchField onChange<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>handleSearchChange<跨度class="token punctuation">｝</跨度>价值<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>searchValue<跨度class="token punctuation">｝</跨度>占位符<跨度class="token operator">＝</跨度><跨度class="token string">“搜索”</跨度>showFocusBorder<跨度class="token operator">/</跨度><跨度class="token operator">></跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>secondaryMenuMarkup<跨度class="token operator">＝</跨度><跨度class="token punctuation">（</跨度><跨度class="token operator"><</跨度>TopBar<跨度class="token punctuation">．</跨度>菜单activatorContent<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度><跨度class="token operator"><</跨度>跨度<跨度class="token operator">></跨度><跨度class="token operator"><</跨度>图标的源<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>QuestionMarkMajor<跨度class="token punctuation">｝</跨度><跨度class="token operator">/</跨度><跨度class="token operator">></跨度><跨度class="token operator"><</跨度>VisuallyHidden<跨度class="token operator">></跨度>二级菜单<跨度class="token operator"><</跨度><跨度class="token operator">/</跨度>VisuallyHidden<跨度class="token operator">></跨度><跨度class="token operator"><</跨度><跨度class="token operator">/</跨度>跨度<跨度class="token operator">></跨度><跨度class="token punctuation">｝</跨度>开放<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>isSecondaryMenuOpen<跨度class="token punctuation">｝</跨度>onOpen<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>toggleIsSecondaryMenuOpen<跨度class="token punctuation">｝</跨度>onClose<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>toggleIsSecondaryMenuOpen<跨度class="token punctuation">｝</跨度>行动<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">项目</跨度><跨度class="token operator">：</跨度><跨度class="token punctuation">［</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">内容</跨度><跨度class="token operator">：</跨度><跨度class="token string">“社区论坛”</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">，</跨度><跨度class="token punctuation">］</跨度><跨度class="token punctuation">｝</跨度><跨度class="token operator">/</跨度><跨度class="token operator">></跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">常量</跨度>topBarMarkup<跨度class="token operator">＝</跨度><跨度class="token punctuation">（</跨度><跨度class="token operator"><</跨度>TopBar showNavigationToggle userMenu<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>userMenuMarkup<跨度class="token punctuation">｝</跨度>secondaryMenu<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>secondaryMenuMarkup<跨度class="token punctuation">｝</跨度>searchResultsVisible<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>isSearchActive<跨度class="token punctuation">｝</跨度>searchField<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>searchFieldMarkup<跨度class="token punctuation">｝</跨度>searchResults<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>searchResultsMarkup<跨度class="token punctuation">｝</跨度>onSearchResultsDismiss<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>handleSearchResultsDismiss<跨度class="token punctuation">｝</跨度>onNavigationToggle<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>handleNavigationToggle<跨度class="token punctuation">｝</跨度><跨度class="token operator">/</跨度><跨度class="token operator">></跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token keyword">返回</跨度><跨度class="token punctuation">（</跨度><跨度class="token operator"><</跨度>div风格<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度><跨度class="token punctuation">｛</跨度><跨度class="token literal-property property">高度</跨度><跨度class="token operator">：</跨度><跨度class="token string">“250 px”</跨度><跨度class="token punctuation">｝</跨度><跨度class="token punctuation">｝</跨度><跨度class="token operator">></跨度><跨度class="token operator"><</跨度>帧topBar<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>topBarMarkup<跨度class="token punctuation">｝</跨度>标志<跨度class="token operator">＝</跨度><跨度class="token punctuation">｛</跨度>标志<跨度class="token punctuation">｝</跨度><跨度class="token operator">/</跨度><跨度class="token operator">></跨度><跨度class="token operator"><</跨度><跨度class="token operator">/</跨度>div<跨度class="token operator">></跨度><跨度class="token punctuation">）</跨度><跨度class="token punctuation">；</跨度><跨度class="token punctuation">｝</跨度></code></pre> </div> </div> </div> </div> </div> </div> </div> <div> <div class="Longform_Longform__qNwjb"> <div class="Longform_Content__Q1ZR9"> <h2 id="props">道具</h2> <p>想要帮助完善这个功能吗?请<！-- --><a href="https://github.com/shopify/polaris/issues/new?title=%5Bpolaris.shopify.com%5D%20Props%20table%20feedback&labels=polaris.shopify.com">分享你的反馈</a>．</p> </div> </div> <div class="PropsTable_TypeTable__VwXvn" style="opacity:1;height:auto;transform:none"> <div class="PropsTable_TypeTableHeader__UzJWZ"> 接口<！-- --> TopBarProps<！-- --> </div> <dl> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">showNavigationToggle<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>切换是否提供了导航组件。控制移动导航切换按钮的存在。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">userMenu<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</跨度></跨度>．<跨度class="PropsTable_SyntaxType__UfemH"><span>ReactNode</跨度></跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>接受一个用户组件，该用户组件作为顶部栏组件的静态成员可用，并呈现为主菜单。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">secondaryMenu<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</跨度></跨度>．<跨度class="PropsTable_SyntaxType__UfemH"><span>ReactNode</跨度></跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>接受作为顶部栏组件的静态成员可用的菜单组件。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">contextControl<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</跨度></跨度>．<跨度class="PropsTable_SyntaxType__UfemH"><span>ReactNode</跨度></跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>接受用于帮助用户在不同上下文之间切换的组件。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">searchField<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</跨度></跨度>．<跨度class="PropsTable_SyntaxType__UfemH"><span>ReactNode</跨度></跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>接受一个搜索字段组件，该组件作为顶部栏组件的“TextField”静态成员可用。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">searchResults<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</跨度></跨度>．<跨度class="PropsTable_SyntaxType__UfemH"><span>ReactNode</跨度></跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>接受搜索结果组件，该组件最好由包含可操作搜索结果列表的卡片组件组成。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">searchResultsVisible<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>布尔属性，指示搜索结果当前是否可见。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">searchResultsOverlayVisible<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>搜索结果覆盖是否有一个可见的背景。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">onSearchResultsDismiss<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ">() = ><跨度class="PropsTable_SyntaxType__UfemH"><span>无效</跨度></跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>处理搜索结果撤销的回调函数。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">onNavigationToggle<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ">() = ><跨度class="PropsTable_SyntaxType__UfemH"><span>无效</跨度></跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>一个处理隐藏和显示移动导航的回调函数。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">logoSuffix<跨度>?</跨度></跨度><跨度class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</跨度></跨度>．<跨度class="PropsTable_SyntaxType__UfemH"><span>ReactNode</跨度></跨度></跨度></dt> <dd> <div class="PropsTable_Description__P0yil"> <p>接受用于补充标志标记的组件。</p> </div> </dd></span> </dl> </div> </div> <div class="Longform_Longform__qNwjb"> <div class="Longform_Content__Q1ZR9"> <h2 id="required-components">所需的组件</h2> <p>顶部栏组件必须传递给<a href="//www.theturtleeffect.com/polaris/components/frame">框架</a>组件。</p> <hr> <h2 id="best-practices">最佳实践</h2> <p>顶部栏组件应该:</p> <ul> <li>不为应用程序提供全局导航<ul> <li>使用<a href="//www.theturtleeffect.com/polaris/components/navigation">导航组件</a>而不是</li> </ul></li> <li>包括搜索，以帮助商家查找资源和导航应用程序</li> <li>包含一个用户菜单组件，以指示已登录的商家，并为他们提供全局操作</li> <li>提供一个颜色通过<a href="//www.theturtleeffect.com/polaris/components/app-provider">应用提供商</a>组件来设置背景样式</li> <li>全局菜单文本应该与顶部栏的其余部分形成对比，并通过WCAG 2.0指南的最小对比度</li> <li>使用SVG文件作为logo</li> <li>与顶部栏背景颜色相比，使用符合WCAG 2.0指南的最小对比度的标志</li> <li>显示导航切换，使它出现在小屏幕上</li> </ul> <hr> <h2 id="content-guidelines">内容的指导方针</h2> <h3 id="placeholder-content">占位符内容</h3> <p>搜索字段的占位符内容应该:</p> <ul> <li>总是说“搜索”</li> <li>不要使用省略号</li> </ul> <div class="dodont"> <div class="dodont-part" data-type="do"> <h4>做</h4> <ul> <li>搜索</li> </ul> </div> <div class="dodont-part" data-type="dont"> <h4>不</h4> <ul> <li>搜索…</li> </ul> </div> </div> <hr> <h2 id="top-bar-menu">顶部栏菜单</h2> <p>将激活器和包含操作列表的弹出窗口组合在一起以创建下拉菜单的组件。</p> <h3 id="menu-properties">菜单的属性</h3> <div class="table-wrapper"> <table> <thead> <tr> <th>道具</th> <th>类型</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>activatorContent</td> <td>反应。反应Node</td> <td>接受在打开菜单的按钮内部呈现的激活器组件</td> </tr> <tr> <td>行动</td> <td>ActionListProps(“区域”)</td> <td>在此菜单触发的弹出窗口中呈现的操作对象数组</td> </tr> <tr> <td>消息</td> <td><a href="//www.theturtleeffect.com/polaris/components/#type-message">MessageProps</a></td> <td>接受通过菜单与商家进行直接、紧急通信的消息</td> </tr> <tr> <td>开放</td> <td>布尔</td> <td>指示菜单当前是否打开的布尔属性</td> </tr> <tr> <td>onOpen ()</td> <td>函数</td> <td>处理打开菜单弹出窗口的回调函数</td> </tr> <tr> <td>onClose ()</td> <td>函数</td> <td>处理关闭菜单弹出窗口的回调函数</td> </tr> </tbody> </table> </div> <h2 id="top-bar-user-menu">顶部栏用户菜单</h2> <p>由用户头像激活的专用菜单组件。</p> <h3 id="menu-properties">菜单的属性</h3> <div class="table-wrapper"> <table> <thead> <tr> <th>道具</th> <th>类型</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>行动</td> <td>{项目:IconableAction []} []</td> <td>在此菜单触发的弹出窗口中呈现的操作对象数组</td> </tr> <tr> <td>消息</td> <td><a href="//www.theturtleeffect.com/polaris/components/#type-message">MessageProps</a></td> <td>通过用户菜单接受有助于与商家进行直接、紧急通信的消息</td> </tr> <tr> <td>的名字</td> <td>字符串</td> <td>详细说明将显示在用户菜单中的商家全名的字符串</td> </tr> <tr> <td>细节</td> <td>字符串</td> <td>允许在用户菜单中显示商家名称的进一步详细信息的字符串</td> </tr> <tr> <td>名字的首字母</td> <td>AvatarProps(“缩写”)</td> <td>商家的首字母缩写，在未提供时以头像代替</td> </tr> <tr> <td>《阿凡达》</td> <td>AvatarProps(“源”)</td> <td>代表商人的头像</td> </tr> <tr> <td>开放</td> <td>布尔</td> <td>一个布尔属性，指示用户菜单当前是否打开</td> </tr> <tr> <td>onToggle ()</td> <td>函数</td> <td>处理打开和关闭用户菜单的回调函数</td> </tr> </tbody> </table> </div> <h3 id="top-bar-menu-message">顶部栏菜单信息</h3> <h4>消息属性</h4> <div class="table-wrapper"> <table> <thead> <tr> <th>道具</th> <th>类型</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>标题</td> <td>字符串</td> <td>消息的标题</td> </tr> <tr> <td>描述</td> <td>字符串</td> <td>消息的描述</td> </tr> <tr> <td>行动</td> <td>{onClick():空白;内容:字符串}</td> <td>在消息附近呈现的操作</td> </tr> <tr> <td>链接</td> <td>{:字符串;内容:字符串}</td> <td>查看邮件内容的链接</td> </tr> <tr> <td>徽章</td> <td>{内容:字符串;状态:BadgeProps(的地位)}</td> <td>要呈现在消息附近的徽章</td> </tr> </tbody> </table> </div> <hr> <h2 id="top-bar-search-field">顶部栏搜索字段</h2> <p>为搜索用例量身定制的文本字段组件。</p> <h3 id="search-field-properties">搜索字段属性</h3> <div class="table-wrapper"> <table> <thead> <tr> <th>道具</th> <th>类型</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>价值</td> <td>字符串</td> <td>输入的初始值</td> </tr> <tr> <td>占位符</td> <td>字符串</td> <td>要显示的提示文本</td> </tr> <tr> <td>集中</td> <td>布尔</td> <td>强制焦点状态在输入上</td> </tr> <tr> <td>活跃的</td> <td>布尔</td> <td>强制进入搜索处于活动状态但文本字段组件未集中的状态</td> </tr> <tr> <td>onChange(价值:字符串)</td> <td>函数</td> <td>当值被改变时回调</td> </tr> <tr> <td>聚焦事件()</td> <td>函数</td> <td>当输入被聚焦时进行回调</td> </tr> <tr> <td>失去焦点事件()</td> <td>函数</td> <td>当焦点被移除时回调</td> </tr> </tbody> </table> </div> <hr> <h2 id="related-components">相关的组件</h2> <ul> <li>为顶部栏组件提供结构，以及主导航使用<a href="//www.theturtleeffect.com/polaris/components/frame">框架</a>组件。</li> <li>要显示应用程序框架内的主导航，请使用<a href="//www.theturtleeffect.com/polaris/components/navigation">导航</a>组件。</li> <li>一旦商家对页面上的表单进行了更改，请使用<a href="//www.theturtleeffect.com/polaris/components/contextual-save-bar">上下文保存栏</a>组件。</li> <li>要对操作的结果提供快速、一目了然的反馈，请使用<a href="//www.theturtleeffect.com/polaris/components/toast">烤面包</a>组件。</li> <li>要向商家指示页面正在加载或上传正在处理，请使用<a href="//www.theturtleeffect.com/polaris/components/loading">加载</a>组件。</li> </ul> </div> </div> <footer class="Page_Footer__97FKe"> <p><a href="https://github.com/Shopify/polaris/tree/mainpolaris.shopify.com/content/components/top-bar.md">编辑本页</a><a href="https://github.com/shopify/polaris/issues/new?title=%5Bpolaris.shopify.com%5D%20Feedback%20(on%20%2Fcomponents%2Ftop-bar)&labels=polaris.shopify.com">离开反馈</a></p> </footer> </article> <div class="Page_TOCWrapper__1EwAV"> <div class="TOC_TOC__caAZ_"> <ul></ul> </div> </div> </div> </div> </div> </div> </div> </body> </html>