[{"data":1,"prerenderedAt":1744},["ShallowReactive",2],{"content-\u002Fcomponents\u002Finfobar":3,"content-en-fallback-\u002Fcomponents\u002Finfobar":1743},{"id":4,"title":5,"body":6,"description":1735,"extension":1736,"meta":1737,"nav":1738,"navigation":339,"path":1739,"seo":1740,"stem":1741,"__hash__":1742},"content\u002Fcomponents\u002Finfobar.md","Info Bar 信息横幅",{"type":7,"value":8,"toc":1727},"minimark",[9,13,22,34,99,104,114,271,275,297,400,404,454,584,603,607,638,708,712,736,796,800,1040,1161,1239,1723],[10,11,5],"h1",{"id":12},"info-bar-信息横幅",[14,15,16,17,21],"p",{},"Info Bar 用来告知用户「应用状态发生了变化」——需要知悉、确认或采取行动。默认情况下它留在内容区内直到被用户关闭，但不一定打断用户流程（WinUI 官方描述：",[18,19,20],"em",{},"use an InfoBar control when a user should be informed of, acknowledge, or take action on a changed application state","）。",[14,23,24,25,29,30,33],{},"样式与排版对齐 WinUI 3 \u002F Windows App SDK 的 InfoBar（",[26,27,28],"code",{},"microsoft-ui-xaml"," ",[26,31,32],{},"winui3\u002Frelease\u002F2.5.1","，已核对与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 在 InfoBar 目录下逐字节一致）：",[35,36,37,60,77,93],"ul",{},[38,39,40,44,45,48,49,52,53,56,57,21],"li",{},[41,42,43],"strong",{},"几何","：最小高 48（",[26,46,47],{},"InfoBarMinHeight","）、1px 描边（",[26,50,51],{},"InfoBarBorderThickness","）、圆角 4（",[26,54,55],{},"ControlCornerRadius","）、内容左内边距 16（",[26,58,59],{},"InfoBarContentRootPadding",[38,61,62,65,66,69,70,73,74,21],{},[41,63,64],{},"图标","：16pt 实心圆 + 反白字形（",[26,67,68],{},"InfoBarIconFontSize","），右侧留白 14、上下各 16（",[26,71,72],{},"InfoBarIconMargin"," = ",[26,75,76],{},"0,16,14,16",[38,78,79,82,83,86,87,86,90,21],{},[41,80,81],{},"关闭按钮","：38×38、外边距 5、顶端对齐、字形 16（",[26,84,85],{},"InfoBarCloseButtonStyle"," \u002F ",[26,88,89],{},"InfoBarCloseButtonSize",[26,91,92],{},"InfoBarCloseButtonGlyphSize",[38,94,95,98],{},[41,96,97],{},"排版","：不是固定断点，而是按内容实时判定横排 \u002F 竖排（见下方「实现要点」）。",[100,101,103],"h2",{"id":102},"severity四档严重级别","Severity：四档严重级别",[14,105,106,109,110,113],{},[26,107,108],{},"severity"," 决定底色、圆心底色与图标字形，四档与 WinUI ",[26,111,112],{},"InfoBarSeverity"," 一一对应：",[115,116,118,125],"demo-block",{"title":117},"四档 Severity（对齐 Gallery 示例 1）",[119,120,122],"template",{"v-slot:preview":121},"",[123,124],"infobar-severity-demo",{},[119,126,127],{"v-slot:code":121},[128,129,133],"pre",{"className":130,"code":131,"language":132,"meta":121,"style":121},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereInfoBar open title=\"Title\" severity=\"informational\" message=\"…\" \u002F>\n\u003CFluereInfoBar open title=\"Title\" severity=\"success\" message=\"…\" \u002F>\n\u003CFluereInfoBar open title=\"Title\" severity=\"warning\" message=\"…\" \u002F>\n\u003CFluereInfoBar open title=\"Title\" severity=\"error\" message=\"…\" \u002F>\n","vue",[26,134,135,181,211,241],{"__ignoreMap":121},[136,137,140,144,148,152,155,158,162,165,167,170,173,175,178],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sVt8B","\u003C",[136,145,147],{"class":146},"s9eBZ","FluereInfoBar",[136,149,151],{"class":150},"sScJk"," open",[136,153,154],{"class":150}," title",[136,156,157],{"class":142},"=",[136,159,161],{"class":160},"sZZnC","\"Title\"",[136,163,164],{"class":150}," severity",[136,166,157],{"class":142},[136,168,169],{"class":160},"\"informational\"",[136,171,172],{"class":150}," message",[136,174,157],{"class":142},[136,176,177],{"class":160},"\"…\"",[136,179,180],{"class":142}," \u002F>\n",[136,182,184,186,188,190,192,194,196,198,200,203,205,207,209],{"class":138,"line":183},2,[136,185,143],{"class":142},[136,187,147],{"class":146},[136,189,151],{"class":150},[136,191,154],{"class":150},[136,193,157],{"class":142},[136,195,161],{"class":160},[136,197,164],{"class":150},[136,199,157],{"class":142},[136,201,202],{"class":160},"\"success\"",[136,204,172],{"class":150},[136,206,157],{"class":142},[136,208,177],{"class":160},[136,210,180],{"class":142},[136,212,214,216,218,220,222,224,226,228,230,233,235,237,239],{"class":138,"line":213},3,[136,215,143],{"class":142},[136,217,147],{"class":146},[136,219,151],{"class":150},[136,221,154],{"class":150},[136,223,157],{"class":142},[136,225,161],{"class":160},[136,227,164],{"class":150},[136,229,157],{"class":142},[136,231,232],{"class":160},"\"warning\"",[136,234,172],{"class":150},[136,236,157],{"class":142},[136,238,177],{"class":160},[136,240,180],{"class":142},[136,242,244,246,248,250,252,254,256,258,260,263,265,267,269],{"class":138,"line":243},4,[136,245,143],{"class":142},[136,247,147],{"class":146},[136,249,151],{"class":150},[136,251,154],{"class":150},[136,253,157],{"class":142},[136,255,161],{"class":160},[136,257,164],{"class":150},[136,259,157],{"class":142},[136,261,262],{"class":160},"\"error\"",[136,264,172],{"class":150},[136,266,157],{"class":142},[136,268,177],{"class":160},[136,270,180],{"class":142},[100,272,274],{"id":273},"标题-正文-操作按钮","标题 \u002F 正文 \u002F 操作按钮",[14,276,277,280,281,284,285,288,289,292,293,296],{},[26,278,279],{},"title"," 与 ",[26,282,283],{},"message"," 是两个独立文本位：横排时左右相邻，竖排（内容换行）时上下堆叠。",[26,286,287],{},"#action"," 插槽对应 WinUI 的 ",[26,290,291],{},"ActionButton","（",[26,294,295],{},"ButtonBase","），既可以放按钮，也可以放超链接。",[115,298,300,305],{"title":299},"长短消息 + Action Button \u002F Hyperlink（对齐 Gallery 示例 2）",[119,301,302],{"v-slot:preview":121},[303,304],"infobar-message-demo",{},[119,306,307],{"v-slot:code":121},[128,308,310],{"className":130,"code":309,"language":132,"meta":121,"style":121},"\u003CFluereInfoBar open title=\"Title\" message=\"Essential app message…\" \u002F>\n\n\u003CFluereInfoBar open title=\"Title\" :message=\"longMessage\">\n  \u003Ctemplate #action>\n    \u003Cbutton type=\"button\">Action\u003C\u002Fbutton>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereInfoBar>\n",[26,311,312,335,341,373,378,384,390],{"__ignoreMap":121},[136,313,314,316,318,320,322,324,326,328,330,333],{"class":138,"line":139},[136,315,143],{"class":142},[136,317,147],{"class":146},[136,319,151],{"class":150},[136,321,154],{"class":150},[136,323,157],{"class":142},[136,325,161],{"class":160},[136,327,172],{"class":150},[136,329,157],{"class":142},[136,331,332],{"class":160},"\"Essential app message…\"",[136,334,180],{"class":142},[136,336,337],{"class":138,"line":183},[136,338,340],{"emptyLinePlaceholder":339},true,"\n",[136,342,343,345,347,349,351,353,355,358,360,362,365,368,370],{"class":138,"line":213},[136,344,143],{"class":142},[136,346,147],{"class":146},[136,348,151],{"class":150},[136,350,154],{"class":150},[136,352,157],{"class":142},[136,354,161],{"class":160},[136,356,357],{"class":142}," :",[136,359,283],{"class":150},[136,361,157],{"class":142},[136,363,364],{"class":160},"\"",[136,366,367],{"class":142},"longMessage",[136,369,364],{"class":160},[136,371,372],{"class":142},">\n",[136,374,375],{"class":138,"line":243},[136,376,377],{"class":142},"  \u003Ctemplate #action>\n",[136,379,381],{"class":138,"line":380},5,[136,382,383],{"class":142},"    \u003Cbutton type=\"button\">Action\u003C\u002Fbutton>\n",[136,385,387],{"class":138,"line":386},6,[136,388,389],{"class":142},"  \u003C\u002Ftemplate>\n",[136,391,393,396,398],{"class":138,"line":392},7,[136,394,395],{"class":142},"\u003C\u002F",[136,397,147],{"class":146},[136,399,372],{"class":142},[100,401,403],{"id":402},"展开-图标-可关闭三个开关","展开 \u002F 图标 \u002F 可关闭三个开关",[14,405,406,292,409,412,413,292,416,412,419,292,422,425,426,429,430,429,433,436,437,439,440,443,444,447,448,451,452,21],{},[26,407,408],{},"v-model:open",[26,410,411],{},"IsOpen","）、",[26,414,415],{},"is-icon-visible",[26,417,418],{},"IsIconVisible",[26,420,421],{},"is-closable",[26,423,424],{},"IsClosable","）三个开关与 Gallery 示例 3 的选项面板一致。点击关闭按钮时依次抛出 ",[26,427,428],{},"closeButtonClick"," → ",[26,431,432],{},"closing",[26,434,435],{},"closed","，",[26,438,432],{}," 的 ",[26,441,442],{},"args.cancel"," 置为 ",[26,445,446],{},"true"," 可以取消关闭（组件会把 ",[26,449,450],{},"open"," 回滚为 ",[26,453,446],{},[115,455,457,462],{"title":456},"三个开关 + 事件日志（对齐 Gallery 示例 3）",[119,458,459],{"v-slot:preview":121},[460,461],"infobar-options-demo",{},[119,463,464],{"v-slot:code":121},[128,465,467],{"className":130,"code":466,"language":132,"meta":121,"style":121},"\u003CFluereInfoBar\n  v-model:open=\"open\"\n  title=\"Title\"\n  :is-icon-visible=\"iconVisible\"\n  :is-closable=\"closable\"\n  message=\"…\"\n  @closing=\"onClosing\"\n  @closed=\"onClosed\"\n\u002F>\n",[26,468,469,476,495,505,521,536,546,562,578],{"__ignoreMap":121},[136,470,471,473],{"class":138,"line":139},[136,472,143],{"class":142},[136,474,475],{"class":146},"FluereInfoBar\n",[136,477,478,481,484,486,488,490,492],{"class":138,"line":183},[136,479,480],{"class":150},"  v-model",[136,482,483],{"class":142},":",[136,485,450],{"class":150},[136,487,157],{"class":142},[136,489,364],{"class":160},[136,491,450],{"class":142},[136,493,494],{"class":160},"\"\n",[136,496,497,500,502],{"class":138,"line":213},[136,498,499],{"class":150},"  title",[136,501,157],{"class":142},[136,503,504],{"class":160},"\"Title\"\n",[136,506,507,510,512,514,516,519],{"class":138,"line":243},[136,508,509],{"class":142},"  :",[136,511,415],{"class":150},[136,513,157],{"class":142},[136,515,364],{"class":160},[136,517,518],{"class":142},"iconVisible",[136,520,494],{"class":160},[136,522,523,525,527,529,531,534],{"class":138,"line":380},[136,524,509],{"class":142},[136,526,421],{"class":150},[136,528,157],{"class":142},[136,530,364],{"class":160},[136,532,533],{"class":142},"closable",[136,535,494],{"class":160},[136,537,538,541,543],{"class":138,"line":386},[136,539,540],{"class":150},"  message",[136,542,157],{"class":142},[136,544,545],{"class":160},"\"…\"\n",[136,547,548,551,553,555,557,560],{"class":138,"line":392},[136,549,550],{"class":142},"  @",[136,552,432],{"class":150},[136,554,157],{"class":142},[136,556,364],{"class":160},[136,558,559],{"class":142},"onClosing",[136,561,494],{"class":160},[136,563,565,567,569,571,573,576],{"class":138,"line":564},8,[136,566,550],{"class":142},[136,568,435],{"class":150},[136,570,157],{"class":142},[136,572,364],{"class":160},[136,574,575],{"class":142},"onClosed",[136,577,494],{"class":160},[136,579,581],{"class":138,"line":580},9,[136,582,583],{"class":142},"\u002F>\n",[115,585,587,592],{"title":586},"关闭前确认（Closing 可取消）",[119,588,589],{"v-slot:preview":121},[590,591],"infobar-closable-demo",{},[119,593,594],{"v-slot:code":121},[128,595,597],{"className":130,"code":596,"language":132,"meta":121,"style":121},"const onClosing = (args) => { if (!confirmed.value) { args.cancel = true \u002F\u002F 回滚为打开 return } }\n",[26,598,599],{"__ignoreMap":121},[136,600,601],{"class":138,"line":139},[136,602,596],{"class":142},[100,604,606],{"id":605},"内容区content与无横幅内容上移","内容区（Content）与「无横幅内容」上移",[14,608,609,612,613,616,617,86,620,623,624,86,626,86,628,29,630,633,634,637],{},[26,610,611],{},"#content","（别名 ",[26,614,615],{},"#default","）对应 WinUI 的 ",[26,618,619],{},"Content",[26,621,622],{},"ContentTemplate","，落在模板的第 2 行。当 ",[26,625,279],{},[26,627,283],{},[26,629,287],{},[41,631,632],{},"全为空","时，WinUI 会把内容区上移到第 0 行（",[26,635,636],{},"NoBannerContent"," 状态）——下面的示例用复选框对比两种排布。",[115,639,641,646],{"title":640},"Content 落在第 2 行 vs 上移到第 0 行",[119,642,643],{"v-slot:preview":121},[644,645],"infobar-content-demo",{},[119,647,648],{"v-slot:code":121},[128,649,651],{"className":130,"code":650,"language":132,"meta":121,"style":121},"\u003CFluereInfoBar open :title=\"withBanner ? '从云盘同步' : ''\">\n  \u003Ctemplate #content>\n    \u003Cspan>已同步 40%\u003C\u002Fspan>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereInfoBar>\n",[26,652,653,686,691,696,700],{"__ignoreMap":121},[136,654,655,657,659,661,663,665,667,669,672,676,679,681,684],{"class":138,"line":139},[136,656,143],{"class":142},[136,658,147],{"class":146},[136,660,151],{"class":150},[136,662,357],{"class":142},[136,664,279],{"class":150},[136,666,157],{"class":142},[136,668,364],{"class":160},[136,670,671],{"class":142},"withBanner ",[136,673,675],{"class":674},"szBVR","?",[136,677,678],{"class":160}," '从云盘同步'",[136,680,357],{"class":674},[136,682,683],{"class":160}," ''\"",[136,685,372],{"class":142},[136,687,688],{"class":138,"line":183},[136,689,690],{"class":142},"  \u003Ctemplate #content>\n",[136,692,693],{"class":138,"line":213},[136,694,695],{"class":142},"    \u003Cspan>已同步 40%\u003C\u002Fspan>\n",[136,697,698],{"class":138,"line":243},[136,699,389],{"class":142},[136,701,702,704,706],{"class":138,"line":380},[136,703,395],{"class":142},[136,705,147],{"class":146},[136,707,372],{"class":142},[100,709,711],{"id":710},"自定义图标iconsource","自定义图标（IconSource）",[14,713,714,288,717,720,721,724,725,439,728,731,732,735],{},[26,715,716],{},"#icon",[26,718,719],{},"IconSource","：提供后走 ",[26,722,723],{},"UserIconVisible"," 分支，图标被放进一个 16px 的等比容器（对齐 ",[26,726,727],{},"Viewbox",[26,729,730],{},"MaxWidth\u002FMaxHeight = InfoBarIconFontSize","），",[26,733,734],{},"is-icon-visible=false"," 时同样隐藏。",[115,737,739,744],{"title":738},"自定义图标",[119,740,741],{"v-slot:preview":121},[742,743],"infobar-icon-demo",{},[119,745,746],{"v-slot:code":121},[128,747,749],{"className":130,"code":748,"language":132,"meta":121,"style":121},"\u003CFluereInfoBar open title=\"自定义图标\" message=\"…\">\n  \u003Ctemplate #icon>\n    \u003CFluentIconCloudArrowUp20Regular :size=\"16\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereInfoBar>\n",[26,750,751,774,779,784,788],{"__ignoreMap":121},[136,752,753,755,757,759,761,763,766,768,770,772],{"class":138,"line":139},[136,754,143],{"class":142},[136,756,147],{"class":146},[136,758,151],{"class":150},[136,760,154],{"class":150},[136,762,157],{"class":142},[136,764,765],{"class":160},"\"自定义图标\"",[136,767,172],{"class":150},[136,769,157],{"class":142},[136,771,177],{"class":160},[136,773,372],{"class":142},[136,775,776],{"class":138,"line":183},[136,777,778],{"class":142},"  \u003Ctemplate #icon>\n",[136,780,781],{"class":138,"line":213},[136,782,783],{"class":142},"    \u003CFluentIconCloudArrowUp20Regular :size=\"16\" \u002F>\n",[136,785,786],{"class":138,"line":243},[136,787,389],{"class":142},[136,789,790,792,794],{"class":138,"line":380},[136,791,395],{"class":142},[136,793,147],{"class":146},[136,795,372],{"class":142},[100,797,799],{"id":798},"api","API",[801,802,803,822],"table",{},[804,805,806],"thead",{},[807,808,809,813,816,819],"tr",{},[810,811,812],"th",{},"属性（Props）",[810,814,815],{},"类型",[810,817,818],{},"默认",[810,820,821],{},"说明",[823,824,825,850,872,892,913,933,953,975,993,1014],"tbody",{},[807,826,827,832,837,842],{},[828,829,830],"td",{},[26,831,450],{},[828,833,834],{},[26,835,836],{},"boolean",[828,838,839],{},[26,840,841],{},"false",[828,843,844,845,847,848],{},"是否展开（",[26,846,408],{},"）；对齐 WinUI ",[26,849,411],{},[807,851,852,856,861,866],{},[828,853,854],{},[26,855,279],{},[828,857,858],{},[26,859,860],{},"string",[828,862,863],{},[26,864,865],{},"''",[828,867,868,869],{},"标题，14px \u002F SemiBold；对齐 WinUI ",[26,870,871],{},"Title",[807,873,874,878,882,886],{},[828,875,876],{},[26,877,283],{},[828,879,880],{},[26,881,860],{},[828,883,884],{},[26,885,865],{},[828,887,888,889],{},"正文，14px \u002F Normal；对齐 WinUI ",[26,890,891],{},"Message",[807,893,894,898,903,908],{},[828,895,896],{},[26,897,108],{},[828,899,900],{},[26,901,902],{},"'informational' | 'success' | 'warning' | 'error'",[828,904,905],{},[26,906,907],{},"'informational'",[828,909,910,911],{},"严重级别；对齐 WinUI ",[26,912,112],{},[807,914,915,920,924,928],{},[828,916,917],{},[26,918,919],{},"isIconVisible",[828,921,922],{},[26,923,836],{},[828,925,926],{},[26,927,446],{},[828,929,930,931],{},"是否显示图标列；对齐 WinUI ",[26,932,418],{},[807,934,935,940,944,948],{},[828,936,937],{},[26,938,939],{},"isClosable",[828,941,942],{},[26,943,836],{},[828,945,946],{},[26,947,446],{},[828,949,950,951],{},"是否显示关闭按钮；对齐 WinUI ",[26,952,424],{},[807,954,955,960,964,969],{},[828,956,957],{},[26,958,959],{},"label",[828,961,962],{},[26,963,860],{},[828,965,966],{},[26,967,968],{},"—",[828,970,971,972],{},"根节点可访问名；对齐 ",[26,973,974],{},"AutomationProperties.Name",[807,976,977,982,986,990],{},[828,978,979],{},[26,980,981],{},"closeButtonLabel",[828,983,984],{},[26,985,860],{},[828,987,988],{},[26,989,968],{},[828,991,992],{},"关闭按钮可访问名（WinUI 取资源，英文 \"Close\"；本库不硬编码文案）",[807,994,995,1000,1004,1008],{},[828,996,997],{},[26,998,999],{},"closeButtonTooltip",[828,1001,1002],{},[26,1003,860],{},[828,1005,1006],{},[26,1007,968],{},[828,1009,1010,1011],{},"关闭按钮原生提示；对齐资源 ",[26,1012,1013],{},"InfoBarCloseButtonTooltip",[807,1015,1016,1021,1026,1030],{},[828,1017,1018],{},[26,1019,1020],{},"closeButtonCommand",[828,1022,1023],{},[26,1024,1025],{},"() => void",[828,1027,1028],{},[26,1029,968],{},[828,1031,1032,1033,1036,1037,1039],{},"关闭按钮点击回调；对齐 WinUI ",[26,1034,1035],{},"CloseButtonCommand","，先于 ",[26,1038,432],{}," 执行",[801,1041,1042,1054],{},[804,1043,1044],{},[807,1045,1046,1049,1052],{},[810,1047,1048],{},"事件（Emits）",[810,1050,1051],{},"载荷",[810,1053,821],{},[823,1055,1056,1075,1090,1106,1132],{},[807,1057,1058,1063,1067],{},[828,1059,1060],{},[26,1061,1062],{},"update:open",[828,1064,1065],{},[26,1066,836],{},[828,1068,1069,1071,1072,1074],{},[26,1070,408],{}," 的更新；对齐 WinUI ",[26,1073,411],{}," 被改写",[807,1076,1077,1082,1084],{},[828,1078,1079],{},[26,1080,1081],{},"opened",[828,1083,968],{},[828,1085,1086,1087],{},"内容已展开；对齐 WinUI ",[26,1088,1089],{},"Opened",[807,1091,1092,1096,1098],{},[828,1093,1094],{},[26,1095,428],{},[828,1097,968],{},[828,1099,1100,1101,1036,1104],{},"关闭按钮被点击；对齐 WinUI ",[26,1102,1103],{},"CloseButtonClick",[26,1105,432],{},[807,1107,1108,1112,1117],{},[828,1109,1110],{},[26,1111,432],{},[828,1113,1114],{},[26,1115,1116],{},"{ reason, cancel }",[828,1118,1119,1120,443,1123,1125,1126,1128,1129],{},"请求关闭；把 ",[26,1121,1122],{},"cancel",[26,1124,446],{}," 可取消（回滚 ",[26,1127,450],{},"），对齐 ",[26,1130,1131],{},"Closing",[807,1133,1134,1138,1143],{},[828,1135,1136],{},[26,1137,435],{},[828,1139,1140],{},[26,1141,1142],{},"{ reason }",[828,1144,1145,1146,1149,1150,1153,1154,1157,1158],{},"已关闭；",[26,1147,1148],{},"reason"," 为 ",[26,1151,1152],{},"'closeButton'"," 或 ",[26,1155,1156],{},"'programmatic'","，对齐 ",[26,1159,1160],{},"Closed",[801,1162,1163,1172],{},[804,1164,1165],{},[807,1166,1167,1170],{},[810,1168,1169],{},"插槽（Slots）",[810,1171,821],{},[823,1173,1174,1187,1199,1213,1225],{},[807,1175,1176,1181],{},[828,1177,1178],{},[26,1179,1180],{},"icon",[828,1182,1183,1184,1186],{},"对应 WinUI ",[26,1185,719],{},"；提供后取代内建 Severity 图标",[807,1188,1189,1194],{},[828,1190,1191],{},[26,1192,1193],{},"action",[828,1195,1183,1196,1198],{},[26,1197,291],{},"；参与横 \u002F 竖排判定（缺失时不占位）",[807,1200,1201,1206],{},[828,1202,1203],{},[26,1204,1205],{},"content",[828,1207,1183,1208,86,1210,1212],{},[26,1209,619],{},[26,1211,622],{},"；落在第 2 行（无横幅内容时上移）",[807,1214,1215,1220],{},[828,1216,1217],{},[26,1218,1219],{},"default",[828,1221,1222,1224],{},[26,1223,1205],{}," 的别名",[807,1226,1227,1232],{},[828,1228,1229],{},[26,1230,1231],{},"close-icon",[828,1233,1234,1235,1238],{},"替换关闭按钮的字形（默认 ",[26,1236,1237],{},"dismiss_16_regular","）",[1240,1241,1242,1273,1278],"blockquote",{},[14,1243,1244,1247,1248,1251,1252,439,1255,1258,1259,1157,1262,1265,1266,1269,1270,1272],{},[41,1245,1246],{},"无障碍","：根节点渲染 ",[26,1249,1250],{},"role=\"status\"","（对齐 ",[26,1253,1254],{},"InfoBarAutomationPeer",[26,1256,1257],{},"ControlType=StatusBar","）；图标是装饰元素（",[26,1260,1261],{},"aria-hidden",[26,1263,1264],{},"AccessibilityView=Raw","）；关闭按钮是原生 ",[26,1267,1268],{},"\u003Cbutton>","，可访问名由 ",[26,1271,981],{}," 提供。",[14,1274,1275],{},[41,1276,1277],{},"实现要点",[35,1279,1280,1322,1352,1372,1396,1442,1645,1672,1699],{},[38,1281,1282,1285,1286,1289,1290,1293,1294,29,1297,1300,1301,29,1303,1306,1307,1310,1311,1314,1315,1317,1318,1321],{},[41,1283,1284],{},"方向判定不是固定断点","，而是逐条复刻 ",[26,1287,1288],{},"InfoBarPanel.cpp#MeasureOverride","：",[26,1291,1292],{},"nItems == 1","（只有一项）",[41,1295,1296],{},"或",[26,1298,1299],{},"totalWidth > availableSize.Width","（水平铺开后放不下）",[41,1302,1296],{},[26,1304,1305],{},"heightOfTallestInHorizontal > InfoBarMinHeight","（某项在横排下已被文本换行撑得比最小高还高）⇒ 竖排。判定用的子项尺寸来自一层 ",[26,1308,1309],{},"visibility: hidden"," + ",[26,1312,1313],{},"width: max-content"," 的隐藏镜像 DOM（",[26,1316,1261],{},"，不参与布局），因此长文本换行、容器变窄都能实时切到竖排，而不是靠 ",[26,1319,1320],{},"@container"," 猜一个断点。",[38,1323,1324,1327,1328,1331,1332,1335,1336,1339,1340,1343,1344,1347,1348,1351],{},[41,1325,1326],{},"间距方向敏感","：竖排用 ",[26,1329,1330],{},"VerticalOrientationMargin","（Title 14 \u002F Message 4 \u002F Action 12，外加面板自身的 ",[26,1333,1334],{},"0,14,0,18","），横排用 ",[26,1337,1338],{},"HorizontalOrientationMargin","（Message 左 12 \u002F Action 左 16，外加各文本的 ",[26,1341,1342],{},"top: 14","）。两个相邻块的 margin 在 XAML 的 ",[26,1345,1346],{},"ArrangeOverride"," 里是",[41,1349,1350],{},"直接相加","的（不存在外边距折叠），本组件用同一个 flex 容器 + 相邻兄弟 margin 表达同一语义。",[38,1353,1354,1359,1360,1363,1364,451,1366,1368,1369,1371],{},[41,1355,1356,1358],{},[26,1357,1131],{}," 可取消","：与 WinUI 一致，",[26,1361,1362],{},"Cancel=true"," 时把 ",[26,1365,411],{},[26,1367,446],{},"，且不再抛 ",[26,1370,1160],{},"。",[38,1373,1374,1377,1378,1381,1382,1385,1386,86,1389,86,1392,1395],{},[41,1375,1376],{},"关闭按钮配色","：WinUI 在 ",[26,1379,1380],{},"InfoBar.xaml"," 里用 ",[26,1383,1384],{},"AppBarButton*"," 一族资源重定义了按钮的底色 \u002F 前景（rest 透明、hover 5.9% 黑、pressed 6% 黑）。Fluent 2 Web 的 token 表没有这两个半透明档，本库取 ",[26,1387,1388],{},"colorSubtleBackground",[26,1390,1391],{},"…Hover",[26,1393,1394],{},"…Pressed","（语义位最近者），差异记录在组件注释里。",[38,1397,1398,1401,1402,1405,1406,1409,1410,1413,1414,1417,1418,1421,1422,1425,1426,1429,1430,1433,1434,1437,1438,1441],{},[41,1399,1400],{},"图标是「单色实心圆 + 镂空字形」","：WinUI 用两个 16pt TextBlock 完全重合——",[26,1403,1404],{},"F136"," 圆心着 Severity 图标底色、",[26,1407,1408],{},"F13x"," 字形着 ",[26,1411,1412],{},"TextFillColorInverse","（白 \u002F 黑）。Fluent System Icons 的 ",[26,1415,1416],{},"*_16_filled"," 本身就是「实心圆 + 镂空字形」的单色图形，故本库用一份图标着 Severity 图标底色，字形由镂空露出 InfoBar 底色；参考图图标中心实测为近白（",[26,1419,1420],{},"#F0F5FB","），16px 下两者不可分辨。图标是按",[41,1423,1424],{},"图形","挑的而不是按名字：Warning 用 ",[26,1427,1428],{},"error_circle_16_filled","（圆 + 感叹号）、Error 用 ",[26,1431,1432],{},"dismiss_circle_16_filled","（圆 + 叉），因为 ",[26,1435,1436],{},"warning_16_filled"," 是三角形、",[26,1439,1440],{},"error_circle"," 的感叹号也不是实机 Error 的叉号（参考图四个图标墨迹 bbox 都是 15×15 正圆）。",[38,1443,1444,1447,1448,1451,1452,1455,1456,1459,1460,1565,1568,1569,86,1571,86,1573,1575,1576,86,1579,86,1582,1585,1586,1589,1590],{},[41,1445,1446],{},"四档底色是「语义位最近」而非同值","：Fluent 2 Web 没有 ",[26,1449,1450],{},"SystemFillColor{Attention,Success,Caution,Critical}Background"," 的同值 token，逐项按 ",[26,1453,1454],{},"max(亮色 ΔE, 暗色 ΔE)"," 最小挑选（CIE ΔE76，实测由 ",[26,1457,1458],{},"temp\u002Fpw-infobar.mjs"," 输出）：",[801,1461,1462,1478],{},[804,1463,1464],{},[807,1465,1466,1469,1472,1475],{},[810,1467,1468],{},"Severity",[810,1470,1471],{},"WinUI 原值（Light\u002FDark）",[810,1473,1474],{},"本库 token",[810,1476,1477],{},"ΔE（Light\u002FDark）",[823,1479,1480,1502,1523,1544],{},[807,1481,1482,1485,1494,1499],{},[828,1483,1484],{},"Informational",[828,1486,1487,86,1490,1493],{},[26,1488,1489],{},"#F4F4F4",[26,1491,1492],{},"#323232","（合成后）",[828,1495,1496],{},[26,1497,1498],{},"colorNeutralCardBackground",[828,1500,1501],{},"2.1 \u002F 0.5",[807,1503,1504,1507,1515,1520],{},[828,1505,1506],{},"Success",[828,1508,1509,86,1512],{},[26,1510,1511],{},"#DFF6DD",[26,1513,1514],{},"#393D1B",[828,1516,1517],{},[26,1518,1519],{},"colorStatusSuccessBackground1",[828,1521,1522],{},"10.1 \u002F 18.4",[807,1524,1525,1528,1536,1541],{},[828,1526,1527],{},"Warning",[828,1529,1530,86,1533],{},[26,1531,1532],{},"#FFF4CE",[26,1534,1535],{},"#433519",[828,1537,1538],{},[26,1539,1540],{},"colorStatusWarningBackground1",[828,1542,1543],{},"17.5 \u002F 18.5",[807,1545,1546,1549,1557,1562],{},[828,1547,1548],{},"Error",[828,1550,1551,86,1554],{},[26,1552,1553],{},"#FDE7E9",[26,1555,1556],{},"#442726",[828,1558,1559],{},[26,1560,1561],{},"colorPaletteRedBackground1",[828,1563,1564],{},"6.8 \u002F 12.8",[1566,1567],"br",{},"参考图的实测值（",[26,1570,1511],{},[26,1572,1532],{},[26,1574,1553],{}," \u002F 图标底色 ",[26,1577,1578],{},"#0F7B0F",[26,1580,1581],{},"#9D5D00",[26,1583,1584],{},"#C42B1C","）与 WinUI 源码资源",[41,1587,1588],{},"逐字节一致","，可反证源码读取无误。若需要严格对齐实机观感，可覆盖组件内的两个局部变量：",[128,1591,1595],{"className":1592,"code":1593,"language":1594,"meta":121,"style":121},"language-css shiki shiki-themes github-light github-dark",".my-infobar {\n  --fui-infobar-bg: #dff6dd; \u002F* InfoBarSuccessSeverityBackgroundBrush *\u002F\n  --fui-infobar-icon-bg: #0f7b0f; \u002F* InfoBarSuccessSeverityIconBackground *\u002F\n}\n","css",[26,1596,1597,1605,1625,1640],{"__ignoreMap":121},[136,1598,1599,1602],{"class":138,"line":139},[136,1600,1601],{"class":150},".my-infobar",[136,1603,1604],{"class":142}," {\n",[136,1606,1607,1611,1614,1618,1621],{"class":138,"line":183},[136,1608,1610],{"class":1609},"s4XuR","  --fui-infobar-bg",[136,1612,1613],{"class":142},": ",[136,1615,1617],{"class":1616},"sj4cs","#dff6dd",[136,1619,1620],{"class":142},"; ",[136,1622,1624],{"class":1623},"sJ8bj","\u002F* InfoBarSuccessSeverityBackgroundBrush *\u002F\n",[136,1626,1627,1630,1632,1635,1637],{"class":138,"line":213},[136,1628,1629],{"class":1609},"  --fui-infobar-icon-bg",[136,1631,1613],{"class":142},[136,1633,1634],{"class":1616},"#0f7b0f",[136,1636,1620],{"class":142},[136,1638,1639],{"class":1623},"\u002F* InfoBarSuccessSeverityIconBackground *\u002F\n",[136,1641,1642],{"class":138,"line":243},[136,1643,1644],{"class":142},"}\n",[38,1646,1647,1650,1651,1653,1654,1656,1657,292,1660,1663,1664,1667,1668,1671],{},[41,1648,1649],{},"图标墨迹比实机小 1px","：Segoe Fluent Icons 的 ",[26,1652,1404],{}," 圆在 16pt 下墨迹直径 15px 且贴齐 em 框左缘；Fluent System Icons 的 ",[26,1655,1416],{}," 圆是 ",[26,1658,1659],{},"r=7",[41,1661,1662],{},"14px","，居中）。实测 ",[26,1665,1666],{},"iconLeft = +17","（参考 +16）、",[26,1669,1670],{},"iconD = 14","（参考 15），即右缘对齐、左缘内缩 1px —— 属图标字体几何差异，换取的是官方 Web 图标集的一致性；其余结构量（填充高、关闭按钮中心、首行墨迹位置、圆角）与参考图偏差均 ≤ 1px。",[38,1673,1674,1677,1678,1681,1682,86,1685,1688,1689,86,1692,1695,1696,1371],{},[41,1675,1676],{},"已知缺口","：高对比度主题未实现（WinUI HC 下底色为 ",[26,1679,1680],{},"SystemColorWindowColorBrush","、描边 2px、图标用 ",[26,1683,1684],{},"Highlight",[26,1686,1687],{},"HighlightText","）；WinUI 打开 \u002F 关闭时发的 UIA 通知（",[26,1690,1691],{},"InfoBarOpenedNotification",[26,1693,1694],{},"InfoBarClosedNotification","）是 UIA NotificationEvent，不映射到 ARIA live region，故本组件不引入 ",[26,1697,1698],{},"aria-live",[38,1700,1701,1289,1704,429,1706,1708,1709,429,1711,1708,1713,86,1715,429,1717,1708,1719,1722],{},[41,1702,1703],{},"与 WinUI 的 API 差异",[26,1705,719],{},[26,1707,716],{}," 插槽、",[26,1710,291],{},[26,1712,287],{},[26,1714,619],{},[26,1716,622],{},[26,1718,611],{},[26,1720,1721],{},"CloseButtonStyle"," 不暴露（样式固定在本组件内）；关闭按钮文案走 Prop（本库暂无组件内建文案通道，i18n 属 0.3.0 目标 1.4）。",[1724,1725,1726],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":121,"searchDepth":183,"depth":183,"links":1728},[1729,1730,1731,1732,1733,1734],{"id":102,"depth":183,"text":103},{"id":273,"depth":183,"text":274},{"id":402,"depth":183,"text":403},{"id":605,"depth":183,"text":606},{"id":710,"depth":183,"text":711},{"id":798,"depth":183,"text":799},"应用级状态提示横幅：四档 Severity、可关闭、可带操作按钮，样式与排版还原 WinUI 3 InfoBar。","md",{},{"title":5},"\u002Fcomponents\u002Finfobar",{"title":5,"description":1735},"components\u002Finfobar","0Q92kVI5FoSlGo411fLgdgvrnQgpXURTt1ErIXzNw3U",null,1791802960935]