[{"data":1,"prerenderedAt":3693},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Finfo-badge":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Finfo-badge":1994},{"id":4,"title":5,"body":6,"description":1985,"extension":1986,"meta":1987,"nav":1988,"navigation":1989,"path":1990,"seo":1991,"stem":1992,"__hash__":1993},"content_en\u002Fen\u002Fcomponents\u002Finfo-badge.md","Info Badge",{"type":7,"value":8,"toc":1978},"minimark",[9,13,27,51,132,137,155,235,342,346,378,499,589,593,603,677,753,757,776,889,893,1043,1071,1974],[10,11,5],"h1",{"id":12},"info-badge",[14,15,16,17,21,22,26],"p",{},"Info Badge ",[18,19,20],"strong",{},"non-intrusively"," signals \"there is new content \u002F unread count \u002F something to notice\" within an app; typical placements are NavigationView menu items, a corner of a button, or the end of a list item (WinUI official description: ",[23,24,25],"em",{},"badging is a non-intrusive and intuitive way to display notifications or bring focus to an area within an app",").",[14,28,29,30,34,35,38,39,42,43,46,47,50],{},"The styling and geometry align with the WinUI 3 \u002F Windows App SDK InfoBadge (",[31,32,33],"code",{},"microsoft-ui-xaml",", whose ",[31,36,37],{},"InfoBadge"," directory is ",[18,40,41],{},"byte-for-byte identical"," between ",[31,44,45],{},"winui3\u002Frelease\u002F2.0.1"," — the WindowsAppSDK version used by the latest WinUI3 Gallery release v2.9.3 — and ",[31,48,49],{},"winui3\u002Frelease\u002F2.5.1","):",[52,53,54,80,98,111],"ul",{},[55,56,57,60,61,64,65,68,69,72,73,76,77,26],"li",{},[18,58,59],{},"Geometry",": min 4×4 (",[31,62,63],{},"InfoBadgeMinWidth"," \u002F ",[31,66,67],{},"InfoBadgeMinHeight","), max height 16 (",[31,70,71],{},"InfoBadgeMaxHeight","), ",[18,74,75],{},"unlimited width",", corner radius = half the actual height (",[31,78,79],{},"InfoBadge.cpp#OnSizeChanged",[55,81,82,85,86,89,90,93,94,97],{},[18,83,84],{},"Forms",": ",[31,87,88],{},"Value >= 0"," shows a number (11px, ",[31,91,92],{},"InfoBadgeValueFontSize","); otherwise, if there is an ",[31,95,96],{},"IconSource",", it shows the icon; otherwise it is a 4×4 dot.",[55,99,100,85,103,106,107,110],{},[18,101,102],{},"Square rule",[31,104,105],{},"InfoBadge.cpp#MeasureOverride"," returns a square when \"width \u003C height\", so a single-number badge is a ",[18,108,109],{},"perfect circle"," rather than a narrow capsule.",[55,112,113,116,117,120,121,64,124,127,128,131],{},[18,114,115],{},"Icon frame",": the ",[31,118,119],{},"Viewbox"," is filled to \"max height − padding\" = 8px (the two ",[31,122,123],{},"InfoBadgeIconWidth",[31,125,126],{},"InfoBadgeIconHeight"," resources in the template are ",[18,129,130],{},"not referenced by the template"," — they are dead resources).",[133,134,136],"h2",{"id":135},"three-forms-dot-value-icon","Three forms: Dot \u002F Value \u002F Icon",[14,138,139,140,143,144,147,148,151,152,50],{},"The combination of the ",[31,141,142],{},"value"," and ",[31,145,146],{},"icon"," Props determines the form, derived line-by-line in alignment with ",[31,149,150],{},"InfoBadge.cpp#OnDisplayKindPropertiesChanged"," (",[18,153,154],{},"Value takes precedence over Icon",[156,157,158,174],"table",{},[159,160,161],"thead",{},[162,163,164,168,171],"tr",{},[165,166,167],"th",{},"Condition",[165,169,170],{},"Form",[165,172,173],{},"Corresponding WinUI",[175,176,177,195,219],"tbody",{},[162,178,179,185,189],{},[180,181,182],"td",{},[31,183,184],{},"value >= 0",[180,186,187],{},[31,188,142],{},[180,190,191,194],{},[31,192,193],{},"Value"," visual state",[162,196,197,207,211],{},[180,198,199,200,202,203,206],{},"has ",[31,201,146],{}," (or ",[31,204,205],{},"#icon"," slot)",[180,208,209],{},[31,210,146],{},[180,212,213,64,216,194],{},[31,214,215],{},"Icon",[31,217,218],{},"FontIcon",[162,220,221,224,229],{},[180,222,223],{},"neither",[180,225,226],{},[31,227,228],{},"dot",[180,230,231,234],{},[31,232,233],{},"Dot"," visual state (empty state)",[236,237,239,246],"demo-block",{"title":238},"Dot \u002F Value \u002F Icon three states",[240,241,243],"template",{"v-slot:preview":242},"",[244,245],"info-badge-kinds-demo",{},[240,247,248],{"v-slot:code":242},[249,250,254],"pre",{"className":251,"code":252,"language":253,"meta":242,"style":242},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereInfoBadge \u002F>\n\u003CFluereInfoBadge :value=\"5\" \u002F>\n\u003CFluereInfoBadge severity=\"attention\" icon \u002F>\n\u003CFluereInfoBadge :icon=\"FluentIconAdd16Filled\" \u002F>\n","vue",[31,255,256,272,300,320],{"__ignoreMap":242},[257,258,261,265,269],"span",{"class":259,"line":260},"line",1,[257,262,264],{"class":263},"sVt8B","\u003C",[257,266,268],{"class":267},"s9eBZ","FluereInfoBadge",[257,270,271],{"class":263}," \u002F>\n",[257,273,275,277,279,282,285,288,292,296,298],{"class":259,"line":274},2,[257,276,264],{"class":263},[257,278,268],{"class":267},[257,280,281],{"class":263}," :",[257,283,142],{"class":284},"sScJk",[257,286,287],{"class":263},"=",[257,289,291],{"class":290},"sZZnC","\"",[257,293,295],{"class":294},"sj4cs","5",[257,297,291],{"class":290},[257,299,271],{"class":263},[257,301,303,305,307,310,312,315,318],{"class":259,"line":302},3,[257,304,264],{"class":263},[257,306,268],{"class":267},[257,308,309],{"class":284}," severity",[257,311,287],{"class":263},[257,313,314],{"class":290},"\"attention\"",[257,316,317],{"class":284}," icon",[257,319,271],{"class":263},[257,321,323,325,327,329,331,333,335,338,340],{"class":259,"line":322},4,[257,324,264],{"class":263},[257,326,268],{"class":267},[257,328,281],{"class":263},[257,330,146],{"class":284},[257,332,287],{"class":263},[257,334,291],{"class":290},[257,336,337],{"class":263},"FluentIconAdd16Filled",[257,339,291],{"class":290},[257,341,271],{"class":263},[133,343,345],{"id":344},"five-severity-tiers","Five Severity tiers",[14,347,348,351,352,355,356,64,358,64,360,362,363,366,367,369,370,373,374,377],{},[31,349,350],{},"severity"," corresponds to the Style keys in ",[31,353,354],{},"InfoBadge_themeresources.xaml",": each tier has ",[31,357,233],{},[31,359,193],{},[31,361,215],{}," variants with ",[18,364,365],{},"exactly the same background",", differing only in \"whether an ",[31,368,96],{}," is preset\" and \"whether the icon state adds ",[31,371,372],{},"Padding=0,4,0,2","\" (the latter is geometrically equivalent to ",[31,375,376],{},"IconInfoBadgeIconMargin"," in the icon state — see \"Implementation notes\").",[156,379,380,394],{},[159,381,382],{},[162,383,384,388,391],{},[165,385,386],{},[31,387,350],{},[165,389,390],{},"WinUI Style prefix",[165,392,393],{},"Background resource",[175,395,396,414,431,448,465,482],{},[162,397,398,404,409],{},[180,399,400,403],{},[31,401,402],{},"accent"," (default)",[180,405,406],{},[31,407,408],{},"DefaultInfoBadgeStyle",[180,410,411],{},[31,412,413],{},"AccentFillColorDefaultBrush",[162,415,416,421,426],{},[180,417,418],{},[31,419,420],{},"attention",[180,422,423],{},[31,424,425],{},"Attention*InfoBadgeStyle",[180,427,428],{},[31,429,430],{},"SystemFillColorAttentionBrush",[162,432,433,438,443],{},[180,434,435],{},[31,436,437],{},"informational",[180,439,440],{},[31,441,442],{},"Informational*…",[180,444,445],{},[31,446,447],{},"SystemFillColorSolidNeutralBrush",[162,449,450,455,460],{},[180,451,452],{},[31,453,454],{},"success",[180,456,457],{},[31,458,459],{},"Success*…",[180,461,462],{},[31,463,464],{},"SystemFillColorSuccessBrush",[162,466,467,472,477],{},[180,468,469],{},[31,470,471],{},"caution",[180,473,474],{},[31,475,476],{},"Caution*…",[180,478,479],{},[31,480,481],{},"SystemFillColorCautionBrush",[162,483,484,489,494],{},[180,485,486],{},[31,487,488],{},"critical",[180,490,491],{},[31,492,493],{},"Critical*…",[180,495,496],{},[31,497,498],{},"SystemFillColorCriticalBrush",[236,500,502,507],{"title":501},"Different Severity × three forms (aligned with Gallery example 2)",[240,503,504],{"v-slot:preview":242},[505,506],"info-badge-styles-demo",{},[240,508,509],{"v-slot:code":242},[249,510,512],{"className":251,"code":511,"language":253,"meta":242,"style":242},"\u003CFluereInfoBadge :severity=\"severity\" icon \u002F>\n\u003CFluereInfoBadge :severity=\"severity\" :value=\"10\" \u002F>\n\u003CFluereInfoBadge :severity=\"severity\" \u002F>\n",[31,513,514,536,569],{"__ignoreMap":242},[257,515,516,518,520,522,524,526,528,530,532,534],{"class":259,"line":260},[257,517,264],{"class":263},[257,519,268],{"class":267},[257,521,281],{"class":263},[257,523,350],{"class":284},[257,525,287],{"class":263},[257,527,291],{"class":290},[257,529,350],{"class":263},[257,531,291],{"class":290},[257,533,317],{"class":284},[257,535,271],{"class":263},[257,537,538,540,542,544,546,548,550,552,554,556,558,560,562,565,567],{"class":259,"line":274},[257,539,264],{"class":263},[257,541,268],{"class":267},[257,543,281],{"class":263},[257,545,350],{"class":284},[257,547,287],{"class":263},[257,549,291],{"class":290},[257,551,350],{"class":263},[257,553,291],{"class":290},[257,555,281],{"class":263},[257,557,142],{"class":284},[257,559,287],{"class":263},[257,561,291],{"class":290},[257,563,564],{"class":294},"10",[257,566,291],{"class":290},[257,568,271],{"class":263},[257,570,571,573,575,577,579,581,583,585,587],{"class":259,"line":302},[257,572,264],{"class":263},[257,574,268],{"class":267},[257,576,281],{"class":263},[257,578,350],{"class":284},[257,580,287],{"class":263},[257,582,291],{"class":290},[257,584,350],{"class":263},[257,586,291],{"class":290},[257,588,271],{"class":263},[133,590,592],{"id":591},"embedded-in-navigationview-other-controls","Embedded in NavigationView \u002F other controls",[14,594,595,596,599,600,26],{},"The badge's most common placements are navigation items and control corners. The badge itself is a ",[18,597,598],{},"purely decorative element",", and the accessible name should hang on the control hosting it (Gallery does this: ",[31,601,602],{},"AutomationProperties.Name=\"Inbox, 5 notifications\"",[236,604,606,611],{"title":605},"Embedded in a NavigationView navigation item (aligned with Gallery example 1)",[240,607,608],{"v-slot:preview":242},[609,610],"info-badge-navigation-demo",{},[240,612,613],{"v-slot:code":242},[249,614,616],{"className":251,"code":615,"language":253,"meta":242,"style":242},"\u003CNavigationViewItem Content=\"Inbox\" Icon=\"Mail\" AutomationProperties.Name=\"Inbox, 5 notifications\">\n  \u003CNavigationViewItem.InfoBadge>\n    \u003CInfoBadge Value=\"5\" \u002F>\n  \u003C\u002FNavigationViewItem.InfoBadge>\n\u003C\u002FNavigationViewItem>\n",[31,617,618,652,657,662,667],{"__ignoreMap":242},[257,619,620,622,625,628,630,633,636,638,641,644,646,649],{"class":259,"line":260},[257,621,264],{"class":263},[257,623,624],{"class":267},"NavigationViewItem",[257,626,627],{"class":284}," Content",[257,629,287],{"class":263},[257,631,632],{"class":290},"\"Inbox\"",[257,634,635],{"class":284}," Icon",[257,637,287],{"class":263},[257,639,640],{"class":290},"\"Mail\"",[257,642,643],{"class":284}," AutomationProperties.Name",[257,645,287],{"class":263},[257,647,648],{"class":290},"\"Inbox, 5 notifications\"",[257,650,651],{"class":263},">\n",[257,653,654],{"class":259,"line":274},[257,655,656],{"class":263},"  \u003CNavigationViewItem.InfoBadge>\n",[257,658,659],{"class":259,"line":302},[257,660,661],{"class":263},"    \u003CInfoBadge Value=\"5\" \u002F>\n",[257,663,664],{"class":259,"line":322},[257,665,666],{"class":263},"  \u003C\u002FNavigationViewItem.InfoBadge>\n",[257,668,670,673,675],{"class":259,"line":669},5,[257,671,672],{"class":263},"\u003C\u002F",[257,674,624],{"class":267},[257,676,651],{"class":263},[236,678,680,685],{"title":679},"Overlaid on a button corner (aligned with Gallery example 3)",[240,681,682],{"v-slot:preview":242},[683,684],"info-badge-overlay-demo",{},[240,686,687],{"v-slot:code":242},[249,688,690],{"className":251,"code":689,"language":253,"meta":242,"style":242},"\u003CFluereButton icon-only :icon=\"FluentIconArrowSync20Regular\" aria-label=\"Refresh required\" \u002F>\n\u003CFluereInfoBadge severity=\"critical\" :icon=\"FluentIconImportant16Filled\" \u002F>\n",[31,691,692,725],{"__ignoreMap":242},[257,693,694,696,699,702,704,706,708,710,713,715,718,720,723],{"class":259,"line":260},[257,695,264],{"class":263},[257,697,698],{"class":267},"FluereButton",[257,700,701],{"class":284}," icon-only",[257,703,281],{"class":263},[257,705,146],{"class":284},[257,707,287],{"class":263},[257,709,291],{"class":290},[257,711,712],{"class":263},"FluentIconArrowSync20Regular",[257,714,291],{"class":290},[257,716,717],{"class":284}," aria-label",[257,719,287],{"class":263},[257,721,722],{"class":290},"\"Refresh required\"",[257,724,271],{"class":263},[257,726,727,729,731,733,735,738,740,742,744,746,749,751],{"class":259,"line":274},[257,728,264],{"class":263},[257,730,268],{"class":267},[257,732,309],{"class":284},[257,734,287],{"class":263},[257,736,737],{"class":290},"\"critical\"",[257,739,281],{"class":263},[257,741,146],{"class":284},[257,743,287],{"class":263},[257,745,291],{"class":290},[257,747,748],{"class":263},"FluentIconImportant16Filled",[257,750,291],{"class":290},[257,752,271],{"class":263},[133,754,756],{"id":755},"dynamic-value","Dynamic value",[14,758,759,761,762,765,766,769,770,772,773,26],{},[31,760,142],{}," is reactive: ",[31,763,764],{},">= 0"," shows the number, ",[31,767,768],{},"\u003C 0"," falls back to the dot form (WinUI's ",[31,771,193],{}," defaults to ",[31,774,775],{},"-1",[236,777,779,784],{"title":778},"NumberBox driving InfoBadge.Value (aligned with Gallery example 4)",[240,780,781],{"v-slot:preview":242},[782,783],"info-badge-dynamic-demo",{},[240,785,786],{"v-slot:code":242},[249,787,789],{"className":251,"code":788,"language":253,"meta":242,"style":242},"\u003CFluereInfoBadge :value=\"value ?? -1\" \u002F>\n\u003CFluereNumberBox\n  v-model=\"value\"\n  header=\"InfoBadge Value\"\n  :min=\"-1\"\n  spin-button-placement-mode=\"inline\"\n\u002F>\n",[31,790,791,822,829,843,853,872,883],{"__ignoreMap":242},[257,792,793,795,797,799,801,803,805,808,812,815,818,820],{"class":259,"line":260},[257,794,264],{"class":263},[257,796,268],{"class":267},[257,798,281],{"class":263},[257,800,142],{"class":284},[257,802,287],{"class":263},[257,804,291],{"class":290},[257,806,807],{"class":263},"value ",[257,809,811],{"class":810},"szBVR","??",[257,813,814],{"class":810}," -",[257,816,817],{"class":294},"1",[257,819,291],{"class":290},[257,821,271],{"class":263},[257,823,824,826],{"class":259,"line":274},[257,825,264],{"class":263},[257,827,828],{"class":267},"FluereNumberBox\n",[257,830,831,834,836,838,840],{"class":259,"line":302},[257,832,833],{"class":284},"  v-model",[257,835,287],{"class":263},[257,837,291],{"class":290},[257,839,142],{"class":263},[257,841,842],{"class":290},"\"\n",[257,844,845,848,850],{"class":259,"line":322},[257,846,847],{"class":284},"  header",[257,849,287],{"class":263},[257,851,852],{"class":290},"\"InfoBadge Value\"\n",[257,854,855,858,861,863,865,868,870],{"class":259,"line":669},[257,856,857],{"class":263},"  :",[257,859,860],{"class":284},"min",[257,862,287],{"class":263},[257,864,291],{"class":290},[257,866,867],{"class":810},"-",[257,869,817],{"class":294},[257,871,842],{"class":290},[257,873,875,878,880],{"class":259,"line":874},6,[257,876,877],{"class":284},"  spin-button-placement-mode",[257,879,287],{"class":263},[257,881,882],{"class":290},"\"inline\"\n",[257,884,886],{"class":259,"line":885},7,[257,887,888],{"class":263},"\u002F>\n",[133,890,892],{"id":891},"api","API",[156,894,895,911],{},[159,896,897],{},[162,898,899,902,905,908],{},[165,900,901],{},"Props",[165,903,904],{},"Type",[165,906,907],{},"Default",[165,909,910],{},"Description",[175,912,913,943,966,994,1021],{},[162,914,915,919,924,928],{},[180,916,917],{},[31,918,142],{},[180,920,921],{},[31,922,923],{},"number",[180,925,926],{},[31,927,775],{},[180,929,930,931,934,935,937,938,940,941],{},"Badge value (",[31,932,933],{},"Int32","); ",[31,936,764],{}," shows a number, ",[31,939,768],{}," falls back to icon \u002F dot; aligned with WinUI ",[31,942,193],{},[162,944,945,949,954,959],{},[180,946,947],{},[31,948,350],{},[180,950,951],{},[31,952,953],{},"'accent' | 'attention' | 'informational' | 'success' | 'caution' | 'critical'",[180,955,956],{},[31,957,958],{},"'accent'",[180,960,961,962,965],{},"Background preset; aligned with the six ",[31,963,964],{},"*InfoBadgeStyle"," sets",[162,967,968,972,977,982],{},[180,969,970],{},[31,971,146],{},[180,973,974],{},[31,975,976],{},"boolean | Component | null",[180,978,979],{},[31,980,981],{},"—",[180,983,984,985,988,989,991,992],{},"Icon; ",[31,986,987],{},"true"," uses ",[31,990,350],{},"'s built-in glyph, or pass an icon component directly; aligned with WinUI ",[31,993,96],{},[162,995,996,1001,1006,1010],{},[180,997,998],{},[31,999,1000],{},"borderRadius",[180,1002,1003],{},[31,1004,1005],{},"string",[180,1007,1008],{},[31,1009,981],{},[180,1011,1012,1013,1016,1017,1020],{},"Corner radius; when omitted, aligned with ",[31,1014,1015],{},"OnSizeChanged","'s ",[31,1018,1019],{},"ActualHeight \u002F 2"," (fully rounded)",[162,1022,1023,1028,1032,1036],{},[180,1024,1025],{},[31,1026,1027],{},"label",[180,1029,1030],{},[31,1031,1005],{},[180,1033,1034],{},[31,1035,981],{},[180,1037,1038,1039,1042],{},"Accessible name; when omitted the whole badge is ",[31,1040,1041],{},"aria-hidden"," (aligned with \"InfoBadge has no AutomationPeer\")",[156,1044,1045,1054],{},[159,1046,1047],{},[162,1048,1049,1052],{},[165,1050,1051],{},"Slots",[165,1053,910],{},[175,1055,1056],{},[162,1057,1058,1062],{},[180,1059,1060],{},[31,1061,146],{},[180,1063,1064,1065,1067,1068,1070],{},"Corresponds to WinUI ",[31,1066,96],{},"; when provided, enters the Icon form and overrides the ",[31,1069,146],{}," Prop and the built-in glyph",[1072,1073,1074,1108,1113],"blockquote",{},[14,1075,1076,1079,1080,151,1086,1089,1090,1092,1093,1096,1097,1100,1101,1104,1105,1107],{},[18,1077,1078],{},"Accessibility",": WinUI's InfoBadge has ",[18,1081,1082,1083],{},"no ",[31,1084,1085],{},"AutomationPeer",[31,1087,1088],{},"Control.OnCreateAutomationPeer"," is not overridden, so it does not appear in the UIA tree); Gallery therefore hangs the accessible name on the parent ",[31,1091,624],{},". This component renders ",[31,1094,1095],{},"aria-hidden=\"true\""," by default, does not take the tab order and does not intercept pointers; ",[31,1098,1099],{},"role=\"img\""," + ",[31,1102,1103],{},"aria-label"," is rendered only when a ",[31,1106,1027],{}," is explicitly passed (standalone usage). The component does not hardcode any natural language.",[14,1109,1110],{},[18,1111,1112],{},"Implementation notes",[52,1114,1115,1152,1195,1218,1246,1267,1535,1884,1923,1945],{},[55,1116,1117,1124,1125,1127,1128,1130,1131,1133,1134,1130,1137,64,1139,1133,1141,1143,1144,1147,1148,1151],{},[18,1118,1119,1120,1123],{},"The form is derived live, not a ",[31,1121,1122],{},"variant"," enum",": in ",[31,1126,150],{},", ",[31,1129,88],{}," → ",[31,1132,193],{}," state, otherwise ",[31,1135,1136],{},"IconSource != null",[31,1138,218],{},[31,1140,215],{},[31,1142,233],{}," state. This component's ",[31,1145,1146],{},"displayKind"," computed corresponds to it word for word (including \"Value takes precedence over Icon\") and is exposed via ",[31,1149,1150],{},"data-display-kind"," for styling and test assertions.",[55,1153,1154,1157,1158,1161,1162,1165,1166,1169,1170,151,1173,1176,1177,151,1179,1169,1182,151,1184,1187,1188,1190,1191,1194],{},[18,1155,1156],{},"The two icon forms are geometrically equivalent",": in the template, the FontIcon state uses ",[31,1159,1160],{},"InfoBadgePadding"," (overridden to ",[31,1163,1164],{},"0,4,0,2"," by ",[31,1167,1168],{},"*IconInfoBadgeStyle",") + ",[31,1171,1172],{},"IconInfoBadgeFontIconMargin",[31,1174,1175],{},"4,0,4,2","), and the Icon state uses ",[31,1178,1160],{},[31,1180,1181],{},"0",[31,1183,376],{},[31,1185,1186],{},"4,4,4,4",") — both yield \"top+bottom 4+4, left+right 4+4\" and an 8px ",[31,1189,119],{}," height, so this library expresses both with a single \"8px icon frame + 4px margin\" rule and no longer needs a ",[31,1192,1193],{},"padding"," Prop.",[55,1196,1197,1203,1204,1206,1207,1210,1211,1213,1214,1217],{},[18,1198,1199,1202],{},[31,1200,1201],{},"MeasureOverride","'s square rule is expressed in CSS",": the final heights of the Value \u002F Icon states are both clamped to 16 by ",[31,1205,71],{},", so \"square when width \u003C height\" is equivalent to adding a ",[31,1208,1209],{},"min-inline-size: 16px"," to each of those two states; the Dot state's height is ",[31,1212,67],{}," (4, equal to ",[31,1215,1216],{},"MinWidth",") and is unaffected.",[55,1219,1220,1227,1228,1231,1232,1234,1235,1238,1239,1242,1243,1245],{},[18,1221,1222,1223,1226],{},"The value line height is locked to ",[31,1224,1225],{},"lineHeightBase100"," (14px)",": 14 + ",[31,1229,1230],{},"ValueInfoBadgeTextMargin","'s bottom margin 2 = 16 = ",[31,1233,71],{},", matching the result in WinUI where the ",[31,1236,1237],{},"TextBlock","'s natural line height (≈14.67px) is clamped to 16 by ",[31,1240,1241],{},"MaxHeight",", and it does not drift with Web font metrics; the \"the text's visual center is 1px above the badge's center\" caused by the vertically asymmetric ",[31,1244,1175],{}," margin is also preserved.",[55,1247,1248,1255,1256,1259,1260,1263,1264,1266],{},[18,1249,1250,64,1252,1254],{},[31,1251,123],{},[31,1253,126],{}," are not implemented",": these two resources (12 \u002F 8, and 12 \u002F 9 under Light and HC themes) are ",[18,1257,1258],{},"not referenced"," in ",[31,1261,1262],{},"InfoBadge.xaml","'s template — the actual icon size is determined by the ",[31,1265,119],{}," filling the available height. Dead resources are not written into code, to avoid \"restoring\" according to them next time.",[55,1268,1269,85,1272,1275,1276,1279,1280,1283,1284,64,1287,64,1290,64,1293,1296,1297,1016,1299,1301,1302,1305,1306,1309,1310,1313,1314,1462,1465,1468,1469,64,1471,1473,1474,143,1476,1478,1479,1481,1482,1484,1485],{},[18,1270,1271],{},"The five background tiers share one mapping with InfoBar",[31,1273,1274],{},"SystemFillColor{Attention,Success,Caution,Critical}Brush"," are the ",[18,1277,1278],{},"same resources"," as InfoBar's ",[31,1281,1282],{},"InfoBar*SeverityIconBackground",", so it reuses ",[31,1285,1286],{},"colorCompoundBrandBackground",[31,1288,1289],{},"colorStatusSuccessForeground3",[31,1291,1292],{},"colorPaletteYellowForeground1",[31,1294,1295],{},"colorStatusDangerForeground3","; ",[31,1298,437],{},[31,1300,447],{}," has no equal-valued entry in Fluent 2 Web, so it takes ",[31,1303,1304],{},"colorNeutralForeground4"," by minimizing ",[31,1307,1308],{},"max(light ΔE, dark ΔE)"," (CIE ΔE76; ",[31,1311,1312],{},"temp\u002Fpw-infobadge.mjs"," re-checks by measurement):",[156,1315,1316,1332],{},[159,1317,1318],{},[162,1319,1320,1323,1326,1329],{},[165,1321,1322],{},"Severity",[165,1324,1325],{},"WinUI original (Light \u002F Dark)",[165,1327,1328],{},"Our token",[165,1330,1331],{},"ΔE (Light \u002F Dark)",[175,1333,1334,1348,1365,1384,1403,1422,1441],{},[162,1335,1336,1338,1341,1345],{},[180,1337,402],{},[180,1339,1340],{},"system accent color",[180,1342,1343],{},[31,1344,1286],{},[180,1346,1347],{},"— (see below)",[162,1349,1350,1352,1359,1363],{},[180,1351,420],{},[180,1353,1354,1355,1358],{},"system accent color (",[31,1356,1357],{},"…ColorLight2",")",[180,1360,1361],{},[31,1362,1286],{},[180,1364,1347],{},[162,1366,1367,1369,1377,1381],{},[180,1368,437],{},[180,1370,1371,64,1374],{},[31,1372,1373],{},"#8A8A8A",[31,1375,1376],{},"#9D9D9D",[180,1378,1379],{},[31,1380,1304],{},[180,1382,1383],{},"10.2 \u002F 1.5",[162,1385,1386,1388,1396,1400],{},[180,1387,454],{},[180,1389,1390,64,1393],{},[31,1391,1392],{},"#0F7B0F",[31,1394,1395],{},"#6CCB5F",[180,1397,1398],{},[31,1399,1289],{},[180,1401,1402],{},"0.4 \u002F 30.8",[162,1404,1405,1407,1415,1419],{},[180,1406,471],{},[180,1408,1409,64,1412],{},[31,1410,1411],{},"#9D5D00",[31,1413,1414],{},"#FCE100",[180,1416,1417],{},[31,1418,1292],{},[180,1420,1421],{},"26.5 \u002F 23.0",[162,1423,1424,1426,1434,1438],{},[180,1425,488],{},[180,1427,1428,64,1431],{},[31,1429,1430],{},"#C42B1C",[31,1432,1433],{},"#FF99A4",[180,1435,1436],{},[31,1437,1295],{},[180,1439,1440],{},"7.3 \u002F 15.2",[162,1442,1443,1446,1454,1459],{},[180,1444,1445],{},"foreground",[180,1447,1448,64,1451],{},[31,1449,1450],{},"#FFFFFF",[31,1452,1453],{},"#000000",[180,1455,1456],{},[31,1457,1458],{},"colorNeutralForegroundInverted2",[180,1460,1461],{},"0.0 \u002F 14.2",[1463,1464],"br",{},[18,1466,1467],{},"The accent colors are not in the repository"," (the exception clause of style-spec §2): ",[31,1470,413],{},[31,1472,430],{}," are both injected at runtime by the system accent color, and the blue in the real control and screenshots may be the user's custom color, so both take the Fluent default accent token, making ",[31,1475,402],{},[31,1477,420],{}," the same color on the Web — the semantic difference shows in the built-in glyph. ",[31,1480,454],{},"'s dark tier has a large ΔE (30.8), the cost of keeping the same mapping as InfoBar; override with the local variables below if you need strict alignment with the real control.",[1463,1483],{},"Both the six background tiers and the foreground leave override hooks (same approach as InfoBar):",[249,1486,1490],{"className":1487,"code":1488,"language":1489,"meta":242,"style":242},"language-css shiki shiki-themes github-light github-dark",".my-badge {\n  --fui-info-badge-bg: #dff6dd; \u002F* e.g. SystemFillColorSuccess original value *\u002F\n  --fui-info-badge-fg: #ffffff;\n}\n","css",[31,1491,1492,1500,1517,1530],{"__ignoreMap":242},[257,1493,1494,1497],{"class":259,"line":260},[257,1495,1496],{"class":284},".my-badge",[257,1498,1499],{"class":263}," {\n",[257,1501,1502,1506,1508,1511,1513],{"class":259,"line":274},[257,1503,1505],{"class":1504},"s4XuR","  --fui-info-badge-bg",[257,1507,85],{"class":263},[257,1509,1510],{"class":294},"#dff6dd",[257,1512,1296],{"class":263},[257,1514,1516],{"class":1515},"sJ8bj","\u002F* e.g. SystemFillColorSuccess original value *\u002F\n",[257,1518,1519,1522,1524,1527],{"class":259,"line":302},[257,1520,1521],{"class":1504},"  --fui-info-badge-fg",[257,1523,85],{"class":263},[257,1525,1526],{"class":294},"#ffffff",[257,1528,1529],{"class":263},";\n",[257,1531,1532],{"class":259,"line":322},[257,1533,1534],{"class":263},"}\n",[55,1536,1537,1540,1541,1544,1545,1547,1548,1551,1552,1127,1555,1558,1559,1562,1563,1566,1567,1569,1570,1573,1574,1705,1707,1708,1713,1714,1717,1718,1721,1722,1725,1726,1728,1729,1731,1732,1734,1735,1738,1739,1741,1742,1744,151,1747,1749,1750,1752,1753,1756,1757,1760,1761,1854,1856,1857,1860,1861,1864,1865,1868,1869,1871,1872,1874,1875,1877,1878,1880,1881,1883],{},[18,1538,1539],{},"The five built-in glyphs are all \"bare glyphs\", chosen by their shape",": rendering the official Segoe Fluent Icons font at the real size (16px circle base + 8px glyph frame) and comparing (script ",[31,1542,1543],{},"temp\u002Finfobadge-visual\u002Fglyph-badge-compare.mjs",") confirms that the five glyphs preset by ",[31,1546,1168],{}," are all ",[18,1549,1550],{},"without a circle base"," — the circle base is provided by the badge body. This is critical: InfoBar uses ",[18,1553,1554],{},"two stacked glyphs",[31,1556,1557],{},"F136"," (solid circle) + ",[31,1560,1561],{},"F13F"," (i), while ",[31,1564,1565],{},"InformationalIconInfoBadgeStyle"," gives only the single ",[31,1568,1561],{}," glyph, ",[18,1571,1572],{},"so the InfoBar circular icon cannot be copied",".",[156,1575,1576,1593],{},[159,1577,1578],{},[162,1579,1580,1582,1587,1590],{},[165,1581,1322],{},[165,1583,1584,1585],{},"WinUI ",[31,1586,96],{},[165,1588,1589],{},"Segoe glyph",[165,1591,1592],{},"Our icon",[175,1594,1595,1617,1639,1661,1683],{},[162,1596,1597,1601,1606,1612],{},[180,1598,1599],{},[31,1600,420],{},[180,1602,1603],{},[31,1604,1605],{},"FontIconSource Glyph=",[180,1607,1608,1611],{},[31,1609,1610],{},"Asterisk"," (8-point star)",[180,1613,1614],{},[31,1615,1616],{},"text_asterisk_16_filled",[162,1618,1619,1623,1628,1634],{},[180,1620,1621],{},[31,1622,437],{},[180,1624,1625],{},[31,1626,1627],{},"FontIconSource Glyph=",[180,1629,1630,1631],{},"bare ",[31,1632,1633],{},"i",[180,1635,1636],{},[31,1637,1638],{},"info_16_regular",[162,1640,1641,1645,1650,1656],{},[180,1642,1643],{},[31,1644,454],{},[180,1646,1647],{},[31,1648,1649],{},"SymbolIconSource Symbol=Accept",[180,1651,1652,1655],{},[31,1653,1654],{},"E8FB"," bare check",[180,1657,1658],{},[31,1659,1660],{},"checkmark_16_filled",[162,1662,1663,1667,1672,1678],{},[180,1664,1665],{},[31,1666,471],{},[180,1668,1669],{},[31,1670,1671],{},"SymbolIconSource Symbol=Important",[180,1673,1674,1677],{},[31,1675,1676],{},"E171"," bare exclamation",[180,1679,1680],{},[31,1681,1682],{},"important_16_filled",[162,1684,1685,1689,1694,1700],{},[180,1686,1687],{},[31,1688,488],{},[180,1690,1691],{},[31,1692,1693],{},"SymbolIconSource Symbol=Cancel",[180,1695,1696,1699],{},[31,1697,1698],{},"E711"," bare cross",[180,1701,1702],{},[31,1703,1704],{},"dismiss_16_filled",[1463,1706],{},"Known deviation: Fluent System Icons has ",[18,1709,1710,1711],{},"no bare glyph ",[31,1712,1633],{}," (an automatic scan over all 1,729 16px filled icons for \"narrow bounding box + exactly two connected components + smaller upper component\" returned an empty shortlist; see ",[31,1715,1716],{},"temp\u002Finfobadge-visual\u002Ffind-bare-i.mjs","). ",[31,1719,1720],{},"info_16_filled"," is a \"solid circle + cut-out i\", so placing it directly yields a ",[18,1723,1724],{},"white disc + badge-colored i"," (foreground \u002F background relationship inverted from WinUI; measured ink coverage 78% vs 22% for ours); ",[31,1727,1638],{}," is the same ",[31,1730,1633],{}," (its subpaths are geometrically identical to the filled's cut-out i) with an extra 1-unit-wide white ring around it, and the ",[31,1733,1633],{}," is still a white foreground — the only deviation is one extra thin ring, hence ",[31,1736,1737],{},"regular"," was chosen. Use the ",[31,1740,205],{}," slot to swap in a hand-drawn glyph when exact matching is required.",[1463,1743],{},[18,1745,1746],{},"Ink-size measurements",[31,1748,1312],{},", section 3): on the WinUI side, the official Segoe Fluent Icons font is used to measure the glyph ink and line box, converted to 1× size by \"the ",[31,1751,119],{}," scales the ",[18,1754,1755],{},"line box"," (= 1em) to the 8px icon frame\" (script ",[31,1758,1759],{},"temp\u002Finfobadge-visual\u002Fmeasure-segoe-ink.mjs","); on our side, the pixels differing from the background are counted on 1:1 element screenshots to get the bounding box.",[156,1762,1763,1778],{},[159,1764,1765],{},[162,1766,1767,1769,1772,1775],{},[165,1768,1322],{},[165,1770,1771],{},"Our icon ink (1x)",[165,1773,1774],{},"WinUI 1x ink",[165,1776,1777],{},"Δ",[175,1779,1780,1795,1810,1825,1839],{},[162,1781,1782,1786,1789,1792],{},[180,1783,1784],{},[31,1785,420],{},[180,1787,1788],{},"6×6",[180,1790,1791],{},"7.0×7.0",[180,1793,1794],{},"−1.0",[162,1796,1797,1801,1804,1807],{},[180,1798,1799],{},[31,1800,454],{},[180,1802,1803],{},"6×5",[180,1805,1806],{},"8.0×5.5",[180,1808,1809],{},"−2.0 \u002F −0.5",[162,1811,1812,1816,1819,1822],{},[180,1813,1814],{},[31,1815,471],{},[180,1817,1818],{},"2×6",[180,1820,1821],{},"3.0×8.0",[180,1823,1824],{},"−1.0 \u002F −2.0",[162,1826,1827,1831,1833,1836],{},[180,1828,1829],{},[31,1830,488],{},[180,1832,1788],{},[180,1834,1835],{},"5.5×5.5",[180,1837,1838],{},"+0.5",[162,1840,1841,1845,1848,1851],{},[180,1842,1843],{},[31,1844,437],{},[180,1846,1847],{},"8×8 (thin ring + i)",[180,1849,1850],{},"0.8×3.3 (bare i)",[180,1852,1853],{},"structural deviation",[1463,1855],{},"The first four tiers differ by 1–2px, originating in the two icon sets' ",[18,1858,1859],{},"different design whitespace",": Fluent System Icons' 16px glyph ink occupies about 12\u002F16 of the bounding box, while Segoe's symbol glyphs nearly fill the em box; ",[18,1862,1863],{},"the icon-frame mapping itself is correct"," (Fluent's ",[31,1866,1867],{},"viewBox"," ↔ Segoe's em box, both scaled by ",[31,1870,119],{},"). The ",[31,1873,437],{}," row is the structural deviation described above — WinUI's ",[31,1876,1561],{}," is a 0.8px-wide thin ",[31,1879,1633],{}," (almost invisible at 1×), and since this library can't find a bare ",[31,1882,1633],{}," in the official icon set, it falls back to \"thin ring + i\".",[55,1885,1886,1889,1890,1893,1894,1897,1898,1901,1902,1905,1906,1127,1909,1911,1912,1915,1916,1918,1919,1922],{},[18,1887,1888],{},"Reference-image cross-validation"," (C-tier evidence, comparing only scale-independent quantities): in the Gallery screenshots the accent badge heights are all ",[18,1891,1892],{},"16px",", the ",[31,1895,1896],{},"Different InfoBadge Styles"," row is ",[18,1899,1900],{},"16×16 (Icon) \u002F 19×16 (Value \"10\") \u002F 4×16 (Dot)",", and the \"5\" value badge in the NavigationView is a ",[18,1903,1904],{},"16×16 perfect circle"," — each coincides with ",[31,1907,1908],{},"InfoBadgeMaxHeight=16",[31,1910,1201],{},"'s square rule, and ",[31,1913,1914],{},"InfoBadgeMinWidth\u002FHeight=4"," (see ",[31,1917,1312],{}," section 4 and the screenshots under ",[31,1920,1921],{},"temp\u002Fvisual-infobadge\u002F","). The only difference is that the Value capsule is about 3px wider than the real control (aspect ratio 1.38 vs 1.19), from Web font metrics (Segoe UI vs Segoe UI Variable).",[55,1924,1925,1928,1929,1932,1933,1936,1937,1940,1941,1944],{},[18,1926,1927],{},"Known gaps",": high-contrast themes are not implemented (under WinUI HC the background is ",[31,1930,1931],{},"SystemControlHighlightAccentBrush"," and the foreground ",[31,1934,1935],{},"SystemControlHighlightAltChromeWhiteBrush","); the two dead resources ",[31,1938,1939],{},"InfoBadgeIconWidth \u002F Height"," are not implemented. The component has no Storyboard \u002F VisualTransition, so motion and ",[31,1942,1943],{},"prefers-reduced-motion"," are not involved.",[55,1946,1947,1950,1951,1954,1955,1958,1959,1961,1962,1130,1964,1966,1967,1969,1970,1973],{},[18,1948,1949],{},"API differences from WinUI",": WinUI throws ",[31,1952,1953],{},"hresult_out_of_bounds"," when ",[31,1956,1957],{},"Value \u003C -1","; this library treats it as ",[31,1960,768],{}," (falling back to Dot) and does not throw during rendering; ",[31,1963,96],{},[31,1965,146],{}," Prop \u002F ",[31,1968,205],{}," slot; ",[31,1971,1972],{},"TemplateSettings"," is not exposed.",[1975,1976,1977],"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 pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":242,"searchDepth":274,"depth":274,"links":1979},[1980,1981,1982,1983,1984],{"id":135,"depth":274,"text":136},{"id":344,"depth":274,"text":345},{"id":591,"depth":274,"text":592},{"id":755,"depth":274,"text":756},{"id":891,"depth":274,"text":892},"Non-intrusive small badge with three states — dot \u002F value \u002F icon — and five Severity background tiers; geometry and colors restyle WinUI 3 InfoBadge.","md",{},{"title":5},true,"\u002Fen\u002Fcomponents\u002Finfo-badge",{"title":5,"description":1985},"en\u002Fcomponents\u002Finfo-badge","9UXTeHTkQlb5hT-iMwNULpJYUr7NyWCyuT8_mPQ_S34",{"id":1995,"title":1996,"body":1997,"description":3686,"extension":1986,"meta":3687,"nav":3688,"navigation":1989,"path":3689,"seo":3690,"stem":3691,"__hash__":3692},"content\u002Fcomponents\u002Finfo-badge.md","Info Badge 徽章",{"type":7,"value":1998,"toc":3679},[1999,2002,2012,2031,2097,2101,2115,2181,2258,2262,2290,2393,2480,2484,2493,2552,2619,2622,2638,2731,2733,2867,2895,3677],[10,2000,1996],{"id":2001},"info-badge-徽章",[14,2003,2004,2005,2008,2009,2011],{},"Info Badge 用来在应用内",[18,2006,2007],{},"非打断地","提示「有新内容 \u002F 有未读数 \u002F 需要留意」，典型落点是 NavigationView 的菜单项、按钮的一角、列表项的尾部（WinUI 官方描述：",[23,2010,25],{},"）。",[14,2013,2014,2015,2017,2018,2020,2021,2023,2024,2026,2027,2030],{},"样式与几何对齐 WinUI 3 \u002F Windows App SDK 的 InfoBadge（",[31,2016,33],{},"，",[31,2019,37],{}," 目录在 ",[31,2022,45],{},"——最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 版本——与 ",[31,2025,49],{}," 之间",[18,2028,2029],{},"逐字节一致","）：",[52,2032,2033,2053,2068,2080],{},[55,2034,2035,2038,2039,64,2041,2043,2044,2046,2047,2050,2051,2011],{},[18,2036,2037],{},"几何","：最小 4×4（",[31,2040,63],{},[31,2042,67],{},"）、最大高 16（",[31,2045,71],{},"）、",[18,2048,2049],{},"宽度不限","、圆角 = 实际高的一半（",[31,2052,79],{},[55,2054,2055,2058,2059,2061,2062,2064,2065,2067],{},[18,2056,2057],{},"形态","：",[31,2060,88],{}," 显示数字（11px，",[31,2063,92],{},"）；否则有 ",[31,2066,96],{}," 显示图标；否则是一个 4×4 的圆点。",[55,2069,2070,2058,2073,2075,2076,2079],{},[18,2071,2072],{},"正方形规则",[31,2074,105],{}," 在「宽 \u003C 高」时返回正方形，所以单个数字的徽章是",[18,2077,2078],{},"正圆","而不是窄胶囊。",[55,2081,2082,2058,2085,2087,2088,64,2090,2092,2093,2096],{},[18,2083,2084],{},"图标框",[31,2086,119],{}," 撑满「最大高 − 内外边距」= 8px（模板里的 ",[31,2089,123],{},[31,2091,126],{}," 两个资源",[18,2094,2095],{},"没有被模板引用","，是死资源）。",[133,2098,2100],{"id":2099},"三种形态dot-value-icon","三种形态：Dot \u002F Value \u002F Icon",[14,2102,2103,2105,2106,2108,2109,2111,2112,2030],{},[31,2104,142],{}," 与 ",[31,2107,146],{}," 两个 Prop 的组合决定形态，推导顺序逐字对齐 ",[31,2110,150],{},"（",[18,2113,2114],{},"Value 优先于 Icon",[156,2116,2117,2129],{},[159,2118,2119],{},[162,2120,2121,2124,2126],{},[165,2122,2123],{},"条件",[165,2125,2057],{},[165,2127,2128],{},"对应 WinUI",[175,2130,2131,2146,2167],{},[162,2132,2133,2137,2141],{},[180,2134,2135],{},[31,2136,184],{},[180,2138,2139],{},[31,2140,142],{},[180,2142,2143,2145],{},[31,2144,193],{}," 视觉状态",[162,2147,2148,2157,2161],{},[180,2149,2150,2151,2153,2154,2156],{},"有 ",[31,2152,146],{},"（或 ",[31,2155,205],{}," 插槽）",[180,2158,2159],{},[31,2160,146],{},[180,2162,2163,64,2165,2145],{},[31,2164,215],{},[31,2166,218],{},[162,2168,2169,2172,2176],{},[180,2170,2171],{},"都不满足",[180,2173,2174],{},[31,2175,228],{},[180,2177,2178,2180],{},[31,2179,233],{}," 视觉状态（空状态）",[236,2182,2184,2188],{"title":2183},"Dot \u002F Value \u002F Icon 三态",[240,2185,2186],{"v-slot:preview":242},[244,2187],{},[240,2189,2190],{"v-slot:code":242},[249,2191,2192],{"className":251,"code":252,"language":253,"meta":242,"style":242},[31,2193,2194,2202,2222,2238],{"__ignoreMap":242},[257,2195,2196,2198,2200],{"class":259,"line":260},[257,2197,264],{"class":263},[257,2199,268],{"class":267},[257,2201,271],{"class":263},[257,2203,2204,2206,2208,2210,2212,2214,2216,2218,2220],{"class":259,"line":274},[257,2205,264],{"class":263},[257,2207,268],{"class":267},[257,2209,281],{"class":263},[257,2211,142],{"class":284},[257,2213,287],{"class":263},[257,2215,291],{"class":290},[257,2217,295],{"class":294},[257,2219,291],{"class":290},[257,2221,271],{"class":263},[257,2223,2224,2226,2228,2230,2232,2234,2236],{"class":259,"line":302},[257,2225,264],{"class":263},[257,2227,268],{"class":267},[257,2229,309],{"class":284},[257,2231,287],{"class":263},[257,2233,314],{"class":290},[257,2235,317],{"class":284},[257,2237,271],{"class":263},[257,2239,2240,2242,2244,2246,2248,2250,2252,2254,2256],{"class":259,"line":322},[257,2241,264],{"class":263},[257,2243,268],{"class":267},[257,2245,281],{"class":263},[257,2247,146],{"class":284},[257,2249,287],{"class":263},[257,2251,291],{"class":290},[257,2253,337],{"class":263},[257,2255,291],{"class":290},[257,2257,271],{"class":263},[133,2259,2261],{"id":2260},"五档-severity","五档 Severity",[14,2263,2264,2266,2267,2269,2270,64,2272,64,2274,2276,2277,2280,2281,2283,2284,2286,2287,2289],{},[31,2265,350],{}," 对应 ",[31,2268,354],{}," 里的 Style 键：每一档都有 ",[31,2271,233],{},[31,2273,193],{},[31,2275,215],{}," 三个变体，",[18,2278,2279],{},"底色完全相同","，差别只在「是否预置 ",[31,2282,96],{},"」与「图标态是否额外加 ",[31,2285,372],{},"」（后者与 ",[31,2288,376],{}," 在图标态下几何等价，见「实现要点」）。",[156,2291,2292,2306],{},[159,2293,2294],{},[162,2295,2296,2300,2303],{},[165,2297,2298],{},[31,2299,350],{},[165,2301,2302],{},"WinUI Style 前缀",[165,2304,2305],{},"底色资源",[175,2307,2308,2323,2337,2351,2365,2379],{},[162,2309,2310,2315,2319],{},[180,2311,2312,2314],{},[31,2313,402],{},"（缺省）",[180,2316,2317],{},[31,2318,408],{},[180,2320,2321],{},[31,2322,413],{},[162,2324,2325,2329,2333],{},[180,2326,2327],{},[31,2328,420],{},[180,2330,2331],{},[31,2332,425],{},[180,2334,2335],{},[31,2336,430],{},[162,2338,2339,2343,2347],{},[180,2340,2341],{},[31,2342,437],{},[180,2344,2345],{},[31,2346,442],{},[180,2348,2349],{},[31,2350,447],{},[162,2352,2353,2357,2361],{},[180,2354,2355],{},[31,2356,454],{},[180,2358,2359],{},[31,2360,459],{},[180,2362,2363],{},[31,2364,464],{},[162,2366,2367,2371,2375],{},[180,2368,2369],{},[31,2370,471],{},[180,2372,2373],{},[31,2374,476],{},[180,2376,2377],{},[31,2378,481],{},[162,2380,2381,2385,2389],{},[180,2382,2383],{},[31,2384,488],{},[180,2386,2387],{},[31,2388,493],{},[180,2390,2391],{},[31,2392,498],{},[236,2394,2396,2400],{"title":2395},"不同 Severity × 三种形态（对齐 Gallery 示例 2）",[240,2397,2398],{"v-slot:preview":242},[505,2399],{},[240,2401,2402],{"v-slot:code":242},[249,2403,2404],{"className":251,"code":511,"language":253,"meta":242,"style":242},[31,2405,2406,2428,2460],{"__ignoreMap":242},[257,2407,2408,2410,2412,2414,2416,2418,2420,2422,2424,2426],{"class":259,"line":260},[257,2409,264],{"class":263},[257,2411,268],{"class":267},[257,2413,281],{"class":263},[257,2415,350],{"class":284},[257,2417,287],{"class":263},[257,2419,291],{"class":290},[257,2421,350],{"class":263},[257,2423,291],{"class":290},[257,2425,317],{"class":284},[257,2427,271],{"class":263},[257,2429,2430,2432,2434,2436,2438,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458],{"class":259,"line":274},[257,2431,264],{"class":263},[257,2433,268],{"class":267},[257,2435,281],{"class":263},[257,2437,350],{"class":284},[257,2439,287],{"class":263},[257,2441,291],{"class":290},[257,2443,350],{"class":263},[257,2445,291],{"class":290},[257,2447,281],{"class":263},[257,2449,142],{"class":284},[257,2451,287],{"class":263},[257,2453,291],{"class":290},[257,2455,564],{"class":294},[257,2457,291],{"class":290},[257,2459,271],{"class":263},[257,2461,2462,2464,2466,2468,2470,2472,2474,2476,2478],{"class":259,"line":302},[257,2463,264],{"class":263},[257,2465,268],{"class":267},[257,2467,281],{"class":263},[257,2469,350],{"class":284},[257,2471,287],{"class":263},[257,2473,291],{"class":290},[257,2475,350],{"class":263},[257,2477,291],{"class":290},[257,2479,271],{"class":263},[133,2481,2483],{"id":2482},"嵌在-navigationview-其他控件里","嵌在 NavigationView \u002F 其他控件里",[14,2485,2486,2487,2490,2491,2011],{},"徽章最常见的落点是导航项与控件一角。徽章本身是",[18,2488,2489],{},"纯装饰元素","，可访问名应当挂在承载它的控件上（Gallery 就是这么写的：",[31,2492,602],{},[236,2494,2496,2500],{"title":2495},"嵌在 NavigationView 导航项里（对齐 Gallery 示例 1）",[240,2497,2498],{"v-slot:preview":242},[609,2499],{},[240,2501,2502],{"v-slot:code":242},[249,2503,2504],{"className":251,"code":615,"language":253,"meta":242,"style":242},[31,2505,2506,2532,2536,2540,2544],{"__ignoreMap":242},[257,2507,2508,2510,2512,2514,2516,2518,2520,2522,2524,2526,2528,2530],{"class":259,"line":260},[257,2509,264],{"class":263},[257,2511,624],{"class":267},[257,2513,627],{"class":284},[257,2515,287],{"class":263},[257,2517,632],{"class":290},[257,2519,635],{"class":284},[257,2521,287],{"class":263},[257,2523,640],{"class":290},[257,2525,643],{"class":284},[257,2527,287],{"class":263},[257,2529,648],{"class":290},[257,2531,651],{"class":263},[257,2533,2534],{"class":259,"line":274},[257,2535,656],{"class":263},[257,2537,2538],{"class":259,"line":302},[257,2539,661],{"class":263},[257,2541,2542],{"class":259,"line":322},[257,2543,666],{"class":263},[257,2545,2546,2548,2550],{"class":259,"line":669},[257,2547,672],{"class":263},[257,2549,624],{"class":267},[257,2551,651],{"class":263},[236,2553,2555,2559],{"title":2554},"叠在按钮一角（对齐 Gallery 示例 3）",[240,2556,2557],{"v-slot:preview":242},[683,2558],{},[240,2560,2561],{"v-slot:code":242},[249,2562,2563],{"className":251,"code":689,"language":253,"meta":242,"style":242},[31,2564,2565,2593],{"__ignoreMap":242},[257,2566,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585,2587,2589,2591],{"class":259,"line":260},[257,2568,264],{"class":263},[257,2570,698],{"class":267},[257,2572,701],{"class":284},[257,2574,281],{"class":263},[257,2576,146],{"class":284},[257,2578,287],{"class":263},[257,2580,291],{"class":290},[257,2582,712],{"class":263},[257,2584,291],{"class":290},[257,2586,717],{"class":284},[257,2588,287],{"class":263},[257,2590,722],{"class":290},[257,2592,271],{"class":263},[257,2594,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617],{"class":259,"line":274},[257,2596,264],{"class":263},[257,2598,268],{"class":267},[257,2600,309],{"class":284},[257,2602,287],{"class":263},[257,2604,737],{"class":290},[257,2606,281],{"class":263},[257,2608,146],{"class":284},[257,2610,287],{"class":263},[257,2612,291],{"class":290},[257,2614,748],{"class":263},[257,2616,291],{"class":290},[257,2618,271],{"class":263},[133,2620,2621],{"id":2621},"动态数值",[14,2623,2624,2626,2627,2629,2630,2632,2633,2635,2636,2011],{},[31,2625,142],{}," 是响应式的：",[31,2628,764],{}," 显示数字，",[31,2631,768],{}," 回到圆点形态（WinUI 的 ",[31,2634,193],{}," 缺省就是 ",[31,2637,775],{},[236,2639,2641,2645],{"title":2640},"NumberBox 驱动 InfoBadge.Value（对齐 Gallery 示例 4）",[240,2642,2643],{"v-slot:preview":242},[782,2644],{},[240,2646,2647],{"v-slot:code":242},[249,2648,2649],{"className":251,"code":788,"language":253,"meta":242,"style":242},[31,2650,2651,2677,2683,2695,2703,2719,2727],{"__ignoreMap":242},[257,2652,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675],{"class":259,"line":260},[257,2654,264],{"class":263},[257,2656,268],{"class":267},[257,2658,281],{"class":263},[257,2660,142],{"class":284},[257,2662,287],{"class":263},[257,2664,291],{"class":290},[257,2666,807],{"class":263},[257,2668,811],{"class":810},[257,2670,814],{"class":810},[257,2672,817],{"class":294},[257,2674,291],{"class":290},[257,2676,271],{"class":263},[257,2678,2679,2681],{"class":259,"line":274},[257,2680,264],{"class":263},[257,2682,828],{"class":267},[257,2684,2685,2687,2689,2691,2693],{"class":259,"line":302},[257,2686,833],{"class":284},[257,2688,287],{"class":263},[257,2690,291],{"class":290},[257,2692,142],{"class":263},[257,2694,842],{"class":290},[257,2696,2697,2699,2701],{"class":259,"line":322},[257,2698,847],{"class":284},[257,2700,287],{"class":263},[257,2702,852],{"class":290},[257,2704,2705,2707,2709,2711,2713,2715,2717],{"class":259,"line":669},[257,2706,857],{"class":263},[257,2708,860],{"class":284},[257,2710,287],{"class":263},[257,2712,291],{"class":290},[257,2714,867],{"class":810},[257,2716,817],{"class":294},[257,2718,842],{"class":290},[257,2720,2721,2723,2725],{"class":259,"line":874},[257,2722,877],{"class":284},[257,2724,287],{"class":263},[257,2726,882],{"class":290},[257,2728,2729],{"class":259,"line":885},[257,2730,888],{"class":263},[133,2732,892],{"id":891},[156,2734,2735,2751],{},[159,2736,2737],{},[162,2738,2739,2742,2745,2748],{},[165,2740,2741],{},"属性（Props）",[165,2743,2744],{},"类型",[165,2746,2747],{},"默认",[165,2749,2750],{},"说明",[175,2752,2753,2780,2799,2824,2847],{},[162,2754,2755,2759,2763,2767],{},[180,2756,2757],{},[31,2758,142],{},[180,2760,2761],{},[31,2762,923],{},[180,2764,2765],{},[31,2766,775],{},[180,2768,2769,2770,2772,2773,2629,2775,2777,2778],{},"徽章数值（",[31,2771,933],{},"）；",[31,2774,764],{},[31,2776,768],{}," 回落到图标 \u002F 圆点；对齐 WinUI ",[31,2779,193],{},[162,2781,2782,2786,2790,2794],{},[180,2783,2784],{},[31,2785,350],{},[180,2787,2788],{},[31,2789,953],{},[180,2791,2792],{},[31,2793,958],{},[180,2795,2796,2797],{},"背景预设；对齐六套 ",[31,2798,964],{},[162,2800,2801,2805,2809,2813],{},[180,2802,2803],{},[31,2804,146],{},[180,2806,2807],{},[31,2808,976],{},[180,2810,2811],{},[31,2812,981],{},[180,2814,2815,2816,2818,2819,2821,2822],{},"图标；",[31,2817,987],{}," 取 ",[31,2820,350],{}," 的内建字形，也可直接传图标组件；对齐 WinUI ",[31,2823,96],{},[162,2825,2826,2830,2834,2838],{},[180,2827,2828],{},[31,2829,1000],{},[180,2831,2832],{},[31,2833,1005],{},[180,2835,2836],{},[31,2837,981],{},[180,2839,2840,2841,2843,2844,2846],{},"圆角；不传时对齐 ",[31,2842,1015],{}," 的 ",[31,2845,1019],{},"（全圆角）",[162,2848,2849,2853,2857,2861],{},[180,2850,2851],{},[31,2852,1027],{},[180,2854,2855],{},[31,2856,1005],{},[180,2858,2859],{},[31,2860,981],{},[180,2862,2863,2864,2866],{},"可访问名；不传则整个徽章 ",[31,2865,1041],{},"（对齐「InfoBadge 没有 AutomationPeer」）",[156,2868,2869,2878],{},[159,2870,2871],{},[162,2872,2873,2876],{},[165,2874,2875],{},"插槽（Slots）",[165,2877,2750],{},[175,2879,2880],{},[162,2881,2882,2886],{},[180,2883,2884],{},[31,2885,146],{},[180,2887,2888,2889,2891,2892,2894],{},"对应 WinUI ",[31,2890,96],{},"；提供后进入 Icon 形态，并覆盖 ",[31,2893,146],{}," Prop 与内建字形",[1072,2896,2897,2925,2930],{},[14,2898,2899,2902,2903,2111,2908,2910,2911,2913,2914,2916,2917,2919,2920,1100,2922,2924],{},[18,2900,2901],{},"无障碍","：WinUI 的 InfoBadge ",[18,2904,2905,2906],{},"没有 ",[31,2907,1085],{},[31,2909,1088],{}," 未重写，UIA 树里不出现），Gallery 因此把可访问名挂在父级 ",[31,2912,624],{}," 上。本组件缺省渲染 ",[31,2915,1095],{},"、不抢 Tab 序、不拦截指针；只有显式传入 ",[31,2918,1027],{}," 时才渲染 ",[31,2921,1099],{},[31,2923,1103],{},"（独立使用场景）。组件不硬编码任何自然语言。",[14,2926,2927],{},[18,2928,2929],{},"实现要点",[52,2931,2932,2963,2998,3018,3042,3062,3291,3603,3637,3653],{},[55,2933,2934,2058,2940,2942,2943,1130,2945,2947,2948,1130,2950,64,2952,2947,2954,2956,2957,2959,2960,2962],{},[18,2935,2936,2937,2939],{},"形态是实时推导的，不是一个 ",[31,2938,1122],{}," 枚举",[31,2941,150],{}," 里 ",[31,2944,88],{},[31,2946,193],{}," 态，否则 ",[31,2949,1136],{},[31,2951,218],{},[31,2953,215],{},[31,2955,233],{}," 态。本组件的 ",[31,2958,1146],{}," computed 与之逐字对应（含「Value 优先于 Icon」），并通过 ",[31,2961,1150],{}," 暴露出来，便于样式与测试断言。",[55,2964,2965,2968,2969,2971,2972,2974,2975,2977,2978,2111,2980,2982,2983,2111,2985,2977,2987,2111,2989,2991,2992,2994,2995,2997],{},[18,2966,2967],{},"两种图标形态在几何上等价","：模板里 FontIcon 态用 ",[31,2970,1160],{},"（被 ",[31,2973,1168],{}," 覆盖为 ",[31,2976,1164],{},"）+ ",[31,2979,1172],{},[31,2981,1175],{},"），Icon 态用 ",[31,2984,1160],{},[31,2986,1181],{},[31,2988,376],{},[31,2990,1186],{},"）——两者都得到「上下 4 + 4、左右 4 + 4」与 8px 的 ",[31,2993,119],{}," 高度，所以本库统一用「8px 图标框 + 4px 外边距」一份规则表达，不再需要 ",[31,2996,1193],{}," Prop。",[55,2999,3000,3005,3006,3008,3009,3011,3012,3014,3015,3017],{},[18,3001,3002,3004],{},[31,3003,1201],{}," 的正方形规则用 CSS 表达","：Value \u002F Icon 两态的最终高都被 ",[31,3007,71],{}," 夹到 16，因此「宽 \u003C 高则取正方形」等价于这两态各加一条 ",[31,3010,1209],{},"；Dot 态的高就是 ",[31,3013,67],{},"（4，与 ",[31,3016,1216],{}," 相等），不受影响。",[55,3019,3020,3026,3027,3029,3030,3032,3033,3035,3036,3038,3039,3041],{},[18,3021,3022,3023,3025],{},"数值行高锁定为 ",[31,3024,1225],{},"（14px）","：14 + ",[31,3028,1230],{}," 的下外边距 2 = 16 = ",[31,3031,71],{},"，与 WinUI 里 ",[31,3034,1237],{}," 的自然行高（≈14.67px）被 ",[31,3037,1241],{}," 夹到 16 的结果一致，且不随 Web 字体度量漂移；",[31,3040,1175],{}," 这个上下不对称的外边距造成的「文字视觉中心比徽章中心高 1px」也一并保留。",[55,3043,3044,3051,3052,3054,3055,3058,3059,3061],{},[18,3045,3046,64,3048,3050],{},[31,3047,123],{},[31,3049,126],{}," 不落地","：这两个资源（12 \u002F 8，Light 与 HC 主题下是 12 \u002F 9）在 ",[31,3053,1262],{}," 的模板里",[18,3056,3057],{},"没有被引用","，图标实际尺寸由 ",[31,3060,119],{}," 撑满可用高决定 —— 死资源不写进代码，避免下次照着它去“还原”。",[55,3063,3064,2058,3067,3069,3070,3072,3073,3076,3077,64,3079,64,3081,64,3083,3085,3086,2843,3088,3090,3091,3094,3095,3097,3098,3100,3101,3231,3233,3236,3237,64,3239,3241,3242,2105,3244,3246,3247,3249,3250,3252,3253],{},[18,3065,3066],{},"五档底色与 InfoBar 共用一套映射",[31,3068,1274],{}," 与 InfoBar 的 ",[31,3071,1282],{}," 是",[18,3074,3075],{},"同一批资源","，故沿用 ",[31,3078,1286],{},[31,3080,1289],{},[31,3082,1292],{},[31,3084,1295],{},"；",[31,3087,437],{},[31,3089,447],{}," 在 Fluent 2 Web 里没有同值项，按 ",[31,3092,3093],{},"max(亮色 ΔE, 暗色 ΔE)"," 最小取 ",[31,3096,1304],{},"（CIE ΔE76，脚本 ",[31,3099,1312],{}," 会实测复核）：",[156,3102,3103,3118],{},[159,3104,3105],{},[162,3106,3107,3109,3112,3115],{},[165,3108,1322],{},[165,3110,3111],{},"WinUI 原值（Light \u002F Dark）",[165,3113,3114],{},"本库 token",[165,3116,3117],{},"ΔE（Light \u002F Dark）",[175,3119,3120,3134,3150,3166,3182,3198,3214],{},[162,3121,3122,3124,3127,3131],{},[180,3123,402],{},[180,3125,3126],{},"系统强调色",[180,3128,3129],{},[31,3130,1286],{},[180,3132,3133],{},"—（见下）",[162,3135,3136,3138,3144,3148],{},[180,3137,420],{},[180,3139,3140,3141,3143],{},"系统强调色（",[31,3142,1357],{},"）",[180,3145,3146],{},[31,3147,1286],{},[180,3149,3133],{},[162,3151,3152,3154,3160,3164],{},[180,3153,437],{},[180,3155,3156,64,3158],{},[31,3157,1373],{},[31,3159,1376],{},[180,3161,3162],{},[31,3163,1304],{},[180,3165,1383],{},[162,3167,3168,3170,3176,3180],{},[180,3169,454],{},[180,3171,3172,64,3174],{},[31,3173,1392],{},[31,3175,1395],{},[180,3177,3178],{},[31,3179,1289],{},[180,3181,1402],{},[162,3183,3184,3186,3192,3196],{},[180,3185,471],{},[180,3187,3188,64,3190],{},[31,3189,1411],{},[31,3191,1414],{},[180,3193,3194],{},[31,3195,1292],{},[180,3197,1421],{},[162,3199,3200,3202,3208,3212],{},[180,3201,488],{},[180,3203,3204,64,3206],{},[31,3205,1430],{},[31,3207,1433],{},[180,3209,3210],{},[31,3211,1295],{},[180,3213,1440],{},[162,3215,3216,3219,3225,3229],{},[180,3217,3218],{},"前景",[180,3220,3221,64,3223],{},[31,3222,1450],{},[31,3224,1453],{},[180,3226,3227],{},[31,3228,1458],{},[180,3230,1461],{},[1463,3232],{},[18,3234,3235],{},"强调色不在仓库里","（style-spec §2 的例外条款）：",[31,3238,413],{},[31,3240,430],{}," 都由系统强调色在运行时注入，实机与截图的蓝可能是用户的自定义色，故两者都取 Fluent 默认强调色 token，",[31,3243,402],{},[31,3245,420],{}," 在 Web 上同色 —— 语义差异体现在内建字形上。",[31,3248,454],{}," 的暗色一档 ΔE 偏大（30.8），这是与 InfoBar 保持同一映射的代价；需要严格对齐实机时用下面的局部变量覆盖。",[1463,3251],{},"六档底色与前景都留了覆盖口子（同 InfoBar 口径）：",[249,3254,3256],{"className":1487,"code":3255,"language":1489,"meta":242,"style":242},".my-badge {\n  --fui-info-badge-bg: #dff6dd; \u002F* 例如 SystemFillColorSuccess 原值 *\u002F\n  --fui-info-badge-fg: #ffffff;\n}\n",[31,3257,3258,3264,3277,3287],{"__ignoreMap":242},[257,3259,3260,3262],{"class":259,"line":260},[257,3261,1496],{"class":284},[257,3263,1499],{"class":263},[257,3265,3266,3268,3270,3272,3274],{"class":259,"line":274},[257,3267,1505],{"class":1504},[257,3269,85],{"class":263},[257,3271,1510],{"class":294},[257,3273,1296],{"class":263},[257,3275,3276],{"class":1515},"\u002F* 例如 SystemFillColorSuccess 原值 *\u002F\n",[257,3278,3279,3281,3283,3285],{"class":259,"line":302},[257,3280,1521],{"class":1504},[257,3282,85],{"class":263},[257,3284,1526],{"class":294},[257,3286,1529],{"class":263},[257,3288,3289],{"class":259,"line":322},[257,3290,1534],{"class":263},[55,3292,3293,3296,3297,3299,3300,3302,3303,3306,3307,3309,3310,3312,3313,3316,3317,3319,3320,3322,3323,3326,3327,3442,3444,3445,3450,3451,2011,3453,3455,3456,3459,3460,3462,3463,3465,3466,3468,3469,3471,3472,3474,2111,3477,3479,3480,3482,3483,3486,3487,3489,3490,3571,3573,3574,3577,3578,3581,3582,3584,3585,3587,3588,3590,3591,3593,3594,3596,3597,3599,3600,3602],{},[18,3294,3295],{},"五档内建字形都是「裸字形」，且是照图形挑的","：把官方 Segoe Fluent Icons 字体按真实尺寸（16px 圆底 + 8px 字形框）渲染出来比对（脚本 ",[31,3298,1543],{},"）可以确认，",[31,3301,1168],{}," 预置的五个字形",[18,3304,3305],{},"都不带圆底","——圆底由徽章本体提供。这一点很关键：InfoBar 用的是 ",[31,3308,1557],{},"（实心圆）+ ",[31,3311,1561],{},"（i）",[18,3314,3315],{},"两个字形叠加","，而 ",[31,3318,1565],{}," 只给了 ",[31,3321,1561],{}," 一个字形，",[18,3324,3325],{},"不能照搬 InfoBar 的圆形图标","。",[156,3328,3329,3345],{},[159,3330,3331],{},[162,3332,3333,3335,3339,3342],{},[165,3334,1322],{},[165,3336,1584,3337],{},[31,3338,96],{},[165,3340,3341],{},"Segoe 字形",[165,3343,3344],{},"本库图标",[175,3346,3347,3366,3385,3404,3423],{},[162,3348,3349,3353,3357,3362],{},[180,3350,3351],{},[31,3352,420],{},[180,3354,3355],{},[31,3356,1605],{},[180,3358,3359,3361],{},[31,3360,1610],{},"（8 芒星号）",[180,3363,3364],{},[31,3365,1616],{},[162,3367,3368,3372,3376,3381],{},[180,3369,3370],{},[31,3371,437],{},[180,3373,3374],{},[31,3375,1627],{},[180,3377,3378,3379],{},"裸 ",[31,3380,1633],{},[180,3382,3383],{},[31,3384,1638],{},[162,3386,3387,3391,3395,3400],{},[180,3388,3389],{},[31,3390,454],{},[180,3392,3393],{},[31,3394,1649],{},[180,3396,3397,3399],{},[31,3398,1654],{}," 裸对勾",[180,3401,3402],{},[31,3403,1660],{},[162,3405,3406,3410,3414,3419],{},[180,3407,3408],{},[31,3409,471],{},[180,3411,3412],{},[31,3413,1671],{},[180,3415,3416,3418],{},[31,3417,1676],{}," 裸感叹号",[180,3420,3421],{},[31,3422,1682],{},[162,3424,3425,3429,3433,3438],{},[180,3426,3427],{},[31,3428,488],{},[180,3430,3431],{},[31,3432,1693],{},[180,3434,3435,3437],{},[31,3436,1698],{}," 裸叉",[180,3439,3440],{},[31,3441,1704],{},[1463,3443],{},"已知偏差：Fluent System Icons ",[18,3446,3447,3448],{},"没有裸字形 ",[31,3449,1633],{},"（已对 16px filled 全量 1,729 个图标做「窄高包围盒 + 恰好两个连通块 + 上块更小」的自动扫描，短名单为空，见 ",[31,3452,1716],{},[31,3454,1720],{}," 是「实心圆 + 镂空 i」，直接放上去会得到",[18,3457,3458],{},"白圆盘 + 徽章色 i","（前景 \u002F 底色关系与 WinUI 相反，实测墨迹覆盖率 78% vs 本库 22%）；",[31,3461,1638],{}," 是同一份 ",[31,3464,1633],{},"（子路径与 filled 的镂空 i 几何完全相同）外面多一圈 1 单位宽的白环，",[31,3467,1633],{}," 仍是白色前景 —— 只多一处细环的偏差，故选 regular。需要完全一致时用 ",[31,3470,205],{}," 插槽换成自绘字形。",[1463,3473],{},[18,3475,3476],{},"墨迹尺寸实测",[31,3478,1312],{}," 第 3 节）：WinUI 侧用官方 Segoe Fluent Icons 字体量出字形墨迹与线盒，按「",[31,3481,119],{}," 把",[18,3484,3485],{},"线盒","（= 1em）缩放到 8px 图标框」换算成 1x 尺寸（脚本 ",[31,3488,1759],{},"）；本库侧从 1:1 元素截图统计与底色有差异的像素外接框。",[156,3491,3492,3506],{},[159,3493,3494],{},[162,3495,3496,3498,3501,3504],{},[165,3497,1322],{},[165,3499,3500],{},"本库图标墨迹（1x）",[165,3502,3503],{},"WinUI 1x 墨迹",[165,3505,1777],{},[175,3507,3508,3520,3532,3544,3556],{},[162,3509,3510,3514,3516,3518],{},[180,3511,3512],{},[31,3513,420],{},[180,3515,1788],{},[180,3517,1791],{},[180,3519,1794],{},[162,3521,3522,3526,3528,3530],{},[180,3523,3524],{},[31,3525,454],{},[180,3527,1803],{},[180,3529,1806],{},[180,3531,1809],{},[162,3533,3534,3538,3540,3542],{},[180,3535,3536],{},[31,3537,471],{},[180,3539,1818],{},[180,3541,1821],{},[180,3543,1824],{},[162,3545,3546,3550,3552,3554],{},[180,3547,3548],{},[31,3549,488],{},[180,3551,1788],{},[180,3553,1835],{},[180,3555,1838],{},[162,3557,3558,3562,3565,3568],{},[180,3559,3560],{},[31,3561,437],{},[180,3563,3564],{},"8×8（细环 + i）",[180,3566,3567],{},"0.8×3.3（裸 i）",[180,3569,3570],{},"结构性偏差",[1463,3572],{},"前四档差 1–2px，来源是两套图标集的",[18,3575,3576],{},"设计留白","不同：Fluent System Icons 的 16px 字形墨迹约占外框 12\u002F16，Segoe 的符号字形几乎填满 em 框；",[18,3579,3580],{},"图标框的映射本身是对的","（Fluent 的 ",[31,3583,1867],{}," ↔ Segoe 的 em 框，二者都由 ",[31,3586,119],{}," 缩放）。",[31,3589,437],{}," 那一行是上面说的结构性偏差 —— WinUI 的 ",[31,3592,1561],{}," 是一根 0.8px 宽的细 ",[31,3595,1633],{},"（1x 下几乎不可见），本库在官方图标集里找不到裸 ",[31,3598,1633],{},"，退而取「细环 + ",[31,3601,1633],{},"」。",[55,3604,3605,3608,3609,3611,3612,3614,3615,3618,3619,3622,3623,3611,3625,3627,3628,3630,3631,3633,3634,3636],{},[18,3606,3607],{},"参考图交叉验证","（C 级证据，只比尺度无关的量）：Gallery 截图里强调色徽章高度均为 ",[18,3610,1892],{},"、",[31,3613,1896],{}," 一行为 ",[18,3616,3617],{},"16×16（Icon）\u002F 19×16（Value「10」）\u002F 4×16（Dot）","、NavigationView 里「5」那枚数值徽章是 ",[18,3620,3621],{},"16×16 正圆"," —— 与 ",[31,3624,1908],{},[31,3626,1201],{}," 的正方形规则、",[31,3629,1914],{}," 逐项吻合（见 ",[31,3632,1312],{}," 第 4 节与 ",[31,3635,1921],{}," 下的截图）。唯一差异是 Value 胶囊比实机宽约 3px（宽高比 1.38 vs 1.19），来自 Web 字体度量（Segoe UI vs Segoe UI Variable）。",[55,3638,3639,3642,3643,3645,3646,2772,3648,3650,3651,3326],{},[18,3640,3641],{},"已知缺口","：高对比度主题未实现（WinUI HC 下底色 ",[31,3644,1931],{},"、前景 ",[31,3647,1935],{},[31,3649,1939],{}," 两个死资源不落地。组件没有任何 Storyboard \u002F VisualTransition，因此不涉及动效与 ",[31,3652,1943],{},[55,3654,3655,2058,3658,3660,3661,3663,3664,3666,3667,1130,3669,1966,3671,3673,3674,3676],{},[18,3656,3657],{},"与 WinUI 的 API 差异",[31,3659,1957],{}," 时 WinUI 抛 ",[31,3662,1953],{},"，本库按 ",[31,3665,768],{}," 处理（回落到 Dot），渲染期不抛异常；",[31,3668,96],{},[31,3670,146],{},[31,3672,205],{}," 插槽；",[31,3675,1972],{}," 不对外暴露。",[1975,3678,1977],{},{"title":242,"searchDepth":274,"depth":274,"links":3680},[3681,3682,3683,3684,3685],{"id":2099,"depth":274,"text":2100},{"id":2260,"depth":274,"text":2261},{"id":2482,"depth":274,"text":2483},{"id":2621,"depth":274,"text":2621},{"id":891,"depth":274,"text":892},"非打断式的小徽章：圆点 \u002F 数值 \u002F 图标三态，五档 Severity 底色，几何与配色还原 WinUI 3 InfoBadge。",{},{"title":1996},"\u002Fcomponents\u002Finfo-badge",{"title":1996,"description":3686},"components\u002Finfo-badge","zg_qvJsHLC2HjWBjUGGmAhghSXwdJEpcZYCQfjVvhlE",1792150932163]