传统卡- Shopify北极星</标题><link rel="preload" href="//www.theturtleeffect.com/polaris/_next/static/css/61487c4714d7dde9.css" as="style"> <link rel="stylesheet" href="//www.theturtleeffect.com/polaris/_next/static/css/61487c4714d7dde9.css" data-n-g=""> <link rel="preload" href="//www.theturtleeffect.com/polaris/_next/static/css/147fa604535b42f6.css" as="style"> <link rel="stylesheet" href="//www.theturtleeffect.com/polaris/_next/static/css/147fa604535b42f6.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+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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">模式<div class="StatusBadge_StatusBadge__0tTyU" data-value="new"> 新</div></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/actions">行动</a></span> <ul id="nav-componentsactions" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/actions/account-connection">账户连接</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/actions/button">按钮</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/actions/button-group">按钮组</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/actions/page-actions">页面动作</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure">布局与结构</a></span> <ul id="nav-componentslayout-and-structure" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/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/layout-and-structure/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/layout-and-structure/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/layout-and-structure/callout-card">Callout卡</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/divider">分频器<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/layout-and-structure/empty-state">空的状态</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/form-layout">表格布局</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/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/layout-and-structure/horizontal-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/layout-and-structure/horizontal-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/layout-and-structure/layout">布局</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0 Frame_isCurrent__EePN_"><a aria-current="page" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/legacy-card">遗留卡<div class="StatusBadge_StatusBadge__0tTyU" data-value="legacy"> 遗产</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/legacy-stack">遗留的堆栈<div class="StatusBadge_StatusBadge__0tTyU" data-value="legacy"> 遗产</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/media-card">媒体卡</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/page">页面</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/layout-and-structure/vertical-stack">垂直堆栈<div class="StatusBadge_StatusBadge__0tTyU" data-value="alpha"> α</div></a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input">选择与输入</a></span> <ul id="nav-componentsselection-and-input" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/alpha-filters">α过滤器<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/selection-and-input/autocomplete">自动完成</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/checkbox">复选框</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/choice-list">选择列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/color-picker">颜色选择器</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/combobox">组合框</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/contextual-save-bar">上下文保存栏</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/date-picker">日期选择器</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/drop-zone">降落区</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/filters">过滤器</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/form">形式</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/index-filters">指数过滤器</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/inline-error">内联错误</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/radio-button">单选按钮</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/range-slider">滑块范围</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/select">选择</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/tag">标签</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/selection-and-input/text-field">文本字段</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/images-and-icons">图像和图标</a></span> <ul id="nav-componentsimages-and-icons" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/images-and-icons/avatar">《阿凡达》</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/images-and-icons/icon">图标</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/images-and-icons/keyboard-key">键盘键</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/images-and-icons/thumbnail">缩略图</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/images-and-icons/video-thumbnail">视频缩略图</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators">反馈指标</a></span> <ul id="nav-componentsfeedback-indicators" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/badge">徽章</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/banner">横幅</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/exception-list">例外列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/loading">加载</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/progress-bar">进度条</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/skeleton-body-text">骨架正文</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/skeleton-display-text">骨架显示文本</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/skeleton-page">框架页面</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/skeleton-tabs">骨架的标签</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/skeleton-thumbnail">骨架缩略图</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/spinner">微调控制项</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/feedback-indicators/toast">烤面包</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/typography">排版</a></span> <ul id="nav-componentstypography" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/typography/text">文本<div class="StatusBadge_StatusBadge__0tTyU" data-value="beta"> β</div></a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/tables">表</a></span> <ul id="nav-componentstables" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/tables/data-table">数据表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/tables/index-table">索引表</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/lists">列表</a></span> <ul id="nav-componentslists" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/lists/action-list">动作列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/lists/description-list">描述表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/lists/list">列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/lists/listbox">列表框</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/lists/option-list">选项列表</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/lists/resource-item">资源项目</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/lists/resource-list">资源列表</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation">导航</a></span> <ul id="nav-componentsnavigation" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation/alpha-tabs">Alpha选项卡<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/navigation/footer-help">页脚的帮助</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation/fullscreen-bar">全屏酒吧</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation/legacy-tabs">遗留的标签<div class="StatusBadge_StatusBadge__0tTyU" data-value="legacy"> 遗产</div></a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation/link">链接</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation/navigation">导航</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation/pagination">分页</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation/tabs">选项卡</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/navigation/top-bar">窗口的顶部</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/overlays">覆盖</a></span> <ul id="nav-componentsoverlays" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/overlays/modal">模态</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/overlays/popover">弹出窗口</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/overlays/tooltip">工具提示</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/utilities">公用事业公司</a></span> <ul id="nav-componentsutilities" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/utilities/app-provider">应用提供商</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/utilities/collapsible">可折叠的</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/utilities/frame">框架</a></span></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/utilities/scrollable">可滚动</a></span></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/deprecated">弃用</a></span> <ul id="nav-componentsdeprecated" style="opacity:1;height:auto;transform:none"> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/components/deprecated/caption">标题<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/deprecated/card">卡<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/deprecated/display-text">显示文本<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/deprecated/heading">标题<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/deprecated/legacy-filters">遗留的过滤器<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/deprecated/setting-toggle">设置切换<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/deprecated/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/deprecated/stack">堆栈<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/deprecated/subheading">副标题<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/deprecated/text-container">文本容器<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/deprecated/text-style">文本样式<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/deprecated/visually-hidden">视觉上隐藏<div class="StatusBadge_StatusBadge__0tTyU" data-value="deprecated"> 弃用</div></a></span></li> </ul></li> </ul></li> <li class=""><span class="Frame_NavItem__0Bbo0"><a aria-current="false" href="//www.theturtleeffect.com/polaris/tokens/color">令牌</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 Page_PostContent__UCVTC" 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="false"><a href="//www.theturtleeffect.com/polaris/components/layout-and-structure">布局与结构</a></li> <li aria-current="page"><a href="//www.theturtleeffect.com/polaris/components/layout-and-structure/legacy-card">遗留卡</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>这是Card组件的遗留版本，它正在被更新为更灵活和可组合的API。卡片用于将类似的概念和任务组合在一起，使商家更容易扫描、阅读和完成任务。</p><div class="StatusBanner_StatusBanner__mMm1v" data-value="legacy"> <h2>遗产</h2> <p>这是一个遗留组件，将被弃用。新<a href="//www.theturtleeffect.com/polaris/components/layout-and-structure/alpha-card">AlphaCard组件</a>可以与新的布局原语结合使用，以获得与LegacyCard类似的结果。进一步了解我们的<a href="//www.theturtleeffect.com/polaris/getting-started/components-lifecycle">组件生命周期</a>．</p></div> <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-:R5k9mn6:" role="tab" type="button" aria-selected="true" tabindex="0"><span>默认的</span></button> <button id="headlessui-tabs-tab-:R9k9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>头部动作</span></button> <button id="headlessui-tabs-tab-:Rdk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>带有页脚动作</span></button> <button id="headlessui-tabs-tab-:Rhk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>具有多个页脚动作</span></button> <button id="headlessui-tabs-tab-:Rlk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>自定义页脚动作</span></button> <button id="headlessui-tabs-tab-:Rpk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>具有破坏性脚动作</span></button> <button id="headlessui-tabs-tab-:Rtk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>有多个部分</span></button> <button id="headlessui-tabs-tab-:R11k9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>有多个标题的章节</span></button> <button id="headlessui-tabs-tab-:R15k9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>有分段和动作</span></button> <button id="headlessui-tabs-tab-:R19k9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>与分段</span></button> <button id="headlessui-tabs-tab-:R1dk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>具有破坏性的行为</span></button> <button id="headlessui-tabs-tab-:R1hk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>有一个柔和的部分</span></button> <button id="headlessui-tabs-tab-:R1lk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>以柔和为次要内容</span></button> <button id="headlessui-tabs-tab-:R1pk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>单独标头</span></button> <button id="headlessui-tabs-tab-:R1tk9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>使用自定义React Node标题</span></button> <button id="headlessui-tabs-tab-:R21k9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>所有元素</span></button> <button id="headlessui-tabs-tab-:R25k9mn6:" role="tab" type="button" aria-selected="false" tabindex="-1"><span>带冲洗断面</span></button> </div> </div> <div> <div id="headlessui-tabs-panel-:R6k9mn6:" role="tabpanel" tabindex="0"> <p>当您有一条简单的消息要与商家沟通时，不需要任何辅助步骤。</p><div class="ComponentExamples_ExampleFrame__M2N8M"> <iframe src="//www.theturtleeffect.com/polaris/examples/legacy-card-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="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSACYwoNvkYTzMBOMTE0QgoaenCYAaEIOEBaFqQC2SMRPgyQAATgALUighgAngHoUpcfwgJR4ydr2HjZy9bS24CiDXL2Gk4gAL4hsnYAQhDkXqZIYGhQcDDhIACCKCgEtHAAHsz-9IzqECpW_LQABMAAMjC4mKYAwl4sIVVg_KpVAOQuRiYWVjZ2vQDcADrkZRXVAEpCGNVdPb3yyxPT02AArty0EBRV9Y0YLW0Aonlo5bAAFACUNdNVVYK0u_zkVfevb1UADynJqtfgsKqHWiwAC8kxAAHlyFAYjAqlJSIIqiw0AYAEakNrw9EwZZHcgwFgAPn-AKBKCpADVeAB3KpodG7FQqOJVUhgKqmUhfPnI1Ho2iYmCATAI4FUOPwwJiedxCIDLDSfgD1SDzmDqf9HlNyCFtuRpjA8nNsTBErsoNVdRdwddbihYOMQBE4NFYvx4ohEslUhFyGw8jl8oU6AwRCBprNMQslituioqvCNrR4cbE5UalUMPJ6PNSKRqh1VunMymlKpzBgUbGcwnykmqpkUJ00xmQARzJ2WzM2_ngB2sgAFboANwgbH4VUrPfhAzcw083iHeeqDG7PRXBkG7hGXjs5igpAwSXg5gYxDI5pAuZH1QPriGHlGcHMeN20BYt5wCo5hSKYsBwAQGBwHAQ7-FIhZ0GgqILjC2KXlysYEPgtCXLAKixpEpgAJIsH8chltmIBGtMcHVN05ZVKhRZCCWFH3EUSEUvw1HkPRtAEIIYYwPwfxaoCnZTqQs7zlUEAAIwABzkDCwAMCEmp0uJWRVOYGlAgOk4znOwmajxXogFEMRxAkSQpGkMThgQ-i0CoUDRowsbqICLAQNOsksHC5HlvCVLqj505UuZll-gGQZ2WEQA"> <input type="hidden" name="query" value="模块= App.tsx"> <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-:R2ms6k9mn6:" role="tab" type="button" aria-selected="true" tabindex="0">反应</button> <button class="Code_Tab__OlJDp" id="headlessui-tabs-tab-:R4ms6k9mn6:" 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-:Rqs6k9mn6:" 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">LegacyCard</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 maybe-class-name">反应</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">LegacyCardExample</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 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">LegacyCard</span><span class="">标题</span><span class="token operator">=</span><span class="token string">“欧宝体育官网入口首页网上商店仪表盘”</span><span class="">分段</span><span class="token operator">></span><span class=""></span></span><span class=""><span class=""></span><span class="token operator"><</span><span class="">p</span><span class="token operator">></span><span class="token maybe-class-name">视图</span><span class="">一个总结</span><span class="token keyword">的</span><span class="">你的网上商欧宝体育官网入口首页店</span><span class="token dom variable">性能</span><span class="token punctuation">．</span><span class="token operator"><</span><span class="token operator">/</span><span class="">p</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">LegacyCard</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_TypeTable__VwXvn" style="opacity:1;height:auto;transform:none"> <div class="PropsTable_TypeTableHeader__UzJWZ"> 接口 LegacyCardProps </div> <dl> <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"> <p>卡片的标题内容。</p></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"> <p>卡片的内部内容。</p></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>一张不太显眼的牌。</p></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>自动换行部分中的内容。</p></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"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">DisableableAction</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">primaryFooterAction<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">ComplexAction</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">secondaryFooterActions<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxType__UfemH"><button class="PropsTable_ExpandableType__gdXkz" aria-expanded="false">ComplexAction</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">secondaryFooterActionsDisclosureText<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><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">footerActionAlignment<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">hideOnPrint<span>？</span></span> <span class="PropsTable_Valuex__TSgMZ"><span class="PropsTable_SyntaxBoolean__cdU8b">布尔</span></span> </dt> <dd> <div class="PropsTable_Description__P0yil"> <p>允许卡片在打印时隐藏。</p></div> </dd></span> </dl> </div> </div> <div class="Longform_Longform__qNwjb"> <div class="Longform_Content__Q1ZR9"> <h2 id="best-practices" class="Markdown_MarkdownHeading__JoUMb">最佳实践<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h2> <p>卡片应该:</p><ul> <li>使用标题，明确卡片的用途</li> <li>优先考虑信息，让商家最需要知道的内容放在首位</li> <li>坚持单个用户流程，或者将更复杂的流程分成多个部分</li> <li>避免过多的号召按钮或链接，每张卡片只有一个主要的号召</li> <li>使用卡片底部的操作调用来进行下一步操作，并使用卡片右上角的空间来进行持久的、可选的操作(例如Edit链接)。</li> </ul> <hr> <h2 id="content-guidelines" class="Markdown_MarkdownHeading__JoUMb">内容的指导方针<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h2> <h3 id="title" class="Markdown_MarkdownHeading__JoUMb">标题<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h3> <p>卡片标题应遵循内容指南<a href="//www.theturtleeffect.com/polaris/content/actionable-language">标题和副标题</a>．</p><h3 id="body-content" class="Markdown_MarkdownHeading__JoUMb">正文内容<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h3> <p>正文内容应为:</p><ul> <li>可操作的:在告诉商家他们OB欧宝娱乐APP可以采取什么行动(尤其是新的行动)时，用祈使句开头。不要使用像“你可以”这样的纵容性语言。</li> </ul> <div class="dodont" node="[object Object]"> <div class="dodont-part" data-type="do" node="[object Object]"> <h4 id="do">做</h4> <p>获得所有销售渠道的业绩。</p></div> <div class="dodont-part" data-type="dont" node="[object Object]"> <h4 id="dont">不</h4> <p>现在您可以获得所有销售渠道的业绩数据。</p></div> </div> <ul> <li>结构化的商业成功:总是把最关键的信息放在第一位。</li> <li>明确:使用动词“need”来帮助商家理解他们什么时候被要求做某事。</li> </ul> <div class="dodont" node="[object Object]"> <div class="dodont-part" data-type="do" node="[object Object]"> <h4 id="do-1">做</h4> <p>要购买运输标签，您需要输入货物的总重量，包括包装。</p></div> <div class="dodont-part" data-type="dont" node="[object Object]"> <h4 id="dont-1">不</h4> <p>要购买运输标签，您必须输入货物的总重量，包括包装。</p></div> </div> <h3 id="call-to-action-button" class="Markdown_MarkdownHeading__JoUMb">文字-动作按钮<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h3> <p>按钮应该是:</p><ul> <li>清晰和可预测:商家应该能够预测当他们点击按钮时会发生什么。永远不要通过给按钮贴错标签来欺骗商家。</li> </ul> <div class="dodont" node="[object Object]"> <div class="dodont-part" data-type="do" node="[object Object]"> <h4 id="do-2">做</h4> <ul> <li>创建订单</li> <li>购买运输标签</li> </ul> </div> <div class="dodont-part" data-type="dont" node="[object Object]"> <h4 id="dont-2">不</h4> <ul> <li>新订单</li> <li>买</li> </ul> </div> </div> <p>动作导向:按钮应该总是以一个强烈的动词来引导动作。为了给商家提供足够的上下文，在按钮上使用{动词}+{名词}格式，除了Save、Close、Cancel或OK等常见操作。</p><div class="dodont" node="[object Object]"> <div class="dodont-part" data-type="do" node="[object Object]"> <h4 id="do-3">做</h4> <ul> <li>激活Apple Pay</li> <li>查看发货设置</li> </ul> </div> <div class="dodont-part" data-type="dont" node="[object Object]"> <h4 id="dont-3">不</h4> <ul> <li>试试Apple Pay</li> <li>查看您的设置</li> </ul> </div> </div> <p>可扫描:避免不必要的单词和冠词，如the, an, a。</p><div class="dodont" node="[object Object]"> <div class="dodont-part" data-type="do" node="[object Object]"> <h4 id="do-4">做</h4> <p>添加菜单项</p></div> <div class="dodont-part" data-type="dont" node="[object Object]"> <h4 id="dont-4">不</h4> <p>添加菜单项</p></div> </div> <h3 id="section-titles" class="Markdown_MarkdownHeading__JoUMb">章节标题<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h3> <p>章节标题应为:</p><ul> <li>信息性:它们应该标记在正文内容中分组的内容类型</li> <li>比如标题:当你写标题时，遵循同样的内容准则</li> </ul> <h3 id="action-links" class="Markdown_MarkdownHeading__JoUMb">操作链接<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h3> <p>链接应该是:</p><ul> <li>用于次要或持久的操作:链接应该用于表示比按钮优先级低的操作，或者商家随时可能采取的持久操作(例如持久的Edit链接)。</li> <li>清晰的标签:如果商家点击了一个操作链接，他们不需要猜测他们会在哪里结束。永远不要使用“点击这里”作为链接，因为它不会让人对接下来的内容产生期望。</li> <li>与按钮类似:遵循与为按钮编写文本相同的内容指南。</li> </ul> <hr> <h2 id="related-components" class="Markdown_MarkdownHeading__JoUMb">相关的组件<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h2> <ul> <li>要创建页面级布局，<a href="//www.theturtleeffect.com/polaris/components/layout">使用布局组件</a></li> <li>要突出显示Shopify的功能，<a href="//www.theturtleeffect.com/polaris/components/callout-card">使用callout卡片组件</a></li> </ul> <hr> <h2 id="accessibility" class="Markdown_MarkdownHeading__JoUMb">可访问性<button class="Markdown_MarkdownCopyButton__4jLY1"> <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></h2> <p>所需的<code>标题</code>Prop赋予卡片一个2级标题(<code>< h2 ></code>）.这有助于提高可读性，并为屏幕阅读器用户提供结构。</p><p>如果你使用<code>柔和</code>道具上放一张卡片或一节，确保卡片或一节<code>标题</code>传达使用的原因<code>柔和</code>．这确保了低视力的商家，包括那些使用屏幕阅读器的人，可以识别出不活跃或不太重要的内容。</p><div class="dodont" node="[object Object]"> <div class="dodont-part" data-type="do" node="[object Object]"> <h4 id="do-5">做</h4> <pre> <div class="Code_Code__EM5CC"> <div class="Code_TopBar__2nQ5k"> <div class="Code_Tabs__kfTvA"> <div class="Code_Tab__OlJDp"> 例子</div> </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> <pre class="prismjs"><code class="Code_ActualCode__QPVrq" style="white-space:pre-wrap"><span class=""><span class="token operator"><</span><span class="token maybe-class-name">LegacyCard</span><span class="">标题</span><span class="token operator">=</span><span class="token string">“已停用的职员帐户”</span><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="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="token punctuation">．</span><span class="token property-access maybe-class-name">项</span><span class="token operator">></span><span class="token maybe-class-name">费利克斯</span><span class=""></span><span class="token maybe-class-name">Crafford</span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">列表</span><span class="token punctuation">．</span><span class="token property-access 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">列表</span><span class="token punctuation">．</span><span class="token property-access maybe-class-name">项</span><span class="token operator">></span><span class="token maybe-class-name">伊齐</span><span class=""></span><span class="token maybe-class-name">没有</span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">列表</span><span class="token punctuation">．</span><span class="token property-access 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 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 operator">/</span><span class="token maybe-class-name">LegacyCard</span><span class="token operator">></span></span></code></pre> </div></pre> </div> <div class="dodont-part" data-type="dont" node="[object Object]"> <h4 id="dont-5">不</h4> <pre> <div class="Code_Code__EM5CC"> <div class="Code_TopBar__2nQ5k"> <div class="Code_Tabs__kfTvA"> <div class="Code_Tab__OlJDp"> 例子</div> </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> <pre class="prismjs"><code class="Code_ActualCode__QPVrq" style="white-space:pre-wrap"><span class=""><span class="token operator"><</span><span class="token maybe-class-name">LegacyCard</span><span class="">标题</span><span class="token operator">=</span><span class="token string">“员工账户”</span><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="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="token punctuation">．</span><span class="token property-access maybe-class-name">项</span><span class="token operator">></span><span class="token maybe-class-name">费利克斯</span><span class=""></span><span class="token maybe-class-name">Crafford</span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">列表</span><span class="token punctuation">．</span><span class="token property-access 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">列表</span><span class="token punctuation">．</span><span class="token property-access maybe-class-name">项</span><span class="token operator">></span><span class="token maybe-class-name">伊齐</span><span class=""></span><span class="token maybe-class-name">没有</span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">列表</span><span class="token punctuation">．</span><span class="token property-access 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 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 operator">/</span><span class="token maybe-class-name">LegacyCard</span><span class="token operator">></span></span></code></pre> </div></pre> </div> </div> </div> </div> <footer class="Page_Footer__97FKe"> <p><a href="https://github.com/Shopify/polaris/tree/mainpolaris.shopify.com/content/components/layout-and-structure/legacy-card.md">编辑此页</a><a href="https://github.com/shopify/polaris/issues/new?title=%5Bpolaris.shopify.com%5D%20Feedback%20(on%20%2Fcomponents%2Flayout-and-structure%2Flegacy-card)&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>