资源项目- Shopify北极星</标题><link rel="preload" href="//www.theturtleeffect.com/polaris/_next/static/css/093d166ac9f6dfe8.css" as="style"> <link rel="stylesheet" href="//www.theturtleeffect.com/polaris/_next/static/css/093d166ac9f6dfe8.css" data-n-g=""> <link rel="preload" href="//www.theturtleeffect.com/polaris/_next/static/css/d0f44a22fb75bd43.css" as="style"> <link rel="stylesheet" href="//www.theturtleeffect.com/polaris/_next/static/css/d0f44a22fb75bd43.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/"><img alt="Shopify标志" srcSet="/images/shopify-logo.svg 1x, /images/shopify-logo.svg 2x" src="//www.theturtleeffect.com/polaris/images/shopify-logo.svg" width="24" height="24" decoding="async" data-nimg="1" loading="lazy" style="color:transparent">北极星</a> <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>搜索<span class="GlobalSearch_KeyboardShortcutHint__b5uqe">/</span></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">标题<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/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/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">显示文本<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/divider">分频器<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/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">标题<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/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/legacy-card">LegacyCard</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/legacy-stack">LegacyStack</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 Frame_isCurrent__EePN_"><a aria-current="page" 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">副标题<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/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="beta"> β</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">文本样式<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/thumbnail">缩略图</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"><a aria-current="false" 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">视觉上隐藏<divclass="StatusBadge_StatusBadge__0tTyU" data-value="deprecated"> 弃用</div></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/tools">工具</a><button class="Frame_Toggle__Ks3iQ" aria-label="Toggle section" aria-expanded="false"></button></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/resource-item">资源项目</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>资源项表示集合中的特定对象，例如产品或订单。它们提供关于资源类型的上下文信息，并链接到对象的详细信息页面。</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>默认的</span></button> <button id="headlessui-tabs-tab-:R4r9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>与媒体</span></button> <button id="headlessui-tabs-tab-:R6r9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>使用快捷操作</span></button> <button id="headlessui-tabs-tab-:R8r9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>垂直对齐</span></button> </div> </div> <div> <div id="headlessui-tabs-panel-:R3b9mn6:" role="tabpanel" tabindex="0"> <p>基本资源项，其详细信息在使用点被填充。</p> <div class="ComponentExamples_ExampleFrame__M2N8M"> <iframe src="//www.theturtleeffect.com/polaris/examples/resource-item-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_LQABMAAwl4s0uUASvCkAK78GDAAMna09U1kbR0AkvQq9QAqMAAetCHlYPyq5QDkLkYmFlY2dssA3AA65MWlFcAtKQDKtJpzC0vL8hi0e4eHYC3ctBAUjc2DMCMYCoAKJTNAlWAACgAlJVDuVyv4pOUANopWBPGAsQEqOD1FK0C4wDH0bGjOAAXXKAF5yucYFdNJCURToQdyPDyoJaG1yOVIZyEQAeGr8FgAPkFCPKQv6rXaXR6UulXL-CoAcuCYNTgMA4DFcC0bIgVgAjKCkXDlKxSZb1FBQNpJE3Lc2W62kKRwZZhZXSiDknUov0q4AhlXlCAsE0ANmk4ZVbSgLpttDg5hjdoT0q-tFgLoAEqQAO7lcakcoAcRgFQAakkWjBygAxRYqcoAdQgggWWu98b5EaHaBatEM_BdACkKBJ9Gg-QBZee4RYANxgWcHQ4R4XDFJC4fRMExZKBcB1R5POLgB63EYoRJJ33IVTn5HwF5rj-PpOvt-35SXtc5owOGgjkGw_A4jqkIBkCsLUuKcJ3kOSKnFG9RJvUuawPUI5jqQ_BzLScEqOyAEImh5T4eOS78FgLQoDS1GjuO5QAPwyiwECruKpqmJUNGESEQrmNxvHlCa5BGlA5EUdyvL8tmwpyv8OLKf6LA6lG_4UYm_BQDqSa6XpCKYB0cD6qa0ABqYnRoKaxI6gABrWvClmw1zQHA8yEeUAAkwA4akzkmaZsQqNqQUBrAYUAZKKEUUKkwzOUq5eBA860NS-wgKapAsKYC4sLlvmMB2MAQLg-jZbl-VQCVIDUeeuX6AAzLlCWmRG0V5qkGnCuYKW0F13WCaxhF0QxKBxduomqQqOKjQBbLhr6iXmMtMrmKKEqcqt5C3q85DTCc5RsIkRoVAtwyjKC4IOjAuwgBEcDRLE_DxIgiTJKkEQQdMOTMP49CMOohzHIR11CE88xtuUuWPLQuXspDZSVIi8j0A0pCkBUtzw4jMO0EoqjmBgUC8IwKMQyUUPlJkTF3O2uUEOYjM00cdPo8ADNZAACmuUYwPw5QE0suVrG4myeN4nNoxUDBwxLugGOs7hbBl6YWhgSTwOYDA5BQ8vcxUktq9LHjbOmpotNALAG3AKjmFIpiwHABAYJZnNUSDaAxCLzHKBgLSRYwBD4LQwKwGHtCRKYQwsAKci48jIAHVRix48xGBYzAON45CfsB_wB1Z7QBDgZBAqDkKjOC6Qq7C6LEAAIwABzkDqDAhFtddZOUm2cqJ9dC5BCUHS9RRvTEcQJEkKRpDEbBTAQNUqFAwP5GDohCuJkZaYjqedaJ4nilPUSz598 -_WEIRAA"> <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-:Rarjb9mn6:" role="tab" type="button" aria-selected="true" tabindex="0">反应</button> <button class="Code_Tab__OlJDp" id="headlessui-tabs-tab-:Rirjb9mn6:" 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="M8 3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1s0 .997.996 1h2.004a2 2 0 0 1 2 2v7.586a2 2 0 0 1-.586 1.414l-2.414 2.414a2 2 0 0 1-1.414.586h-7.586a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2h2.004c.996-.003.996-1 .996-1zm5 3v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1h-2v10h7v-2a1 1 0 0 1 1-1h2v-7h-2z"></path> </svg></button> </div> </div> <div> <div id="headlessui-tabs-panel-:R3bjb9mn6:" role="tabpanel" tabindex="0"> <pre class="prismjs"><code class="Code_ActualCode__QPVrq" style="white-space:pre-wrap"><span class=""><span class="token keyword module">进口</span><span class=""></span><span class="token imports punctuation">｛</span><span class="token imports maybe-class-name">卡</span><span class="token imports punctuation">，</span><span class="token imports"></span><span class="token imports maybe-class-name">ResourceList</span><span class="token imports punctuation">，</span><span class="token imports"></span><span class="token imports maybe-class-name">ResourceItem</span><span class="token imports punctuation">，</span><span class="token imports"></span><span class="token imports maybe-class-name">文本</span><span class="token imports punctuation">｝</span><span class=""></span><span class="token keyword module">从</span><span class=""></span><span class="token string">“@shopify /北极星”</span><span class="token punctuation">；</span><span class=""></span></span><span class=""><span class=""></span><span class="token keyword module">进口</span><span class=""></span><span class="token imports punctuation">｛</span><span class="token imports">useState</span><span class="token imports punctuation">｝</span><span class=""></span><span class="token keyword module">从</span><span class=""></span><span class="token string">“反应”</span><span class="token punctuation">；</span><span class=""></span></span><span class=""></span><span class=""><span class=""></span><span class="token keyword">函数</span><span class=""></span><span class="token function maybe-class-name">ResourceItemExample</span><span class="token punctuation">（</span><span class="token punctuation">）</span><span class=""></span><span class="token punctuation">｛</span><span class=""></span></span><span class=""><span class=""></span><span class="token keyword">常量</span><span class=""></span><span class="token punctuation">［</span><span class="">设置selecteditem</span><span class="token punctuation">，</span><span class="">setSelectedItems</span><span class="token punctuation">］</span><span class=""></span><span class="token operator">＝</span><span class=""></span><span class="token function">useState</span><span class="token punctuation">（</span><span class="token punctuation">［</span><span class="token punctuation">］</span><span class="token punctuation">）</span><span class="token punctuation">；</span><span class=""></span></span><span class=""></span><span class=""><span class=""></span><span class="token keyword control-flow">返回</span><span class=""></span><span class="token punctuation">（</span><span class=""></span></span><span class=""><span class=""></span><span class="token operator"><</span><span class="token maybe-class-name">卡</span><span class="token operator">></span><span class=""></span></span><span class=""><span class=""></span><span class="token operator"><</span><span class="token maybe-class-name">ResourceList</span><span class=""></span></span><span class=""><span class="">resourceName</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="token punctuation">｛</span><span class="token literal-property property">单数</span><span class="token operator">：</span><span class=""></span><span class="token string">“博客”</span><span class="token punctuation">，</span><span class=""></span><span class="token literal-property property">复数</span><span class="token operator">：</span><span class=""></span><span class="token string">“博客”</span><span class="token punctuation">｝</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class="">项目</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="token punctuation">［</span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">｛</span><span class=""></span></span><span class=""><span class=""></span><span class="token literal-property property">id</span><span class="token operator">：</span><span class=""></span><span class="token number">6</span><span class="token punctuation">，</span><span class=""></span></span><span class=""><span class=""></span><span class="token literal-property property">url</span><span class="token operator">：</span><span class=""></span><span class="token string">的帖子/ 6</span><span class="token punctuation">，</span><span class=""></span></span><span class=""><span class=""></span><span class="token literal-property property">标题</span><span class="token operator">：</span><span class=""></span><span class="token string">如何从线框图中获取价值</span><span class="token punctuation">，</span><span class=""></span></span><span class=""><span class=""></span><span class="token literal-property property">作者</span><span class="token operator">：</span><span class=""></span><span class="token string">“乔纳森红树林”</span><span class="token punctuation">，</span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">｝</span><span class="token punctuation">，</span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">］</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class="">设置selecteditem</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="">设置selecteditem</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class="">onSelectionChange</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="">setSelectedItems</span><span class="token punctuation">｝</span><span class=""></span></span><span class="">可选择的</span><span class=""><span class="">renderItem</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="token punctuation">（</span><span class="token parameter">项</span><span class="token punctuation">）</span><span class=""></span><span class="token arrow operator">= ></span><span class=""></span><span class="token punctuation">｛</span><span class=""></span></span><span class=""><span class=""></span><span class="token keyword">常量</span><span class=""></span><span class="token punctuation">｛</span><span class="">id</span><span class="token punctuation">，</span><span class="">url</span><span class="token punctuation">，</span><span class="">标题</span><span class="token punctuation">，</span><span class="">作者</span><span class="token punctuation">｝</span><span class=""></span><span class="token operator">＝</span><span class="">项</span><span class="token punctuation">；</span><span class=""></span></span><span class=""><span class=""></span><span class="token keyword">常量</span><span class="">authorMarkup</span><span class="token operator">＝</span><span class="">作者</span><span class="token operator">?</span><span class=""></span><span class="token operator"><</span><span class="">div</span><span class="token operator">></span><span class="">通过</span><span class="token punctuation">｛</span><span class="">作者</span><span class="token punctuation">｝</span><span class="token operator"><</span><span class="token operator">/</span><span class="">div</span><span class="token operator">></span><span class=""></span><span class="token operator">：</span><span class=""></span><span class="token keyword null nil">零</span><span class="token punctuation">；</span><span class=""></span></span><span class=""><span class=""></span><span class="token keyword control-flow">返回</span><span class=""></span><span class="token punctuation">（</span><span class=""></span></span><span class=""><span class=""></span><span class="token operator"><</span><span class="token maybe-class-name">ResourceItem</span><span class=""></span></span><span class=""><span class="">id</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="">id</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class="">url</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="">url</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class="">accessibilityLabel</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="token template-string template-punctuation string">｀</span><span class="token template-string string">查看详细信息</span><span class="token template-string interpolation interpolation-punctuation punctuation">$ {</span><span class="token template-string interpolation">标题</span><span class="token template-string interpolation interpolation-punctuation punctuation">｝</span><span class="token template-string template-punctuation string">｀</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class="">的名字</span><span class="token operator">＝</span><span class="token punctuation">｛</span><span class="">标题</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class=""></span><span class="token operator">></span><span class=""></span></span><span class=""><span class=""></span><span class="token operator"><</span><span class="token maybe-class-name">文本</span><span class="">变体</span><span class="token operator">＝</span><span class="token string">“bodyMd”</span><span class="">fontWeight</span><span class="token operator">＝</span><span class="token string">“大胆”</span><span class=""></span><span class="token keyword module">作为</span><span class="token operator">＝</span><span class="token string">“h3”</span><span class="token operator">></span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">｛</span><span class="">标题</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class=""></span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">文本</span><span class="token operator">></span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">｛</span><span class="">authorMarkup</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class=""></span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">ResourceItem</span><span class="token operator">></span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">）</span><span class="token punctuation">；</span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">｝</span><span class="token punctuation">｝</span><span class=""></span></span><span class=""><span class=""></span><span class="token operator">/</span><span class="token operator">></span><span class=""></span></span><span class=""><span class=""></span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">卡</span><span class="token operator">></span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">）</span><span class="token punctuation">；</span><span class=""></span></span><span class=""><span class=""></span><span class="token punctuation">｝</span></span></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_UnparsablePropsWarning__7GPhO"> <p>这个组件以一种我们的网站无法自动解析的方式定义它的道具。类型定义如下所示，但它可能很难阅读。</p> </div> <div class="PropsTable_TypeTable__VwXvn" style="opacity:1;height:auto;transform:none"> <div class="PropsTable_TypeTableHeader__UzJWZ"> 类型 ResourceItemProps </div> <div class="PropsTable_RawInterfaceValue__LGQ0l"> <span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">PropsWithUrl</button></span>|<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">PropsWithClick</button></span> </div> </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/resource-list">资源列表</a>组件。</p> <hr> <h2 id="accessibility">可访问性</h2> <p>资源项的功能是链接到该项的全页表示形式。每个项目应该有一个唯一的<code>的名字</code>道具。为每一个<code>ResourceItem</code>,<code>accessibilityLabel</code>道具应该用来给链接一个唯一的<code>aria-label</code>价值。的<code>aria-label</code>值应该传达链接的目的，使用<code>的名字</code>价值。使用屏幕阅读器或其他文本语音转换工具的商家应该能够轻松区分每个链接。</p> <p>向资源项添加自定义内容时，请确保所有文本对所有用户可用，并且所有自定义控件具有唯一的可访问名称，以帮助用户了解控件激活时将发生什么。</p> <h3 id="keyboard">键盘</h3> <p>方法可以激活链接<kbd>输入</kbd>/<kbd>返回</kbd>键。</p> <p>如果您向资源项添加了自定义控件，那么请确保这些控件:</p> <ul> <li>可以和键盘一起使用吗</li> <li>按逻辑顺序接收键盘焦点</li> <li>显示一个可见的焦点指示器</li> </ul> <hr> <h2 id="best-practices">最佳实践</h2> <p>资源项应该:</p> <ul> <li>根据所显示的特定类型的上下文进行定制。</li> <li>单击时执行操作。操作应该导航到资源的详细信息页面或提供关于该项的更多详细信息。</li> </ul> <p>资源项可以选择:</p> <ul> <li>提供<a href="//www.theturtleeffect.com/polaris/components/resource-list">快捷键操作</a>从资源的详细信息页面快速访问频繁的操作。</li> </ul> <hr> <h2 id="content-guidelines">内容的指导方针</h2> <p>资源项应该:</p> <ul> <li>展示商家需要的信息，以找到他们正在寻找的商品。</li> <li>支持特定类型资源的商家任务。</li> <li>避免冒号。</li> <li><a href="//www.theturtleeffect.com/polaris/components/resource-list">快捷键操作</a>对于按钮，不需要遵循完整的动词+名词公式。</li> </ul> <hr> <h2 id="related-components">相关的组件</h2> <p>要显示相关内容的简单列表，请执行以下操作<a href="//www.theturtleeffect.com/polaris/components/list">使用列表组件</a>．</p> </div> </div> <footer class="Page_Footer__97FKe"> <p><a href="https://github.com/Shopify/polaris/tree/mainpolaris.shopify.com/content/components/resource-item.md">编辑本页</a><a href="https://github.com/shopify/polaris/issues/new?title=%5Bpolaris.shopify.com%5D%20Feedback%20(on%20%2Fcomponents%2Fresource-item)&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>