[{"data":1,"prerenderedAt":1986},["ShallowReactive",2],{"content-\u002Fcomponents\u002Finfo-badge":3,"content-en-fallback-\u002Fcomponents\u002Finfo-badge":1985},{"id":4,"title":5,"body":6,"description":1976,"extension":1977,"meta":1978,"nav":1979,"navigation":1980,"path":1981,"seo":1982,"stem":1983,"__hash__":1984},"content\u002Fcomponents\u002Finfo-badge.md","Info Badge 徽章",{"type":7,"value":8,"toc":1969},"minimark",[9,13,27,51,131,136,153,232,339,343,375,496,586,590,600,674,750,753,772,885,889,1037,1065,1965],[10,11,5],"h1",{"id":12},"info-badge-徽章",[14,15,16,17,21,22,26],"p",{},"Info Badge 用来在应用内",[18,19,20],"strong",{},"非打断地","提示「有新内容 \u002F 有未读数 \u002F 需要留意」，典型落点是 NavigationView 的菜单项、按钮的一角、列表项的尾部（WinUI 官方描述：",[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],{},"样式与几何对齐 WinUI 3 \u002F Windows App SDK 的 InfoBadge（",[31,32,33],"code",{},"microsoft-ui-xaml","，",[31,36,37],{},"InfoBadge"," 目录在 ",[31,40,41],{},"winui3\u002Frelease\u002F2.0.1","——最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 版本——与 ",[31,44,45],{},"winui3\u002Frelease\u002F2.5.1"," 之间",[18,48,49],{},"逐字节一致","）：",[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],{},"几何","：最小 4×4（",[31,62,63],{},"InfoBadgeMinWidth"," \u002F ",[31,66,67],{},"InfoBadgeMinHeight","）、最大高 16（",[31,70,71],{},"InfoBadgeMaxHeight","）、",[18,74,75],{},"宽度不限","、圆角 = 实际高的一半（",[31,78,79],{},"InfoBadge.cpp#OnSizeChanged",[55,81,82,85,86,89,90,93,94,97],{},[18,83,84],{},"形态","：",[31,87,88],{},"Value >= 0"," 显示数字（11px，",[31,91,92],{},"InfoBadgeValueFontSize","）；否则有 ",[31,95,96],{},"IconSource"," 显示图标；否则是一个 4×4 的圆点。",[55,99,100,85,103,106,107,110],{},[18,101,102],{},"正方形规则",[31,104,105],{},"InfoBadge.cpp#MeasureOverride"," 在「宽 \u003C 高」时返回正方形，所以单个数字的徽章是",[18,108,109],{},"正圆","而不是窄胶囊。",[55,112,113,85,116,119,120,64,123,126,127,130],{},[18,114,115],{},"图标框",[31,117,118],{},"Viewbox"," 撑满「最大高 − 内外边距」= 8px（模板里的 ",[31,121,122],{},"InfoBadgeIconWidth",[31,124,125],{},"InfoBadgeIconHeight"," 两个资源",[18,128,129],{},"没有被模板引用","，是死资源）。",[132,133,135],"h2",{"id":134},"三种形态dot-value-icon","三种形态：Dot \u002F Value \u002F Icon",[14,137,138,141,142,145,146,149,150,50],{},[31,139,140],{},"value"," 与 ",[31,143,144],{},"icon"," 两个 Prop 的组合决定形态，推导顺序逐字对齐 ",[31,147,148],{},"InfoBadge.cpp#OnDisplayKindPropertiesChanged","（",[18,151,152],{},"Value 优先于 Icon",[154,155,156,171],"table",{},[157,158,159],"thead",{},[160,161,162,166,168],"tr",{},[163,164,165],"th",{},"条件",[163,167,84],{},[163,169,170],{},"对应 WinUI",[172,173,174,192,216],"tbody",{},[160,175,176,182,186],{},[177,178,179],"td",{},[31,180,181],{},"value >= 0",[177,183,184],{},[31,185,140],{},[177,187,188,191],{},[31,189,190],{},"Value"," 视觉状态",[160,193,194,204,208],{},[177,195,196,197,199,200,203],{},"有 ",[31,198,144],{},"（或 ",[31,201,202],{},"#icon"," 插槽）",[177,205,206],{},[31,207,144],{},[177,209,210,64,213,191],{},[31,211,212],{},"Icon",[31,214,215],{},"FontIcon",[160,217,218,221,226],{},[177,219,220],{},"都不满足",[177,222,223],{},[31,224,225],{},"dot",[177,227,228,231],{},[31,229,230],{},"Dot"," 视觉状态（空状态）",[233,234,236,243],"demo-block",{"title":235},"Dot \u002F Value \u002F Icon 三态",[237,238,240],"template",{"v-slot:preview":239},"",[241,242],"info-badge-kinds-demo",{},[237,244,245],{"v-slot:code":239},[246,247,251],"pre",{"className":248,"code":249,"language":250,"meta":239,"style":239},"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,252,253,269,297,317],{"__ignoreMap":239},[254,255,258,262,266],"span",{"class":256,"line":257},"line",1,[254,259,261],{"class":260},"sVt8B","\u003C",[254,263,265],{"class":264},"s9eBZ","FluereInfoBadge",[254,267,268],{"class":260}," \u002F>\n",[254,270,272,274,276,279,282,285,289,293,295],{"class":256,"line":271},2,[254,273,261],{"class":260},[254,275,265],{"class":264},[254,277,278],{"class":260}," :",[254,280,140],{"class":281},"sScJk",[254,283,284],{"class":260},"=",[254,286,288],{"class":287},"sZZnC","\"",[254,290,292],{"class":291},"sj4cs","5",[254,294,288],{"class":287},[254,296,268],{"class":260},[254,298,300,302,304,307,309,312,315],{"class":256,"line":299},3,[254,301,261],{"class":260},[254,303,265],{"class":264},[254,305,306],{"class":281}," severity",[254,308,284],{"class":260},[254,310,311],{"class":287},"\"attention\"",[254,313,314],{"class":281}," icon",[254,316,268],{"class":260},[254,318,320,322,324,326,328,330,332,335,337],{"class":256,"line":319},4,[254,321,261],{"class":260},[254,323,265],{"class":264},[254,325,278],{"class":260},[254,327,144],{"class":281},[254,329,284],{"class":260},[254,331,288],{"class":287},[254,333,334],{"class":260},"FluentIconAdd16Filled",[254,336,288],{"class":287},[254,338,268],{"class":260},[132,340,342],{"id":341},"五档-severity","五档 Severity",[14,344,345,348,349,352,353,64,355,64,357,359,360,363,364,366,367,370,371,374],{},[31,346,347],{},"severity"," 对应 ",[31,350,351],{},"InfoBadge_themeresources.xaml"," 里的 Style 键：每一档都有 ",[31,354,230],{},[31,356,190],{},[31,358,212],{}," 三个变体，",[18,361,362],{},"底色完全相同","，差别只在「是否预置 ",[31,365,96],{},"」与「图标态是否额外加 ",[31,368,369],{},"Padding=0,4,0,2","」（后者与 ",[31,372,373],{},"IconInfoBadgeIconMargin"," 在图标态下几何等价，见「实现要点」）。",[154,376,377,391],{},[157,378,379],{},[160,380,381,385,388],{},[163,382,383],{},[31,384,347],{},[163,386,387],{},"WinUI Style 前缀",[163,389,390],{},"底色资源",[172,392,393,411,428,445,462,479],{},[160,394,395,401,406],{},[177,396,397,400],{},[31,398,399],{},"accent","（缺省）",[177,402,403],{},[31,404,405],{},"DefaultInfoBadgeStyle",[177,407,408],{},[31,409,410],{},"AccentFillColorDefaultBrush",[160,412,413,418,423],{},[177,414,415],{},[31,416,417],{},"attention",[177,419,420],{},[31,421,422],{},"Attention*InfoBadgeStyle",[177,424,425],{},[31,426,427],{},"SystemFillColorAttentionBrush",[160,429,430,435,440],{},[177,431,432],{},[31,433,434],{},"informational",[177,436,437],{},[31,438,439],{},"Informational*…",[177,441,442],{},[31,443,444],{},"SystemFillColorSolidNeutralBrush",[160,446,447,452,457],{},[177,448,449],{},[31,450,451],{},"success",[177,453,454],{},[31,455,456],{},"Success*…",[177,458,459],{},[31,460,461],{},"SystemFillColorSuccessBrush",[160,463,464,469,474],{},[177,465,466],{},[31,467,468],{},"caution",[177,470,471],{},[31,472,473],{},"Caution*…",[177,475,476],{},[31,477,478],{},"SystemFillColorCautionBrush",[160,480,481,486,491],{},[177,482,483],{},[31,484,485],{},"critical",[177,487,488],{},[31,489,490],{},"Critical*…",[177,492,493],{},[31,494,495],{},"SystemFillColorCriticalBrush",[233,497,499,504],{"title":498},"不同 Severity × 三种形态（对齐 Gallery 示例 2）",[237,500,501],{"v-slot:preview":239},[502,503],"info-badge-styles-demo",{},[237,505,506],{"v-slot:code":239},[246,507,509],{"className":248,"code":508,"language":250,"meta":239,"style":239},"\u003CFluereInfoBadge :severity=\"severity\" icon \u002F>\n\u003CFluereInfoBadge :severity=\"severity\" :value=\"10\" \u002F>\n\u003CFluereInfoBadge :severity=\"severity\" \u002F>\n",[31,510,511,533,566],{"__ignoreMap":239},[254,512,513,515,517,519,521,523,525,527,529,531],{"class":256,"line":257},[254,514,261],{"class":260},[254,516,265],{"class":264},[254,518,278],{"class":260},[254,520,347],{"class":281},[254,522,284],{"class":260},[254,524,288],{"class":287},[254,526,347],{"class":260},[254,528,288],{"class":287},[254,530,314],{"class":281},[254,532,268],{"class":260},[254,534,535,537,539,541,543,545,547,549,551,553,555,557,559,562,564],{"class":256,"line":271},[254,536,261],{"class":260},[254,538,265],{"class":264},[254,540,278],{"class":260},[254,542,347],{"class":281},[254,544,284],{"class":260},[254,546,288],{"class":287},[254,548,347],{"class":260},[254,550,288],{"class":287},[254,552,278],{"class":260},[254,554,140],{"class":281},[254,556,284],{"class":260},[254,558,288],{"class":287},[254,560,561],{"class":291},"10",[254,563,288],{"class":287},[254,565,268],{"class":260},[254,567,568,570,572,574,576,578,580,582,584],{"class":256,"line":299},[254,569,261],{"class":260},[254,571,265],{"class":264},[254,573,278],{"class":260},[254,575,347],{"class":281},[254,577,284],{"class":260},[254,579,288],{"class":287},[254,581,347],{"class":260},[254,583,288],{"class":287},[254,585,268],{"class":260},[132,587,589],{"id":588},"嵌在-navigationview-其他控件里","嵌在 NavigationView \u002F 其他控件里",[14,591,592,593,596,597,26],{},"徽章最常见的落点是导航项与控件一角。徽章本身是",[18,594,595],{},"纯装饰元素","，可访问名应当挂在承载它的控件上（Gallery 就是这么写的：",[31,598,599],{},"AutomationProperties.Name=\"Inbox, 5 notifications\"",[233,601,603,608],{"title":602},"嵌在 NavigationView 导航项里（对齐 Gallery 示例 1）",[237,604,605],{"v-slot:preview":239},[606,607],"info-badge-navigation-demo",{},[237,609,610],{"v-slot:code":239},[246,611,613],{"className":248,"code":612,"language":250,"meta":239,"style":239},"\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,614,615,649,654,659,664],{"__ignoreMap":239},[254,616,617,619,622,625,627,630,633,635,638,641,643,646],{"class":256,"line":257},[254,618,261],{"class":260},[254,620,621],{"class":264},"NavigationViewItem",[254,623,624],{"class":281}," Content",[254,626,284],{"class":260},[254,628,629],{"class":287},"\"Inbox\"",[254,631,632],{"class":281}," Icon",[254,634,284],{"class":260},[254,636,637],{"class":287},"\"Mail\"",[254,639,640],{"class":281}," AutomationProperties.Name",[254,642,284],{"class":260},[254,644,645],{"class":287},"\"Inbox, 5 notifications\"",[254,647,648],{"class":260},">\n",[254,650,651],{"class":256,"line":271},[254,652,653],{"class":260},"  \u003CNavigationViewItem.InfoBadge>\n",[254,655,656],{"class":256,"line":299},[254,657,658],{"class":260},"    \u003CInfoBadge Value=\"5\" \u002F>\n",[254,660,661],{"class":256,"line":319},[254,662,663],{"class":260},"  \u003C\u002FNavigationViewItem.InfoBadge>\n",[254,665,667,670,672],{"class":256,"line":666},5,[254,668,669],{"class":260},"\u003C\u002F",[254,671,621],{"class":264},[254,673,648],{"class":260},[233,675,677,682],{"title":676},"叠在按钮一角（对齐 Gallery 示例 3）",[237,678,679],{"v-slot:preview":239},[680,681],"info-badge-overlay-demo",{},[237,683,684],{"v-slot:code":239},[246,685,687],{"className":248,"code":686,"language":250,"meta":239,"style":239},"\u003CFluereButton icon-only :icon=\"FluentIconArrowSync20Regular\" aria-label=\"Refresh required\" \u002F>\n\u003CFluereInfoBadge severity=\"critical\" :icon=\"FluentIconImportant16Filled\" \u002F>\n",[31,688,689,722],{"__ignoreMap":239},[254,690,691,693,696,699,701,703,705,707,710,712,715,717,720],{"class":256,"line":257},[254,692,261],{"class":260},[254,694,695],{"class":264},"FluereButton",[254,697,698],{"class":281}," icon-only",[254,700,278],{"class":260},[254,702,144],{"class":281},[254,704,284],{"class":260},[254,706,288],{"class":287},[254,708,709],{"class":260},"FluentIconArrowSync20Regular",[254,711,288],{"class":287},[254,713,714],{"class":281}," aria-label",[254,716,284],{"class":260},[254,718,719],{"class":287},"\"Refresh required\"",[254,721,268],{"class":260},[254,723,724,726,728,730,732,735,737,739,741,743,746,748],{"class":256,"line":271},[254,725,261],{"class":260},[254,727,265],{"class":264},[254,729,306],{"class":281},[254,731,284],{"class":260},[254,733,734],{"class":287},"\"critical\"",[254,736,278],{"class":260},[254,738,144],{"class":281},[254,740,284],{"class":260},[254,742,288],{"class":287},[254,744,745],{"class":260},"FluentIconImportant16Filled",[254,747,288],{"class":287},[254,749,268],{"class":260},[132,751,752],{"id":752},"动态数值",[14,754,755,757,758,761,762,765,766,768,769,26],{},[31,756,140],{}," 是响应式的：",[31,759,760],{},">= 0"," 显示数字，",[31,763,764],{},"\u003C 0"," 回到圆点形态（WinUI 的 ",[31,767,190],{}," 缺省就是 ",[31,770,771],{},"-1",[233,773,775,780],{"title":774},"NumberBox 驱动 InfoBadge.Value（对齐 Gallery 示例 4）",[237,776,777],{"v-slot:preview":239},[778,779],"info-badge-dynamic-demo",{},[237,781,782],{"v-slot:code":239},[246,783,785],{"className":248,"code":784,"language":250,"meta":239,"style":239},"\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,786,787,818,825,839,849,868,879],{"__ignoreMap":239},[254,788,789,791,793,795,797,799,801,804,808,811,814,816],{"class":256,"line":257},[254,790,261],{"class":260},[254,792,265],{"class":264},[254,794,278],{"class":260},[254,796,140],{"class":281},[254,798,284],{"class":260},[254,800,288],{"class":287},[254,802,803],{"class":260},"value ",[254,805,807],{"class":806},"szBVR","??",[254,809,810],{"class":806}," -",[254,812,813],{"class":291},"1",[254,815,288],{"class":287},[254,817,268],{"class":260},[254,819,820,822],{"class":256,"line":271},[254,821,261],{"class":260},[254,823,824],{"class":264},"FluereNumberBox\n",[254,826,827,830,832,834,836],{"class":256,"line":299},[254,828,829],{"class":281},"  v-model",[254,831,284],{"class":260},[254,833,288],{"class":287},[254,835,140],{"class":260},[254,837,838],{"class":287},"\"\n",[254,840,841,844,846],{"class":256,"line":319},[254,842,843],{"class":281},"  header",[254,845,284],{"class":260},[254,847,848],{"class":287},"\"InfoBadge Value\"\n",[254,850,851,854,857,859,861,864,866],{"class":256,"line":666},[254,852,853],{"class":260},"  :",[254,855,856],{"class":281},"min",[254,858,284],{"class":260},[254,860,288],{"class":287},[254,862,863],{"class":806},"-",[254,865,813],{"class":291},[254,867,838],{"class":287},[254,869,871,874,876],{"class":256,"line":870},6,[254,872,873],{"class":281},"  spin-button-placement-mode",[254,875,284],{"class":260},[254,877,878],{"class":287},"\"inline\"\n",[254,880,882],{"class":256,"line":881},7,[254,883,884],{"class":260},"\u002F>\n",[132,886,888],{"id":887},"api","API",[154,890,891,907],{},[157,892,893],{},[160,894,895,898,901,904],{},[163,896,897],{},"属性（Props）",[163,899,900],{},"类型",[163,902,903],{},"默认",[163,905,906],{},"说明",[172,908,909,938,960,988,1015],{},[160,910,911,915,920,924],{},[177,912,913],{},[31,914,140],{},[177,916,917],{},[31,918,919],{},"number",[177,921,922],{},[31,923,771],{},[177,925,926,927,930,931,761,933,935,936],{},"徽章数值（",[31,928,929],{},"Int32","）；",[31,932,760],{},[31,934,764],{}," 回落到图标 \u002F 圆点；对齐 WinUI ",[31,937,190],{},[160,939,940,944,949,954],{},[177,941,942],{},[31,943,347],{},[177,945,946],{},[31,947,948],{},"'accent' | 'attention' | 'informational' | 'success' | 'caution' | 'critical'",[177,950,951],{},[31,952,953],{},"'accent'",[177,955,956,957],{},"背景预设；对齐六套 ",[31,958,959],{},"*InfoBadgeStyle",[160,961,962,966,971,976],{},[177,963,964],{},[31,965,144],{},[177,967,968],{},[31,969,970],{},"boolean | Component | null",[177,972,973],{},[31,974,975],{},"—",[177,977,978,979,982,983,985,986],{},"图标；",[31,980,981],{},"true"," 取 ",[31,984,347],{}," 的内建字形，也可直接传图标组件；对齐 WinUI ",[31,987,96],{},[160,989,990,995,1000,1004],{},[177,991,992],{},[31,993,994],{},"borderRadius",[177,996,997],{},[31,998,999],{},"string",[177,1001,1002],{},[31,1003,975],{},[177,1005,1006,1007,1010,1011,1014],{},"圆角；不传时对齐 ",[31,1008,1009],{},"OnSizeChanged"," 的 ",[31,1012,1013],{},"ActualHeight \u002F 2","（全圆角）",[160,1016,1017,1022,1026,1030],{},[177,1018,1019],{},[31,1020,1021],{},"label",[177,1023,1024],{},[31,1025,999],{},[177,1027,1028],{},[31,1029,975],{},[177,1031,1032,1033,1036],{},"可访问名；不传则整个徽章 ",[31,1034,1035],{},"aria-hidden","（对齐「InfoBadge 没有 AutomationPeer」）",[154,1038,1039,1048],{},[157,1040,1041],{},[160,1042,1043,1046],{},[163,1044,1045],{},"插槽（Slots）",[163,1047,906],{},[172,1049,1050],{},[160,1051,1052,1056],{},[177,1053,1054],{},[31,1055,144],{},[177,1057,1058,1059,1061,1062,1064],{},"对应 WinUI ",[31,1060,96],{},"；提供后进入 Icon 形态，并覆盖 ",[31,1063,144],{}," Prop 与内建字形",[1066,1067,1068,1102,1107],"blockquote",{},[14,1069,1070,1073,1074,149,1080,1083,1084,1086,1087,1090,1091,1093,1094,1097,1098,1101],{},[18,1071,1072],{},"无障碍","：WinUI 的 InfoBadge ",[18,1075,1076,1077],{},"没有 ",[31,1078,1079],{},"AutomationPeer",[31,1081,1082],{},"Control.OnCreateAutomationPeer"," 未重写，UIA 树里不出现），Gallery 因此把可访问名挂在父级 ",[31,1085,621],{}," 上。本组件缺省渲染 ",[31,1088,1089],{},"aria-hidden=\"true\"","、不抢 Tab 序、不拦截指针；只有显式传入 ",[31,1092,1021],{}," 时才渲染 ",[31,1095,1096],{},"role=\"img\""," + ",[31,1099,1100],{},"aria-label","（独立使用场景）。组件不硬编码任何自然语言。",[14,1103,1104],{},[18,1105,1106],{},"实现要点",[52,1108,1109,1145,1188,1211,1239,1260,1530,1878,1917,1937],{},[55,1110,1111,85,1118,1120,1121,1123,1124,1126,1127,1123,1130,64,1132,1126,1134,1136,1137,1140,1141,1144],{},[18,1112,1113,1114,1117],{},"形态是实时推导的，不是一个 ",[31,1115,1116],{},"variant"," 枚举",[31,1119,148],{}," 里 ",[31,1122,88],{}," → ",[31,1125,190],{}," 态，否则 ",[31,1128,1129],{},"IconSource != null",[31,1131,215],{},[31,1133,212],{},[31,1135,230],{}," 态。本组件的 ",[31,1138,1139],{},"displayKind"," computed 与之逐字对应（含「Value 优先于 Icon」），并通过 ",[31,1142,1143],{},"data-display-kind"," 暴露出来，便于样式与测试断言。",[55,1146,1147,1150,1151,1154,1155,1158,1159,1162,1163,149,1166,1169,1170,149,1172,1162,1175,149,1177,1180,1181,1183,1184,1187],{},[18,1148,1149],{},"两种图标形态在几何上等价","：模板里 FontIcon 态用 ",[31,1152,1153],{},"InfoBadgePadding","（被 ",[31,1156,1157],{},"*IconInfoBadgeStyle"," 覆盖为 ",[31,1160,1161],{},"0,4,0,2","）+ ",[31,1164,1165],{},"IconInfoBadgeFontIconMargin",[31,1167,1168],{},"4,0,4,2","），Icon 态用 ",[31,1171,1153],{},[31,1173,1174],{},"0",[31,1176,373],{},[31,1178,1179],{},"4,4,4,4","）——两者都得到「上下 4 + 4、左右 4 + 4」与 8px 的 ",[31,1182,118],{}," 高度，所以本库统一用「8px 图标框 + 4px 外边距」一份规则表达，不再需要 ",[31,1185,1186],{},"padding"," Prop。",[55,1189,1190,1196,1197,1199,1200,1203,1204,1206,1207,1210],{},[18,1191,1192,1195],{},[31,1193,1194],{},"MeasureOverride"," 的正方形规则用 CSS 表达","：Value \u002F Icon 两态的最终高都被 ",[31,1198,71],{}," 夹到 16，因此「宽 \u003C 高则取正方形」等价于这两态各加一条 ",[31,1201,1202],{},"min-inline-size: 16px","；Dot 态的高就是 ",[31,1205,67],{},"（4，与 ",[31,1208,1209],{},"MinWidth"," 相等），不受影响。",[55,1212,1213,1220,1221,1224,1225,1227,1228,1231,1232,1235,1236,1238],{},[18,1214,1215,1216,1219],{},"数值行高锁定为 ",[31,1217,1218],{},"lineHeightBase100","（14px）","：14 + ",[31,1222,1223],{},"ValueInfoBadgeTextMargin"," 的下外边距 2 = 16 = ",[31,1226,71],{},"，与 WinUI 里 ",[31,1229,1230],{},"TextBlock"," 的自然行高（≈14.67px）被 ",[31,1233,1234],{},"MaxHeight"," 夹到 16 的结果一致，且不随 Web 字体度量漂移；",[31,1237,1168],{}," 这个上下不对称的外边距造成的「文字视觉中心比徽章中心高 1px」也一并保留。",[55,1240,1241,1248,1249,1252,1253,1256,1257,1259],{},[18,1242,1243,64,1245,1247],{},[31,1244,122],{},[31,1246,125],{}," 不落地","：这两个资源（12 \u002F 8，Light 与 HC 主题下是 12 \u002F 9）在 ",[31,1250,1251],{},"InfoBadge.xaml"," 的模板里",[18,1254,1255],{},"没有被引用","，图标实际尺寸由 ",[31,1258,118],{}," 撑满可用高决定 —— 死资源不写进代码，避免下次照着它去“还原”。",[55,1261,1262,85,1265,1268,1269,1272,1273,1276,1277,64,1280,64,1283,64,1286,1289,1290,1010,1292,1294,1295,1298,1299,1302,1303,1306,1307,1455,1458,1461,1462,64,1464,1466,1467,141,1469,1471,1472,1474,1475,1477,1478],{},[18,1263,1264],{},"五档底色与 InfoBar 共用一套映射",[31,1266,1267],{},"SystemFillColor{Attention,Success,Caution,Critical}Brush"," 与 InfoBar 的 ",[31,1270,1271],{},"InfoBar*SeverityIconBackground"," 是",[18,1274,1275],{},"同一批资源","，故沿用 ",[31,1278,1279],{},"colorCompoundBrandBackground",[31,1281,1282],{},"colorStatusSuccessForeground3",[31,1284,1285],{},"colorPaletteYellowForeground1",[31,1287,1288],{},"colorStatusDangerForeground3","；",[31,1291,434],{},[31,1293,444],{}," 在 Fluent 2 Web 里没有同值项，按 ",[31,1296,1297],{},"max(亮色 ΔE, 暗色 ΔE)"," 最小取 ",[31,1300,1301],{},"colorNeutralForeground4","（CIE ΔE76，脚本 ",[31,1304,1305],{},"temp\u002Fpw-infobadge.mjs"," 会实测复核）：",[154,1308,1309,1325],{},[157,1310,1311],{},[160,1312,1313,1316,1319,1322],{},[163,1314,1315],{},"Severity",[163,1317,1318],{},"WinUI 原值（Light \u002F Dark）",[163,1320,1321],{},"本库 token",[163,1323,1324],{},"ΔE（Light \u002F Dark）",[172,1326,1327,1341,1358,1377,1396,1415,1434],{},[160,1328,1329,1331,1334,1338],{},[177,1330,399],{},[177,1332,1333],{},"系统强调色",[177,1335,1336],{},[31,1337,1279],{},[177,1339,1340],{},"—（见下）",[160,1342,1343,1345,1352,1356],{},[177,1344,417],{},[177,1346,1347,1348,1351],{},"系统强调色（",[31,1349,1350],{},"…ColorLight2","）",[177,1353,1354],{},[31,1355,1279],{},[177,1357,1340],{},[160,1359,1360,1362,1370,1374],{},[177,1361,434],{},[177,1363,1364,64,1367],{},[31,1365,1366],{},"#8A8A8A",[31,1368,1369],{},"#9D9D9D",[177,1371,1372],{},[31,1373,1301],{},[177,1375,1376],{},"10.2 \u002F 1.5",[160,1378,1379,1381,1389,1393],{},[177,1380,451],{},[177,1382,1383,64,1386],{},[31,1384,1385],{},"#0F7B0F",[31,1387,1388],{},"#6CCB5F",[177,1390,1391],{},[31,1392,1282],{},[177,1394,1395],{},"0.4 \u002F 30.8",[160,1397,1398,1400,1408,1412],{},[177,1399,468],{},[177,1401,1402,64,1405],{},[31,1403,1404],{},"#9D5D00",[31,1406,1407],{},"#FCE100",[177,1409,1410],{},[31,1411,1285],{},[177,1413,1414],{},"26.5 \u002F 23.0",[160,1416,1417,1419,1427,1431],{},[177,1418,485],{},[177,1420,1421,64,1424],{},[31,1422,1423],{},"#C42B1C",[31,1425,1426],{},"#FF99A4",[177,1428,1429],{},[31,1430,1288],{},[177,1432,1433],{},"7.3 \u002F 15.2",[160,1435,1436,1439,1447,1452],{},[177,1437,1438],{},"前景",[177,1440,1441,64,1444],{},[31,1442,1443],{},"#FFFFFF",[31,1445,1446],{},"#000000",[177,1448,1449],{},[31,1450,1451],{},"colorNeutralForegroundInverted2",[177,1453,1454],{},"0.0 \u002F 14.2",[1456,1457],"br",{},[18,1459,1460],{},"强调色不在仓库里","（style-spec §2 的例外条款）：",[31,1463,410],{},[31,1465,427],{}," 都由系统强调色在运行时注入，实机与截图的蓝可能是用户的自定义色，故两者都取 Fluent 默认强调色 token，",[31,1468,399],{},[31,1470,417],{}," 在 Web 上同色 —— 语义差异体现在内建字形上。",[31,1473,451],{}," 的暗色一档 ΔE 偏大（30.8），这是与 InfoBar 保持同一映射的代价；需要严格对齐实机时用下面的局部变量覆盖。",[1456,1476],{},"六档底色与前景都留了覆盖口子（同 InfoBar 口径）：",[246,1479,1483],{"className":1480,"code":1481,"language":1482,"meta":239,"style":239},"language-css shiki shiki-themes github-light github-dark",".my-badge {\n  --fui-info-badge-bg: #dff6dd; \u002F* 例如 SystemFillColorSuccess 原值 *\u002F\n  --fui-info-badge-fg: #ffffff;\n}\n","css",[31,1484,1485,1493,1512,1525],{"__ignoreMap":239},[254,1486,1487,1490],{"class":256,"line":257},[254,1488,1489],{"class":281},".my-badge",[254,1491,1492],{"class":260}," {\n",[254,1494,1495,1499,1502,1505,1508],{"class":256,"line":271},[254,1496,1498],{"class":1497},"s4XuR","  --fui-info-badge-bg",[254,1500,1501],{"class":260},": ",[254,1503,1504],{"class":291},"#dff6dd",[254,1506,1507],{"class":260},"; ",[254,1509,1511],{"class":1510},"sJ8bj","\u002F* 例如 SystemFillColorSuccess 原值 *\u002F\n",[254,1513,1514,1517,1519,1522],{"class":256,"line":299},[254,1515,1516],{"class":1497},"  --fui-info-badge-fg",[254,1518,1501],{"class":260},[254,1520,1521],{"class":291},"#ffffff",[254,1523,1524],{"class":260},";\n",[254,1526,1527],{"class":256,"line":319},[254,1528,1529],{"class":260},"}\n",[55,1531,1532,1535,1536,1539,1540,1542,1543,1546,1547,1550,1551,1554,1555,1558,1559,1562,1563,1565,1566,1569,1570,1701,1703,1704,1709,1710,26,1713,1716,1717,1720,1721,1723,1724,1726,1727,1729,1730,1732,1733,1735,149,1738,1740,1741,1743,1744,1747,1748,1751,1752,1845,1847,1848,1851,1852,1855,1856,1859,1860,1862,1863,1865,1866,1868,1869,1871,1872,1874,1875,1877],{},[18,1533,1534],{},"五档内建字形都是「裸字形」，且是照图形挑的","：把官方 Segoe Fluent Icons 字体按真实尺寸（16px 圆底 + 8px 字形框）渲染出来比对（脚本 ",[31,1537,1538],{},"temp\u002Finfobadge-visual\u002Fglyph-badge-compare.mjs","）可以确认，",[31,1541,1157],{}," 预置的五个字形",[18,1544,1545],{},"都不带圆底","——圆底由徽章本体提供。这一点很关键：InfoBar 用的是 ",[31,1548,1549],{},"F136","（实心圆）+ ",[31,1552,1553],{},"F13F","（i）",[18,1556,1557],{},"两个字形叠加","，而 ",[31,1560,1561],{},"InformationalIconInfoBadgeStyle"," 只给了 ",[31,1564,1553],{}," 一个字形，",[18,1567,1568],{},"不能照搬 InfoBar 的圆形图标","。",[154,1571,1572,1589],{},[157,1573,1574],{},[160,1575,1576,1578,1583,1586],{},[163,1577,1315],{},[163,1579,1580,1581],{},"WinUI ",[31,1582,96],{},[163,1584,1585],{},"Segoe 字形",[163,1587,1588],{},"本库图标",[172,1590,1591,1613,1635,1657,1679],{},[160,1592,1593,1597,1602,1608],{},[177,1594,1595],{},[31,1596,417],{},[177,1598,1599],{},[31,1600,1601],{},"FontIconSource Glyph=",[177,1603,1604,1607],{},[31,1605,1606],{},"Asterisk","（8 芒星号）",[177,1609,1610],{},[31,1611,1612],{},"text_asterisk_16_filled",[160,1614,1615,1619,1624,1630],{},[177,1616,1617],{},[31,1618,434],{},[177,1620,1621],{},[31,1622,1623],{},"FontIconSource Glyph=",[177,1625,1626,1627],{},"裸 ",[31,1628,1629],{},"i",[177,1631,1632],{},[31,1633,1634],{},"info_16_regular",[160,1636,1637,1641,1646,1652],{},[177,1638,1639],{},[31,1640,451],{},[177,1642,1643],{},[31,1644,1645],{},"SymbolIconSource Symbol=Accept",[177,1647,1648,1651],{},[31,1649,1650],{},"E8FB"," 裸对勾",[177,1653,1654],{},[31,1655,1656],{},"checkmark_16_filled",[160,1658,1659,1663,1668,1674],{},[177,1660,1661],{},[31,1662,468],{},[177,1664,1665],{},[31,1666,1667],{},"SymbolIconSource Symbol=Important",[177,1669,1670,1673],{},[31,1671,1672],{},"E171"," 裸感叹号",[177,1675,1676],{},[31,1677,1678],{},"important_16_filled",[160,1680,1681,1685,1690,1696],{},[177,1682,1683],{},[31,1684,485],{},[177,1686,1687],{},[31,1688,1689],{},"SymbolIconSource Symbol=Cancel",[177,1691,1692,1695],{},[31,1693,1694],{},"E711"," 裸叉",[177,1697,1698],{},[31,1699,1700],{},"dismiss_16_filled",[1456,1702],{},"已知偏差：Fluent System Icons ",[18,1705,1706,1707],{},"没有裸字形 ",[31,1708,1629],{},"（已对 16px filled 全量 1,729 个图标做「窄高包围盒 + 恰好两个连通块 + 上块更小」的自动扫描，短名单为空，见 ",[31,1711,1712],{},"temp\u002Finfobadge-visual\u002Ffind-bare-i.mjs",[31,1714,1715],{},"info_16_filled"," 是「实心圆 + 镂空 i」，直接放上去会得到",[18,1718,1719],{},"白圆盘 + 徽章色 i","（前景 \u002F 底色关系与 WinUI 相反，实测墨迹覆盖率 78% vs 本库 22%）；",[31,1722,1634],{}," 是同一份 ",[31,1725,1629],{},"（子路径与 filled 的镂空 i 几何完全相同）外面多一圈 1 单位宽的白环，",[31,1728,1629],{}," 仍是白色前景 —— 只多一处细环的偏差，故选 regular。需要完全一致时用 ",[31,1731,202],{}," 插槽换成自绘字形。",[1456,1734],{},[18,1736,1737],{},"墨迹尺寸实测",[31,1739,1305],{}," 第 3 节）：WinUI 侧用官方 Segoe Fluent Icons 字体量出字形墨迹与线盒，按「",[31,1742,118],{}," 把",[18,1745,1746],{},"线盒","（= 1em）缩放到 8px 图标框」换算成 1x 尺寸（脚本 ",[31,1749,1750],{},"temp\u002Finfobadge-visual\u002Fmeasure-segoe-ink.mjs","）；本库侧从 1:1 元素截图统计与底色有差异的像素外接框。",[154,1753,1754,1769],{},[157,1755,1756],{},[160,1757,1758,1760,1763,1766],{},[163,1759,1315],{},[163,1761,1762],{},"本库图标墨迹（1x）",[163,1764,1765],{},"WinUI 1x 墨迹",[163,1767,1768],{},"Δ",[172,1770,1771,1786,1801,1816,1830],{},[160,1772,1773,1777,1780,1783],{},[177,1774,1775],{},[31,1776,417],{},[177,1778,1779],{},"6×6",[177,1781,1782],{},"7.0×7.0",[177,1784,1785],{},"−1.0",[160,1787,1788,1792,1795,1798],{},[177,1789,1790],{},[31,1791,451],{},[177,1793,1794],{},"6×5",[177,1796,1797],{},"8.0×5.5",[177,1799,1800],{},"−2.0 \u002F −0.5",[160,1802,1803,1807,1810,1813],{},[177,1804,1805],{},[31,1806,468],{},[177,1808,1809],{},"2×6",[177,1811,1812],{},"3.0×8.0",[177,1814,1815],{},"−1.0 \u002F −2.0",[160,1817,1818,1822,1824,1827],{},[177,1819,1820],{},[31,1821,485],{},[177,1823,1779],{},[177,1825,1826],{},"5.5×5.5",[177,1828,1829],{},"+0.5",[160,1831,1832,1836,1839,1842],{},[177,1833,1834],{},[31,1835,434],{},[177,1837,1838],{},"8×8（细环 + i）",[177,1840,1841],{},"0.8×3.3（裸 i）",[177,1843,1844],{},"结构性偏差",[1456,1846],{},"前四档差 1–2px，来源是两套图标集的",[18,1849,1850],{},"设计留白","不同：Fluent System Icons 的 16px 字形墨迹约占外框 12\u002F16，Segoe 的符号字形几乎填满 em 框；",[18,1853,1854],{},"图标框的映射本身是对的","（Fluent 的 ",[31,1857,1858],{},"viewBox"," ↔ Segoe 的 em 框，二者都由 ",[31,1861,118],{}," 缩放）。",[31,1864,434],{}," 那一行是上面说的结构性偏差 —— WinUI 的 ",[31,1867,1553],{}," 是一根 0.8px 宽的细 ",[31,1870,1629],{},"（1x 下几乎不可见），本库在官方图标集里找不到裸 ",[31,1873,1629],{},"，退而取「细环 + ",[31,1876,1629],{},"」。",[55,1879,1880,1883,1884,1887,1888,1891,1892,1895,1896,1899,1900,1887,1903,1905,1906,1909,1910,1912,1913,1916],{},[18,1881,1882],{},"参考图交叉验证","（C 级证据，只比尺度无关的量）：Gallery 截图里强调色徽章高度均为 ",[18,1885,1886],{},"16px","、",[31,1889,1890],{},"Different InfoBadge Styles"," 一行为 ",[18,1893,1894],{},"16×16（Icon）\u002F 19×16（Value「10」）\u002F 4×16（Dot）","、NavigationView 里「5」那枚数值徽章是 ",[18,1897,1898],{},"16×16 正圆"," —— 与 ",[31,1901,1902],{},"InfoBadgeMaxHeight=16",[31,1904,1194],{}," 的正方形规则、",[31,1907,1908],{},"InfoBadgeMinWidth\u002FHeight=4"," 逐项吻合（见 ",[31,1911,1305],{}," 第 4 节与 ",[31,1914,1915],{},"temp\u002Fvisual-infobadge\u002F"," 下的截图）。唯一差异是 Value 胶囊比实机宽约 3px（宽高比 1.38 vs 1.19），来自 Web 字体度量（Segoe UI vs Segoe UI Variable）。",[55,1918,1919,1922,1923,1926,1927,930,1930,1933,1934,1569],{},[18,1920,1921],{},"已知缺口","：高对比度主题未实现（WinUI HC 下底色 ",[31,1924,1925],{},"SystemControlHighlightAccentBrush","、前景 ",[31,1928,1929],{},"SystemControlHighlightAltChromeWhiteBrush",[31,1931,1932],{},"InfoBadgeIconWidth \u002F Height"," 两个死资源不落地。组件没有任何 Storyboard \u002F VisualTransition，因此不涉及动效与 ",[31,1935,1936],{},"prefers-reduced-motion",[55,1938,1939,85,1942,1945,1946,1949,1950,1952,1953,1123,1955,1957,1958,1960,1961,1964],{},[18,1940,1941],{},"与 WinUI 的 API 差异",[31,1943,1944],{},"Value \u003C -1"," 时 WinUI 抛 ",[31,1947,1948],{},"hresult_out_of_bounds","，本库按 ",[31,1951,764],{}," 处理（回落到 Dot），渲染期不抛异常；",[31,1954,96],{},[31,1956,144],{}," Prop \u002F ",[31,1959,202],{}," 插槽；",[31,1962,1963],{},"TemplateSettings"," 不对外暴露。",[1966,1967,1968],"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":239,"searchDepth":271,"depth":271,"links":1970},[1971,1972,1973,1974,1975],{"id":134,"depth":271,"text":135},{"id":341,"depth":271,"text":342},{"id":588,"depth":271,"text":589},{"id":752,"depth":271,"text":752},{"id":887,"depth":271,"text":888},"非打断式的小徽章：圆点 \u002F 数值 \u002F 图标三态，五档 Severity 底色，几何与配色还原 WinUI 3 InfoBadge。","md",{},{"title":5},true,"\u002Fcomponents\u002Finfo-badge",{"title":5,"description":1976},"components\u002Finfo-badge","zg_qvJsHLC2HjWBjUGGmAhghSXwdJEpcZYCQfjVvhlE",null,1791802960879]