[{"data":1,"prerenderedAt":2103},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Ftoggle-button":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Ftoggle-button":1141},{"id":4,"title":5,"body":6,"description":1132,"extension":1133,"meta":1134,"nav":1135,"navigation":1136,"path":1137,"seo":1138,"stem":1139,"__hash__":1140},"content_en\u002Fen\u002Fcomponents\u002Ftoggle-button.md","Toggle Button",{"type":7,"value":8,"toc":1122},"minimark",[9,13,31,36,50,142,146,179,225,229,240,446,450,517,521,775,779,785,1014,1085,1118],[10,11,5],"h1",{"id":12},"toggle-button",[14,15,16,17,21,22,25,26,30],"p",{},"A toggle button switches between \"unchecked \u002F checked \u002F indeterminate\". Unlike a Checkbox it ",[18,19,20],"strong",{},"is"," the button — clicking it toggles in place with no separate check glyph; unlike a Button it ",[18,23,24],{},"keeps"," the checked state (filled with the accent color). The look mirrors WinUI 3 (Windows App SDK) ",[27,28,29],"code",{},"ToggleButton",".",[32,33,35],"h2",{"id":34},"basic-usage","Basic usage",[14,37,38,41,42,45,46,49],{},[27,39,40],{},"v-model:checked"," binds a boolean. This is a ",[18,43,44],{},"controlled"," component: clicking only emits ",[27,47,48],{},"update:checked",", and the consumer decides whether the state changes.",[51,52,53,60],"demo-block",{"title":35},[54,55,57],"template",{"v-slot:preview":56},"",[58,59],"toggle-button-basic-demo",{},[54,61,62],{"v-slot:code":56},[63,64,68],"pre",{"className":65,"code":66,"language":67,"meta":56,"style":56},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereToggleButton v-model:checked=\"bold\">Bold\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"italic\">Italic\u003C\u002FFluereToggleButton>\n","vue",[27,69,70,113],{"__ignoreMap":56},[71,72,75,79,83,87,90,93,96,100,103,105,108,110],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sVt8B","\u003C",[71,80,82],{"class":81},"s9eBZ","FluereToggleButton",[71,84,86],{"class":85},"sScJk"," v-model",[71,88,89],{"class":77},":",[71,91,92],{"class":85},"checked",[71,94,95],{"class":77},"=",[71,97,99],{"class":98},"sZZnC","\"",[71,101,102],{"class":77},"bold",[71,104,99],{"class":98},[71,106,107],{"class":77},">Bold\u003C\u002F",[71,109,82],{"class":81},[71,111,112],{"class":77},">\n",[71,114,116,118,120,122,124,126,128,130,133,135,138,140],{"class":73,"line":115},2,[71,117,78],{"class":77},[71,119,82],{"class":81},[71,121,86],{"class":85},[71,123,89],{"class":77},[71,125,92],{"class":85},[71,127,95],{"class":77},[71,129,99],{"class":98},[71,131,132],{"class":77},"italic",[71,134,99],{"class":98},[71,136,137],{"class":77},">Italic\u003C\u002F",[71,139,82],{"class":81},[71,141,112],{"class":77},[32,143,145],{"id":144},"three-state-indeterminate","Three-state (indeterminate)",[14,147,148,150,151,154,155,158,159,162,163,166,167,170,171,174,175,178],{},[27,149,92],{}," accepts ",[27,152,153],{},"null"," (WinUI ",[27,156,157],{},"IsChecked"," is ",[27,160,161],{},"bool?","). With ",[27,164,165],{},"three-state"," a click cycles ",[27,168,169],{},"false → true → null → false","; the indeterminate state exposes ",[27,172,173],{},"aria-pressed=\"mixed\""," (not ",[27,176,177],{},"aria-checked",").",[51,180,182,187],{"title":181},"Three-state toggle",[54,183,184],{"v-slot:preview":56},[185,186],"toggle-button-three-state-demo",{},[54,188,189],{"v-slot:code":56},[63,190,192],{"className":65,"code":191,"language":67,"meta":56,"style":56},"\u003CFluereToggleButton v-model:checked=\"value\" three-state>Three-state toggle\u003C\u002FFluereToggleButton>\n",[27,193,194],{"__ignoreMap":56},[71,195,196,198,200,202,204,206,208,210,213,215,218,221,223],{"class":73,"line":74},[71,197,78],{"class":77},[71,199,82],{"class":81},[71,201,86],{"class":85},[71,203,89],{"class":77},[71,205,92],{"class":85},[71,207,95],{"class":77},[71,209,99],{"class":98},[71,211,212],{"class":77},"value",[71,214,99],{"class":98},[71,216,217],{"class":85}," three-state",[71,219,220],{"class":77},">Three-state toggle\u003C\u002F",[71,222,82],{"class":81},[71,224,112],{"class":77},[32,226,228],{"id":227},"sizes-disabled-icon-only","Sizes \u002F disabled \u002F icon only",[14,230,231,232,235,236,239],{},"The three sizes match Button (Fluent heights 24 \u002F 32 \u002F 40). \"Checked and disabled\" uses WinUI's accent-disabled fill (a translucent accent color). The icon-only form takes ",[27,233,234],{},"icon-only"," plus ",[27,237,238],{},"label"," for the accessible name.",[51,241,243,248],{"title":242},"Sizes and states",[54,244,245],{"v-slot:preview":56},[246,247],"toggle-button-states-demo",{},[54,249,250],{"v-slot:code":56},[63,251,253],{"className":65,"code":252,"language":67,"meta":56,"style":56},"\u003CFluereToggleButton v-model:checked=\"small\" size=\"small\">Small\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"medium\" size=\"medium\">Medium\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"large\" size=\"large\">Large\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton disabled>Disabled\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"on\" disabled>Disabled, checked\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton icon-only :icon=\"FluentIconCheckmark24Regular\" label=\"Checked\" \u002F>\n",[27,254,255,291,326,362,379,410],{"__ignoreMap":56},[71,256,257,259,261,263,265,267,269,271,274,276,279,281,284,287,289],{"class":73,"line":74},[71,258,78],{"class":77},[71,260,82],{"class":81},[71,262,86],{"class":85},[71,264,89],{"class":77},[71,266,92],{"class":85},[71,268,95],{"class":77},[71,270,99],{"class":98},[71,272,273],{"class":77},"small",[71,275,99],{"class":98},[71,277,278],{"class":85}," size",[71,280,95],{"class":77},[71,282,283],{"class":98},"\"small\"",[71,285,286],{"class":77},">Small\u003C\u002F",[71,288,82],{"class":81},[71,290,112],{"class":77},[71,292,293,295,297,299,301,303,305,307,310,312,314,316,319,322,324],{"class":73,"line":115},[71,294,78],{"class":77},[71,296,82],{"class":81},[71,298,86],{"class":85},[71,300,89],{"class":77},[71,302,92],{"class":85},[71,304,95],{"class":77},[71,306,99],{"class":98},[71,308,309],{"class":77},"medium",[71,311,99],{"class":98},[71,313,278],{"class":85},[71,315,95],{"class":77},[71,317,318],{"class":98},"\"medium\"",[71,320,321],{"class":77},">Medium\u003C\u002F",[71,323,82],{"class":81},[71,325,112],{"class":77},[71,327,329,331,333,335,337,339,341,343,346,348,350,352,355,358,360],{"class":73,"line":328},3,[71,330,78],{"class":77},[71,332,82],{"class":81},[71,334,86],{"class":85},[71,336,89],{"class":77},[71,338,92],{"class":85},[71,340,95],{"class":77},[71,342,99],{"class":98},[71,344,345],{"class":77},"large",[71,347,99],{"class":98},[71,349,278],{"class":85},[71,351,95],{"class":77},[71,353,354],{"class":98},"\"large\"",[71,356,357],{"class":77},">Large\u003C\u002F",[71,359,82],{"class":81},[71,361,112],{"class":77},[71,363,365,367,369,372,375,377],{"class":73,"line":364},4,[71,366,78],{"class":77},[71,368,82],{"class":81},[71,370,371],{"class":85}," disabled",[71,373,374],{"class":77},">Disabled\u003C\u002F",[71,376,82],{"class":81},[71,378,112],{"class":77},[71,380,382,384,386,388,390,392,394,396,399,401,403,406,408],{"class":73,"line":381},5,[71,383,78],{"class":77},[71,385,82],{"class":81},[71,387,86],{"class":85},[71,389,89],{"class":77},[71,391,92],{"class":85},[71,393,95],{"class":77},[71,395,99],{"class":98},[71,397,398],{"class":77},"on",[71,400,99],{"class":98},[71,402,371],{"class":85},[71,404,405],{"class":77},">Disabled, checked\u003C\u002F",[71,407,82],{"class":81},[71,409,112],{"class":77},[71,411,413,415,417,420,423,426,428,430,433,435,438,440,443],{"class":73,"line":412},6,[71,414,78],{"class":77},[71,416,82],{"class":81},[71,418,419],{"class":85}," icon-only",[71,421,422],{"class":77}," :",[71,424,425],{"class":85},"icon",[71,427,95],{"class":77},[71,429,99],{"class":98},[71,431,432],{"class":77},"FluentIconCheckmark24Regular",[71,434,99],{"class":98},[71,436,437],{"class":85}," label",[71,439,95],{"class":77},[71,441,442],{"class":98},"\"Checked\"",[71,444,445],{"class":77}," \u002F>\n",[32,447,449],{"id":448},"specification-source","Specification source",[451,452,453,466],"table",{},[454,455,456],"thead",{},[457,458,459,463],"tr",{},[460,461,462],"th",{},"Item",[460,464,465],{},"Value",[467,468,469,489,507],"tbody",{},[457,470,471,475],{},[472,473,474],"td",{},"Control",[472,476,477,478,480,481,484,485,488],{},"WinUI 3 ",[27,479,29],{}," (derives from ",[27,482,483],{},"ButtonBase","; three states via ",[27,486,487],{},"IsChecked: bool?",")",[457,490,491,494],{},[472,492,493],{},"tag\u002Fcommit",[472,495,496,499,500,503,504,488],{},[27,497,498],{},"winui3\u002Frelease\u002F2.5.1"," \u002F ",[27,501,502],{},"ba3a8d5"," (local snapshot ",[27,505,506],{},"temp\u002Fwinui-src",[457,508,509,512],{},[472,510,511],{},"Key file",[472,513,514],{},[27,515,516],{},"src\u002Fcontrols\u002Fdev\u002FCommonStyles\u002FToggleButton_themeresources.xaml",[32,518,520],{"id":519},"implementation-notes","Implementation notes",[522,523,524,575,622,659,689,721],"ul",{},[525,526,527,530,531,534,535,499,538,499,541,499,544,547,548,534,551,499,554,499,556,558,559,562,563,566,567,570,571,574],"li",{},[18,528,529],{},"The state table follows the theme resources one by one",": unchecked uses ",[27,532,533],{},"ControlFillColor*"," (",[27,536,537],{},"--colorNeutralBackground1",[27,539,540],{},"…Hover",[27,542,543],{},"…Pressed",[27,545,546],{},"…Disabled","); checked uses ",[27,549,550],{},"AccentFillColor*",[27,552,553],{},"--colorBrandBackground",[27,555,540],{},[27,557,543],{},"); the checked foreground is ",[27,560,561],{},"TextOnAccentFillColorPrimaryBrush"," → ",[27,564,565],{},"--colorNeutralForegroundOnBrand","; the indeterminate resource group (",[27,568,569],{},"*Indeterminate",") is ",[18,572,573],{},"identical"," to the unchecked one. The full mapping lives in the component file header.",[525,576,577,580,581,499,584,562,587,534,590,593,594,597,598,534,601,593,604,607,608,611,612,534,615,593,618,621],{},[18,578,579],{},"Three values have no same-value Fluent token",", so they become component-local variables carrying the exact WinUI values (one line to override): ",[27,582,583],{},"AccentFillColorDisabledBrush",[27,585,586],{},"TextOnAccentFillColorDisabledBrush",[27,588,589],{},"--fui-toggle-button-checked-disabled-background",[27,591,592],{},"#37000000"," light \u002F ",[27,595,596],{},"#28FFFFFF"," dark) and ",[27,599,600],{},"-foreground",[27,602,603],{},"#FFFFFF",[27,605,606],{},"#87FFFFFF"," dark); ",[27,609,610],{},"TextOnAccentFillColorSecondaryBrush"," (checked pressed foreground) → ",[27,613,614],{},"--fui-toggle-button-checked-pressed-foreground",[27,616,617],{},"#B3FFFFFF",[27,619,620],{},"#80000000"," dark).",[525,623,624,627,628,631,632,635,636,639,640,499,643,646,647,650,651,654,655,658],{},[18,625,626],{},"Only the background animates",": the template's ",[27,629,630],{},"ContentPresenter.BackgroundTransition = BrushTransition Duration=0:0:0.083"," gives ",[27,633,634],{},"transition: background-color 83ms linear"," (the public ",[27,637,638],{},"BrushTransition"," source exposes the duration but no easing, hence linear, as noted); ",[27,641,642],{},"BorderBrush",[27,644,645],{},"Foreground"," changes are ",[27,648,649],{},"DiscreteObjectKeyFrame KeyTime=0"," — instant, no transition. Note: this library's ",[27,652,653],{},"FluereButton"," still uses 150ms + ",[27,656,657],{},"curveEasyEase"," across three properties, a deviation from A-level that is a pre-existing convention to be unified later.",[525,660,661,664,665,668,669,672,673,676,677,680,681,684,685,688],{},[18,662,663],{},"Focus"," uses the 0.4.3 shared primitive ",[27,666,667],{},"useFocusVisual"," (outer 2px ",[27,670,671],{},"--colorStrokeFocus2"," + inner 1px ",[27,674,675],{},"--colorStrokeFocus1",", equivalent to ",[27,678,679],{},"FocusVisualMargin = -3","). The component deliberately writes ",[18,682,683],{},"no"," ",[27,686,687],{},":focus-visible"," rule — at equal specificity source order would swallow the ring.",[525,690,691,694,695,697,698,499,700,499,703,706,707,534,710,713,714,717,718,178],{},[18,692,693],{},"Controlled semantics",": a click only emits ",[27,696,48],{},", alongside the WinUI-named ",[27,699,92],{},[27,701,702],{},"unchecked",[27,704,705],{},"indeterminate"," events; the three-state cycle follows ",[27,708,709],{},"ToggleButton_Partial.cpp#OnToggleImpl",[27,711,712],{},"Indeterminate → Unchecked",", ",[27,715,716],{},"Checked + IsThreeState → Indeterminate",", otherwise ",[27,719,720],{},"Checked ⇄ Unchecked",[525,722,723,726,727,730,731,734,735,738,739,742,743,746,747,750,751,754,755,758,759,762,763,766,767,770,771,774],{},[18,724,725],{},"Known gaps",": high contrast is not implemented (WinUI HC switches these brushes to ",[27,728,729],{},"SystemColor*","); the ",[27,732,733],{},"AppBarToggleButton"," subtle appearance is not built; the font weight follows this library's Button (",[27,736,737],{},"--fontWeightMedium",") while WinUI ",[27,740,741],{},"Button_themeresources"," uses ",[27,744,745],{},"FontWeight = Normal","; the pressed \u002F disabled ",[18,748,749],{},"border"," has no separate step (A-level pressed uses ",[27,752,753],{},"ControlStrokeColorDefaultBrush",", which Input \u002F ComboBox in this library map to ",[27,756,757],{},"--colorNeutralStrokeAlpha",", while this component still uses ",[27,760,761],{},"--colorNeutralStroke1","); ",[27,764,765],{},"BackgroundSizing = OuterBorderEdge"," is not written as an explicit ",[27,768,769],{},"background-clip"," (CSS ",[27,772,773],{},"border-box"," is already equivalent — no measured visual difference).",[32,776,778],{"id":777},"api","API",[780,781,783],"h3",{"id":782},"flueretogglebutton",[27,784,82],{},[451,786,787,803],{},[454,788,789],{},[457,790,791,794,797,800],{},[460,792,793],{},"Prop",[460,795,796],{},"Type",[460,798,799],{},"Default",[460,801,802],{},"Mapping \u002F notes",[467,804,805,830,851,871,896,916,933,953,974,992],{},[457,806,807,811,816,821],{},[472,808,809],{},[27,810,92],{},[472,812,813],{},[27,814,815],{},"boolean | null",[472,817,818],{},[27,819,820],{},"false",[472,822,823,534,825,762,827,829],{},[27,824,157],{},[27,826,40],{},[27,828,153],{}," means indeterminate",[457,831,832,837,842,846],{},[472,833,834],{},[27,835,836],{},"disabled",[472,838,839],{},[27,840,841],{},"boolean",[472,843,844],{},[27,845,820],{},[472,847,848],{},[27,849,850],{},"IsEnabled",[457,852,853,858,863,868],{},[472,854,855],{},[27,856,857],{},"size",[472,859,860],{},[27,861,862],{},"'small' | 'medium' | 'large'",[472,864,865],{},[27,866,867],{},"'medium'",[472,869,870],{},"Same geometry as this library's Button: heights 24 \u002F 32 \u002F 40",[457,872,873,878,882,886],{},[472,874,875],{},[27,876,877],{},"threeState",[472,879,880],{},[27,881,841],{},[472,883,884],{},[27,885,820],{},[472,887,888,891,892,895],{},[27,889,890],{},"IsThreeState","; enables the ",[27,893,894],{},"false → true → null"," cycle",[457,897,898,903,908,913],{},[472,899,900],{},[27,901,902],{},"type",[472,904,905],{},[27,906,907],{},"'button' | 'submit' | 'reset'",[472,909,910],{},[27,911,912],{},"'button'",[472,914,915],{},"Native button type",[457,917,918,922,927,930],{},[472,919,920],{},[27,921,425],{},[472,923,924],{},[27,925,926],{},"Component",[472,928,929],{},"—",[472,931,932],{},"Leading icon component",[457,934,935,940,945,950],{},[472,936,937],{},[27,938,939],{},"iconPosition",[472,941,942],{},[27,943,944],{},"'before' | 'after'",[472,946,947],{},[27,948,949],{},"'before'",[472,951,952],{},"Icon before or after the label",[457,954,955,960,964,968],{},[472,956,957],{},[27,958,959],{},"iconOnly",[472,961,962],{},[27,963,841],{},[472,965,966],{},[27,967,820],{},[472,969,970,971,973],{},"Icon-only (square); pass ",[27,972,238],{}," for the accessible name",[457,975,976,981,985,989],{},[472,977,978],{},[27,979,980],{},"block",[472,982,983],{},[27,984,841],{},[472,986,987],{},[27,988,820],{},[472,990,991],{},"Stretch to the container width",[457,993,994,998,1003,1005],{},[472,995,996],{},[27,997,238],{},[472,999,1000],{},[27,1001,1002],{},"string",[472,1004,929],{},[472,1006,1007,1010,1011],{},[27,1008,1009],{},"AutomationProperties.Name"," → native ",[27,1012,1013],{},"aria-label",[451,1015,1016,1028],{},[454,1017,1018],{},[457,1019,1020,1023,1026],{},[460,1021,1022],{},"Event",[460,1024,1025],{},"Payload",[460,1027,802],{},[467,1029,1030,1045,1059,1072],{},[457,1031,1032,1036,1040],{},[472,1033,1034],{},[27,1035,48],{},[472,1037,1038],{},[27,1039,815],{},[472,1041,1042,1043,488],{},"Controlled write-back (",[27,1044,40],{},[457,1046,1047,1051,1053],{},[472,1048,1049],{},[27,1050,92],{},[472,1052,929],{},[472,1054,1055,1056],{},"WinUI ",[27,1057,1058],{},"Checked",[457,1060,1061,1065,1067],{},[472,1062,1063],{},[27,1064,702],{},[472,1066,929],{},[472,1068,1055,1069],{},[27,1070,1071],{},"Unchecked",[457,1073,1074,1078,1080],{},[472,1075,1076],{},[27,1077,705],{},[472,1079,929],{},[472,1081,1055,1082],{},[27,1083,1084],{},"Indeterminate",[451,1086,1087,1097],{},[454,1088,1089],{},[457,1090,1091,1094],{},[460,1092,1093],{},"Slot",[460,1095,1096],{},"Notes",[467,1098,1099,1109],{},[457,1100,1101,1106],{},[472,1102,1103],{},[27,1104,1105],{},"default",[472,1107,1108],{},"Button label",[457,1110,1111,1115],{},[472,1112,1113],{},[27,1114,425],{},[472,1116,1117],{},"Replace the built-in icon",[1119,1120,1121],"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":56,"searchDepth":115,"depth":115,"links":1123},[1124,1125,1126,1127,1128,1129],{"id":34,"depth":115,"text":35},{"id":144,"depth":115,"text":145},{"id":227,"depth":115,"text":228},{"id":448,"depth":115,"text":449},{"id":519,"depth":115,"text":520},{"id":777,"depth":115,"text":778,"children":1130},[1131],{"id":782,"depth":328,"text":82},"Three-state toggle button with an accent fill when checked, matching WinUI ToggleButton.","md",{},{"title":5},true,"\u002Fen\u002Fcomponents\u002Ftoggle-button",{"title":5,"description":1132},"en\u002Fcomponents\u002Ftoggle-button","yKoXOFL-mAtweK263xa6JdVX8muEoGp0QGk78mnD0Ok",{"id":1142,"title":1143,"body":1144,"description":2096,"extension":1133,"meta":2097,"nav":2098,"navigation":1136,"path":2099,"seo":2100,"stem":2101,"__hash__":2102},"content\u002Fcomponents\u002Ftoggle-button.md","Toggle Button 切换按钮",{"type":7,"value":1145,"toc":2086},[1146,1149,1163,1166,1178,1245,1249,1275,1318,1322,1331,1517,1520,1572,1575,1773,1775,1779,1982,2052,2084],[10,1147,1143],{"id":1148},"toggle-button-切换按钮",[14,1150,1151,1152,1155,1156,1159,1160,1162],{},"切换按钮在「未选中 \u002F 选中 \u002F 不确定」之间切换。与 Checkbox 的区别是它",[18,1153,1154],{},"本身就是一个按钮","——点击在位即切换，不额外画勾选框字形；与 Button 的区别是切换后",[18,1157,1158],{},"保持选中态","（铺满强调色）。样式还原 WinUI 3（Windows App SDK）的 ",[27,1161,29],{},"。",[32,1164,1165],{"id":1165},"基础用法",[14,1167,1168,1170,1171,1174,1175,1177],{},[27,1169,40],{}," 双向绑定布尔值。这是",[18,1172,1173],{},"受控","组件：点击只抛 ",[27,1176,48],{},"，是否改状态由消费方决定。",[51,1179,1180,1184],{"title":1165},[54,1181,1182],{"v-slot:preview":56},[58,1183],{},[54,1185,1186],{"v-slot:code":56},[63,1187,1189],{"className":65,"code":1188,"language":67,"meta":56,"style":56},"\u003CFluereToggleButton v-model:checked=\"bold\">加粗\u003C\u002FFluereToggleButton>\n\u003CFluereToggleButton v-model:checked=\"italic\">倾斜\u003C\u002FFluereToggleButton>\n",[27,1190,1191,1218],{"__ignoreMap":56},[71,1192,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1214,1216],{"class":73,"line":74},[71,1194,78],{"class":77},[71,1196,82],{"class":81},[71,1198,86],{"class":85},[71,1200,89],{"class":77},[71,1202,92],{"class":85},[71,1204,95],{"class":77},[71,1206,99],{"class":98},[71,1208,102],{"class":77},[71,1210,99],{"class":98},[71,1212,1213],{"class":77},">加粗\u003C\u002F",[71,1215,82],{"class":81},[71,1217,112],{"class":77},[71,1219,1220,1222,1224,1226,1228,1230,1232,1234,1236,1238,1241,1243],{"class":73,"line":115},[71,1221,78],{"class":77},[71,1223,82],{"class":81},[71,1225,86],{"class":85},[71,1227,89],{"class":77},[71,1229,92],{"class":85},[71,1231,95],{"class":77},[71,1233,99],{"class":98},[71,1235,132],{"class":77},[71,1237,99],{"class":98},[71,1239,1240],{"class":77},">倾斜\u003C\u002F",[71,1242,82],{"class":81},[71,1244,112],{"class":77},[32,1246,1248],{"id":1247},"三态不确定","三态（不确定）",[14,1250,1251,1253,1254,1256,1257,1259,1260,1262,1263,1265,1266,1268,1269,1271,1272,1274],{},[27,1252,92],{}," 支持 ",[27,1255,153],{},"（对应 WinUI ",[27,1258,157],{}," 的 ",[27,1261,161],{},"）。开启 ",[27,1264,165],{}," 后点击循环 ",[27,1267,169],{},"；不确定态的可访问名是 ",[27,1270,173],{},"（不是 ",[27,1273,177],{},"）。",[51,1276,1278,1282],{"title":1277},"三态开关",[54,1279,1280],{"v-slot:preview":56},[185,1281],{},[54,1283,1284],{"v-slot:code":56},[63,1285,1287],{"className":65,"code":1286,"language":67,"meta":56,"style":56},"\u003CFluereToggleButton v-model:checked=\"value\" three-state>三态开关\u003C\u002FFluereToggleButton>\n",[27,1288,1289],{"__ignoreMap":56},[71,1290,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1314,1316],{"class":73,"line":74},[71,1292,78],{"class":77},[71,1294,82],{"class":81},[71,1296,86],{"class":85},[71,1298,89],{"class":77},[71,1300,92],{"class":85},[71,1302,95],{"class":77},[71,1304,99],{"class":98},[71,1306,212],{"class":77},[71,1308,99],{"class":98},[71,1310,217],{"class":85},[71,1312,1313],{"class":77},">三态开关\u003C\u002F",[71,1315,82],{"class":81},[71,1317,112],{"class":77},[32,1319,1321],{"id":1320},"尺寸-禁用-纯图标","尺寸 \u002F 禁用 \u002F 纯图标",[14,1323,1324,1325,1327,1328,1330],{},"三档尺寸与 Button 同档（Fluent 高度 24 \u002F 32 \u002F 40）。「选中且禁用」用 WinUI 的强调禁用档（带 alpha 的强调色）。纯图标形态用 ",[27,1326,234],{}," + ",[27,1329,238],{}," 提供可访问名。",[51,1332,1334,1338],{"title":1333},"尺寸与状态一览",[54,1335,1336],{"v-slot:preview":56},[246,1337],{},[54,1339,1340],{"v-slot:code":56},[63,1341,1343],{"className":65,"code":1342,"language":67,"meta":56,"style":56},"\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,1344,1345,1378,1411,1444,1459,1488],{"__ignoreMap":56},[71,1346,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1374,1376],{"class":73,"line":74},[71,1348,78],{"class":77},[71,1350,82],{"class":81},[71,1352,86],{"class":85},[71,1354,89],{"class":77},[71,1356,92],{"class":85},[71,1358,95],{"class":77},[71,1360,99],{"class":98},[71,1362,273],{"class":77},[71,1364,99],{"class":98},[71,1366,278],{"class":85},[71,1368,95],{"class":77},[71,1370,283],{"class":98},[71,1372,1373],{"class":77},">小\u003C\u002F",[71,1375,82],{"class":81},[71,1377,112],{"class":77},[71,1379,1380,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404,1407,1409],{"class":73,"line":115},[71,1381,78],{"class":77},[71,1383,82],{"class":81},[71,1385,86],{"class":85},[71,1387,89],{"class":77},[71,1389,92],{"class":85},[71,1391,95],{"class":77},[71,1393,99],{"class":98},[71,1395,309],{"class":77},[71,1397,99],{"class":98},[71,1399,278],{"class":85},[71,1401,95],{"class":77},[71,1403,318],{"class":98},[71,1405,1406],{"class":77},">中\u003C\u002F",[71,1408,82],{"class":81},[71,1410,112],{"class":77},[71,1412,1413,1415,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1440,1442],{"class":73,"line":328},[71,1414,78],{"class":77},[71,1416,82],{"class":81},[71,1418,86],{"class":85},[71,1420,89],{"class":77},[71,1422,92],{"class":85},[71,1424,95],{"class":77},[71,1426,99],{"class":98},[71,1428,345],{"class":77},[71,1430,99],{"class":98},[71,1432,278],{"class":85},[71,1434,95],{"class":77},[71,1436,354],{"class":98},[71,1438,1439],{"class":77},">大\u003C\u002F",[71,1441,82],{"class":81},[71,1443,112],{"class":77},[71,1445,1446,1448,1450,1452,1455,1457],{"class":73,"line":364},[71,1447,78],{"class":77},[71,1449,82],{"class":81},[71,1451,371],{"class":85},[71,1453,1454],{"class":77},">禁用\u003C\u002F",[71,1456,82],{"class":81},[71,1458,112],{"class":77},[71,1460,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1484,1486],{"class":73,"line":381},[71,1462,78],{"class":77},[71,1464,82],{"class":81},[71,1466,86],{"class":85},[71,1468,89],{"class":77},[71,1470,92],{"class":85},[71,1472,95],{"class":77},[71,1474,99],{"class":98},[71,1476,398],{"class":77},[71,1478,99],{"class":98},[71,1480,371],{"class":85},[71,1482,1483],{"class":77},">禁用（已选中）\u003C\u002F",[71,1485,82],{"class":81},[71,1487,112],{"class":77},[71,1489,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1515],{"class":73,"line":412},[71,1491,78],{"class":77},[71,1493,82],{"class":81},[71,1495,419],{"class":85},[71,1497,422],{"class":77},[71,1499,425],{"class":85},[71,1501,95],{"class":77},[71,1503,99],{"class":98},[71,1505,432],{"class":77},[71,1507,99],{"class":98},[71,1509,437],{"class":85},[71,1511,95],{"class":77},[71,1513,1514],{"class":98},"\"已选中\"",[71,1516,445],{"class":77},[32,1518,1519],{"id":1519},"规格来源",[451,1521,1522,1532],{},[454,1523,1524],{},[457,1525,1526,1529],{},[460,1527,1528],{},"项",[460,1530,1531],{},"值",[467,1533,1534,1550,1563],{},[457,1535,1536,1539],{},[472,1537,1538],{},"控件",[472,1540,477,1541,1543,1544,1546,1547,1549],{},[27,1542,29],{},"（",[27,1545,483],{}," 派生，三态来自 ",[27,1548,487],{},"）",[457,1551,1552,1554],{},[472,1553,493],{},[472,1555,1556,499,1558,1560,1561,1549],{},[27,1557,498],{},[27,1559,502],{},"（本地快照 ",[27,1562,506],{},[457,1564,1565,1568],{},[472,1566,1567],{},"关键文件",[472,1569,1570],{},[27,1571,516],{},[32,1573,1574],{"id":1574},"实现要点",[522,1576,1577,1615,1650,1682,1706,1732],{},[525,1578,1579,1582,1583,1543,1585,499,1587,499,1589,499,1591,1593,1594,1543,1596,499,1598,499,1600,1602,1603,562,1605,1607,1608,1610,1611,1614],{},[18,1580,1581],{},"状态表逐条对齐主题资源","：未选中走 ",[27,1584,533],{},[27,1586,537],{},[27,1588,540],{},[27,1590,543],{},[27,1592,546],{},"）；选中走 ",[27,1595,550],{},[27,1597,553],{},[27,1599,540],{},[27,1601,543],{},"）；选中前景 ",[27,1604,561],{},[27,1606,565],{},"；不确定态的资源组（",[27,1609,569],{},"）与未选中",[18,1612,1613],{},"同源","。完整映射表写在组件文件头。",[525,1616,1617,1620,1621,499,1623,562,1625,1627,1628,1630,1631,1633,1634,1627,1636,1630,1638,1640,1641,1643,1644,1627,1646,1630,1648,1274],{},[18,1618,1619],{},"Fluent token 表无同值档的三条","落组件局部变量，值取 WinUI 原值（可一行覆写）：",[27,1622,583],{},[27,1624,586],{},[27,1626,589],{},"（亮 ",[27,1629,592],{}," \u002F 暗 ",[27,1632,596],{},"）与 ",[27,1635,600],{},[27,1637,603],{},[27,1639,606],{},"）；",[27,1642,610],{},"（选中态按下前景）→ ",[27,1645,614],{},[27,1647,617],{},[27,1649,620],{},[525,1651,1652,1655,1656,1658,1659,1543,1661,1663,1664,499,1666,1668,1669,1671,1672,1675,1676,1678,1679,1681],{},[18,1653,1654],{},"动效只过渡背景","：模板里的 ",[27,1657,630],{}," ⇒ ",[27,1660,634],{},[27,1662,638],{}," 公开源码只给时长、没给缓动，按线性处理并注明）；状态切换里的 ",[27,1665,642],{},[27,1667,645],{}," 都是 ",[27,1670,649],{},"，",[18,1673,1674],{},"瞬切不过渡","。注：本库 ",[27,1677,653],{}," 仍是 150ms + ",[27,1680,657],{}," 且三项一起过渡，与 A 级有偏差（既有口径，待统一）。",[525,1683,1684,1687,1688,1690,1691,1693,1694,1696,1697,1699,1700,684,1703,1705],{},[18,1685,1686],{},"焦点","走 0.4.3 的共享原语 ",[27,1689,667],{},"（外 2px ",[27,1692,671],{}," + 内 1px ",[27,1695,675],{},"，等价 ",[27,1698,679],{},"）；组件内",[18,1701,1702],{},"不写",[27,1704,687],{},"，否则同特异性会按源码顺序把焦点环吃掉。",[525,1707,1708,1711,1712,1714,1715,499,1717,499,1719,1721,1722,1543,1724,1726,1727,1729,1730,1274],{},[18,1709,1710],{},"受控语义","：点击只抛 ",[27,1713,48],{},"，并附带 WinUI 同名的 ",[27,1716,92],{},[27,1718,702],{},[27,1720,705],{}," 事件；三态循环对齐 ",[27,1723,709],{},[27,1725,712],{},"、",[27,1728,716],{},"、其余 ",[27,1731,720],{},[525,1733,1734,1737,1738,1640,1740,1742,1743,1745,1746,1748,1749,1751,1752,1755,1756,1758,1759,1761,1762,1640,1764,1766,1767,1769,1770,1772],{},[18,1735,1736],{},"已知缺口","：高对比度未实现（WinUI HC 下这些画刷走 ",[27,1739,729],{},[27,1741,733],{}," 的 subtle 外观未做；字重沿用本库 Button 的 ",[27,1744,737],{},"（WinUI 的 ",[27,1747,741],{}," 是 ",[27,1750,745],{},"）；按下 \u002F 禁用态的",[18,1753,1754],{},"描边","未单列档（A 级 pressed 用 ",[27,1757,753],{},"、库内 Input \u002F ComboBox 对它的口径是 ",[27,1760,757],{},"，本组件仍用 ",[27,1763,761],{},[27,1765,765],{}," 未显式写 ",[27,1768,769],{},"（CSS 默认 ",[27,1771,773],{}," 已等价，实测无视觉差异）。",[32,1774,778],{"id":777},[780,1776,1777],{"id":782},[27,1778,82],{},[451,1780,1781,1797],{},[454,1782,1783],{},[457,1784,1785,1788,1791,1794],{},[460,1786,1787],{},"属性（Props）",[460,1789,1790],{},"类型",[460,1792,1793],{},"默认",[460,1795,1796],{},"对应 \u002F 说明",[467,1798,1799,1822,1840,1857,1878,1895,1910,1927,1946,1963],{},[457,1800,1801,1805,1809,1813],{},[472,1802,1803],{},[27,1804,92],{},[472,1806,1807],{},[27,1808,815],{},[472,1810,1811],{},[27,1812,820],{},[472,1814,1815,1543,1817,1640,1819,1821],{},[27,1816,157],{},[27,1818,40],{},[27,1820,153],{}," = 不确定态",[457,1823,1824,1828,1832,1836],{},[472,1825,1826],{},[27,1827,836],{},[472,1829,1830],{},[27,1831,841],{},[472,1833,1834],{},[27,1835,820],{},[472,1837,1838],{},[27,1839,850],{},[457,1841,1842,1846,1850,1854],{},[472,1843,1844],{},[27,1845,857],{},[472,1847,1848],{},[27,1849,862],{},[472,1851,1852],{},[27,1853,867],{},[472,1855,1856],{},"几何沿用本库 Button：高度 24 \u002F 32 \u002F 40",[457,1858,1859,1863,1867,1871],{},[472,1860,1861],{},[27,1862,877],{},[472,1864,1865],{},[27,1866,841],{},[472,1868,1869],{},[27,1870,820],{},[472,1872,1873,1875,1876],{},[27,1874,890],{},"；开启后点击循环 ",[27,1877,894],{},[457,1879,1880,1884,1888,1892],{},[472,1881,1882],{},[27,1883,902],{},[472,1885,1886],{},[27,1887,907],{},[472,1889,1890],{},[27,1891,912],{},[472,1893,1894],{},"原生 button 类型",[457,1896,1897,1901,1905,1907],{},[472,1898,1899],{},[27,1900,425],{},[472,1902,1903],{},[27,1904,926],{},[472,1906,929],{},[472,1908,1909],{},"前置图标组件",[457,1911,1912,1916,1920,1924],{},[472,1913,1914],{},[27,1915,939],{},[472,1917,1918],{},[27,1919,944],{},[472,1921,1922],{},[27,1923,949],{},[472,1925,1926],{},"图标在文本前 \u002F 后",[457,1928,1929,1933,1937,1941],{},[472,1930,1931],{},[27,1932,959],{},[472,1934,1935],{},[27,1936,841],{},[472,1938,1939],{},[27,1940,820],{},[472,1942,1943,1944],{},"仅图标（等比紧凑），可访问名请用 ",[27,1945,238],{},[457,1947,1948,1952,1956,1960],{},[472,1949,1950],{},[27,1951,980],{},[472,1953,1954],{},[27,1955,841],{},[472,1957,1958],{},[27,1959,820],{},[472,1961,1962],{},"撑满容器宽度",[457,1964,1965,1969,1973,1975],{},[472,1966,1967],{},[27,1968,238],{},[472,1970,1971],{},[27,1972,1002],{},[472,1974,929],{},[472,1976,1977,1979,1980],{},[27,1978,1009],{}," → 原生 ",[27,1981,1013],{},[451,1983,1984,1996],{},[454,1985,1986],{},[457,1987,1988,1991,1994],{},[460,1989,1990],{},"事件（Emits）",[460,1992,1993],{},"载荷",[460,1995,1796],{},[467,1997,1998,2013,2026,2039],{},[457,1999,2000,2004,2008],{},[472,2001,2002],{},[27,2003,48],{},[472,2005,2006],{},[27,2007,815],{},[472,2009,2010,2011,1549],{},"受控回写（",[27,2012,40],{},[457,2014,2015,2019,2021],{},[472,2016,2017],{},[27,2018,92],{},[472,2020,929],{},[472,2022,1055,2023,2025],{},[27,2024,1058],{},"：进入勾选",[457,2027,2028,2032,2034],{},[472,2029,2030],{},[27,2031,702],{},[472,2033,929],{},[472,2035,1055,2036,2038],{},[27,2037,1071],{},"：取消勾选",[457,2040,2041,2045,2047],{},[472,2042,2043],{},[27,2044,705],{},[472,2046,929],{},[472,2048,1055,2049,2051],{},[27,2050,1084],{},"：进入不确定态",[451,2053,2054,2064],{},[454,2055,2056],{},[457,2057,2058,2061],{},[460,2059,2060],{},"插槽（Slots）",[460,2062,2063],{},"说明",[467,2065,2066,2075],{},[457,2067,2068,2072],{},[472,2069,2070],{},[27,2071,1105],{},[472,2073,2074],{},"按钮文本",[457,2076,2077,2081],{},[472,2078,2079],{},[27,2080,425],{},[472,2082,2083],{},"替换内建图标",[1119,2085,1121],{},{"title":56,"searchDepth":115,"depth":115,"links":2087},[2088,2089,2090,2091,2092,2093],{"id":1165,"depth":115,"text":1165},{"id":1247,"depth":115,"text":1248},{"id":1320,"depth":115,"text":1321},{"id":1519,"depth":115,"text":1519},{"id":1574,"depth":115,"text":1574},{"id":777,"depth":115,"text":778,"children":2094},[2095],{"id":782,"depth":328,"text":82},"三态切换按钮，选中时铺强调色，对齐 WinUI ToggleButton。",{},{"title":1143},"\u002Fcomponents\u002Ftoggle-button",{"title":1143,"description":2096},"components\u002Ftoggle-button","Cq0ckw5SLrW9FPORMC0AZzndxVvCuphjrG7NyMHv2d4",1792150928969]