[{"data":1,"prerenderedAt":323},["ShallowReactive",2],{"component-content-\u002Fdocs\u002Fcomponents\u002Fpopover":3},{"id":4,"title":5,"body":6,"description":16,"extension":316,"meta":317,"navigation":318,"path":319,"seo":320,"stem":321,"__hash__":322},"content\u002Fdocs\u002Fcomponents\u002Fpopover.md","Popover 弹出卡片",{"type":7,"value":8,"toc":297},"minimark",[9,13,17,21,51,54,58,61,65,68,71,74,77,80,83,87,90,93,96,99,102,105,108,111,114,117,120,123,126,130,293],[10,11,5],"h1",{"id":12},"popover-弹出卡片",[14,15,16],"p",{},"用于弹出卡片场景的 MoriUI 组件。",[18,19,20],"h2",{"id":20},"导入",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-ts shiki shiki-themes github-light github-dark","import { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from 'moriui'\n","ts","",[29,30,31],"code",{"__ignoreMap":27},[32,33,36,40,44,47],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"szBVR","import",[32,41,43],{"class":42},"sVt8B"," { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } ",[32,45,46],{"class":38},"from",[32,48,50],{"class":49},"sZZnC"," 'moriui'\n",[18,52,53],{"id":53},"示例",[55,56,57],"h3",{"id":57},"概览",[14,59,60],{},"Popover 的基本结构与标题、说明。",[62,63],"component-preview",{"name":64},"popover-demo",[55,66,67],{"id":67},"表单",[14,69,70],{},"在 Popover 中放置表单字段。",[62,72],{"name":73},"popover-form",[55,75,76],{"id":76},"对齐",[14,78,79],{},"使用 align 控制内容对齐方向。",[62,81],{"name":82},"popover-alignments",[55,84,86],{"id":85},"rtl","RTL",[14,88,89],{},"从右到左的弹出卡片布局。",[62,91],{"name":92},"popover-rtl",[18,94,95],{"id":95},"使用说明",[55,97,98],{"id":98},"组合方式",[14,100,101],{},"Popover 由 Trigger、Content 组成；Content 内可使用 Header、Title 与 Description 提供清晰结构。",[55,103,104],{"id":104},"定位",[14,106,107],{},"Content 的 align 与 side 控制弹出卡片的方向和对齐。",[55,109,86],{"id":110},"rtl-1",[14,112,113],{},"方向由 DirectionProvider 控制。",[18,115,116],{"id":116},"变体",[14,118,119],{},"PopoverContent 的 align 与 side 来自 Reka Popper 定位。",[18,121,122],{"id":122},"可访问性",[14,124,125],{},"Popover 复用 Reka UI 的 Popper 定位、焦点管理、Escape 关闭与 DismissableLayer。Content 内应提供 PopoverTitle，并在需要时补充 PopoverDescription。",[18,127,129],{"id":128},"api-参考","API 参考",[131,132,133,152],"table",{},[134,135,136],"thead",{},[137,138,139,143,146,149],"tr",{},[140,141,142],"th",{},"属性",[140,144,145],{},"类型",[140,147,148],{},"默认值",[140,150,151],{},"说明",[153,154,155,176,195,214,234,254,273],"tbody",{},[137,156,157,163,168,173],{},[158,159,160],"td",{},[29,161,162],{},"Popover v-model:open",[158,164,165],{},[29,166,167],{},"boolean",[158,169,170],{},[29,171,172],{},"undefined",[158,174,175],{},"弹出卡的受控打开状态。",[137,177,178,183,187,192],{},[158,179,180],{},[29,181,182],{},"Popover defaultOpen",[158,184,185],{},[29,186,167],{},[158,188,189],{},[29,190,191],{},"false",[158,193,194],{},"非受控初始打开状态。",[137,196,197,202,206,211],{},[158,198,199],{},[29,200,201],{},"Popover modal",[158,203,204],{},[29,205,167],{},[158,207,208],{},[29,209,210],{},"true",[158,212,213],{},"弹出卡打开时是否阻断背景交互。",[137,215,216,221,226,231],{},[158,217,218],{},[29,219,220],{},"PopoverContent side \u002F align",[158,222,223],{},[29,224,225],{},"PopperContentProps",[158,227,228],{},[29,229,230],{},"'bottom' \u002F 'center'",[158,232,233],{},"卡片方向与对齐。",[137,235,236,241,246,251],{},[158,237,238],{},[29,239,240],{},"PopoverContent sideOffset",[158,242,243],{},[29,244,245],{},"number",[158,247,248],{},[29,249,250],{},"4",[158,252,253],{},"卡片与触发器的偏移像素。",[137,255,256,261,266,270],{},[158,257,258],{},[29,259,260],{},"PopoverHeader class",[158,262,263],{},[29,264,265],{},"HTMLAttributes[\"class\"]",[158,267,268],{},[29,269,172],{},[158,271,272],{},"合并到卡片头部的调用方类。",[137,274,275,280,285,290],{},[158,276,277],{},[29,278,279],{},"PopoverAnchor as \u002F asChild",[158,281,282],{},[29,283,284],{},"string | Component \u002F boolean",[158,286,287],{},[29,288,289],{},"'div' \u002F false",[158,291,292],{},"自定义锚点的元素组合能力。",[294,295,296],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":27,"searchDepth":298,"depth":298,"links":299},2,[300,301,308,313,314,315],{"id":20,"depth":298,"text":20},{"id":53,"depth":298,"text":53,"children":302},[303,305,306,307],{"id":57,"depth":304,"text":57},3,{"id":67,"depth":304,"text":67},{"id":76,"depth":304,"text":76},{"id":85,"depth":304,"text":86},{"id":95,"depth":298,"text":95,"children":309},[310,311,312],{"id":98,"depth":304,"text":98},{"id":104,"depth":304,"text":104},{"id":110,"depth":304,"text":86},{"id":116,"depth":298,"text":116},{"id":122,"depth":298,"text":122},{"id":128,"depth":298,"text":129},"md",{},true,"\u002Fdocs\u002Fcomponents\u002Fpopover",{"title":5,"description":16},"docs\u002Fcomponents\u002Fpopover","jIMPRPliWxjpjh5fGAUnrHwN6skf-jqHnZLXfKoZDjE",1784712996683]