[{"data":1,"prerenderedAt":1140},["ShallowReactive",2],{"content-\u002Fcomponents\u002Ftoggle-button":3,"content-en-fallback-\u002Fcomponents\u002Ftoggle-button":1139},{"id":4,"title":5,"body":6,"description":1130,"extension":1131,"meta":1132,"nav":1133,"navigation":1134,"path":1135,"seo":1136,"stem":1137,"__hash__":1138},"content\u002Fcomponents\u002Ftoggle-button.md","Toggle Button 切换按钮",{"type":7,"value":8,"toc":1120},"minimark",[9,13,31,35,49,141,145,178,224,228,239,445,448,515,518,772,776,782,1009,1083,1116],[10,11,5],"h1",{"id":12},"toggle-button-切换按钮",[14,15,16,17,21,22,25,26,30],"p",{},"切换按钮在「未选中 \u002F 选中 \u002F 不确定」之间切换。与 Checkbox 的区别是它",[18,19,20],"strong",{},"本身就是一个按钮","——点击在位即切换，不额外画勾选框字形；与 Button 的区别是切换后",[18,23,24],{},"保持选中态","（铺满强调色）。样式还原 WinUI 3（Windows App SDK）的 ",[27,28,29],"code",{},"ToggleButton","。",[32,33,34],"h2",{"id":34},"基础用法",[14,36,37,40,41,44,45,48],{},[27,38,39],{},"v-model:checked"," 双向绑定布尔值。这是",[18,42,43],{},"受控","组件：点击只抛 ",[27,46,47],{},"update:checked","，是否改状态由消费方决定。",[50,51,52,59],"demo-block",{"title":34},[53,54,56],"template",{"v-slot:preview":55},"",[57,58],"toggle-button-basic-demo",{},[53,60,61],{"v-slot:code":55},[62,63,67],"pre",{"className":64,"code":65,"language":66,"meta":55,"style":55},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereToggleButton v-model:checked=\"bold\">加粗\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"italic\">倾斜\u003C\u002FFluereToggleButton>\n","vue",[27,68,69,112],{"__ignoreMap":55},[70,71,74,78,82,86,89,92,95,99,102,104,107,109],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"sVt8B","\u003C",[70,79,81],{"class":80},"s9eBZ","FluereToggleButton",[70,83,85],{"class":84},"sScJk"," v-model",[70,87,88],{"class":76},":",[70,90,91],{"class":84},"checked",[70,93,94],{"class":76},"=",[70,96,98],{"class":97},"sZZnC","\"",[70,100,101],{"class":76},"bold",[70,103,98],{"class":97},[70,105,106],{"class":76},">加粗\u003C\u002F",[70,108,81],{"class":80},[70,110,111],{"class":76},">\n",[70,113,115,117,119,121,123,125,127,129,132,134,137,139],{"class":72,"line":114},2,[70,116,77],{"class":76},[70,118,81],{"class":80},[70,120,85],{"class":84},[70,122,88],{"class":76},[70,124,91],{"class":84},[70,126,94],{"class":76},[70,128,98],{"class":97},[70,130,131],{"class":76},"italic",[70,133,98],{"class":97},[70,135,136],{"class":76},">倾斜\u003C\u002F",[70,138,81],{"class":80},[70,140,111],{"class":76},[32,142,144],{"id":143},"三态不确定","三态（不确定）",[14,146,147,149,150,153,154,157,158,161,162,165,166,169,170,173,174,177],{},[27,148,91],{}," 支持 ",[27,151,152],{},"null","（对应 WinUI ",[27,155,156],{},"IsChecked"," 的 ",[27,159,160],{},"bool?","）。开启 ",[27,163,164],{},"three-state"," 后点击循环 ",[27,167,168],{},"false → true → null → false","；不确定态的可访问名是 ",[27,171,172],{},"aria-pressed=\"mixed\"","（不是 ",[27,175,176],{},"aria-checked","）。",[50,179,181,186],{"title":180},"三态开关",[53,182,183],{"v-slot:preview":55},[184,185],"toggle-button-three-state-demo",{},[53,187,188],{"v-slot:code":55},[62,189,191],{"className":64,"code":190,"language":66,"meta":55,"style":55},"\u003CFluereToggleButton v-model:checked=\"value\" three-state>三态开关\u003C\u002FFluereToggleButton>\n",[27,192,193],{"__ignoreMap":55},[70,194,195,197,199,201,203,205,207,209,212,214,217,220,222],{"class":72,"line":73},[70,196,77],{"class":76},[70,198,81],{"class":80},[70,200,85],{"class":84},[70,202,88],{"class":76},[70,204,91],{"class":84},[70,206,94],{"class":76},[70,208,98],{"class":97},[70,210,211],{"class":76},"value",[70,213,98],{"class":97},[70,215,216],{"class":84}," three-state",[70,218,219],{"class":76},">三态开关\u003C\u002F",[70,221,81],{"class":80},[70,223,111],{"class":76},[32,225,227],{"id":226},"尺寸-禁用-纯图标","尺寸 \u002F 禁用 \u002F 纯图标",[14,229,230,231,234,235,238],{},"三档尺寸与 Button 同档（Fluent 高度 24 \u002F 32 \u002F 40）。「选中且禁用」用 WinUI 的强调禁用档（带 alpha 的强调色）。纯图标形态用 ",[27,232,233],{},"icon-only"," + ",[27,236,237],{},"label"," 提供可访问名。",[50,240,242,247],{"title":241},"尺寸与状态一览",[53,243,244],{"v-slot:preview":55},[245,246],"toggle-button-states-demo",{},[53,248,249],{"v-slot:code":55},[62,250,252],{"className":64,"code":251,"language":66,"meta":55,"style":55},"\u003CFluereToggleButton v-model:checked=\"small\" size=\"small\">小\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"medium\" size=\"medium\">中\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"large\" size=\"large\">大\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton disabled>禁用\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"on\" disabled>禁用（已选中）\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton icon-only :icon=\"FluentIconCheckmark24Regular\" label=\"已选中\" \u002F>\n",[27,253,254,290,325,361,378,409],{"__ignoreMap":55},[70,255,256,258,260,262,264,266,268,270,273,275,278,280,283,286,288],{"class":72,"line":73},[70,257,77],{"class":76},[70,259,81],{"class":80},[70,261,85],{"class":84},[70,263,88],{"class":76},[70,265,91],{"class":84},[70,267,94],{"class":76},[70,269,98],{"class":97},[70,271,272],{"class":76},"small",[70,274,98],{"class":97},[70,276,277],{"class":84}," size",[70,279,94],{"class":76},[70,281,282],{"class":97},"\"small\"",[70,284,285],{"class":76},">小\u003C\u002F",[70,287,81],{"class":80},[70,289,111],{"class":76},[70,291,292,294,296,298,300,302,304,306,309,311,313,315,318,321,323],{"class":72,"line":114},[70,293,77],{"class":76},[70,295,81],{"class":80},[70,297,85],{"class":84},[70,299,88],{"class":76},[70,301,91],{"class":84},[70,303,94],{"class":76},[70,305,98],{"class":97},[70,307,308],{"class":76},"medium",[70,310,98],{"class":97},[70,312,277],{"class":84},[70,314,94],{"class":76},[70,316,317],{"class":97},"\"medium\"",[70,319,320],{"class":76},">中\u003C\u002F",[70,322,81],{"class":80},[70,324,111],{"class":76},[70,326,328,330,332,334,336,338,340,342,345,347,349,351,354,357,359],{"class":72,"line":327},3,[70,329,77],{"class":76},[70,331,81],{"class":80},[70,333,85],{"class":84},[70,335,88],{"class":76},[70,337,91],{"class":84},[70,339,94],{"class":76},[70,341,98],{"class":97},[70,343,344],{"class":76},"large",[70,346,98],{"class":97},[70,348,277],{"class":84},[70,350,94],{"class":76},[70,352,353],{"class":97},"\"large\"",[70,355,356],{"class":76},">大\u003C\u002F",[70,358,81],{"class":80},[70,360,111],{"class":76},[70,362,364,366,368,371,374,376],{"class":72,"line":363},4,[70,365,77],{"class":76},[70,367,81],{"class":80},[70,369,370],{"class":84}," disabled",[70,372,373],{"class":76},">禁用\u003C\u002F",[70,375,81],{"class":80},[70,377,111],{"class":76},[70,379,381,383,385,387,389,391,393,395,398,400,402,405,407],{"class":72,"line":380},5,[70,382,77],{"class":76},[70,384,81],{"class":80},[70,386,85],{"class":84},[70,388,88],{"class":76},[70,390,91],{"class":84},[70,392,94],{"class":76},[70,394,98],{"class":97},[70,396,397],{"class":76},"on",[70,399,98],{"class":97},[70,401,370],{"class":84},[70,403,404],{"class":76},">禁用（已选中）\u003C\u002F",[70,406,81],{"class":80},[70,408,111],{"class":76},[70,410,412,414,416,419,422,425,427,429,432,434,437,439,442],{"class":72,"line":411},6,[70,413,77],{"class":76},[70,415,81],{"class":80},[70,417,418],{"class":84}," icon-only",[70,420,421],{"class":76}," :",[70,423,424],{"class":84},"icon",[70,426,94],{"class":76},[70,428,98],{"class":97},[70,430,431],{"class":76},"FluentIconCheckmark24Regular",[70,433,98],{"class":97},[70,435,436],{"class":84}," label",[70,438,94],{"class":76},[70,440,441],{"class":97},"\"已选中\"",[70,443,444],{"class":76}," \u002F>\n",[32,446,447],{"id":447},"规格来源",[449,450,451,464],"table",{},[452,453,454],"thead",{},[455,456,457,461],"tr",{},[458,459,460],"th",{},"项",[458,462,463],{},"值",[465,466,467,487,505],"tbody",{},[455,468,469,473],{},[470,471,472],"td",{},"控件",[470,474,475,476,478,479,482,483,486],{},"WinUI 3 ",[27,477,29],{},"（",[27,480,481],{},"ButtonBase"," 派生，三态来自 ",[27,484,485],{},"IsChecked: bool?","）",[455,488,489,492],{},[470,490,491],{},"tag\u002Fcommit",[470,493,494,497,498,501,502,486],{},[27,495,496],{},"winui3\u002Frelease\u002F2.5.1"," \u002F ",[27,499,500],{},"ba3a8d5","（本地快照 ",[27,503,504],{},"temp\u002Fwinui-src",[455,506,507,510],{},[470,508,509],{},"关键文件",[470,511,512],{},[27,513,514],{},"src\u002Fcontrols\u002Fdev\u002FCommonStyles\u002FToggleButton_themeresources.xaml",[32,516,517],{"id":517},"实现要点",[519,520,521,571,618,658,688,720],"ul",{},[522,523,524,527,528,478,531,497,534,497,537,497,540,543,544,478,547,497,550,497,552,554,555,558,559,562,563,566,567,570],"li",{},[18,525,526],{},"状态表逐条对齐主题资源","：未选中走 ",[27,529,530],{},"ControlFillColor*",[27,532,533],{},"--colorNeutralBackground1",[27,535,536],{},"…Hover",[27,538,539],{},"…Pressed",[27,541,542],{},"…Disabled","）；选中走 ",[27,545,546],{},"AccentFillColor*",[27,548,549],{},"--colorBrandBackground",[27,551,536],{},[27,553,539],{},"）；选中前景 ",[27,556,557],{},"TextOnAccentFillColorPrimaryBrush"," → ",[27,560,561],{},"--colorNeutralForegroundOnBrand","；不确定态的资源组（",[27,564,565],{},"*Indeterminate","）与未选中",[18,568,569],{},"同源","。完整映射表写在组件文件头。",[522,572,573,576,577,497,580,558,583,586,587,590,591,594,595,586,598,590,601,604,605,608,609,586,612,590,615,177],{},[18,574,575],{},"Fluent token 表无同值档的三条","落组件局部变量，值取 WinUI 原值（可一行覆写）：",[27,578,579],{},"AccentFillColorDisabledBrush",[27,581,582],{},"TextOnAccentFillColorDisabledBrush",[27,584,585],{},"--fui-toggle-button-checked-disabled-background","（亮 ",[27,588,589],{},"#37000000"," \u002F 暗 ",[27,592,593],{},"#28FFFFFF","）与 ",[27,596,597],{},"-foreground",[27,599,600],{},"#FFFFFF",[27,602,603],{},"#87FFFFFF","）；",[27,606,607],{},"TextOnAccentFillColorSecondaryBrush","（选中态按下前景）→ ",[27,610,611],{},"--fui-toggle-button-checked-pressed-foreground",[27,613,614],{},"#B3FFFFFF",[27,616,617],{},"#80000000",[522,619,620,623,624,627,628,478,631,634,635,497,638,641,642,645,646,649,650,653,654,657],{},[18,621,622],{},"动效只过渡背景","：模板里的 ",[27,625,626],{},"ContentPresenter.BackgroundTransition = BrushTransition Duration=0:0:0.083"," ⇒ ",[27,629,630],{},"transition: background-color 83ms linear",[27,632,633],{},"BrushTransition"," 公开源码只给时长、没给缓动，按线性处理并注明）；状态切换里的 ",[27,636,637],{},"BorderBrush",[27,639,640],{},"Foreground"," 都是 ",[27,643,644],{},"DiscreteObjectKeyFrame KeyTime=0","，",[18,647,648],{},"瞬切不过渡","。注：本库 ",[27,651,652],{},"FluereButton"," 仍是 150ms + ",[27,655,656],{},"curveEasyEase"," 且三项一起过渡，与 A 级有偏差（既有口径，待统一）。",[522,659,660,663,664,667,668,671,672,675,676,679,680,683,684,687],{},[18,661,662],{},"焦点","走 0.4.3 的共享原语 ",[27,665,666],{},"useFocusVisual","（外 2px ",[27,669,670],{},"--colorStrokeFocus2"," + 内 1px ",[27,673,674],{},"--colorStrokeFocus1","，等价 ",[27,677,678],{},"FocusVisualMargin = -3","）；组件内",[18,681,682],{},"不写"," ",[27,685,686],{},":focus-visible","，否则同特异性会按源码顺序把焦点环吃掉。",[522,689,690,693,694,696,697,497,699,497,702,705,706,478,709,712,713,716,717,177],{},[18,691,692],{},"受控语义","：点击只抛 ",[27,695,47],{},"，并附带 WinUI 同名的 ",[27,698,91],{},[27,700,701],{},"unchecked",[27,703,704],{},"indeterminate"," 事件；三态循环对齐 ",[27,707,708],{},"ToggleButton_Partial.cpp#OnToggleImpl",[27,710,711],{},"Indeterminate → Unchecked","、",[27,714,715],{},"Checked + IsThreeState → Indeterminate","、其余 ",[27,718,719],{},"Checked ⇄ Unchecked",[522,721,722,725,726,604,729,732,733,736,737,740,741,744,745,748,749,752,753,756,757,604,760,763,764,767,768,771],{},[18,723,724],{},"已知缺口","：高对比度未实现（WinUI HC 下这些画刷走 ",[27,727,728],{},"SystemColor*",[27,730,731],{},"AppBarToggleButton"," 的 subtle 外观未做；字重沿用本库 Button 的 ",[27,734,735],{},"--fontWeightMedium","（WinUI 的 ",[27,738,739],{},"Button_themeresources"," 是 ",[27,742,743],{},"FontWeight = Normal","）；按下 \u002F 禁用态的",[18,746,747],{},"描边","未单列档（A 级 pressed 用 ",[27,750,751],{},"ControlStrokeColorDefaultBrush","、库内 Input \u002F ComboBox 对它的口径是 ",[27,754,755],{},"--colorNeutralStrokeAlpha","，本组件仍用 ",[27,758,759],{},"--colorNeutralStroke1",[27,761,762],{},"BackgroundSizing = OuterBorderEdge"," 未显式写 ",[27,765,766],{},"background-clip","（CSS 默认 ",[27,769,770],{},"border-box"," 已等价，实测无视觉差异）。",[32,773,775],{"id":774},"api","API",[777,778,780],"h3",{"id":779},"flueretogglebutton",[27,781,81],{},[449,783,784,800],{},[452,785,786],{},[455,787,788,791,794,797],{},[458,789,790],{},"属性（Props）",[458,792,793],{},"类型",[458,795,796],{},"默认",[458,798,799],{},"对应 \u002F 说明",[465,801,802,827,848,868,892,912,929,949,969,987],{},[455,803,804,808,813,818],{},[470,805,806],{},[27,807,91],{},[470,809,810],{},[27,811,812],{},"boolean | null",[470,814,815],{},[27,816,817],{},"false",[470,819,820,478,822,604,824,826],{},[27,821,156],{},[27,823,39],{},[27,825,152],{}," = 不确定态",[455,828,829,834,839,843],{},[470,830,831],{},[27,832,833],{},"disabled",[470,835,836],{},[27,837,838],{},"boolean",[470,840,841],{},[27,842,817],{},[470,844,845],{},[27,846,847],{},"IsEnabled",[455,849,850,855,860,865],{},[470,851,852],{},[27,853,854],{},"size",[470,856,857],{},[27,858,859],{},"'small' | 'medium' | 'large'",[470,861,862],{},[27,863,864],{},"'medium'",[470,866,867],{},"几何沿用本库 Button：高度 24 \u002F 32 \u002F 40",[455,869,870,875,879,883],{},[470,871,872],{},[27,873,874],{},"threeState",[470,876,877],{},[27,878,838],{},[470,880,881],{},[27,882,817],{},[470,884,885,888,889],{},[27,886,887],{},"IsThreeState","；开启后点击循环 ",[27,890,891],{},"false → true → null",[455,893,894,899,904,909],{},[470,895,896],{},[27,897,898],{},"type",[470,900,901],{},[27,902,903],{},"'button' | 'submit' | 'reset'",[470,905,906],{},[27,907,908],{},"'button'",[470,910,911],{},"原生 button 类型",[455,913,914,918,923,926],{},[470,915,916],{},[27,917,424],{},[470,919,920],{},[27,921,922],{},"Component",[470,924,925],{},"—",[470,927,928],{},"前置图标组件",[455,930,931,936,941,946],{},[470,932,933],{},[27,934,935],{},"iconPosition",[470,937,938],{},[27,939,940],{},"'before' | 'after'",[470,942,943],{},[27,944,945],{},"'before'",[470,947,948],{},"图标在文本前 \u002F 后",[455,950,951,956,960,964],{},[470,952,953],{},[27,954,955],{},"iconOnly",[470,957,958],{},[27,959,838],{},[470,961,962],{},[27,963,817],{},[470,965,966,967],{},"仅图标（等比紧凑），可访问名请用 ",[27,968,237],{},[455,970,971,976,980,984],{},[470,972,973],{},[27,974,975],{},"block",[470,977,978],{},[27,979,838],{},[470,981,982],{},[27,983,817],{},[470,985,986],{},"撑满容器宽度",[455,988,989,993,998,1000],{},[470,990,991],{},[27,992,237],{},[470,994,995],{},[27,996,997],{},"string",[470,999,925],{},[470,1001,1002,1005,1006],{},[27,1003,1004],{},"AutomationProperties.Name"," → 原生 ",[27,1007,1008],{},"aria-label",[449,1010,1011,1023],{},[452,1012,1013],{},[455,1014,1015,1018,1021],{},[458,1016,1017],{},"事件（Emits）",[458,1019,1020],{},"载荷",[458,1022,799],{},[465,1024,1025,1040,1055,1069],{},[455,1026,1027,1031,1035],{},[470,1028,1029],{},[27,1030,47],{},[470,1032,1033],{},[27,1034,812],{},[470,1036,1037,1038,486],{},"受控回写（",[27,1039,39],{},[455,1041,1042,1046,1048],{},[470,1043,1044],{},[27,1045,91],{},[470,1047,925],{},[470,1049,1050,1051,1054],{},"WinUI ",[27,1052,1053],{},"Checked","：进入勾选",[455,1056,1057,1061,1063],{},[470,1058,1059],{},[27,1060,701],{},[470,1062,925],{},[470,1064,1050,1065,1068],{},[27,1066,1067],{},"Unchecked","：取消勾选",[455,1070,1071,1075,1077],{},[470,1072,1073],{},[27,1074,704],{},[470,1076,925],{},[470,1078,1050,1079,1082],{},[27,1080,1081],{},"Indeterminate","：进入不确定态",[449,1084,1085,1095],{},[452,1086,1087],{},[455,1088,1089,1092],{},[458,1090,1091],{},"插槽（Slots）",[458,1093,1094],{},"说明",[465,1096,1097,1107],{},[455,1098,1099,1104],{},[470,1100,1101],{},[27,1102,1103],{},"default",[470,1105,1106],{},"按钮文本",[455,1108,1109,1113],{},[470,1110,1111],{},[27,1112,424],{},[470,1114,1115],{},"替换内建图标",[1117,1118,1119],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":55,"searchDepth":114,"depth":114,"links":1121},[1122,1123,1124,1125,1126,1127],{"id":34,"depth":114,"text":34},{"id":143,"depth":114,"text":144},{"id":226,"depth":114,"text":227},{"id":447,"depth":114,"text":447},{"id":517,"depth":114,"text":517},{"id":774,"depth":114,"text":775,"children":1128},[1129],{"id":779,"depth":327,"text":81},"三态切换按钮，选中时铺强调色，对齐 WinUI ToggleButton。","md",{},{"title":5},true,"\u002Fcomponents\u002Ftoggle-button",{"title":5,"description":1130},"components\u002Ftoggle-button","Cq0ckw5SLrW9FPORMC0AZzndxVvCuphjrG7NyMHv2d4",null,1792150922409]