[{"data":1,"prerenderedAt":3218},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Finfobar":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Finfobar":1749},{"id":4,"title":5,"body":6,"description":1741,"extension":1742,"meta":1743,"nav":1744,"navigation":339,"path":1745,"seo":1746,"stem":1747,"__hash__":1748},"content_en\u002Fen\u002Fcomponents\u002Finfobar.md","Info Bar",{"type":7,"value":8,"toc":1733},"minimark",[9,13,22,34,99,104,114,271,275,297,400,404,456,586,611,615,647,717,721,746,806,810,1049,1172,1250,1729],[10,11,5],"h1",{"id":12},"info-bar",[14,15,16,17,21],"p",{},"Info Bar tells the user that \"the application state has changed\" — something to be informed of, acknowledged, or acted upon. By default it stays in the content area until the user closes it, but it does not necessarily disrupt the user's flow (WinUI official description: ",[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],{},"The styling and typography align with the WinUI 3 \u002F Windows App SDK InfoBar (",[26,27,28],"code",{},"microsoft-ui-xaml"," ",[26,31,32],{},"winui3\u002Frelease\u002F2.5.1",", verified byte-for-byte identical to the WindowsAppSDK 2.0.1 used by the latest WinUI3 Gallery release v2.9.3 in the InfoBar directory):",[35,36,37,60,77,93],"ul",{},[38,39,40,44,45,48,49,52,53,56,57,21],"li",{},[41,42,43],"strong",{},"Geometry",": min height 48 (",[26,46,47],{},"InfoBarMinHeight","), 1px border (",[26,50,51],{},"InfoBarBorderThickness","), corner radius 4 (",[26,54,55],{},"ControlCornerRadius","), content left padding 16 (",[26,58,59],{},"InfoBarContentRootPadding",[38,61,62,65,66,69,70,73,74,21],{},[41,63,64],{},"Icon",": 16pt solid circle + inverted glyph (",[26,67,68],{},"InfoBarIconFontSize","), right whitespace 14, top\u002Fbottom 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],{},"Close button",": 38×38, margin 5, top-aligned, glyph 16 (",[26,84,85],{},"InfoBarCloseButtonStyle"," \u002F ",[26,88,89],{},"InfoBarCloseButtonSize",[26,91,92],{},"InfoBarCloseButtonGlyphSize",[38,94,95,98],{},[41,96,97],{},"Layout",": it does not use a fixed breakpoint, but decides horizontal \u002F vertical layout live based on the content (see \"Implementation notes\" below).",[100,101,103],"h2",{"id":102},"severity-four-levels","Severity: four levels",[14,105,106,109,110,113],{},[26,107,108],{},"severity"," determines the background color, the filled-circle color and the icon glyph, mapping one-to-one to the four WinUI ",[26,111,112],{},"InfoBarSeverity"," tiers:",[115,116,118,125],"demo-block",{"title":117},"Four Severity tiers (aligned with Gallery example 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},"title-message-action-button","Title \u002F message \u002F action button",[14,276,277,280,281,284,285,288,289,292,293,296],{},[26,278,279],{},"title"," and ",[26,282,283],{},"message"," are two independent text slots: side-by-side horizontally, stacked vertically when wrapping. The ",[26,286,287],{},"#action"," slot corresponds to WinUI's ",[26,290,291],{},"ActionButton"," (",[26,294,295],{},"ButtonBase","); it can hold either a button or a hyperlink.",[115,298,300,305],{"title":299},"Long\u002Fshort messages + Action Button \u002F Hyperlink (aligned with Gallery example 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},"expand-icon-closable-toggles","Expand \u002F icon \u002F closable toggles",[14,405,406,407,292,410,413,414,292,417,420,421,292,424,427,428,431,432,431,435,438,439,441,442,445,446,449,450,453,454,21],{},"The three toggles ",[26,408,409],{},"v-model:open",[26,411,412],{},"IsOpen","), ",[26,415,416],{},"is-icon-visible",[26,418,419],{},"IsIconVisible",") and ",[26,422,423],{},"is-closable",[26,425,426],{},"IsClosable",") match the options panel of Gallery example 3. Clicking the close button emits ",[26,429,430],{},"closeButtonClick"," → ",[26,433,434],{},"closing",[26,436,437],{},"closed"," in sequence; setting ",[26,440,434],{},"'s ",[26,443,444],{},"args.cancel"," to ",[26,447,448],{},"true"," cancels the close (the component rolls ",[26,451,452],{},"open"," back to ",[26,455,448],{},[115,457,459,464],{"title":458},"Three toggles + event log (aligned with Gallery example 3)",[119,460,461],{"v-slot:preview":121},[462,463],"infobar-options-demo",{},[119,465,466],{"v-slot:code":121},[128,467,469],{"className":130,"code":468,"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,470,471,478,497,507,523,538,548,564,580],{"__ignoreMap":121},[136,472,473,475],{"class":138,"line":139},[136,474,143],{"class":142},[136,476,477],{"class":146},"FluereInfoBar\n",[136,479,480,483,486,488,490,492,494],{"class":138,"line":183},[136,481,482],{"class":150},"  v-model",[136,484,485],{"class":142},":",[136,487,452],{"class":150},[136,489,157],{"class":142},[136,491,364],{"class":160},[136,493,452],{"class":142},[136,495,496],{"class":160},"\"\n",[136,498,499,502,504],{"class":138,"line":213},[136,500,501],{"class":150},"  title",[136,503,157],{"class":142},[136,505,506],{"class":160},"\"Title\"\n",[136,508,509,512,514,516,518,521],{"class":138,"line":243},[136,510,511],{"class":142},"  :",[136,513,416],{"class":150},[136,515,157],{"class":142},[136,517,364],{"class":160},[136,519,520],{"class":142},"iconVisible",[136,522,496],{"class":160},[136,524,525,527,529,531,533,536],{"class":138,"line":380},[136,526,511],{"class":142},[136,528,423],{"class":150},[136,530,157],{"class":142},[136,532,364],{"class":160},[136,534,535],{"class":142},"closable",[136,537,496],{"class":160},[136,539,540,543,545],{"class":138,"line":386},[136,541,542],{"class":150},"  message",[136,544,157],{"class":142},[136,546,547],{"class":160},"\"…\"\n",[136,549,550,553,555,557,559,562],{"class":138,"line":392},[136,551,552],{"class":142},"  @",[136,554,434],{"class":150},[136,556,157],{"class":142},[136,558,364],{"class":160},[136,560,561],{"class":142},"onClosing",[136,563,496],{"class":160},[136,565,567,569,571,573,575,578],{"class":138,"line":566},8,[136,568,552],{"class":142},[136,570,437],{"class":150},[136,572,157],{"class":142},[136,574,364],{"class":160},[136,576,577],{"class":142},"onClosed",[136,579,496],{"class":160},[136,581,583],{"class":138,"line":582},9,[136,584,585],{"class":142},"\u002F>\n",[115,587,589,594],{"title":588},"Confirm before closing (Closing can be cancelled)",[119,590,591],{"v-slot:preview":121},[592,593],"infobar-closable-demo",{},[119,595,596],{"v-slot:code":121},[128,597,599],{"className":130,"code":598,"language":132,"meta":121,"style":121},"const onClosing = (args) => { if (!confirmed.value) { args.cancel = true \u002F\u002F roll back to open return\n} }\n",[26,600,601,606],{"__ignoreMap":121},[136,602,603],{"class":138,"line":139},[136,604,605],{"class":142},"const onClosing = (args) => { if (!confirmed.value) { args.cancel = true \u002F\u002F roll back to open return\n",[136,607,608],{"class":138,"line":183},[136,609,610],{"class":142},"} }\n",[100,612,614],{"id":613},"content-area-and-no-banner-content-elevation","Content area and \"no banner content\" elevation",[14,616,617,620,621,624,625,86,628,631,632,86,634,86,636,638,639,642,643,646],{},[26,618,619],{},"#content"," (alias ",[26,622,623],{},"#default",") corresponds to WinUI's ",[26,626,627],{},"Content",[26,629,630],{},"ContentTemplate",", landing on row 2 of the template. When ",[26,633,279],{},[26,635,283],{},[26,637,287],{}," are ",[41,640,641],{},"all empty",", WinUI elevates the content area to row 0 (the ",[26,644,645],{},"NoBannerContent"," state) — the example below uses a checkbox to compare the two layouts.",[115,648,650,655],{"title":649},"Content on row 2 vs elevated to row 0",[119,651,652],{"v-slot:preview":121},[653,654],"infobar-content-demo",{},[119,656,657],{"v-slot:code":121},[128,658,660],{"className":130,"code":659,"language":132,"meta":121,"style":121},"\u003CFluereInfoBar open :title=\"withBanner ? 'Sync from cloud drive' : ''\">\n  \u003Ctemplate #content>\n    \u003Cspan>Synced 40%\u003C\u002Fspan>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereInfoBar>\n",[26,661,662,695,700,705,709],{"__ignoreMap":121},[136,663,664,666,668,670,672,674,676,678,681,685,688,690,693],{"class":138,"line":139},[136,665,143],{"class":142},[136,667,147],{"class":146},[136,669,151],{"class":150},[136,671,357],{"class":142},[136,673,279],{"class":150},[136,675,157],{"class":142},[136,677,364],{"class":160},[136,679,680],{"class":142},"withBanner ",[136,682,684],{"class":683},"szBVR","?",[136,686,687],{"class":160}," 'Sync from cloud drive'",[136,689,357],{"class":683},[136,691,692],{"class":160}," ''\"",[136,694,372],{"class":142},[136,696,697],{"class":138,"line":183},[136,698,699],{"class":142},"  \u003Ctemplate #content>\n",[136,701,702],{"class":138,"line":213},[136,703,704],{"class":142},"    \u003Cspan>Synced 40%\u003C\u002Fspan>\n",[136,706,707],{"class":138,"line":243},[136,708,389],{"class":142},[136,710,711,713,715],{"class":138,"line":380},[136,712,395],{"class":142},[136,714,147],{"class":146},[136,716,372],{"class":142},[100,718,720],{"id":719},"custom-icon-iconsource","Custom icon (IconSource)",[14,722,723,724,288,727,730,731,734,735,441,738,741,742,745],{},"The ",[26,725,726],{},"#icon",[26,728,729],{},"IconSource",": when provided, it takes the ",[26,732,733],{},"UserIconVisible"," branch and the icon is placed in a 16px equally-proportioned container (aligned with ",[26,736,737],{},"Viewbox",[26,739,740],{},"MaxWidth\u002FMaxHeight = InfoBarIconFontSize","); it is also hidden when ",[26,743,744],{},"is-icon-visible=false",".",[115,747,749,754],{"title":748},"Custom icon",[119,750,751],{"v-slot:preview":121},[752,753],"infobar-icon-demo",{},[119,755,756],{"v-slot:code":121},[128,757,759],{"className":130,"code":758,"language":132,"meta":121,"style":121},"\u003CFluereInfoBar open title=\"Custom icon\" message=\"…\">\n  \u003Ctemplate #icon>\n    \u003CFluentIconCloudArrowUp20Regular :size=\"16\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereInfoBar>\n",[26,760,761,784,789,794,798],{"__ignoreMap":121},[136,762,763,765,767,769,771,773,776,778,780,782],{"class":138,"line":139},[136,764,143],{"class":142},[136,766,147],{"class":146},[136,768,151],{"class":150},[136,770,154],{"class":150},[136,772,157],{"class":142},[136,774,775],{"class":160},"\"Custom icon\"",[136,777,172],{"class":150},[136,779,157],{"class":142},[136,781,177],{"class":160},[136,783,372],{"class":142},[136,785,786],{"class":138,"line":183},[136,787,788],{"class":142},"  \u003Ctemplate #icon>\n",[136,790,791],{"class":138,"line":213},[136,792,793],{"class":142},"    \u003CFluentIconCloudArrowUp20Regular :size=\"16\" \u002F>\n",[136,795,796],{"class":138,"line":243},[136,797,389],{"class":142},[136,799,800,802,804],{"class":138,"line":380},[136,801,395],{"class":142},[136,803,147],{"class":146},[136,805,372],{"class":142},[100,807,809],{"id":808},"api","API",[811,812,813,832],"table",{},[814,815,816],"thead",{},[817,818,819,823,826,829],"tr",{},[820,821,822],"th",{},"Props",[820,824,825],{},"Type",[820,827,828],{},"Default",[820,830,831],{},"Description",[833,834,835,860,882,902,923,943,963,985,1003,1024],"tbody",{},[817,836,837,842,847,852],{},[838,839,840],"td",{},[26,841,452],{},[838,843,844],{},[26,845,846],{},"boolean",[838,848,849],{},[26,850,851],{},"false",[838,853,854,855,857,858],{},"Whether expanded (",[26,856,409],{},"); aligned with WinUI ",[26,859,412],{},[817,861,862,866,871,876],{},[838,863,864],{},[26,865,279],{},[838,867,868],{},[26,869,870],{},"string",[838,872,873],{},[26,874,875],{},"''",[838,877,878,879],{},"Title, 14px \u002F SemiBold; aligned with WinUI ",[26,880,881],{},"Title",[817,883,884,888,892,896],{},[838,885,886],{},[26,887,283],{},[838,889,890],{},[26,891,870],{},[838,893,894],{},[26,895,875],{},[838,897,898,899],{},"Message body, 14px \u002F Normal; aligned with WinUI ",[26,900,901],{},"Message",[817,903,904,908,913,918],{},[838,905,906],{},[26,907,108],{},[838,909,910],{},[26,911,912],{},"'informational' | 'success' | 'warning' | 'error'",[838,914,915],{},[26,916,917],{},"'informational'",[838,919,920,921],{},"Severity; aligned with WinUI ",[26,922,112],{},[817,924,925,930,934,938],{},[838,926,927],{},[26,928,929],{},"isIconVisible",[838,931,932],{},[26,933,846],{},[838,935,936],{},[26,937,448],{},[838,939,940,941],{},"Whether to show the icon column; aligned with WinUI ",[26,942,419],{},[817,944,945,950,954,958],{},[838,946,947],{},[26,948,949],{},"isClosable",[838,951,952],{},[26,953,846],{},[838,955,956],{},[26,957,448],{},[838,959,960,961],{},"Whether to show the close button; aligned with WinUI ",[26,962,426],{},[817,964,965,970,974,979],{},[838,966,967],{},[26,968,969],{},"label",[838,971,972],{},[26,973,870],{},[838,975,976],{},[26,977,978],{},"—",[838,980,981,982],{},"Accessible name of the root node; aligned with ",[26,983,984],{},"AutomationProperties.Name",[817,986,987,992,996,1000],{},[838,988,989],{},[26,990,991],{},"closeButtonLabel",[838,993,994],{},[26,995,870],{},[838,997,998],{},[26,999,978],{},[838,1001,1002],{},"Accessible name of the close button (WinUI takes a resource, English \"Close\"; this library does not hardcode text)",[817,1004,1005,1010,1014,1018],{},[838,1006,1007],{},[26,1008,1009],{},"closeButtonTooltip",[838,1011,1012],{},[26,1013,870],{},[838,1015,1016],{},[26,1017,978],{},[838,1019,1020,1021],{},"Native tooltip of the close button; aligned with resource ",[26,1022,1023],{},"InfoBarCloseButtonTooltip",[817,1025,1026,1031,1036,1040],{},[838,1027,1028],{},[26,1029,1030],{},"closeButtonCommand",[838,1032,1033],{},[26,1034,1035],{},"() => void",[838,1037,1038],{},[26,1039,978],{},[838,1041,1042,1043,1046,1047],{},"Close-button click callback; aligned with WinUI ",[26,1044,1045],{},"CloseButtonCommand",", executed before ",[26,1048,434],{},[811,1050,1051,1063],{},[814,1052,1053],{},[817,1054,1055,1058,1061],{},[820,1056,1057],{},"Events (Emits)",[820,1059,1060],{},"Payload",[820,1062,831],{},[833,1064,1065,1085,1100,1117,1143],{},[817,1066,1067,1072,1076],{},[838,1068,1069],{},[26,1070,1071],{},"update:open",[838,1073,1074],{},[26,1075,846],{},[838,1077,1078,1079,1081,1082,1084],{},"Update for ",[26,1080,409],{},"; aligned with WinUI ",[26,1083,412],{}," being overwritten",[817,1086,1087,1092,1094],{},[838,1088,1089],{},[26,1090,1091],{},"opened",[838,1093,978],{},[838,1095,1096,1097],{},"Content expanded; aligned with WinUI ",[26,1098,1099],{},"Opened",[817,1101,1102,1106,1108],{},[838,1103,1104],{},[26,1105,430],{},[838,1107,978],{},[838,1109,1110,1111,1114,1115],{},"Close button clicked; aligned with WinUI ",[26,1112,1113],{},"CloseButtonClick",", before ",[26,1116,434],{},[817,1118,1119,1123,1128],{},[838,1120,1121],{},[26,1122,434],{},[838,1124,1125],{},[26,1126,1127],{},"{ reason, cancel }",[838,1129,1130,1131,445,1134,1136,1137,1139,1140],{},"Close requested; set ",[26,1132,1133],{},"cancel",[26,1135,448],{}," to cancel (rolls back ",[26,1138,452],{},"), aligned with ",[26,1141,1142],{},"Closing",[817,1144,1145,1149,1154],{},[838,1146,1147],{},[26,1148,437],{},[838,1150,1151],{},[26,1152,1153],{},"{ reason }",[838,1155,1156,1157,1160,1161,1164,1165,1168,1169],{},"Closed; ",[26,1158,1159],{},"reason"," is ",[26,1162,1163],{},"'closeButton'"," or ",[26,1166,1167],{},"'programmatic'",", aligned with ",[26,1170,1171],{},"Closed",[811,1173,1174,1183],{},[814,1175,1176],{},[817,1177,1178,1181],{},[820,1179,1180],{},"Slots",[820,1182,831],{},[833,1184,1185,1198,1210,1224,1236],{},[817,1186,1187,1192],{},[838,1188,1189],{},[26,1190,1191],{},"icon",[838,1193,1194,1195,1197],{},"Corresponds to WinUI ",[26,1196,729],{},"; when provided, replaces the built-in Severity icon",[817,1199,1200,1205],{},[838,1201,1202],{},[26,1203,1204],{},"action",[838,1206,1194,1207,1209],{},[26,1208,291],{},"; participates in the horizontal \u002F vertical layout decision (no placeholder when absent)",[817,1211,1212,1217],{},[838,1213,1214],{},[26,1215,1216],{},"content",[838,1218,1194,1219,86,1221,1223],{},[26,1220,627],{},[26,1222,630],{},"; lands on row 2 (elevated when there is no banner content)",[817,1225,1226,1231],{},[838,1227,1228],{},[26,1229,1230],{},"default",[838,1232,1233,1234],{},"Alias of ",[26,1235,1216],{},[817,1237,1238,1243],{},[838,1239,1240],{},[26,1241,1242],{},"close-icon",[838,1244,1245,1246,1249],{},"Replaces the close-button glyph (default ",[26,1247,1248],{},"dismiss_16_regular",")",[1251,1252,1253,1283,1288],"blockquote",{},[14,1254,1255,1258,1259,1262,1263,441,1266,1269,1270,1168,1273,1276,1277,1280,1281,745],{},[41,1256,1257],{},"Accessibility",": the root renders ",[26,1260,1261],{},"role=\"status\""," (aligned with ",[26,1264,1265],{},"InfoBarAutomationPeer",[26,1267,1268],{},"ControlType=StatusBar","); the icon is a decorative element (",[26,1271,1272],{},"aria-hidden",[26,1274,1275],{},"AccessibilityView=Raw","); the close button is a native ",[26,1278,1279],{},"\u003Cbutton>"," whose accessible name is supplied by ",[26,1282,991],{},[14,1284,1285],{},[41,1286,1287],{},"Implementation notes",[35,1289,1290,1330,1360,1379,1403,1449,1651,1678,1705],{},[38,1291,1292,1295,1296,1299,1300,1303,1304,29,1307,1310,1311,29,1313,1316,1317,1320,1321,292,1324,1326,1327,745],{},[41,1293,1294],{},"The orientation decision is not a fixed breakpoint",", but a line-by-line port of ",[26,1297,1298],{},"InfoBarPanel.cpp#MeasureOverride",": ",[26,1301,1302],{},"nItems == 1"," (only one item) ",[41,1305,1306],{},"or",[26,1308,1309],{},"totalWidth > availableSize.Width"," (does not fit when laid out horizontally) ",[41,1312,1306],{},[26,1314,1315],{},"heightOfTallestInHorizontal > InfoBarMinHeight"," (an item's text wrapping in horizontal layout makes it taller than the min height) ⇒ vertical layout. The child sizes used for the decision come from a hidden mirror DOM with ",[26,1318,1319],{},"visibility: hidden"," + ",[26,1322,1323],{},"width: max-content",[26,1325,1272],{},", not participating in layout), so long-text wrapping and container narrowing switch to vertical in real time, rather than guessing a breakpoint via ",[26,1328,1329],{},"@container",[38,1331,1332,1335,1336,1339,1340,1343,1344,1347,1348,1351,1352,1355,1356,1359],{},[41,1333,1334],{},"Spacing is orientation-sensitive",": vertical uses ",[26,1337,1338],{},"VerticalOrientationMargin"," (Title 14 \u002F Message 4 \u002F Action 12, plus the panel's own ",[26,1341,1342],{},"0,14,0,18","); horizontal uses ",[26,1345,1346],{},"HorizontalOrientationMargin"," (Message left 12 \u002F Action left 16, plus each text's ",[26,1349,1350],{},"top: 14","). In XAML's ",[26,1353,1354],{},"ArrangeOverride"," the margins of two adjacent blocks are ",[41,1357,1358],{},"added directly"," (there is no margin collapsing); this component expresses the same semantics with a single flex container + adjacent-sibling margins.",[38,1361,1362,1367,1368,1371,1372,453,1374,1376,1377,745],{},[41,1363,1364,1366],{},[26,1365,1142],{}," can be cancelled",": consistent with WinUI, ",[26,1369,1370],{},"Cancel=true"," rolls ",[26,1373,412],{},[26,1375,448],{}," and no longer emits ",[26,1378,1171],{},[38,1380,1381,1384,1385,1388,1389,1392,1393,86,1396,86,1399,1402],{},[41,1382,1383],{},"Close-button colors",": WinUI redefines the button's background \u002F foreground in ",[26,1386,1387],{},"InfoBar.xaml"," using the ",[26,1390,1391],{},"AppBarButton*"," family of resources (rest transparent, hover 5.9% black, pressed 6% black). Fluent 2 Web's token table has no two translucent tiers, so this library takes ",[26,1394,1395],{},"colorSubtleBackground",[26,1397,1398],{},"…Hover",[26,1400,1401],{},"…Pressed"," (nearest semantic tier); the difference is recorded in the component comments.",[38,1404,1405,1408,1409,1412,1413,1416,1417,1420,1421,1424,1425,1428,1429,1432,1433,1436,1437,1440,1441,1444,1445,1448],{},[41,1406,1407],{},"The icon is a \"solid monochrome circle + cut-out glyph\"",": WinUI uses two 16pt TextBlocks that exactly overlap — ",[26,1410,1411],{},"F136"," (the circle center) fills with the Severity icon background, and the ",[26,1414,1415],{},"F13x"," glyph fills with ",[26,1418,1419],{},"TextFillColorInverse"," (white \u002F black). Fluent System Icons' ",[26,1422,1423],{},"*_16_filled"," is itself a \"solid circle + cut-out glyph\" monochrome graphic, so this library fills one icon with the Severity icon color, and the cut-out glyph exposes the InfoBar background; the reference image's icon center measures near-white (",[26,1426,1427],{},"#F0F5FB","), indistinguishable at 16px. Icons are chosen ",[41,1430,1431],{},"by their shape",", not their name: Warning uses ",[26,1434,1435],{},"error_circle_16_filled"," (circle + exclamation), Error uses ",[26,1438,1439],{},"dismiss_circle_16_filled"," (circle + cross), because ",[26,1442,1443],{},"warning_16_filled"," is a triangle and ",[26,1446,1447],{},"error_circle","'s exclamation is not the real control's Error cross (the four reference icon ink bboxes are all 15×15 perfect circles).",[38,1450,1451,1454,1455,1458,1459,1462,1463,1466,1467,1572,1575,1576,86,1578,86,1580,1582,1583,86,1586,86,1589,1592,1593,1596,1597],{},[41,1452,1453],{},"The four background tiers are \"nearest semantic\" rather than equal values",": Fluent 2 Web has no token equal to ",[26,1456,1457],{},"SystemFillColor{Attention,Success,Caution,Critical}Background","; each is chosen by minimizing ",[26,1460,1461],{},"max(light ΔE, dark ΔE)"," (CIE ΔE76, measured via ",[26,1464,1465],{},"temp\u002Fpw-infobar.mjs","):",[811,1468,1469,1485],{},[814,1470,1471],{},[817,1472,1473,1476,1479,1482],{},[820,1474,1475],{},"Severity",[820,1477,1478],{},"WinUI original (Light\u002FDark)",[820,1480,1481],{},"Our token",[820,1483,1484],{},"ΔE (Light\u002FDark)",[833,1486,1487,1509,1530,1551],{},[817,1488,1489,1492,1501,1506],{},[838,1490,1491],{},"Informational",[838,1493,1494,86,1497,1500],{},[26,1495,1496],{},"#F4F4F4",[26,1498,1499],{},"#323232"," (composite)",[838,1502,1503],{},[26,1504,1505],{},"colorNeutralCardBackground",[838,1507,1508],{},"2.1 \u002F 0.5",[817,1510,1511,1514,1522,1527],{},[838,1512,1513],{},"Success",[838,1515,1516,86,1519],{},[26,1517,1518],{},"#DFF6DD",[26,1520,1521],{},"#393D1B",[838,1523,1524],{},[26,1525,1526],{},"colorStatusSuccessBackground1",[838,1528,1529],{},"10.1 \u002F 18.4",[817,1531,1532,1535,1543,1548],{},[838,1533,1534],{},"Warning",[838,1536,1537,86,1540],{},[26,1538,1539],{},"#FFF4CE",[26,1541,1542],{},"#433519",[838,1544,1545],{},[26,1546,1547],{},"colorStatusWarningBackground1",[838,1549,1550],{},"17.5 \u002F 18.5",[817,1552,1553,1556,1564,1569],{},[838,1554,1555],{},"Error",[838,1557,1558,86,1561],{},[26,1559,1560],{},"#FDE7E9",[26,1562,1563],{},"#442726",[838,1565,1566],{},[26,1567,1568],{},"colorPaletteRedBackground1",[838,1570,1571],{},"6.8 \u002F 12.8",[1573,1574],"br",{},"The reference image's measured values (",[26,1577,1518],{},[26,1579,1539],{},[26,1581,1560],{}," \u002F icon background ",[26,1584,1585],{},"#0F7B0F",[26,1587,1588],{},"#9D5D00",[26,1590,1591],{},"#C42B1C",") are ",[41,1594,1595],{},"byte-for-byte identical"," to the WinUI source resources, confirming the source readings are correct. If you need strict alignment with the real control's appearance, override the two local variables in the component:",[128,1598,1602],{"className":1599,"code":1600,"language":1601,"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,1603,1604,1612,1631,1646],{"__ignoreMap":121},[136,1605,1606,1609],{"class":138,"line":139},[136,1607,1608],{"class":150},".my-infobar",[136,1610,1611],{"class":142}," {\n",[136,1613,1614,1618,1620,1624,1627],{"class":138,"line":183},[136,1615,1617],{"class":1616},"s4XuR","  --fui-infobar-bg",[136,1619,1299],{"class":142},[136,1621,1623],{"class":1622},"sj4cs","#dff6dd",[136,1625,1626],{"class":142},"; ",[136,1628,1630],{"class":1629},"sJ8bj","\u002F* InfoBarSuccessSeverityBackgroundBrush *\u002F\n",[136,1632,1633,1636,1638,1641,1643],{"class":138,"line":213},[136,1634,1635],{"class":1616},"  --fui-infobar-icon-bg",[136,1637,1299],{"class":142},[136,1639,1640],{"class":1622},"#0f7b0f",[136,1642,1626],{"class":142},[136,1644,1645],{"class":1629},"\u002F* InfoBarSuccessSeverityIconBackground *\u002F\n",[136,1647,1648],{"class":138,"line":243},[136,1649,1650],{"class":142},"}\n",[38,1652,1653,1656,1657,1659,1660,1662,1663,292,1666,1669,1670,1673,1674,1677],{},[41,1654,1655],{},"The icon ink is 1px smaller than the real control",": Segoe Fluent Icons' ",[26,1658,1411],{}," circle has a 15px ink diameter at 16pt and hugs the em-box left edge; Fluent System Icons' ",[26,1661,1423],{}," circle is ",[26,1664,1665],{},"r=7",[41,1667,1668],{},"14px",", centered). Measured ",[26,1671,1672],{},"iconLeft = +17"," (reference +16), ",[26,1675,1676],{},"iconD = 14"," (reference 15), i.e. the right edge aligns and the left edge recedes by 1px — an icon-font geometry difference, traded for the consistency of the official Web icon set; the remaining structural measures (fill height, close-button center, first-line ink position, corner radii) all deviate ≤ 1px from the reference.",[38,1679,1680,1683,1684,1687,1688,86,1691,1694,1695,86,1698,1701,1702,745],{},[41,1681,1682],{},"Known gaps",": high-contrast themes are not implemented (under WinUI HC the background is ",[26,1685,1686],{},"SystemColorWindowColorBrush",", border 2px, and the icon uses ",[26,1689,1690],{},"Highlight",[26,1692,1693],{},"HighlightText","); the UIA notifications WinUI sends on open \u002F close (",[26,1696,1697],{},"InfoBarOpenedNotification",[26,1699,1700],{},"InfoBarClosedNotification",") are UIA NotificationEvents and are not mapped to ARIA live regions, so this component does not add ",[26,1703,1704],{},"aria-live",[38,1706,1707,1299,1710,431,1712,1714,1715,431,1717,1714,1719,86,1721,431,1723,1714,1725,1728],{},[41,1708,1709],{},"API differences from WinUI",[26,1711,729],{},[26,1713,726],{}," slot, ",[26,1716,291],{},[26,1718,287],{},[26,1720,627],{},[26,1722,630],{},[26,1724,619],{},[26,1726,1727],{},"CloseButtonStyle"," not exposed (styling fixed inside the component); the close-button text goes through a Prop (this library has no built-in text channel yet; i18n is target 1.4 of 0.3.0).",[1730,1731,1732],"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":1734},[1735,1736,1737,1738,1739,1740],{"id":102,"depth":183,"text":103},{"id":273,"depth":183,"text":274},{"id":402,"depth":183,"text":403},{"id":613,"depth":183,"text":614},{"id":719,"depth":183,"text":720},{"id":808,"depth":183,"text":809},"Application-level status banner with four Severity tiers, closable, optionally carrying action buttons; styling and typography restyle WinUI 3 InfoBar.","md",{},{"title":5},"\u002Fen\u002Fcomponents\u002Finfobar",{"title":5,"description":1741},"en\u002Fcomponents\u002Finfobar","S2owFBWqrGthR7CdjfuWZN3we5Uz2ucoO-ByPdsQo5A",{"id":1750,"title":1751,"body":1752,"description":3211,"extension":1742,"meta":3212,"nav":3213,"navigation":339,"path":3214,"seo":3215,"stem":3216,"__hash__":3217},"content\u002Fcomponents\u002Finfobar.md","Info Bar 信息横幅",{"type":7,"value":1753,"toc":3203},[1754,1757,1763,1771,1821,1825,1833,1958,1962,1979,2066,2070,2107,2218,2236,2240,2266,2330,2334,2352,2409,2411,2626,2735,2807,3201],[10,1755,1751],{"id":1756},"info-bar-信息横幅",[14,1758,1759,1760,1762],{},"Info Bar 用来告知用户「应用状态发生了变化」——需要知悉、确认或采取行动。默认情况下它留在内容区内直到被用户关闭，但不一定打断用户流程（WinUI 官方描述：",[18,1761,20],{},"）。",[14,1764,1765,1766,29,1768,1770],{},"样式与排版对齐 WinUI 3 \u002F Windows App SDK 的 InfoBar（",[26,1767,28],{},[26,1769,32],{},"，已核对与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 在 InfoBar 目录下逐字节一致）：",[35,1772,1773,1790,1803,1815],{},[38,1774,1775,1778,1779,1781,1782,1784,1785,1787,1788,1762],{},[41,1776,1777],{},"几何","：最小高 48（",[26,1780,47],{},"）、1px 描边（",[26,1783,51],{},"）、圆角 4（",[26,1786,55],{},"）、内容左内边距 16（",[26,1789,59],{},[38,1791,1792,1795,1796,1798,1799,73,1801,1762],{},[41,1793,1794],{},"图标","：16pt 实心圆 + 反白字形（",[26,1797,68],{},"），右侧留白 14、上下各 16（",[26,1800,72],{},[26,1802,76],{},[38,1804,1805,1808,1809,86,1811,86,1813,1762],{},[41,1806,1807],{},"关闭按钮","：38×38、外边距 5、顶端对齐、字形 16（",[26,1810,85],{},[26,1812,89],{},[26,1814,92],{},[38,1816,1817,1820],{},[41,1818,1819],{},"排版","：不是固定断点，而是按内容实时判定横排 \u002F 竖排（见下方「实现要点」）。",[100,1822,1824],{"id":1823},"severity四档严重级别","Severity：四档严重级别",[14,1826,1827,1829,1830,1832],{},[26,1828,108],{}," 决定底色、圆心底色与图标字形，四档与 WinUI ",[26,1831,112],{}," 一一对应：",[115,1834,1836,1840],{"title":1835},"四档 Severity（对齐 Gallery 示例 1）",[119,1837,1838],{"v-slot:preview":121},[123,1839],{},[119,1841,1842],{"v-slot:code":121},[128,1843,1844],{"className":130,"code":131,"language":132,"meta":121,"style":121},[26,1845,1846,1874,1902,1930],{"__ignoreMap":121},[136,1847,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868,1870,1872],{"class":138,"line":139},[136,1849,143],{"class":142},[136,1851,147],{"class":146},[136,1853,151],{"class":150},[136,1855,154],{"class":150},[136,1857,157],{"class":142},[136,1859,161],{"class":160},[136,1861,164],{"class":150},[136,1863,157],{"class":142},[136,1865,169],{"class":160},[136,1867,172],{"class":150},[136,1869,157],{"class":142},[136,1871,177],{"class":160},[136,1873,180],{"class":142},[136,1875,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894,1896,1898,1900],{"class":138,"line":183},[136,1877,143],{"class":142},[136,1879,147],{"class":146},[136,1881,151],{"class":150},[136,1883,154],{"class":150},[136,1885,157],{"class":142},[136,1887,161],{"class":160},[136,1889,164],{"class":150},[136,1891,157],{"class":142},[136,1893,202],{"class":160},[136,1895,172],{"class":150},[136,1897,157],{"class":142},[136,1899,177],{"class":160},[136,1901,180],{"class":142},[136,1903,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1924,1926,1928],{"class":138,"line":213},[136,1905,143],{"class":142},[136,1907,147],{"class":146},[136,1909,151],{"class":150},[136,1911,154],{"class":150},[136,1913,157],{"class":142},[136,1915,161],{"class":160},[136,1917,164],{"class":150},[136,1919,157],{"class":142},[136,1921,232],{"class":160},[136,1923,172],{"class":150},[136,1925,157],{"class":142},[136,1927,177],{"class":160},[136,1929,180],{"class":142},[136,1931,1932,1934,1936,1938,1940,1942,1944,1946,1948,1950,1952,1954,1956],{"class":138,"line":243},[136,1933,143],{"class":142},[136,1935,147],{"class":146},[136,1937,151],{"class":150},[136,1939,154],{"class":150},[136,1941,157],{"class":142},[136,1943,161],{"class":160},[136,1945,164],{"class":150},[136,1947,157],{"class":142},[136,1949,262],{"class":160},[136,1951,172],{"class":150},[136,1953,157],{"class":142},[136,1955,177],{"class":160},[136,1957,180],{"class":142},[100,1959,1961],{"id":1960},"标题-正文-操作按钮","标题 \u002F 正文 \u002F 操作按钮",[14,1963,1964,1966,1967,1969,1970,1972,1973,1975,1976,1978],{},[26,1965,279],{}," 与 ",[26,1968,283],{}," 是两个独立文本位：横排时左右相邻，竖排（内容换行）时上下堆叠。",[26,1971,287],{}," 插槽对应 WinUI 的 ",[26,1974,291],{},"（",[26,1977,295],{},"），既可以放按钮，也可以放超链接。",[115,1980,1982,1986],{"title":1981},"长短消息 + Action Button \u002F Hyperlink（对齐 Gallery 示例 2）",[119,1983,1984],{"v-slot:preview":121},[303,1985],{},[119,1987,1988],{"v-slot:code":121},[128,1989,1990],{"className":130,"code":309,"language":132,"meta":121,"style":121},[26,1991,1992,2014,2018,2046,2050,2054,2058],{"__ignoreMap":121},[136,1993,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012],{"class":138,"line":139},[136,1995,143],{"class":142},[136,1997,147],{"class":146},[136,1999,151],{"class":150},[136,2001,154],{"class":150},[136,2003,157],{"class":142},[136,2005,161],{"class":160},[136,2007,172],{"class":150},[136,2009,157],{"class":142},[136,2011,332],{"class":160},[136,2013,180],{"class":142},[136,2015,2016],{"class":138,"line":183},[136,2017,340],{"emptyLinePlaceholder":339},[136,2019,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038,2040,2042,2044],{"class":138,"line":213},[136,2021,143],{"class":142},[136,2023,147],{"class":146},[136,2025,151],{"class":150},[136,2027,154],{"class":150},[136,2029,157],{"class":142},[136,2031,161],{"class":160},[136,2033,357],{"class":142},[136,2035,283],{"class":150},[136,2037,157],{"class":142},[136,2039,364],{"class":160},[136,2041,367],{"class":142},[136,2043,364],{"class":160},[136,2045,372],{"class":142},[136,2047,2048],{"class":138,"line":243},[136,2049,377],{"class":142},[136,2051,2052],{"class":138,"line":380},[136,2053,383],{"class":142},[136,2055,2056],{"class":138,"line":386},[136,2057,389],{"class":142},[136,2059,2060,2062,2064],{"class":138,"line":392},[136,2061,395],{"class":142},[136,2063,147],{"class":146},[136,2065,372],{"class":142},[100,2067,2069],{"id":2068},"展开-图标-可关闭三个开关","展开 \u002F 图标 \u002F 可关闭三个开关",[14,2071,2072,1975,2074,2076,2077,1975,2079,2076,2081,1975,2083,2085,2086,431,2088,431,2090,2092,2093,2095,2096,2098,2099,2101,2102,2104,2105,1762],{},[26,2073,409],{},[26,2075,412],{},"）、",[26,2078,416],{},[26,2080,419],{},[26,2082,423],{},[26,2084,426],{},"）三个开关与 Gallery 示例 3 的选项面板一致。点击关闭按钮时依次抛出 ",[26,2087,430],{},[26,2089,434],{},[26,2091,437],{},"，",[26,2094,434],{}," 的 ",[26,2097,444],{}," 置为 ",[26,2100,448],{}," 可以取消关闭（组件会把 ",[26,2103,452],{}," 回滚为 ",[26,2106,448],{},[115,2108,2110,2114],{"title":2109},"三个开关 + 事件日志（对齐 Gallery 示例 3）",[119,2111,2112],{"v-slot:preview":121},[462,2113],{},[119,2115,2116],{"v-slot:code":121},[128,2117,2118],{"className":130,"code":468,"language":132,"meta":121,"style":121},[26,2119,2120,2126,2142,2150,2164,2178,2186,2200,2214],{"__ignoreMap":121},[136,2121,2122,2124],{"class":138,"line":139},[136,2123,143],{"class":142},[136,2125,477],{"class":146},[136,2127,2128,2130,2132,2134,2136,2138,2140],{"class":138,"line":183},[136,2129,482],{"class":150},[136,2131,485],{"class":142},[136,2133,452],{"class":150},[136,2135,157],{"class":142},[136,2137,364],{"class":160},[136,2139,452],{"class":142},[136,2141,496],{"class":160},[136,2143,2144,2146,2148],{"class":138,"line":213},[136,2145,501],{"class":150},[136,2147,157],{"class":142},[136,2149,506],{"class":160},[136,2151,2152,2154,2156,2158,2160,2162],{"class":138,"line":243},[136,2153,511],{"class":142},[136,2155,416],{"class":150},[136,2157,157],{"class":142},[136,2159,364],{"class":160},[136,2161,520],{"class":142},[136,2163,496],{"class":160},[136,2165,2166,2168,2170,2172,2174,2176],{"class":138,"line":380},[136,2167,511],{"class":142},[136,2169,423],{"class":150},[136,2171,157],{"class":142},[136,2173,364],{"class":160},[136,2175,535],{"class":142},[136,2177,496],{"class":160},[136,2179,2180,2182,2184],{"class":138,"line":386},[136,2181,542],{"class":150},[136,2183,157],{"class":142},[136,2185,547],{"class":160},[136,2187,2188,2190,2192,2194,2196,2198],{"class":138,"line":392},[136,2189,552],{"class":142},[136,2191,434],{"class":150},[136,2193,157],{"class":142},[136,2195,364],{"class":160},[136,2197,561],{"class":142},[136,2199,496],{"class":160},[136,2201,2202,2204,2206,2208,2210,2212],{"class":138,"line":566},[136,2203,552],{"class":142},[136,2205,437],{"class":150},[136,2207,157],{"class":142},[136,2209,364],{"class":160},[136,2211,577],{"class":142},[136,2213,496],{"class":160},[136,2215,2216],{"class":138,"line":582},[136,2217,585],{"class":142},[115,2219,2221,2225],{"title":2220},"关闭前确认（Closing 可取消）",[119,2222,2223],{"v-slot:preview":121},[592,2224],{},[119,2226,2227],{"v-slot:code":121},[128,2228,2230],{"className":130,"code":2229,"language":132,"meta":121,"style":121},"const onClosing = (args) => { if (!confirmed.value) { args.cancel = true \u002F\u002F 回滚为打开 return } }\n",[26,2231,2232],{"__ignoreMap":121},[136,2233,2234],{"class":138,"line":139},[136,2235,2229],{"class":142},[100,2237,2239],{"id":2238},"内容区content与无横幅内容上移","内容区（Content）与「无横幅内容」上移",[14,2241,2242,2244,2245,2247,2248,86,2250,2252,2253,86,2255,86,2257,29,2259,2262,2263,2265],{},[26,2243,619],{},"（别名 ",[26,2246,623],{},"）对应 WinUI 的 ",[26,2249,627],{},[26,2251,630],{},"，落在模板的第 2 行。当 ",[26,2254,279],{},[26,2256,283],{},[26,2258,287],{},[41,2260,2261],{},"全为空","时，WinUI 会把内容区上移到第 0 行（",[26,2264,645],{}," 状态）——下面的示例用复选框对比两种排布。",[115,2267,2269,2273],{"title":2268},"Content 落在第 2 行 vs 上移到第 0 行",[119,2270,2271],{"v-slot:preview":121},[653,2272],{},[119,2274,2275],{"v-slot:code":121},[128,2276,2278],{"className":130,"code":2277,"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,2279,2280,2309,2313,2318,2322],{"__ignoreMap":121},[136,2281,2282,2284,2286,2288,2290,2292,2294,2296,2298,2300,2303,2305,2307],{"class":138,"line":139},[136,2283,143],{"class":142},[136,2285,147],{"class":146},[136,2287,151],{"class":150},[136,2289,357],{"class":142},[136,2291,279],{"class":150},[136,2293,157],{"class":142},[136,2295,364],{"class":160},[136,2297,680],{"class":142},[136,2299,684],{"class":683},[136,2301,2302],{"class":160}," '从云盘同步'",[136,2304,357],{"class":683},[136,2306,692],{"class":160},[136,2308,372],{"class":142},[136,2310,2311],{"class":138,"line":183},[136,2312,699],{"class":142},[136,2314,2315],{"class":138,"line":213},[136,2316,2317],{"class":142},"    \u003Cspan>已同步 40%\u003C\u002Fspan>\n",[136,2319,2320],{"class":138,"line":243},[136,2321,389],{"class":142},[136,2323,2324,2326,2328],{"class":138,"line":380},[136,2325,395],{"class":142},[136,2327,147],{"class":146},[136,2329,372],{"class":142},[100,2331,2333],{"id":2332},"自定义图标iconsource","自定义图标（IconSource）",[14,2335,2336,1972,2338,2340,2341,2343,2344,2095,2346,2348,2349,2351],{},[26,2337,726],{},[26,2339,729],{},"：提供后走 ",[26,2342,733],{}," 分支，图标被放进一个 16px 的等比容器（对齐 ",[26,2345,737],{},[26,2347,740],{},"），",[26,2350,744],{}," 时同样隐藏。",[115,2353,2355,2359],{"title":2354},"自定义图标",[119,2356,2357],{"v-slot:preview":121},[752,2358],{},[119,2360,2361],{"v-slot:code":121},[128,2362,2364],{"className":130,"code":2363,"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,2365,2366,2389,2393,2397,2401],{"__ignoreMap":121},[136,2367,2368,2370,2372,2374,2376,2378,2381,2383,2385,2387],{"class":138,"line":139},[136,2369,143],{"class":142},[136,2371,147],{"class":146},[136,2373,151],{"class":150},[136,2375,154],{"class":150},[136,2377,157],{"class":142},[136,2379,2380],{"class":160},"\"自定义图标\"",[136,2382,172],{"class":150},[136,2384,157],{"class":142},[136,2386,177],{"class":160},[136,2388,372],{"class":142},[136,2390,2391],{"class":138,"line":183},[136,2392,788],{"class":142},[136,2394,2395],{"class":138,"line":213},[136,2396,793],{"class":142},[136,2398,2399],{"class":138,"line":243},[136,2400,389],{"class":142},[136,2402,2403,2405,2407],{"class":138,"line":380},[136,2404,395],{"class":142},[136,2406,147],{"class":146},[136,2408,372],{"class":142},[100,2410,809],{"id":808},[811,2412,2413,2429],{},[814,2414,2415],{},[817,2416,2417,2420,2423,2426],{},[820,2418,2419],{},"属性（Props）",[820,2421,2422],{},"类型",[820,2424,2425],{},"默认",[820,2427,2428],{},"说明",[833,2430,2431,2453,2472,2491,2510,2529,2548,2567,2584,2603],{},[817,2432,2433,2437,2441,2445],{},[838,2434,2435],{},[26,2436,452],{},[838,2438,2439],{},[26,2440,846],{},[838,2442,2443],{},[26,2444,851],{},[838,2446,2447,2448,2450,2451],{},"是否展开（",[26,2449,409],{},"）；对齐 WinUI ",[26,2452,412],{},[817,2454,2455,2459,2463,2467],{},[838,2456,2457],{},[26,2458,279],{},[838,2460,2461],{},[26,2462,870],{},[838,2464,2465],{},[26,2466,875],{},[838,2468,2469,2470],{},"标题，14px \u002F SemiBold；对齐 WinUI ",[26,2471,881],{},[817,2473,2474,2478,2482,2486],{},[838,2475,2476],{},[26,2477,283],{},[838,2479,2480],{},[26,2481,870],{},[838,2483,2484],{},[26,2485,875],{},[838,2487,2488,2489],{},"正文，14px \u002F Normal；对齐 WinUI ",[26,2490,901],{},[817,2492,2493,2497,2501,2505],{},[838,2494,2495],{},[26,2496,108],{},[838,2498,2499],{},[26,2500,912],{},[838,2502,2503],{},[26,2504,917],{},[838,2506,2507,2508],{},"严重级别；对齐 WinUI ",[26,2509,112],{},[817,2511,2512,2516,2520,2524],{},[838,2513,2514],{},[26,2515,929],{},[838,2517,2518],{},[26,2519,846],{},[838,2521,2522],{},[26,2523,448],{},[838,2525,2526,2527],{},"是否显示图标列；对齐 WinUI ",[26,2528,419],{},[817,2530,2531,2535,2539,2543],{},[838,2532,2533],{},[26,2534,949],{},[838,2536,2537],{},[26,2538,846],{},[838,2540,2541],{},[26,2542,448],{},[838,2544,2545,2546],{},"是否显示关闭按钮；对齐 WinUI ",[26,2547,426],{},[817,2549,2550,2554,2558,2562],{},[838,2551,2552],{},[26,2553,969],{},[838,2555,2556],{},[26,2557,870],{},[838,2559,2560],{},[26,2561,978],{},[838,2563,2564,2565],{},"根节点可访问名；对齐 ",[26,2566,984],{},[817,2568,2569,2573,2577,2581],{},[838,2570,2571],{},[26,2572,991],{},[838,2574,2575],{},[26,2576,870],{},[838,2578,2579],{},[26,2580,978],{},[838,2582,2583],{},"关闭按钮可访问名（WinUI 取资源，英文 \"Close\"；本库不硬编码文案）",[817,2585,2586,2590,2594,2598],{},[838,2587,2588],{},[26,2589,1009],{},[838,2591,2592],{},[26,2593,870],{},[838,2595,2596],{},[26,2597,978],{},[838,2599,2600,2601],{},"关闭按钮原生提示；对齐资源 ",[26,2602,1023],{},[817,2604,2605,2609,2613,2617],{},[838,2606,2607],{},[26,2608,1030],{},[838,2610,2611],{},[26,2612,1035],{},[838,2614,2615],{},[26,2616,978],{},[838,2618,2619,2620,2622,2623,2625],{},"关闭按钮点击回调；对齐 WinUI ",[26,2621,1045],{},"，先于 ",[26,2624,434],{}," 执行",[811,2627,2628,2640],{},[814,2629,2630],{},[817,2631,2632,2635,2638],{},[820,2633,2634],{},"事件（Emits）",[820,2636,2637],{},"载荷",[820,2639,2428],{},[833,2641,2642,2660,2673,2688,2711],{},[817,2643,2644,2648,2652],{},[838,2645,2646],{},[26,2647,1071],{},[838,2649,2650],{},[26,2651,846],{},[838,2653,2654,2656,2657,2659],{},[26,2655,409],{}," 的更新；对齐 WinUI ",[26,2658,412],{}," 被改写",[817,2661,2662,2666,2668],{},[838,2663,2664],{},[26,2665,1091],{},[838,2667,978],{},[838,2669,2670,2671],{},"内容已展开；对齐 WinUI ",[26,2672,1099],{},[817,2674,2675,2679,2681],{},[838,2676,2677],{},[26,2678,430],{},[838,2680,978],{},[838,2682,2683,2684,2622,2686],{},"关闭按钮被点击；对齐 WinUI ",[26,2685,1113],{},[26,2687,434],{},[817,2689,2690,2694,2698],{},[838,2691,2692],{},[26,2693,434],{},[838,2695,2696],{},[26,2697,1127],{},[838,2699,2700,2701,2098,2703,2705,2706,2708,2709],{},"请求关闭；把 ",[26,2702,1133],{},[26,2704,448],{}," 可取消（回滚 ",[26,2707,452],{},"），对齐 ",[26,2710,1142],{},[817,2712,2713,2717,2721],{},[838,2714,2715],{},[26,2716,437],{},[838,2718,2719],{},[26,2720,1153],{},[838,2722,2723,2724,2726,2727,2729,2730,2732,2733],{},"已关闭；",[26,2725,1159],{}," 为 ",[26,2728,1163],{}," 或 ",[26,2731,1167],{},"，对齐 ",[26,2734,1171],{},[811,2736,2737,2746],{},[814,2738,2739],{},[817,2740,2741,2744],{},[820,2742,2743],{},"插槽（Slots）",[820,2745,2428],{},[833,2747,2748,2760,2771,2784,2795],{},[817,2749,2750,2754],{},[838,2751,2752],{},[26,2753,1191],{},[838,2755,2756,2757,2759],{},"对应 WinUI ",[26,2758,729],{},"；提供后取代内建 Severity 图标",[817,2761,2762,2766],{},[838,2763,2764],{},[26,2765,1204],{},[838,2767,2756,2768,2770],{},[26,2769,291],{},"；参与横 \u002F 竖排判定（缺失时不占位）",[817,2772,2773,2777],{},[838,2774,2775],{},[26,2776,1216],{},[838,2778,2756,2779,86,2781,2783],{},[26,2780,627],{},[26,2782,630],{},"；落在第 2 行（无横幅内容时上移）",[817,2785,2786,2790],{},[838,2787,2788],{},[26,2789,1230],{},[838,2791,2792,2794],{},[26,2793,1216],{}," 的别名",[817,2796,2797,2801],{},[838,2798,2799],{},[26,2800,1242],{},[838,2802,2803,2804,2806],{},"替换关闭按钮的字形（默认 ",[26,2805,1248],{},"）",[1251,2808,2809,2834,2839],{},[14,2810,2811,2814,2815,2817,2818,2095,2820,2822,2823,2732,2825,2827,2828,2830,2831,2833],{},[41,2812,2813],{},"无障碍","：根节点渲染 ",[26,2816,1261],{},"（对齐 ",[26,2819,1265],{},[26,2821,1268],{},"）；图标是装饰元素（",[26,2824,1272],{},[26,2826,1275],{},"）；关闭按钮是原生 ",[26,2829,1279],{},"，可访问名由 ",[26,2832,991],{}," 提供。",[14,2835,2836],{},[41,2837,2838],{},"实现要点",[35,2840,2841,2875,2900,2919,2938,2975,3134,3157,3178],{},[38,2842,2843,2846,2847,2849,2850,2852,2853,29,2856,2858,2859,29,2861,2863,2864,1320,2866,2868,2869,2871,2872,2874],{},[41,2844,2845],{},"方向判定不是固定断点","，而是逐条复刻 ",[26,2848,1298],{},"：",[26,2851,1302],{},"（只有一项）",[41,2854,2855],{},"或",[26,2857,1309],{},"（水平铺开后放不下）",[41,2860,2855],{},[26,2862,1315],{},"（某项在横排下已被文本换行撑得比最小高还高）⇒ 竖排。判定用的子项尺寸来自一层 ",[26,2865,1319],{},[26,2867,1323],{}," 的隐藏镜像 DOM（",[26,2870,1272],{},"，不参与布局），因此长文本换行、容器变窄都能实时切到竖排，而不是靠 ",[26,2873,1329],{}," 猜一个断点。",[38,2876,2877,2880,2881,2883,2884,2886,2887,2889,2890,2892,2893,2895,2896,2899],{},[41,2878,2879],{},"间距方向敏感","：竖排用 ",[26,2882,1338],{},"（Title 14 \u002F Message 4 \u002F Action 12，外加面板自身的 ",[26,2885,1342],{},"），横排用 ",[26,2888,1346],{},"（Message 左 12 \u002F Action 左 16，外加各文本的 ",[26,2891,1350],{},"）。两个相邻块的 margin 在 XAML 的 ",[26,2894,1354],{}," 里是",[41,2897,2898],{},"直接相加","的（不存在外边距折叠），本组件用同一个 flex 容器 + 相邻兄弟 margin 表达同一语义。",[38,2901,2902,2907,2908,2910,2911,2104,2913,2915,2916,2918],{},[41,2903,2904,2906],{},[26,2905,1142],{}," 可取消","：与 WinUI 一致，",[26,2909,1370],{}," 时把 ",[26,2912,412],{},[26,2914,448],{},"，且不再抛 ",[26,2917,1171],{},"。",[38,2920,2921,2924,2925,2927,2928,2930,2931,86,2933,86,2935,2937],{},[41,2922,2923],{},"关闭按钮配色","：WinUI 在 ",[26,2926,1387],{}," 里用 ",[26,2929,1391],{}," 一族资源重定义了按钮的底色 \u002F 前景（rest 透明、hover 5.9% 黑、pressed 6% 黑）。Fluent 2 Web 的 token 表没有这两个半透明档，本库取 ",[26,2932,1395],{},[26,2934,1398],{},[26,2936,1401],{},"（语义位最近者），差异记录在组件注释里。",[38,2939,2940,2943,2944,2946,2947,2949,2950,2952,2953,2955,2956,2958,2959,2962,2963,2965,2966,2968,2969,2971,2972,2974],{},[41,2941,2942],{},"图标是「单色实心圆 + 镂空字形」","：WinUI 用两个 16pt TextBlock 完全重合——",[26,2945,1411],{}," 圆心着 Severity 图标底色、",[26,2948,1415],{}," 字形着 ",[26,2951,1419],{},"（白 \u002F 黑）。Fluent System Icons 的 ",[26,2954,1423],{}," 本身就是「实心圆 + 镂空字形」的单色图形，故本库用一份图标着 Severity 图标底色，字形由镂空露出 InfoBar 底色；参考图图标中心实测为近白（",[26,2957,1427],{},"），16px 下两者不可分辨。图标是按",[41,2960,2961],{},"图形","挑的而不是按名字：Warning 用 ",[26,2964,1435],{},"（圆 + 感叹号）、Error 用 ",[26,2967,1439],{},"（圆 + 叉），因为 ",[26,2970,1443],{}," 是三角形、",[26,2973,1447],{}," 的感叹号也不是实机 Error 的叉号（参考图四个图标墨迹 bbox 都是 15×15 正圆）。",[38,2976,2977,2980,2981,2983,2984,2987,2988,2990,2991,3075,3077,3078,86,3080,86,3082,3084,3085,86,3087,86,3089,3091,3092,3095,3096],{},[41,2978,2979],{},"四档底色是「语义位最近」而非同值","：Fluent 2 Web 没有 ",[26,2982,1457],{}," 的同值 token，逐项按 ",[26,2985,2986],{},"max(亮色 ΔE, 暗色 ΔE)"," 最小挑选（CIE ΔE76，实测由 ",[26,2989,1465],{}," 输出）：",[811,2992,2993,3008],{},[814,2994,2995],{},[817,2996,2997,2999,3002,3005],{},[820,2998,1475],{},[820,3000,3001],{},"WinUI 原值（Light\u002FDark）",[820,3003,3004],{},"本库 token",[820,3006,3007],{},"ΔE（Light\u002FDark）",[833,3009,3010,3027,3043,3059],{},[817,3011,3012,3014,3021,3025],{},[838,3013,1491],{},[838,3015,3016,86,3018,3020],{},[26,3017,1496],{},[26,3019,1499],{},"（合成后）",[838,3022,3023],{},[26,3024,1505],{},[838,3026,1508],{},[817,3028,3029,3031,3037,3041],{},[838,3030,1513],{},[838,3032,3033,86,3035],{},[26,3034,1518],{},[26,3036,1521],{},[838,3038,3039],{},[26,3040,1526],{},[838,3042,1529],{},[817,3044,3045,3047,3053,3057],{},[838,3046,1534],{},[838,3048,3049,86,3051],{},[26,3050,1539],{},[26,3052,1542],{},[838,3054,3055],{},[26,3056,1547],{},[838,3058,1550],{},[817,3060,3061,3063,3069,3073],{},[838,3062,1555],{},[838,3064,3065,86,3067],{},[26,3066,1560],{},[26,3068,1563],{},[838,3070,3071],{},[26,3072,1568],{},[838,3074,1571],{},[1573,3076],{},"参考图的实测值（",[26,3079,1518],{},[26,3081,1539],{},[26,3083,1560],{}," \u002F 图标底色 ",[26,3086,1585],{},[26,3088,1588],{},[26,3090,1591],{},"）与 WinUI 源码资源",[41,3093,3094],{},"逐字节一致","，可反证源码读取无误。若需要严格对齐实机观感，可覆盖组件内的两个局部变量：",[128,3097,3098],{"className":1599,"code":1600,"language":1601,"meta":121,"style":121},[26,3099,3100,3106,3118,3130],{"__ignoreMap":121},[136,3101,3102,3104],{"class":138,"line":139},[136,3103,1608],{"class":150},[136,3105,1611],{"class":142},[136,3107,3108,3110,3112,3114,3116],{"class":138,"line":183},[136,3109,1617],{"class":1616},[136,3111,1299],{"class":142},[136,3113,1623],{"class":1622},[136,3115,1626],{"class":142},[136,3117,1630],{"class":1629},[136,3119,3120,3122,3124,3126,3128],{"class":138,"line":213},[136,3121,1635],{"class":1616},[136,3123,1299],{"class":142},[136,3125,1640],{"class":1622},[136,3127,1626],{"class":142},[136,3129,1645],{"class":1629},[136,3131,3132],{"class":138,"line":243},[136,3133,1650],{"class":142},[38,3135,3136,3139,3140,3142,3143,3145,3146,1975,3148,3150,3151,3153,3154,3156],{},[41,3137,3138],{},"图标墨迹比实机小 1px","：Segoe Fluent Icons 的 ",[26,3141,1411],{}," 圆在 16pt 下墨迹直径 15px 且贴齐 em 框左缘；Fluent System Icons 的 ",[26,3144,1423],{}," 圆是 ",[26,3147,1665],{},[41,3149,1668],{},"，居中）。实测 ",[26,3152,1672],{},"（参考 +16）、",[26,3155,1676],{},"（参考 15），即右缘对齐、左缘内缩 1px —— 属图标字体几何差异，换取的是官方 Web 图标集的一致性；其余结构量（填充高、关闭按钮中心、首行墨迹位置、圆角）与参考图偏差均 ≤ 1px。",[38,3158,3159,3162,3163,3165,3166,86,3168,3170,3171,86,3173,3175,3176,2918],{},[41,3160,3161],{},"已知缺口","：高对比度主题未实现（WinUI HC 下底色为 ",[26,3164,1686],{},"、描边 2px、图标用 ",[26,3167,1690],{},[26,3169,1693],{},"）；WinUI 打开 \u002F 关闭时发的 UIA 通知（",[26,3172,1697],{},[26,3174,1700],{},"）是 UIA NotificationEvent，不映射到 ARIA live region，故本组件不引入 ",[26,3177,1704],{},[38,3179,3180,2849,3183,431,3185,3187,3188,431,3190,3187,3192,86,3194,431,3196,3187,3198,3200],{},[41,3181,3182],{},"与 WinUI 的 API 差异",[26,3184,729],{},[26,3186,726],{}," 插槽、",[26,3189,291],{},[26,3191,287],{},[26,3193,627],{},[26,3195,630],{},[26,3197,619],{},[26,3199,1727],{}," 不暴露（样式固定在本组件内）；关闭按钮文案走 Prop（本库暂无组件内建文案通道，i18n 属 0.3.0 目标 1.4）。",[1730,3202,1732],{},{"title":121,"searchDepth":183,"depth":183,"links":3204},[3205,3206,3207,3208,3209,3210],{"id":1823,"depth":183,"text":1824},{"id":1960,"depth":183,"text":1961},{"id":2068,"depth":183,"text":2069},{"id":2238,"depth":183,"text":2239},{"id":2332,"depth":183,"text":2333},{"id":808,"depth":183,"text":809},"应用级状态提示横幅：四档 Severity、可关闭、可带操作按钮，样式与排版还原 WinUI 3 InfoBar。",{},{"title":1751},"\u002Fcomponents\u002Finfobar",{"title":1751,"description":3211},"components\u002Finfobar","0Q92kVI5FoSlGo411fLgdgvrnQgpXURTt1ErIXzNw3U",1792150932198]