[{"data":1,"prerenderedAt":1335},["ShallowReactive",2],{"glossary-terms":3,"i-lucide:menu":1296,"i-lucide:book-open":1301,"i-lucide:search":1303,"i-lucide:languages":1305,"i-lucide:github":1307,"i-lucide:monitor":1309,"i-lucide:arrow-left":1311,"i-lucide:bookmark":1313,"i-lucide:rotate-ccw":1315,"i-lucide:check":1317,"i-lucide:arrow-up-right":1319,"i-lucide:sliders-horizontal":1321,"i-lucide:copy":1323,"i-lucide:chevron-down":1325,"i-lucide:plus":1327,"i-lucide:external-link":1329,"i-lucide:refresh-cw":1331,"i-lucide:download":1333},[4,58,99,143,186,226,265,301,338,378,419,457,498,537,577,618,657,698,739,780,819,859,897,937,975,1014,1054,1095,1135,1176,1216,1256],{"id":5,"title":6,"aliases":7,"body":10,"category":24,"comparison":25,"demo":26,"description":16,"en":27,"english":35,"extension":36,"keywords":37,"meta":43,"naming":44,"navigation":45,"order":46,"path":47,"phrase":48,"seo":49,"slug":26,"sources":50,"stem":54,"target":55,"usage":56,"__hash__":57},"terms\u002Fterms\u002Fsidebar.md","可折叠侧栏布局",[8,9],"侧边菜单","后台框架",{"type":11,"value":12,"toc":20},"minimark",[13,17],[14,15,16],"p",{},"用可收起的侧边导航组织后台功能，把更多空间留给主内容。",[14,18,19],{},"本页示例以后台场景说明这一效果。实际需求应同时说清作用对象、触发方式与结束状态。",{"title":21,"searchDepth":22,"depth":22,"links":23},"",2,[],"layout","与顶部导航布局相比，侧栏适合更多层级；收起侧栏不应丢失当前选中位置。","sidebar",{"description":28,"usage":29,"comparison":30,"target":31,"phrase":32,"naming":33,"explanation":34},"Use collapsible side navigation to organize admin tools and leave room for the main content.","Multi-section dashboards and long management lists.","Unlike top navigation, a sidebar supports deeper navigation. Collapsing it must preserve the selected destination.","Page layout","Use a collapsible sidebar with a fixed header and an independently scrolling main content area.","Common term","Use collapsible side navigation to organize admin tools and leave room for the main content. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Collapsible sidebar layout","md",[38,39,40,41,42],"左侧导航可折叠","顶部固定","内容区域独立滚动","左边菜单不动","右边滚动",{},"常见叫法",true,-6,"\u002Fterms\u002Fsidebar","采用可折叠侧栏，顶部导航固定，主内容区域独立滚动。",{"title":6,"description":16},[51],{"title":52,"url":53},"相关规范与实现参考","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_flexible_box_layout","terms\u002Fsidebar","页面整体","多模块后台、长列表管理、需要保持导航可见的工作台。","BBQGJv-Jbg73gICOew8Rtt8kQOQzOmrfnU6QJ5Spm9I",{"id":59,"title":60,"aliases":61,"body":64,"category":24,"comparison":73,"demo":74,"description":68,"en":75,"english":82,"extension":36,"keywords":83,"meta":87,"naming":44,"navigation":45,"order":88,"path":89,"phrase":90,"seo":91,"slug":74,"sources":92,"stem":95,"target":96,"usage":97,"__hash__":98},"terms\u002Fterms\u002Fcard-grid.md","卡片网格",[62,63],"卡片布局","宫格",{"type":11,"value":65,"toc":71},[66,69],[14,67,68],{},"把同类内容放在等宽的卡片中，按行和列排列。",[14,70,19],{},{"title":21,"searchDepth":22,"depth":22,"links":72},[],"网格按行列对齐；瀑布流优先利用不同高度内容留下的空间。","card-grid",{"description":76,"usage":77,"comparison":78,"target":79,"phrase":80,"naming":33,"explanation":81},"Arrange equally sized cards in rows and columns.","Projects, products and content with comparable metadata.","A grid aligns both rows and columns; masonry allows varied card heights.","Content area","Arrange cards in a responsive grid with consistent spacing and aligned rows.","Arrange equally sized cards in rows and columns. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Card grid",[84,85,86],"同宽卡片","一排多个项目","响应式网格",{},-5,"\u002Fterms\u002Fcard-grid","采用响应式卡片网格，卡片等宽，随可用宽度调整列数。",{"title":60,"description":68},[93],{"title":52,"url":94},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_grid_layout","terms\u002Fcard-grid","内容列表","项目列表、应用入口、指标概览和资源目录。","RXEYavB97R7TV7QTTF5smNdyQLCSwD3MHYHGTPhgQ2E",{"id":100,"title":101,"aliases":102,"body":105,"category":114,"comparison":115,"demo":116,"description":109,"en":117,"english":125,"extension":36,"keywords":126,"meta":130,"naming":131,"navigation":45,"order":132,"path":133,"phrase":134,"seo":135,"slug":116,"sources":136,"stem":139,"target":140,"usage":141,"__hash__":142},"terms\u002Fterms\u002Ffade.md","淡入过渡",[103,104],"渐显","淡入淡出",{"type":11,"value":106,"toc":112},[107,110],[14,108,109],{},"通过透明度变化，让元素柔和地出现。",[14,111,19],{},{"title":21,"searchDepth":22,"depth":22,"links":113},[],"motion","淡入只改变透明度；滑入还改变位置。不可仅靠透明度隐藏可聚焦控件。","fade",{"description":118,"usage":119,"comparison":120,"target":121,"phrase":122,"naming":123,"explanation":124},"Reveal or hide an element by changing its opacity.","Status feedback and subtle content transitions.","Fading changes opacity; sliding also changes position.","Status message","Reveal the element with an opacity transition from transparent to fully visible.","General term","Reveal or hide an element by changing its opacity. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Fade transition",[127,128,129],"慢慢出现","从透明变清楚","透明度变化",{},"通用术语",-4,"\u002Fterms\u002Ffade","内容出现时从透明过渡到完全可见，结束后保持稳定。",{"title":101,"description":109},[137],{"title":52,"url":138},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_transitions\u002FUsing_CSS_transitions","terms\u002Ffade","提示内容","提示信息、局部内容切换、辅助面板入场。","3WQwmlQoWTOWHQ2R5_7ICLAXIVTL2fBHtacsB5srx60",{"id":144,"title":145,"aliases":146,"body":149,"category":158,"comparison":159,"demo":160,"description":153,"en":161,"english":168,"extension":36,"keywords":169,"meta":174,"naming":44,"navigation":45,"order":175,"path":176,"phrase":177,"seo":178,"slug":160,"sources":179,"stem":182,"target":183,"usage":184,"__hash__":185},"terms\u002Fterms\u002Fdrawer.md","右侧详情抽屉",[147,148],"侧边详情面板","详情抽屉",{"type":11,"value":150,"toc":156},[151,154],[14,152,153],{},"在当前页面侧边展开详情，保留列表上下文。",[14,155,19],{},{"title":21,"searchDepth":22,"depth":22,"links":157},[],"interaction","抽屉从边缘展开；居中弹窗更适合聚焦确认或短操作。抽屉是否阻止背景操作需单独说明。","drawer",{"description":162,"usage":163,"comparison":164,"target":165,"phrase":166,"naming":33,"explanation":167},"Reveal details from an edge while preserving the current page context.","Order details, profiles and contextual settings.","A drawer enters from an edge; a centered dialog focuses attention on a short decision. State explicitly whether the background remains interactive.","Order details","Open a detail drawer from the right while keeping the list and its scroll position.","Reveal details from an edge while preserving the current page context. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Detail drawer",[170,171,172,173],"点击订单","右边滑出来","不跳转","看详情",{},-3,"\u002Fterms\u002Fdrawer","点击订单后，从页面侧边展开详情抽屉，保留列表及滚动位置；关闭后把焦点还给触发按钮。",{"title":145,"description":153},[180],{"title":52,"url":181},"https:\u002F\u002Fshadcn-vue.com\u002Fdocs\u002Fcomponents\u002Fsheet","terms\u002Fdrawer","订单详情","订单详情、客户资料与辅助设置。","eCmT92rOe-ppZPyvQwfDXR5fJtOUR_5Isx-8ErfZoEQ",{"id":187,"title":188,"aliases":189,"body":192,"category":24,"comparison":201,"demo":202,"description":196,"en":203,"english":210,"extension":36,"keywords":211,"meta":215,"naming":44,"navigation":45,"order":216,"path":217,"phrase":218,"seo":219,"slug":202,"sources":220,"stem":223,"target":96,"usage":224,"__hash__":225},"terms\u002Fterms\u002Fmasonry.md","瀑布流布局",[190,191],"不等高网格","砖石布局",{"type":11,"value":193,"toc":199},[194,197],[14,195,196],{},"让不同高度的卡片紧密排列，减少纵向空隙。",[14,198,19],{},{"title":21,"searchDepth":22,"depth":22,"links":200},[],"与整齐对齐的网格不同，瀑布流不保证每一行对齐。本示例采用多列，阅读顺序先纵向后横向。","masonry",{"description":204,"usage":205,"comparison":206,"target":207,"phrase":208,"naming":33,"explanation":209},"Pack cards of different heights into columns.","Images, inspiration collections and uneven content.","Unlike a regular grid, row edges do not align. Preserve a logical reading order.","Content collection","Use a responsive masonry layout with consistent column gaps and natural card heights.","Pack cards of different heights into columns. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Masonry layout",[212,213,214],"图片高低不同","紧密填满","不规则卡片",{},-2,"\u002Fterms\u002Fmasonry","使用瀑布流排列不等高卡片，并明确先纵向后横向的阅读顺序。",{"title":188,"description":196},[221],{"title":52,"url":222},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_multicol_layout","terms\u002Fmasonry","图片素材、灵感收藏、长度不一的内容卡片。","BIrQWEPNl61UiN14or_WPNBq_ByhhNXmYgRLMwrUZBQ",{"id":227,"title":228,"aliases":229,"body":232,"category":114,"comparison":241,"demo":242,"description":236,"en":243,"english":250,"extension":36,"keywords":251,"meta":254,"naming":44,"navigation":45,"order":255,"path":256,"phrase":257,"seo":258,"slug":242,"sources":259,"stem":262,"target":96,"usage":263,"__hash__":264},"terms\u002Fterms\u002Fstagger.md","交错入场",[230,231],"错峰动画","依次出现",{"type":11,"value":233,"toc":239},[234,237],[14,235,236],{},"一组元素按固定延迟依次开始动画，形成节奏。",[14,238,19],{},{"title":21,"searchDepth":22,"depth":22,"links":240},[],"交错强调开始时间不同；不是一个元素播放完才开始下一个。长列表应避免累积等待。","stagger",{"description":244,"usage":245,"comparison":246,"target":247,"phrase":248,"naming":33,"explanation":249},"Introduce related elements one after another with small delays.","Short lists and groups of newly revealed items.","Staggering offsets start times; it does not require different effects for each element.","List entries","Reveal related list entries in order with a short delay between each, keeping the total sequence brief.","Introduce related elements one after another with small delays. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Staggered entrance",[252,253],"列表一条一条出现","卡片依次进入",{},-1,"\u002Fterms\u002Fstagger","列表按顺序依次入场，相邻元素之间增加短暂延迟。",{"title":228,"description":236},[260],{"title":52,"url":261},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fanimation-delay","terms\u002Fstagger","短列表、少量卡片或首次进入的内容组。","cRBdJ76Ff0-S6UOa8TYT5-qVdBEiEO09H8ecI0WoBfU",{"id":266,"title":267,"aliases":268,"body":271,"category":24,"comparison":280,"demo":281,"description":275,"en":282,"english":288,"extension":36,"keywords":289,"meta":292,"naming":44,"navigation":45,"order":22,"path":293,"phrase":294,"seo":295,"slug":281,"sources":296,"stem":298,"target":55,"usage":299,"__hash__":300},"terms\u002Fterms\u002Ftop-nav.md","顶部导航布局",[269,270],"横向导航","顶栏布局",{"type":11,"value":272,"toc":278},[273,276],[14,274,275],{},"把主要导航放在页面顶部，让内容获得完整的横向空间。",[14,277,19],{},{"title":21,"searchDepth":22,"depth":22,"links":279},[],"导航很多或层级很深时，侧栏通常更易浏览；不要把全部入口挤在一行。","top-nav",{"description":283,"usage":284,"comparison":285,"target":31,"phrase":286,"naming":33,"explanation":287},"Place primary navigation across the top of the page.","Sites with a small number of primary destinations.","A sidebar is better suited to deep or numerous destinations.","Place primary navigation in a horizontal header and allow the main content to use the full width below it.","Place primary navigation across the top of the page. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Top navigation layout",[290,269,291],"上面菜单","内容居中",{},"\u002Fterms\u002Ftop-nav","主要入口放在顶部横向导航中，下方展示当前页面内容。",{"title":267,"description":275},[297],{"title":52,"url":53},"terms\u002Ftop-nav","一级入口较少的工具、文档与轻量管理页面。","h1fX-kJoTT9HCp_xTk6cgJX6mlcM104Tcw7sG81h-h8",{"id":302,"title":303,"aliases":304,"body":306,"category":24,"comparison":315,"demo":316,"description":310,"en":317,"english":323,"extension":36,"keywords":324,"meta":328,"naming":44,"navigation":45,"order":329,"path":330,"phrase":331,"seo":332,"slug":316,"sources":333,"stem":335,"target":55,"usage":336,"__hash__":337},"terms\u002Fterms\u002Fholy-grail.md","圣杯布局",[305],"三栏布局",{"type":11,"value":307,"toc":313},[308,311],[14,309,310],{},"在页头与页尾之间安排左右侧栏和可伸缩的主内容栏。",[14,312,19],{},{"title":21,"searchDepth":22,"depth":22,"links":314},[],"圣杯布局强调三栏及页头页尾的组合，不等同于任意三列网格。","holy-grail",{"description":318,"usage":319,"comparison":320,"target":31,"phrase":321,"naming":33,"explanation":322},"Place the main content between two side columns, below a header and above a footer.","Workspaces that need persistent navigation and supplementary information.","Unlike a single-sidebar layout, this pattern has a second supporting column.","Use a header, footer, left navigation and right information panel around a flexible central content area.","Place the main content between two side columns, below a header and above a footer. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Holy grail layout",[325,326,327],"左中右三栏","中间自适应","头尾固定结构",{},3,"\u002Fterms\u002Fholy-grail","页面包含页头、页尾与中间三栏；中央内容自适应，左右保留辅助栏。",{"title":303,"description":310},[334],{"title":52,"url":94},"terms\u002Fholy-grail","两侧需要工具、目录或辅助信息的工作界面。","_FKZvbpoaQgkfh0Jb5eTkle7-KdtLPYHr0EEL52U7RQ",{"id":339,"title":340,"aliases":341,"body":344,"category":24,"comparison":353,"demo":354,"description":348,"en":355,"english":362,"extension":36,"keywords":363,"meta":367,"naming":44,"navigation":45,"order":368,"path":369,"phrase":370,"seo":371,"slug":354,"sources":372,"stem":374,"target":375,"usage":376,"__hash__":377},"terms\u002Fterms\u002Fsplit-pane.md","分栏工作区",[342,343],"左右分屏","双栏面板",{"type":11,"value":345,"toc":351},[346,349],[14,347,348],{},"把同一任务的两个区域并排展示，减少页面切换。",[14,350,19],{},{"title":21,"searchDepth":22,"depth":22,"links":352},[],"分栏是空间组织方式，不必然支持拖动分隔线；是否可调整宽度需单独说明。","split-pane",{"description":356,"usage":357,"comparison":358,"target":359,"phrase":360,"naming":33,"explanation":361},"Divide a workspace into adjacent areas that can be resized.","Editors, file explorers and side-by-side work.","A split pane does not require a master-detail relationship.","Workspace","Display two adjacent panes with a draggable divider, minimum widths and keyboard-accessible resizing.","Divide a workspace into adjacent areas that can be resized. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Split pane",[364,365,366],"左边编辑","右边预览","并排工作区",{},4,"\u002Fterms\u002Fsplit-pane","工作区分为并排的两个面板，分别承载编辑与预览内容。",{"title":340,"description":348},[373],{"title":52,"url":94},"terms\u002Fsplit-pane","工作区","编辑与预览、源数据与处理结果、对照阅读。","DR8uAK0fIBjQJ7GGQxJ6kgU2NMpa9yfJnpgjRvRI8Rg",{"id":379,"title":380,"aliases":381,"body":384,"category":24,"comparison":393,"demo":394,"description":388,"en":395,"english":402,"extension":36,"keywords":403,"meta":407,"naming":44,"navigation":45,"order":408,"path":409,"phrase":410,"seo":411,"slug":394,"sources":412,"stem":415,"target":416,"usage":417,"__hash__":418},"terms\u002Fterms\u002Fsticky-header.md","粘性表头",[382,383],"吸顶表头","固定表头",{"type":11,"value":385,"toc":391},[386,389],[14,387,388],{},"表格内容滚动时，让表头停留在滚动容器顶部。",[14,390,19],{},{"title":21,"searchDepth":22,"depth":22,"links":392},[],"sticky 受最近滚动祖先限制；fixed 通常相对视口定位，两者不是同一个行为。","sticky-header",{"description":396,"usage":397,"comparison":398,"target":399,"phrase":400,"naming":33,"explanation":401},"Keep table headings visible as rows scroll underneath.","Long tables with many rows.","A sticky table header belongs to the table, unlike a fixed site header.","Data table","Keep table headings sticky within the scrolling table container and aligned with their columns.","Keep table headings visible as rows scroll underneath. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Sticky table header",[404,405,406],"滚动列表","表头不动","标题留在顶部",{},6,"\u002Fterms\u002Fsticky-header","表格在容器内滚动，表头保持在顶部，便于持续对照各列。",{"title":380,"description":388},[413],{"title":52,"url":414},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fposition","terms\u002Fsticky-header","数据表格","数据较多的表格，需要持续对照列含义。","RsyD2Y0y4gudS_aLG49-qbleTAhqZRNGWmld-zcY0fU",{"id":420,"title":421,"aliases":422,"body":424,"category":24,"comparison":433,"demo":434,"description":428,"en":435,"english":442,"extension":36,"keywords":443,"meta":447,"naming":44,"navigation":45,"order":448,"path":449,"phrase":450,"seo":451,"slug":434,"sources":452,"stem":454,"target":375,"usage":455,"__hash__":456},"terms\u002Fterms\u002Fmaster-detail.md","主从视图",[423],"列表详情布局",{"type":11,"value":425,"toc":431},[426,429],[14,427,428],{},"同屏保留记录列表和当前记录的详情。",[14,430,19],{},{"title":21,"searchDepth":22,"depth":22,"links":432},[],"主从视图常驻两个区域；抽屉通常是按需出现的侧面板。","master-detail",{"description":436,"usage":437,"comparison":438,"target":439,"phrase":440,"naming":33,"explanation":441},"Keep a collection visible while showing details of the selected record.","Email, order management and file browsers.","A split pane describes geometry; master-detail describes the relationship between selection and details.","Record workspace","Keep the record list beside the detail pane. Selecting a record updates its details without losing list context.","Keep a collection visible while showing details of the selected record. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Master-detail view",[444,445,446],"左边列表","右边内容","选中即查看",{},7,"\u002Fterms\u002Fmaster-detail","同屏呈现列表与详情，选择列表记录时更新旁边的详情区域。",{"title":421,"description":428},[453],{"title":52,"url":94},"terms\u002Fmaster-detail","邮件、工单、订单与联系人浏览。","BwhJPA7Qac38GoMfQK6fjs0kBy90whwdPDZQQW-4lx8",{"id":458,"title":459,"aliases":460,"body":463,"category":114,"comparison":472,"demo":473,"description":467,"en":474,"english":481,"extension":36,"keywords":482,"meta":486,"naming":131,"navigation":45,"order":487,"path":488,"phrase":489,"seo":490,"slug":473,"sources":491,"stem":494,"target":495,"usage":496,"__hash__":497},"terms\u002Fterms\u002Fslide.md","滑入过渡",[461,462],"侧滑","平移入场",{"type":11,"value":464,"toc":470},[465,468],[14,466,467],{},"让元素从一侧平移进入目标位置。",[14,469,19],{},{"title":21,"searchDepth":22,"depth":22,"links":471},[],"滑入是位移动效；抽屉是交互模式，抽屉可以选择滑入作为动效。","slide",{"description":475,"usage":476,"comparison":477,"target":478,"phrase":479,"naming":123,"explanation":480},"Move an element into view from an edge.","Panels, notices and contextual content.","A slide moves the element; a fade changes opacity.","Content panel","Introduce the element with a directional slide transition.","Move an element into view from an edge. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Slide transition",[483,484,485],"从右边进来","从左边滑出","滑动出现",{},9,"\u002Fterms\u002Fslide","面板从指定边缘平移进入，结束后停留在目标位置。",{"title":459,"description":467},[492],{"title":52,"url":493},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftransform","terms\u002Fslide","详情面板","侧边详情、通知、局部内容切换。","INaXloDm5MBg7YHndtaSmKag9Rot1qvUHY_dwdpcquo",{"id":499,"title":500,"aliases":501,"body":504,"category":114,"comparison":513,"demo":514,"description":508,"en":515,"english":522,"extension":36,"keywords":523,"meta":527,"naming":131,"navigation":45,"order":528,"path":529,"phrase":530,"seo":531,"slug":514,"sources":532,"stem":534,"target":140,"usage":535,"__hash__":536},"terms\u002Fterms\u002Fscale.md","缩放入场",[502,503],"放大出现","缩放过渡",{"type":11,"value":505,"toc":511},[506,509],[14,507,508],{},"元素从较小尺寸放大到正常尺寸，强调出现位置。",[14,510,19],{},{"title":21,"searchDepth":22,"depth":22,"links":512},[],"缩放过渡不等于弹簧动画；真实弹簧通常包含不同的速度与回弹模型。","scale",{"description":516,"usage":517,"comparison":518,"target":519,"phrase":520,"naming":123,"explanation":521},"Bring an element into view by increasing its scale.","Small overlays, confirmation feedback and newly added elements.","Scaling changes size; sliding changes position. Avoid large zoom movements.","New element","Reveal the element by scaling it from slightly smaller to its normal size without shifting surrounding layout.","Bring an element into view by increasing its scale. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Scale entrance",[524,525,526],"由小变大","弹出","放大显示",{},10,"\u002Fterms\u002Fscale","内容从较小比例放大到正常大小，并伴随透明度变化。",{"title":500,"description":508},[533],{"title":52,"url":493},"terms\u002Fscale","小面板、菜单或需要视觉聚焦的提示。","-jNglcfG7gaSMmO7ESLuW8A2P4BsfLS0Laebj9r5ZR8",{"id":538,"title":539,"aliases":540,"body":543,"category":114,"comparison":552,"demo":553,"description":547,"en":554,"english":561,"extension":36,"keywords":562,"meta":565,"naming":131,"navigation":45,"order":566,"path":567,"phrase":568,"seo":569,"slug":553,"sources":570,"stem":573,"target":574,"usage":575,"__hash__":576},"terms\u002Fterms\u002Fflip.md","翻转动画",[541,542],"翻面","卡片翻转",{"type":11,"value":544,"toc":550},[545,548],[14,546,547],{},"通过旋转让卡片从正面翻到背面。",[14,549,19],{},{"title":21,"searchDepth":22,"depth":22,"links":551},[],"这里是卡片 3D 翻面，不是用于布局动画的 FLIP 技术缩写。","flip",{"description":555,"usage":556,"comparison":557,"target":558,"phrase":559,"naming":123,"explanation":560},"Rotate a card to reveal its opposite face.","Paired information that benefits from a front and back.","A flip uses rotation and perspective rather than a simple content replacement.","Information card","Rotate the card around its vertical axis to reveal the back, with a clear control to return to the front.","Rotate a card to reveal its opposite face. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Flip animation",[563,564],"卡片正反面","翻转显示另一面",{},12,"\u002Fterms\u002Fflip","卡片沿纵轴翻转，正反两面分别显示摘要和补充信息。",{"title":539,"description":547},[571],{"title":52,"url":572},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fbackface-visibility","terms\u002Fflip","信息卡片","少量关联信息的正反面对照、学习卡片。","aqkKZ4jvvu_v-rZVSMLwkx3kItlT2W80voWJKUUtgBo",{"id":578,"title":579,"aliases":580,"body":583,"category":114,"comparison":592,"demo":593,"description":587,"en":594,"english":601,"extension":36,"keywords":602,"meta":606,"naming":131,"navigation":45,"order":607,"path":608,"phrase":609,"seo":610,"slug":593,"sources":611,"stem":614,"target":615,"usage":616,"__hash__":617},"terms\u002Fterms\u002Fcollapse.md","展开收起过渡",[581,582],"高度动画","折叠动画",{"type":11,"value":584,"toc":590},[585,588],[14,586,587],{},"内容区域在收起和展开时平滑改变可见高度。",[14,589,19],{},{"title":21,"searchDepth":22,"depth":22,"links":591},[],"展开过渡是视觉效果；折叠面板还需要明确触发方式和展开状态。","collapse",{"description":595,"usage":596,"comparison":597,"target":598,"phrase":599,"naming":123,"explanation":600},"Expand or collapse the space occupied by optional content.","Settings groups and disclosure panels.","Collapsing changes layout space; hiding with opacity alone leaves the space occupied.","Expandable section","Animate the section height when opening or closing and keep the toggle accessible by keyboard.","Expand or collapse the space occupied by optional content. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Expand and collapse",[603,604,605],"下面内容展开","高度变化","收起内容",{},13,"\u002Fterms\u002Fcollapse","辅助内容在展开与收起时平滑改变高度，并保持后续内容自然移动。",{"title":579,"description":587},[612],{"title":52,"url":613},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fgrid-template-rows","terms\u002Fcollapse","辅助说明","筛选条件、帮助说明与折叠列表。","3J0p-2fVAoQnBlhGjgfXmS2a1Et5USVKUauIFoK_WAI",{"id":619,"title":620,"aliases":621,"body":624,"category":114,"comparison":633,"demo":634,"description":628,"en":635,"english":642,"extension":36,"keywords":643,"meta":646,"naming":44,"navigation":45,"order":647,"path":648,"phrase":649,"seo":650,"slug":634,"sources":651,"stem":654,"target":574,"usage":655,"__hash__":656},"terms\u002Fterms\u002Fhover-lift.md","悬停上浮",[622,623],"悬浮提升","卡片抬升",{"type":11,"value":625,"toc":631},[626,629],[14,627,628],{},"鼠标悬停或键盘聚焦时，卡片轻微上移并增强阴影。",[14,630,19],{},{"title":21,"searchDepth":22,"depth":22,"links":632},[],"上浮是视觉反馈，不能替代可点击语义；触屏设备也需要可理解的默认状态。","hover-lift",{"description":636,"usage":637,"comparison":638,"target":639,"phrase":640,"naming":33,"explanation":641},"Raise a surface slightly when it is hovered or focused.","Clickable cards and action surfaces.","A lift communicates interactivity; it should not imply that a noninteractive card is clickable.","Interactive card","On hover or keyboard focus, slightly raise the card and strengthen its shadow. Restore it when focus or hover leaves.","Raise a surface slightly when it is hovered or focused. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Hover lift",[644,645],"鼠标放上去卡片升起","阴影加深",{},14,"\u002Fterms\u002Fhover-lift","悬停或键盘聚焦时，卡片轻微上移并加强阴影，移开后恢复。",{"title":620,"description":628},[652],{"title":52,"url":653},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftransition","terms\u002Fhover-lift","可点击卡片、项目入口与操作选项。","xhBgYJpAbzjkJiE9tCvTzA_f4IJ7qUKECL6VkZF0_rk",{"id":658,"title":659,"aliases":660,"body":663,"category":114,"comparison":672,"demo":673,"description":667,"en":674,"english":681,"extension":36,"keywords":682,"meta":686,"naming":44,"navigation":45,"order":687,"path":688,"phrase":689,"seo":690,"slug":673,"sources":691,"stem":694,"target":695,"usage":696,"__hash__":697},"terms\u002Fterms\u002Fshimmer.md","骨架屏扫光",[661,662],"加载扫光","占位动画",{"type":11,"value":664,"toc":670},[665,668],[14,666,667],{},"在占位块上移动一条高亮带，提示内容正在加载。",[14,669,19],{},{"title":21,"searchDepth":22,"depth":22,"links":671},[],"骨架只是加载反馈，不能代替失败或空内容状态；减少动态效果时显示静态占位。","shimmer",{"description":675,"usage":676,"comparison":677,"target":678,"phrase":679,"naming":33,"explanation":680},"Move a subtle highlight across placeholder shapes while content loads.","Loading cards, profile rows and article placeholders.","A skeleton resembles the expected content; a spinner only signals activity.","Loading placeholder","Show skeleton placeholders shaped like the final content, with a subtle moving highlight until loading completes.","Move a subtle highlight across placeholder shapes while content loads. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Skeleton shimmer",[683,684,685],"灰色骨架","流动光带","加载中",{},15,"\u002Fterms\u002Fshimmer","加载期间显示接近内容结构的骨架，使用轻柔扫光提示等待。",{"title":659,"description":667},[692],{"title":52,"url":693},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_animations\u002FUsing_CSS_animations","terms\u002Fshimmer","加载区域","确实存在加载等待且结构可以预知的区域。","RTlumTmC4ZyawQfuq_Mj2s4L9Cw1bX_LFoTM192enKc",{"id":699,"title":700,"aliases":701,"body":704,"category":713,"comparison":714,"demo":715,"description":708,"en":716,"english":723,"extension":36,"keywords":724,"meta":728,"naming":44,"navigation":45,"order":729,"path":730,"phrase":731,"seo":732,"slug":715,"sources":733,"stem":736,"target":574,"usage":737,"__hash__":738},"terms\u002Fterms\u002Fglass.md","玻璃拟态",[702,703],"毛玻璃","磨砂玻璃",{"type":11,"value":705,"toc":711},[706,709],[14,707,708],{},"用半透明表面、背景模糊和细边框形成磨砂玻璃感。",[14,710,19],{},{"title":21,"searchDepth":22,"depth":22,"links":712},[],"visual","背景模糊作用于元素背后的区域；直接模糊元素自身会影响文字可读性。","glass",{"description":717,"usage":718,"comparison":719,"target":720,"phrase":721,"naming":33,"explanation":722},"Use translucent surfaces and background blur to suggest frosted glass.","Floating panels over visually varied backgrounds.","Transparency alone does not create a glass effect; readability requires sufficient contrast and a fallback surface.","Floating panel","Use a translucent panel with subtle background blur, a visible border and an opaque fallback for readability.","Use translucent surfaces and background blur to suggest frosted glass. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Glassmorphism",[725,726,727],"透明背景","模糊背景","玻璃面板",{},16,"\u002Fterms\u002Fglass","卡片使用半透明背景、适度背景模糊和细边框，确保文字对比清晰。",{"title":700,"description":708},[734],{"title":52,"url":735},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fbackdrop-filter","terms\u002Fglass","有背景层次的少量浮层、概览卡片。","InOuaTMkyS08H6m-VoDpJWjpmOFXcYVi4dANboa5vvA",{"id":740,"title":741,"aliases":742,"body":745,"category":713,"comparison":754,"demo":755,"description":749,"en":756,"english":763,"extension":36,"keywords":764,"meta":769,"naming":44,"navigation":45,"order":770,"path":771,"phrase":772,"seo":773,"slug":755,"sources":774,"stem":777,"target":574,"usage":778,"__hash__":779},"terms\u002Fterms\u002Fneumorphism.md","新拟态",[743,744],"软拟物","软浮雕",{"type":11,"value":746,"toc":752},[747,750],[14,748,749],{},"利用接近背景的表面和明暗双向阴影模拟柔软凸起。",[14,751,19],{},{"title":21,"searchDepth":22,"depth":22,"links":753},[],"与真实材质拟物不同，新拟态常依赖低对比表面；不能牺牲控件边界与可读性。","neumorphism",{"description":757,"usage":758,"comparison":759,"target":760,"phrase":761,"naming":33,"explanation":762},"Use paired light and dark shadows to suggest surfaces raised from a similar background.","Small decorative controls where sufficient contrast can be maintained.","Unlike ordinary shadows, neumorphism combines matching surfaces and opposing highlights. Do not rely on shadows alone for state.","Decorative control","Use subtle opposing light and dark shadows on a matching surface, while adding clear borders and focus states for accessibility.","Use paired light and dark shadows to suggest surfaces raised from a similar background. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Neumorphism",[765,766,767,768],"同色背景","凸起","凹陷","双向阴影",{},17,"\u002Fterms\u002Fneumorphism","卡片与背景保持相近色调，通过明暗双向阴影形成柔和凸起。",{"title":741,"description":749},[775],{"title":52,"url":776},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fbox-shadow","terms\u002Fneumorphism","少量装饰性面板、可识别状态明确的控件展示。","djCzBL9VF_JfPW644JFD80VJSFt2xNnTRwINqPyr2E8",{"id":781,"title":782,"aliases":783,"body":785,"category":713,"comparison":794,"demo":795,"description":789,"en":796,"english":803,"extension":36,"keywords":804,"meta":808,"naming":44,"navigation":45,"order":809,"path":810,"phrase":811,"seo":812,"slug":795,"sources":813,"stem":816,"target":574,"usage":817,"__hash__":818},"terms\u002Fterms\u002Fflat.md","扁平风格",[784],"扁平化",{"type":11,"value":786,"toc":792},[787,790],[14,788,789],{},"减少材质和立体模拟，主要用颜色、形状与排版表达层级。",[14,791,19],{},{"title":21,"searchDepth":22,"depth":22,"links":793},[],"扁平并不意味着没有层级；仍需通过字重、留白和状态表达重要程度。","flat",{"description":797,"usage":798,"comparison":799,"target":800,"phrase":801,"naming":33,"explanation":802},"Use simple shapes and colors with little simulated depth.","Content-focused tools and compact interfaces.","Flat design avoids heavy depth effects but still needs clear interactive affordances.","Interface surfaces","Use flat surfaces, solid colors and clear borders or contrast to establish hierarchy.","Use simple shapes and colors with little simulated depth. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Flat design",[805,806,807],"没有立体效果","简单纯色","清晰形状",{},18,"\u002Fterms\u002Fflat","采用纯色表面和清晰排版，减少立体装饰，以间距与字重建立层级。",{"title":782,"description":789},[814],{"title":52,"url":815},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fbackground-color","terms\u002Fflat","数据密集后台、清晰直接的工具界面。","BAlEL1Ntn_daG9o9GEbxVSppsFhPOMiCmULT6zIxlJg",{"id":820,"title":821,"aliases":822,"body":825,"category":713,"comparison":834,"demo":835,"description":829,"en":836,"english":843,"extension":36,"keywords":844,"meta":848,"naming":44,"navigation":45,"order":849,"path":850,"phrase":851,"seo":852,"slug":835,"sources":853,"stem":856,"target":574,"usage":857,"__hash__":858},"terms\u002Fterms\u002Fminimal.md","极简风格",[823,824],"极简主义","克制设计",{"type":11,"value":826,"toc":832},[827,830],[14,828,829],{},"删去无关装饰，保留完成任务需要的结构与内容。",[14,831,19],{},{"title":21,"searchDepth":22,"depth":22,"links":833},[],"极简是取舍策略，不是隐藏必要信息，也不等于所有元素都使用浅灰色。","minimal",{"description":837,"usage":838,"comparison":839,"target":840,"phrase":841,"naming":33,"explanation":842},"Reduce decorative elements and prioritize essential content.","Reading interfaces and tools with focused tasks.","Minimalism does not mean hiding necessary controls or reducing usability.","Interface","Use restrained colors, clear typography and generous spacing, retaining all controls needed for the task.","Reduce decorative elements and prioritize essential content. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Minimal design",[845,846,847],"少装饰","多留白","简单清晰",{},19,"\u002Fterms\u002Fminimal","保留必要标题、内容和操作，以留白与清晰层级组织界面。",{"title":821,"description":829},[854],{"title":52,"url":855},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FBox_model","terms\u002Fminimal","内容阅读、聚焦操作与轻量工具。","i7VTJuXtT_g0M8q9zXmPlYC1j2neejr7XqsKxfaLAT4",{"id":860,"title":861,"aliases":862,"body":864,"category":713,"comparison":873,"demo":874,"description":868,"en":875,"english":882,"extension":36,"keywords":883,"meta":886,"naming":44,"navigation":45,"order":887,"path":888,"phrase":889,"seo":890,"slug":874,"sources":891,"stem":894,"target":574,"usage":895,"__hash__":896},"terms\u002Fterms\u002Fgradient.md","渐变表面",[863],"渐变背景",{"type":11,"value":865,"toc":871},[866,869],[14,867,868],{},"在一个区域中让颜色连续过渡，突出某个视觉区域。",[14,870,19],{},{"title":21,"searchDepth":22,"depth":22,"links":872},[],"渐变是颜色填充方式，本身不表示交互状态，也不要求一定播放动画。","gradient",{"description":876,"usage":877,"comparison":878,"target":879,"phrase":880,"naming":33,"explanation":881},"Blend two or more colors across a surface.","Accent backgrounds and highlighted areas.","A gradient is a color treatment, not a structural layout pattern.","Accent surface","Apply a restrained gradient between compatible colors while maintaining text contrast.","Blend two or more colors across a surface. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Gradient surface",[884,885],"颜色慢慢变化","两种颜色过渡",{},20,"\u002Fterms\u002Fgradient","重点区域使用克制的线性渐变，文字始终保持清晰可读。",{"title":861,"description":868},[892],{"title":52,"url":893},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fgradient\u002Flinear-gradient","terms\u002Fgradient","少量强调卡片、状态背景与品牌区域。","n0aUQnJfz7xxgF7s0ojQG8EGp93HVZCoAI3S0r47_BM",{"id":898,"title":899,"aliases":900,"body":903,"category":713,"comparison":912,"demo":913,"description":907,"en":914,"english":921,"extension":36,"keywords":922,"meta":926,"naming":44,"navigation":45,"order":927,"path":928,"phrase":929,"seo":930,"slug":913,"sources":931,"stem":934,"target":574,"usage":935,"__hash__":936},"terms\u002Fterms\u002Foutline.md","描边风格",[901,902],"线框风格","边框卡片",{"type":11,"value":904,"toc":910},[905,908],[14,906,907],{},"用边框与留白而非大面积填色区分内容区域。",[14,909,19],{},{"title":21,"searchDepth":22,"depth":22,"links":911},[],"描边风格是视觉选择；聚焦轮廓是无障碍状态，不应为了风格被移除。","outline",{"description":915,"usage":916,"comparison":917,"target":918,"phrase":919,"naming":33,"explanation":920},"Define surfaces and controls primarily with visible outlines.","Secondary actions, compact controls and restrained visual systems.","An outline button is a treatment of a control; an outline style applies across the interface.","Controls","Use consistent outlines and clear spacing to distinguish controls, with explicit hover, focus and selected states.","Define surfaces and controls primarily with visible outlines. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Outline style",[923,924,925],"白底","细线","边框区分",{},21,"\u002Fterms\u002Foutline","用细边框、清晰标题和留白区分卡片区域，减少填色装饰。",{"title":899,"description":907},[932],{"title":52,"url":933},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fborder","terms\u002Foutline","文档、设置面板、紧凑管理页面。","QI5BQE8mW8vRUSwZj2YJKFCn937CTaOwFbLtKyu1xCQ",{"id":938,"title":939,"aliases":940,"body":943,"category":713,"comparison":952,"demo":953,"description":947,"en":954,"english":961,"extension":36,"keywords":962,"meta":965,"naming":44,"navigation":45,"order":966,"path":967,"phrase":968,"seo":969,"slug":953,"sources":970,"stem":972,"target":574,"usage":973,"__hash__":974},"terms\u002Fterms\u002Fsoft-shadow.md","柔和阴影",[941,942],"轻阴影","浮层阴影",{"type":11,"value":944,"toc":950},[945,948],[14,946,947],{},"用低强度、较大模糊半径的阴影表达层级。",[14,949,19],{},{"title":21,"searchDepth":22,"depth":22,"links":951},[],"阴影用于深度与层级；不要把所有区域都做成高强度浮层。","soft-shadow",{"description":955,"usage":956,"comparison":957,"target":958,"phrase":959,"naming":33,"explanation":960},"Use a diffuse shadow to separate a surface from its surroundings.","Cards, floating panels and subtle hierarchy.","A soft shadow has blurred edges; a hard shadow creates a stronger graphic separation.","Card surface","Add a restrained, diffuse shadow beneath the surface to indicate depth without distracting from content.","Use a diffuse shadow to separate a surface from its surroundings. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Soft shadow",[963,964],"轻微浮起","大范围模糊阴影",{},22,"\u002Fterms\u002Fsoft-shadow","用低透明度、较大模糊半径的阴影，让卡片轻微浮起。",{"title":939,"description":947},[971],{"title":52,"url":776},"terms\u002Fsoft-shadow","卡片、菜单与需要轻微分离背景的浮层。","0LPwUqTPXeJMWAD5M9dLRYyqHaINjzvAmJzRjgvIM1A",{"id":976,"title":977,"aliases":978,"body":981,"category":713,"comparison":990,"demo":991,"description":985,"en":992,"english":998,"extension":36,"keywords":999,"meta":1003,"naming":44,"navigation":45,"order":1004,"path":1005,"phrase":1006,"seo":1007,"slug":991,"sources":1008,"stem":1011,"target":574,"usage":1012,"__hash__":1013},"terms\u002Fterms\u002Fhigh-contrast.md","高对比风格",[979,980],"强对比","黑白风格",{"type":11,"value":982,"toc":988},[983,986],[14,984,985],{},"用明显的明暗差和清晰边界强化内容层级。",[14,987,19],{},{"title":21,"searchDepth":22,"depth":22,"links":989},[],"视觉上的高对比不等于已经满足所有无障碍要求，还需检查文字、焦点与状态。","high-contrast",{"description":993,"usage":994,"comparison":995,"target":840,"phrase":996,"naming":33,"explanation":997},"Clearly separate text, controls and surfaces with strong contrast.","Dense tools and interfaces that need clear differentiation.","High contrast is not the same as using only black and white; focus and state distinctions still matter.","Use strong text and control contrast, visible boundaries and clearly distinguishable selected and focus states.","Clearly separate text, controls and surfaces with strong contrast. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","High contrast style",[1000,1001,1002],"黑白鲜明","重点突出","清楚边界",{},23,"\u002Fterms\u002Fhigh-contrast","使用鲜明明暗对比与清晰边界，强调主操作并保留可见焦点。",{"title":977,"description":985},[1009],{"title":52,"url":1010},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@media\u002Fprefers-contrast","terms\u002Fhigh-contrast","需要明确视觉重点、清晰操作反馈的界面。","DW7r6UIIL8QI8-Z_3zEO-HpHBD3O1hdkDP77q1viacY",{"id":1015,"title":1016,"aliases":1017,"body":1020,"category":158,"comparison":1029,"demo":1030,"description":1024,"en":1031,"english":1038,"extension":36,"keywords":1039,"meta":1043,"naming":131,"navigation":45,"order":1044,"path":1045,"phrase":1046,"seo":1047,"slug":1030,"sources":1048,"stem":1051,"target":1042,"usage":1052,"__hash__":1053},"terms\u002Fterms\u002Fmodal.md","模态对话框",[1018,1019],"弹窗","模态窗口",{"type":11,"value":1021,"toc":1027},[1022,1025],[14,1023,1024],{},"以覆盖页面的对话框承载一项需要集中处理的任务。",[14,1026,19],{},{"title":21,"searchDepth":22,"depth":22,"links":1028},[],"模态会限制背景交互并管理焦点；普通浮层不一定阻止背景操作。","modal",{"description":1032,"usage":1033,"comparison":1034,"target":1035,"phrase":1036,"naming":123,"explanation":1037},"Focus attention on a short task in a dialog above the page.","Confirmations and brief forms that require a decision.","A modal blocks the background; a nonmodal popover can coexist with the current task.","Confirmation dialog","Open a modal dialog with a clear title, explanation and cancel action. Trap focus while open and return it to the trigger on close.","Focus attention on a short task in a dialog above the page. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Modal dialog",[1040,1041,1042],"居中弹出","必须先处理","确认操作",{},25,"\u002Fterms\u002Fmodal","在居中的模态对话框中聚焦当前操作，提供明确的取消与确认入口。",{"title":1016,"description":1024},[1049],{"title":52,"url":1050},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Fdialog-modal\u002F","terms\u002Fmodal","重要确认、短表单与需要明确完成或取消的操作。","YjYotKijz5o7NPvU84cSvXwEYLPqf2MonqGMMRoB7yA",{"id":1055,"title":1056,"aliases":1057,"body":1060,"category":158,"comparison":1069,"demo":1070,"description":1064,"en":1071,"english":1078,"extension":36,"keywords":1079,"meta":1083,"naming":131,"navigation":45,"order":1084,"path":1085,"phrase":1086,"seo":1087,"slug":1070,"sources":1088,"stem":1091,"target":1092,"usage":1093,"__hash__":1094},"terms\u002Fterms\u002Fcommand.md","命令面板",[1058,1059],"快捷命令","全局操作面板",{"type":11,"value":1061,"toc":1067},[1062,1065],[14,1063,1064],{},"把可执行操作放入可搜索的面板中，缩短导航路径。",[14,1066,19],{},{"title":21,"searchDepth":22,"depth":22,"links":1068},[],"命令面板搜索的是操作或目标；普通搜索框通常检索内容。可用菜单不可被完全取代。","command",{"description":1072,"usage":1073,"comparison":1074,"target":1075,"phrase":1076,"naming":123,"explanation":1077},"Search available commands from a compact keyboard-friendly panel.","Tools with many destinations or actions.","A command palette searches actions; global content search retrieves records or documents.","Command panel","Open a searchable command palette with keyboard navigation, Enter to select and Escape to close.","Search available commands from a compact keyboard-friendly panel. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Command palette",[1080,1081,1082],"快捷键","搜索命令","快速跳转",{},26,"\u002Fterms\u002Fcommand","打开可搜索的命令面板，输入关键词筛选操作，并选择执行。",{"title":1056,"description":1064},[1089],{"title":52,"url":1090},"https:\u002F\u002Fshadcn-vue.com\u002Fdocs\u002Fcomponents\u002Fcommand","terms\u002Fcommand","全局操作","功能较多的工具、键盘优先操作和快速跳转。","zeDeYquExwDQTSEQZBpOSofH1qjABPlJ7uSLwJxzKZQ",{"id":1096,"title":1097,"aliases":1098,"body":1101,"category":158,"comparison":1110,"demo":1111,"description":1105,"en":1112,"english":1119,"extension":36,"keywords":1120,"meta":1123,"naming":131,"navigation":45,"order":1124,"path":1125,"phrase":1126,"seo":1127,"slug":1111,"sources":1128,"stem":1131,"target":1132,"usage":1133,"__hash__":1134},"terms\u002Fterms\u002Ftooltip.md","文字提示",[1099,1100],"悬浮提示","工具提示",{"type":11,"value":1102,"toc":1108},[1103,1106],[14,1104,1105],{},"在悬停或聚焦时显示简短的补充说明。",[14,1107,19],{},{"title":21,"searchDepth":22,"depth":22,"links":1109},[],"Tooltip 不应包含必须操作的表单；需要交互的补充内容更适合 Popover。","tooltip",{"description":1113,"usage":1114,"comparison":1115,"target":1116,"phrase":1117,"naming":123,"explanation":1118},"Show a short explanation on hover or keyboard focus.","Clarifying icon buttons and concise supplementary hints.","A tooltip contains no interactive controls and must not hold essential information.","Icon control","Show a brief tooltip on hover and keyboard focus, associate it with its trigger and dismiss it when focus or hover leaves.","Show a short explanation on hover or keyboard focus. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Tooltip",[1121,1122],"鼠标放上去显示解释","图标说明",{},27,"\u002Fterms\u002Ftooltip","悬停或键盘聚焦时显示简短说明，移开或失焦后隐藏。",{"title":1097,"description":1105},[1129],{"title":52,"url":1130},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Ftooltip\u002F","terms\u002Ftooltip","辅助提示","有可访问名称的图标按钮、缩写与简短解释。","omPAD0AuXYz_sC3jMb7ED4Qyq_ji7Ln3OycRxnUaMi8",{"id":1136,"title":1137,"aliases":1138,"body":1141,"category":158,"comparison":1150,"demo":1151,"description":1145,"en":1152,"english":1159,"extension":36,"keywords":1160,"meta":1164,"naming":131,"navigation":45,"order":1165,"path":1166,"phrase":1167,"seo":1168,"slug":1151,"sources":1169,"stem":1172,"target":1173,"usage":1174,"__hash__":1175},"terms\u002Fterms\u002Fpopover.md","气泡浮层",[1139,1140],"弹出面板","锚定浮层",{"type":11,"value":1142,"toc":1148},[1143,1146],[14,1144,1145],{},"在触发元素附近显示一块可交互的补充内容。",[14,1147,19],{},{"title":21,"searchDepth":22,"depth":22,"links":1149},[],"Popover 可以包含操作；Tooltip 通常只提供简短文字，不承载交互任务。","popover",{"description":1153,"usage":1154,"comparison":1155,"target":1156,"phrase":1157,"naming":123,"explanation":1158},"Display a small contextual panel beside its trigger.","Compact settings, actions and related details.","A popover may contain controls; a tooltip provides a short, noninteractive explanation.","Contextual panel","Open a small popover anchored to the trigger, with accessible controls and a clear way to dismiss it.","Display a small contextual panel beside its trigger. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Popover",[1161,1162,1163],"按钮旁边弹出","小面板","局部设置",{},28,"\u002Fterms\u002Fpopover","点击触发器，在其附近展开补充面板，再次点击或关闭时收起。",{"title":1137,"description":1145},[1170],{"title":52,"url":1171},"https:\u002F\u002Fshadcn-vue.com\u002Fdocs\u002Fcomponents\u002Fpopover","terms\u002Fpopover","辅助设置","局部设置、筛选摘要与少量选项。","fWQsXUw1NoSmLRLsUpN8_mJgV4MxOkJ_gTY1jHtAomc",{"id":1177,"title":1178,"aliases":1179,"body":1182,"category":158,"comparison":1191,"demo":1192,"description":1186,"en":1193,"english":1200,"extension":36,"keywords":1201,"meta":1205,"naming":131,"navigation":45,"order":1206,"path":1207,"phrase":1208,"seo":1209,"slug":1192,"sources":1210,"stem":1213,"target":615,"usage":1214,"__hash__":1215},"terms\u002Fterms\u002Fdisclosure.md","渐进披露",[1180,1181],"按需展开","更多选项",{"type":11,"value":1183,"toc":1189},[1184,1187],[14,1185,1186],{},"先呈现完成主要任务所需的信息，再按需展开细节。",[14,1188,19],{},{"title":21,"searchDepth":22,"depth":22,"links":1190},[],"这是信息组织原则；折叠面板只是其中一种实现方式。不可隐藏关键操作结果。","disclosure",{"description":1194,"usage":1195,"comparison":1196,"target":1197,"phrase":1198,"naming":123,"explanation":1199},"Reveal optional information only when it is needed.","Advanced settings, FAQs and supporting explanations.","Disclosure reveals content within a task; navigation moves to a different destination.","Optional details","Hide secondary details behind a clearly labeled disclosure control with an exposed expanded state.","Reveal optional information only when it is needed. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Progressive disclosure",[1202,1203,1204],"先显示重点","更多信息展开","减少干扰",{},29,"\u002Fterms\u002Fdisclosure","默认显示主要信息，将低频细节收进明确标注的展开入口。",{"title":1178,"description":1186},[1211],{"title":52,"url":1212},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Fdisclosure\u002F","terms\u002Fdisclosure","高级筛选、说明细节与低频设置。","KB1W_ph1OzgrmeE2TSk72z1rhlEb-Iw4SOiHZPVNVEI",{"id":1217,"title":1218,"aliases":1219,"body":1222,"category":158,"comparison":1231,"demo":1232,"description":1226,"en":1233,"english":1240,"extension":36,"keywords":1241,"meta":1244,"naming":131,"navigation":45,"order":1245,"path":1246,"phrase":1247,"seo":1248,"slug":1232,"sources":1249,"stem":1252,"target":1253,"usage":1254,"__hash__":1255},"terms\u002Fterms\u002Ftabs.md","标签页",[1220,1221],"选项卡","页签",{"type":11,"value":1223,"toc":1229},[1224,1227],[14,1225,1226],{},"在同一内容区域中切换彼此相关的视图。",[14,1228,19],{},{"title":21,"searchDepth":22,"depth":22,"links":1230},[],"标签页切换视图，筛选器缩小同一份内容的范围；两者的语义不同。","tabs",{"description":1234,"usage":1235,"comparison":1236,"target":1237,"phrase":1238,"naming":123,"explanation":1239},"Switch between related views within a single section.","Related settings, summaries and record sections.","Tabs select peer panels; navigation links may lead to unrelated pages.","Related panels","Use a tab list with one selected panel, visible focus and arrow-key navigation. Keep the tab and panel relationships accessible.","Switch between related views within a single section. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Tabs",[1242,1243],"同一块切换内容","不同标签切换",{},30,"\u002Fterms\u002Ftabs","通过标签页在同一位置切换相关视图，并明确当前选中的标签。",{"title":1218,"description":1226},[1250],{"title":52,"url":1251},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002Fpatterns\u002Ftabs\u002F","terms\u002Ftabs","详情区域","详情的概览、活动、设置等同级内容。","TKoYVIMfLqKeHC08f_s89G2dvqvNra4xlDPT28z7ujY",{"id":1257,"title":1258,"aliases":1259,"body":1262,"category":158,"comparison":1271,"demo":1272,"description":1266,"en":1273,"english":1280,"extension":36,"keywords":1281,"meta":1285,"naming":131,"navigation":45,"order":1286,"path":1287,"phrase":1288,"seo":1289,"slug":1272,"sources":1290,"stem":1293,"target":96,"usage":1294,"__hash__":1295},"terms\u002Fterms\u002Fload-more.md","加载更多",[1260,1261],"增量加载","更多记录",{"type":11,"value":1263,"toc":1269},[1264,1267],[14,1265,1266],{},"通过明确按钮逐批追加列表记录，让用户掌握加载节奏。",[14,1268,19],{},{"title":21,"searchDepth":22,"depth":22,"links":1270},[],"与无限滚动不同，加载更多由用户主动触发；加载失败要保留已有记录。","load-more",{"description":1274,"usage":1275,"comparison":1276,"target":1277,"phrase":1278,"naming":123,"explanation":1279},"Append another group of entries when the user requests it.","Long feeds and collections where users control loading.","Unlike infinite scrolling, load more requires an explicit action.","Content list","Provide a load-more button below the list, append new entries without moving existing content and announce completion.","Append another group of entries when the user requests it. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.","Load more",[1282,1283,1284],"先显示几条","点击更多","追加列表",{},31,"\u002Fterms\u002Fload-more","先展示一批记录，点击“加载更多”后追加下一批，并反馈已全部加载的状态。",{"title":1258,"description":1266},[1291],{"title":52,"url":1292},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FAttributes\u002Faria-live","terms\u002Fload-more","长列表、活动记录与内容浏览。","GIoEet1rQbSD7tx9udRclPRrm-Y4Dg2_E4wHFFAI3jw",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1300},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1302},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 5v16m8.001-2A2 2 0 0 0 22 17V5a2 2 0 0 0-1.999-2L16 3.002A5 5 0 0 0 12 5a5 5 0 0 0-4-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 1.999 2H8a5 5 0 0 1 4 2a5 5 0 0 1 4-2z\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1304},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m21 21l-4.34-4.34\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"8\"\u002F>\u003C\u002Fg>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1306},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1308,"hidden":45},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5c.08-1.25-.27-2.48-1-3.5c.28-1.15.28-2.35 0-3.5c0 0-1 0-3 1.5c-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5c-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4\"\u002F>\u003Cpath d=\"M9 18c-4.51 2-5-2-7-2\"\u002F>\u003C\u002Fg>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1310},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M8 21h8m-4-4v4\"\u002F>\u003C\u002Fg>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1312},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1314},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1316},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8\"\u002F>\u003Cpath d=\"M3 3v5h5\"\u002F>\u003C\u002Fg>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1318},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 6L9 17l-5-5\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1320},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1322},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 5H3m9 14H3M14 3v4m2 10v4m5-9h-9m9 7h-5m5-14h-7m-6 5v4m0-2H3\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1324},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\u002F>\u003Cpath d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\u002F>\u003C\u002Fg>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1326},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1328},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7v14\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1330},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\u002F>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1332},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 12a9 9 0 0 1 9-9a9.75 9.75 0 0 1 6.74 2.74L21 8\"\u002F>\u003Cpath d=\"M21 3v5h-5m5 4a9 9 0 0 1-9 9a9.75 9.75 0 0 1-6.74-2.74L3 16\"\u002F>\u003Cpath d=\"M8 16H3v5\"\u002F>\u003C\u002Fg>",{"left":1297,"top":1297,"width":1298,"height":1298,"rotate":1297,"vFlip":1299,"hFlip":1299,"body":1334},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\u002F>\u003Cpath d=\"m7 10l5 5l5-5\"\u002F>\u003C\u002Fg>",1793183509104]