索引表- Shopify北极星</标题><link rel="preload" href="//www.theturtleeffect.com/polaris/_next/static/css/f2a4769e33015717.css" as="style"> <link rel="stylesheet" href="//www.theturtleeffect.com/polaris/_next/static/css/f2a4769e33015717.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>搜索<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">α卡<div class="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">α堆栈<div class="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">流血<div class="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">盒子<div class="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">列<div class="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">内容块<div class="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">网格<div class="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 Frame_isCurrent__EePN_"><a aria-current="page" 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">内联<div class="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">床单<div class="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">文本<div class="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/tiles">瓷砖<div class="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"><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">视觉上隐藏</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">沙盒<div class="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/index-table">索引表</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> <button id="headlessui-tabs-tab-:Rar9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>使用批量操作</span></button> <button id="headlessui-tabs-tab-:Rcr9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>使用多个推广的批量操作</span></button> <button id="headlessui-tabs-tab-:Rer9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>具有跨页面的批量操作和选择</span></button> <button id="headlessui-tabs-tab-:Rgr9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>带加载状态</span></button> <button id="headlessui-tabs-tab-:Rir9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>与过滤</span></button> <button id="headlessui-tabs-tab-:Rkr9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>具有行状态</span></button> <button id="headlessui-tabs-tab-:Rmr9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>最后一栏有粘性</span></button> <button id="headlessui-tabs-tab-:Ror9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>带行导航链接</span></button> <button id="headlessui-tabs-tab-:Rqr9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>带有可点击按钮列</span></button> <button id="headlessui-tabs-tab-:Rsr9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>没有复选框</span></button> <button id="headlessui-tabs-tab-:Rur9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>和它的所有元素</span></button> <button id="headlessui-tabs-tab-:R10r9mn6:" 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/index-table-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_LQABMAAOuTl5QCS5GwAHgAqaABGsNI1da0wzbQAyrSm3b3lAMJeLD215QCuKY0tAErwpAv8GDAjmnMh5WD8quUA5C5GJhZWNnZnANw1xaUV68JHJyrn8hi0jzUamAFtxaBAKOUhi9YCsBu0ujAAKLNNAlWAACgAlJUJv4pOUMEtaKoYPw4OUALzlADaEzq1XmdTqEBYiHOAGYACwARm5ZzmTKZWygbLOhKkJLJ5i5fIFgvKsRUMFFAFk0DBygApGAqOwUfl0plQUgYCTg8iigAiMFNtC20nKAFUhukDYymaR-GwyWyAEwABjlgtRm0YQw4jFFABJfdJOf7_W7BeFDQz5eUWaLfQBWABsssNdWFovFxKVUpzuaT8sVyvOiKgsFqAHkMIY0NXBcbbebRQAZUjk9LkfCwOAO52uoMer2kuBs9mBwvlEMg4YR2jR7nxzvlFPzAC6T3meIqgjIWx2ADlURqqWmmXAYrgFjYS0TJbuUFAtkl3xLyzgasQmPXEKHxYAUlgP4YBYdYL22eAHSSKB4M2RC4CGGBoPoWZyn0NAmlgLCcPNSYCJHVJKUNJYYFhZo0MvXZaE0dFS0lOBMVAk9wLPUgAHc1X4LAFhQSkCQ_QCCBUNAUHRQ10WAFkHVrB1uzNCgHU9b1xxXFRQ3XApwgzJoBmxCkAD5ynk906gAHno-FYAIVYBOXZkWApJSWBCdzyiwGBTC8llfNsx9sJtXCvKgyLYMYjCCBiDAfzYOB0RZTFQvTOorCfMEKGC0zmiy-ULL8hyiqcwhJmwqAyrCwU7P6QYRjGDUADcvAgDTyApKoQCkE4R36izgFrEI7PMZrhlGWB6uy8pJsczpnJqxt5uyiqWiqgg1rq4B1Py8gJvMZaEV22qNvTLa4RW6rLuAbS5xOs7Vsu8rXvu9bgFXMMNxeyq7ou9blyWwHztc_irvKTE5S4wF5kEO1-FqGzGumL1ofsz6_PPdDr1vLy8aYm8lRK9MIHoFRJgMrz2KkptcFofRyflGKYJYeoqbgGm1y8vy6hQ-KdkwiKOfKAB-c50kbM5yjZdncOF-ACEZ5m_NZwUKBIyKyIo_AvIolhiLFo7yMI_BNaZfQhBYZ84C82kGqZYAwVoWBRVJmAzn3Bb6Tdj3zgHHt9V9v3XcpwOzmbWd-AJAyfendMI_dusznSfS13KOAN0TvyDytrGXZOQSvBElArbB7a7uhyaMZYDb4eOhGagGV5yjYRJXwqKE0To8HYGRVFvxgB4QAiOBolifh4kQRJklSCIipyZh_HoRh1GeEpPTeIQ_k-U5-t-Wh-uPF4 d8qal5hovzsaqq5jkpuq99ojrvhmzleeyu-t_bzixmft8fqbbzd_x_uqc-zrl7_waaonhaiyuke4d5an0ayk47hbhdtgoaybfqgaopkp1s4bgbieg8oydsy5zambybqxb28ohepqaqjwdw4dma6asaalaafwbuoykqbu4aeawhahbibjynnjownamqkfumuisjujacd4foa2hubriimhqcweschsb336k3arjw77iqwnfgat9abstohi8gpim7mnoaqqqpl-bo0wra-bic44qg5aadl6sabgira7_3koydak1fgkaqd6eqtdx5fenjeoicqkgpdsdefobb9c0bufave-qn6idsnbdqgzpjhymsfeafljpvisqkqigsz5zixmeeiqa"> <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-:R1be3b9mn6:" role="tab" type="button" aria-selected="true" tabindex="0">反应</button> <button class="Code_Tab__OlJDp" id="headlessui-tabs-tab-:R2be3b9mn6:" 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-:Rde3b9mn6:" role="tabpanel" tabindex="0"> <pre><code class="Code_ActualCode__QPVrq"><span class="token keyword">进口</span><span class="token punctuation">{</span>IndexTable<span class="token punctuation">，</span>TextStyle<span class="token punctuation">，</span>卡<span class="token punctuation">，</span>useIndexResourceState<span class="token punctuation">，</span><span class="token punctuation">}</span><span class="token keyword">从</span><span class="token string">“@shopify /北极星”</span><span class="token punctuation">;</span><span class="token keyword">进口</span>反应<span class="token keyword">从</span><span class="token string">“反应”</span><span class="token punctuation">;</span><span class="token keyword">函数</span><span class="token function">SimpleIndexTableExample</span><span class="token punctuation">（</span><span class="token punctuation">）</span><span class="token punctuation">{</span><span class="token keyword">常量</span>客户<span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">：</span><span class="token string">“3411”</span><span class="token punctuation">，</span><span class="token literal-property property">url</span><span class="token operator">：</span><span class="token string">“客户/ 341”</span><span class="token punctuation">，</span><span class="token literal-property property">名字</span><span class="token operator">：</span><span class="token string">“美Jemison”</span><span class="token punctuation">，</span><span class="token literal-property property">位置</span><span class="token operator">：</span><span class="token string">美国迪凯特的</span><span class="token punctuation">，</span><span class="token literal-property property">订单</span><span class="token operator">：</span><span class="token number">20.</span><span class="token punctuation">，</span><span class="token literal-property property">amountSpent</span><span class="token operator">：</span><span class="token string">“2400美元”</span><span class="token punctuation">，</span><span class="token punctuation">}</span><span class="token punctuation">，</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">：</span><span class="token string">“2561”</span><span class="token punctuation">，</span><span class="token literal-property property">url</span><span class="token operator">：</span><span class="token string">“客户/ 256”</span><span class="token punctuation">，</span><span class="token literal-property property">名字</span><span class="token operator">：</span><span class="token string">“艾伦·奥乔亚”</span><span class="token punctuation">，</span><span class="token literal-property property">位置</span><span class="token operator">：</span><span class="token string">“美国洛杉矶”</span><span class="token punctuation">，</span><span class="token literal-property property">订单</span><span class="token operator">：</span><span class="token number">30.</span><span class="token punctuation">，</span><span class="token literal-property property">amountSpent</span><span class="token operator">：</span><span class="token string">“140美元”</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="token keyword">常量</span>resourceName<span class="token operator">=</span><span class="token punctuation">{</span><span class="token literal-property property">单数</span><span class="token operator">：</span><span class="token string">“客户”</span><span class="token punctuation">，</span><span class="token literal-property property">复数</span><span class="token operator">：</span><span class="token string">“客户”</span><span class="token punctuation">，</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">常量</span><span class="token punctuation">{</span>selectedResources<span class="token punctuation">，</span>allResourcesSelected<span class="token punctuation">，</span>handleSelectionChange<span class="token punctuation">}</span><span class="token operator">=</span><span class="token function">useIndexResourceState</span><span class="token punctuation">（</span>客户<span class="token punctuation">）</span><span class="token punctuation">;</span><span class="token keyword">常量</span>rowMarkup<span class="token operator">=</span>客户<span class="token punctuation">．</span><span class="token function">地图</span><span class="token punctuation">（</span><span class="token punctuation">（</span><span class="token parameter"><span class="token punctuation">{</span>id<span class="token punctuation">，</span>名字<span class="token punctuation">，</span>位置<span class="token punctuation">，</span>订单<span class="token punctuation">，</span>amountSpent<span class="token punctuation">}</span><span class="token punctuation">，</span>指数</span><span class="token punctuation">）</span><span class="token operator">= ></span><span class="token punctuation">（</span><span class="token operator"><</span>IndexTable<span class="token punctuation">．</span>行id<span class="token operator">=</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span>关键<span class="token operator">=</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span>选择<span class="token operator">=</span><span class="token punctuation">{</span>selectedResources<span class="token punctuation">．</span><span class="token function">包括</span><span class="token punctuation">（</span>id<span class="token punctuation">）</span><span class="token punctuation">}</span>位置<span class="token operator">=</span><span class="token punctuation">{</span>指数<span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span>IndexTable<span class="token punctuation">．</span>细胞<span class="token operator">></span><span class="token operator"><</span>TextStyle变异<span class="token operator">=</span><span class="token string">“强”</span><span class="token operator">></span><span class="token punctuation">{</span>名字<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>TextStyle<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>IndexTable<span class="token punctuation">．</span>细胞<span class="token operator">></span><span class="token operator"><</span>IndexTable<span class="token punctuation">．</span>细胞<span class="token operator">></span><span class="token punctuation">{</span>位置<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>IndexTable<span class="token punctuation">．</span>细胞<span class="token operator">></span><span class="token operator"><</span>IndexTable<span class="token punctuation">．</span>细胞<span class="token operator">></span><span class="token punctuation">{</span>订单<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>IndexTable<span class="token punctuation">．</span>细胞<span class="token operator">></span><span class="token operator"><</span>IndexTable<span class="token punctuation">．</span>细胞<span class="token operator">></span><span class="token punctuation">{</span>amountSpent<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>IndexTable<span class="token punctuation">．</span>细胞<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>IndexTable<span class="token punctuation">．</span>行<span class="token operator">></span><span class="token punctuation">）</span><span class="token punctuation">，</span><span class="token punctuation">）</span><span class="token punctuation">;</span><span class="token keyword">返回</span><span class="token punctuation">（</span><span class="token operator"><</span>卡<span class="token operator">></span><span class="token operator"><</span>IndexTable resourceName<span class="token operator">=</span><span class="token punctuation">{</span>resourceName<span class="token punctuation">}</span>itemCount<span class="token operator">=</span><span class="token punctuation">{</span>客户<span class="token punctuation">．</span>长度<span class="token punctuation">}</span>selectedItemsCount<span class="token operator">=</span><span class="token punctuation">{</span>allResourcesSelected<span class="token operator">？</span><span class="token string">“所有”</span><span class="token operator">：</span>selectedResources<span class="token punctuation">．</span>长度<span class="token punctuation">}</span>onSelectionChange<span class="token operator">=</span><span class="token punctuation">{</span>handleSelectionChange<span class="token punctuation">}</span>标题<span class="token operator">=</span><span class="token punctuation">{</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="token string">“名字”</span><span class="token punctuation">}</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="token string">“位置”</span><span class="token punctuation">}</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="token string">的订单数量</span><span class="token punctuation">}</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="token string">“支出”</span><span class="token punctuation">}</span><span class="token punctuation">，</span><span class="token punctuation">］</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>rowMarkup<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>IndexTable<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>卡<span class="token operator">></span><span class="token punctuation">）</span><span class="token punctuation">;</span><span class="token punctuation">}</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_TypeTable__VwXvn" style="opacity:1;height:auto;transform:none"> <div class="PropsTable_TypeTableHeader__UzJWZ"> 接口 IndexTableProps </div> <dl> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">标题</span> <span class="PropsTable_Valuex__TSgMZ">(<span>T</span>， …<span>T</span>[]]<<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">IndexTableHeadingTitleString</button></span>|<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">IndexTableHeadingTitleNode</button></span>></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">promotedBulkActions<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ">（<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">MenuGroupDescriptor</button></span>|（<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">DisableableAction</button></span>&<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">BadgeAction</button></span>）) []</span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">bulkActions<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ">（<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">ActionListSection</button></span>|（<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">DisableableAction</button></span>&<span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">BadgeAction</button></span>）) []</span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">孩子们<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</span></span>．<span class="PropsTable_SyntaxType__UfemH"><span>ReactNode</span></span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">emptyState<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</span></span>．<span class="PropsTable_SyntaxType__UfemH"><span>ReactNode</span></span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">排序<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><span>反应</span></span>．<span class="PropsTable_SyntaxType__UfemH"><span>ReactNode</span></span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">paginatedSelectAllActionText<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxString__dOIZE">字符串</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">lastColumnSticky<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">可选择的<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">可分类的<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</span>[]</span> </dt> <dd> <div class="PropsTable_Description__P0yil"> <p>布尔值列表，它映射到是否为每个列启用排序。所有列默认为false。</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">defaultSortDirection<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxString__dOIZE">“提升”</span>|<span class="PropsTable_SyntaxString__dOIZE">“降序”</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"> <p>在首次单击或按下可排序列标题时对表行进行排序的方向。默认为升序。</p> <p>默认为<span><span class="PropsTable_SyntaxString__dOIZE">“降序”</span></span>．</p> </div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">sortDirection<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxString__dOIZE">“提升”</span>|<span class="PropsTable_SyntaxString__dOIZE">“降序”</span></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">sortColumnIndex<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxNumber__x8_Nu">数量</span></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">onSort<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ">（<span>headingIndex</span>：<span class="PropsTable_SyntaxNumber__x8_Nu">数量</span>，<span>方向</span>：<span class="PropsTable_SyntaxString__dOIZE">“提升”</span>|<span class="PropsTable_SyntaxString__dOIZE">“降序”</span>) = ><span class="PropsTable_SyntaxType__UfemH"><span>无效</span></span></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">sortToggleLabels<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">IndexTableSortToggleLabels</button></span></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">itemCount</span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxNumber__x8_Nu">数量</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">selectedItemsCount<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxNumber__x8_Nu">数量</span>|<span class="PropsTable_SyntaxString__dOIZE">“所有”</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">resourceName<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ">{<span>单数</span>：<span class="PropsTable_SyntaxString__dOIZE">字符串</span>;<span>复数</span>：<span class="PropsTable_SyntaxString__dOIZE">字符串</span>;}</span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">加载<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">hasMoreItems<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">浓缩<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> <span class="PropsTable_Row__Dmyba"> <dt class="PropsTable_Key__V_nBU"> <span class="PropsTable_MemberName__2Ng0F">onSelectionChange<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ">（<span>selectionType</span>：<span class="PropsTable_SyntaxType__UfemH"><span>SelectionType</span></span>，<span>toggleType</span>：<span class="PropsTable_SyntaxBoolean__cdU8b">布尔</span>，<span>选择</span>吗?<span class="PropsTable_SyntaxString__dOIZE">字符串</span>|<span class="PropsTable_SyntaxType__UfemH"><span>范围</span></span>) = ><span class="PropsTable_SyntaxType__UfemH"><span>无效</span></span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"></div> </dd></span> </dl> </div> </div> <div class="Longform_Longform__qNwjb"> <div class="Longform_Content__Q1ZR9"> <p>索引表还可以:</p> <ul> <li>支持<a href="//www.theturtleeffect.com/polaris/components/resource-item">自定义索引行和列</a></li> <li>包括批量操作，这样商家就可以一次操作多个对象</li> <li>支持排序和<a href="//www.theturtleeffect.com/polaris/components/filters">过滤</a>长长的清单</li> <li>搭配分页，使长列表易于消化</li> </ul> <hr> <h2 id="build">构建</h2> <p>在项目中使用索引表涉及以下组件和子组件的组合:</p> <ul> <li>IndexTable</li> <li><a href="//www.theturtleeffect.com/polaris/components/#index-table-row">IndexTableRow</a></li> <li><a href="//www.theturtleeffect.com/polaris/components/#index-table-cell">IndexTableCell</a></li> <li><a href="//www.theturtleeffect.com/polaris/components/filters">过滤器</a>(可选)</li> <li>分页组件(可选)</li> </ul> <p>索引表组件提供用于列表排序、过滤和分页的UI元素，但不提供这些操作的逻辑。当排序选项发生更改、添加过滤器或请求第二页时，您需要处理该事件(包括任何网络请求)，然后用新道具更新组件。</p> <hr> <h2 id="purpose">目的</h2> <p>Shopify围绕代表商家业务的对象(如客户、产品和订单)进行组织。例如，每个单独的订单都有一个可以链接到的专用页面。在Shopify中，我们称这些类型为对象<em>资源</em>，我们称对象的专用页为its<em>详细信息页面</em>．</p> <h3 id="problem">问题</h3> <p>以订单为例。商人可能有很多这样的人。他们需要一种方法来扫描他们的订单，查看每个订单的不同属性，并找出哪些需要首先采取行动。换句话说，他们需要一种方法找到单个订单，调用有关该订单的更多信息，并对其采取行动。</p> <h3 id="solution">解决方案</h3> <p>索引表的作用如下:</p> <ul> <li>一种内容格式，表示一组单独的资源，每个资源都有多列信息</li> <li>对一个或多个独立资源采取行动的系统</li> <li>导航到单个资源详细信息页面的一种方法</li> </ul> <p>由于详细信息页面显示单个资源的所有内容和操作，因此可以将资源列表视为这些详细信息页面的摘要。通过这种方式，资源列表在Shopify的导航层次结构中架起了一个中间的桥梁。</p> <hr> <h2 id="best-practices">最佳实践</h2> <p>索引表应该:</p> <ul> <li>具有在单击时执行操作的项。操作应该导航到资源的详细信息页面，或者提供有关该项的更多详细信息。</li> <li><a href="//www.theturtleeffect.com/polaris/components/resource-item">自定义内容和布局</a>他们的项目行表面信息，以支持商家的需求。</li> <li>如果列表可能很长，特别是如果不同的商业任务受益于不同的排序顺序，则支持排序。</li> <li>支持<a href="//www.theturtleeffect.com/polaris/components/filters">过滤</a>如果列表可以很长。</li> <li>当当前列表包含超过50个项目时进行分页。</li> <li>使用<a href="//www.theturtleeffect.com/polaris/components/skeleton-page">框架页面</a>如果加载prop为true且项正在处理，则在初始页面加载时为页面的其余部分加载组件。</li> </ul> <p>索引表可以选择:</p> <ul> <li>为经常一次应用于多个列表项的任务提供批量操作。例如，商家可能希望为大量产品添加相同的标签。</li> </ul> <hr> <h2 id="content-guidelines">内容的指导方针</h2> <p>索引表应该:</p> <ul> <li>标识资源的类型，通常带有标题</li> </ul> <div class="dodont"> <div class="dodont-part" data-type="do"> <h4>做</h4> <ul> <li>产品</li> <li>展示50种产品</li> </ul> </div> <div class="dodont-part" data-type="dont"> <h4>不</h4> <ul> <li><em>没有标题</em></li> </ul> </div> </div> <ul> <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> <ul> <li><p>批量动作遵循动词+名词的公式</p></li> <li><p>遵循<a href="//www.theturtleeffect.com/polaris/components/filters">过滤器选项和应用过滤器的内容指南</a></p></li> </ul> <hr> <h2 id="index-table-row">IndexTableRow</h2> <p>一个<code>IndexTableRow</code>类型中表示项的行<code>IndexTable</code></p> <h3 id="index-table-row-properties">IndexTableRow属性</h3> <div class="table-wrapper"> <table> <thead> <tr> <th>道具</th> <th>类型</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>id</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>状态</td> <td>RowStatus</td> <td>指示行是否应该具有状态的属性</td> </tr> <tr> <td>禁用</td> <td>布尔</td> <td>指示是否应禁用该行的布尔属性</td> </tr> <tr> <td>onClick</td> <td>() =>无效</td> <td>一个覆盖默认点击行为的函数</td> </tr> </tbody> </table> </div> <h2 id="index-table-cell">IndexTableCell</h2> <p>一个<code>IndexTableCell</code>中的单个单元格<code>IndexTableRow</code></p> <h3 id="index-table-cell-properties">IndexTableCell属性</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> </tbody> </table> </div> <hr> <h2 id="related-components">相关的组件</h2> <ul> <li>要创建链接到详细信息页面(如客户列表)的相关项的可操作列表，请使用<a href="//www.theturtleeffect.com/polaris/components/resource-list">资源列表组件</a></li> <li>要呈现用于比较和分析的结构化数据，例如帮助商家获得见解或审查分析时，请使用<a href="//www.theturtleeffect.com/polaris/components/data-table">数据表组件</a></li> <li>要显示相关内容的简单列表，<a href="//www.theturtleeffect.com/polaris/components/list">使用list组件</a></li> </ul> </div> </div> <footer class="Page_Footer__97FKe"> <p><a href="https://github.com/Shopify/polaris/tree/mainpolaris.shopify.com/content/components/index-table.md">编辑此页</a><a href="https://github.com/shopify/polaris/issues/new?title=%5Bpolaris.shopify.com%5D%20Feedback%20(on%20%2Fcomponents%2Findex-table)&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>