[{"data":1,"prerenderedAt":1420},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Fswitch":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Fswitch":771},{"id":4,"title":5,"body":6,"description":759,"extension":760,"meta":761,"nav":762,"navigation":763,"path":764,"seo":765,"stem":769,"__hash__":770},"content_en\u002Fen\u002Fcomponents\u002Fswitch.md","Switch",{"type":7,"value":8,"toc":750},"minimark",[9,13,22,27,49,131,135,158,235,239,253,319,323,330,368,372,378,440,444,467,514,518,659,712,746],[10,11,5],"h1",{"id":12},"switch",[14,15,16,17,21],"p",{},"The toggle switch is used to switch between two mutually exclusive states (on \u002F off), commonly representing whether a feature is enabled. The style reproduces the WinUI 3 \u002F Windows App SDK ToggleSwitch: a self-built track + thumb that fully reproduces the WinUI feel of 「click to toggle \u002F drag the thumb to the end \u002F keyboard toggle \u002F thumb enlarges on hover \u002F thumb widens in place on active (pill shaped)」. Movement only uses ",[18,19,20],"code",{},"transform",", the easing animation is only enabled while toggling; the thumb only changes size within the rail and inherently cannot leave the track area, and no small backward jump occurs at the moment of toggling either.",[23,24,26],"h2",{"id":25},"basic-usage","Basic usage",[14,28,29,32,33,36,37,40,41,44,45,48],{},[18,30,31],{},"v-model"," binds a boolean. Clicking anywhere on the switch toggles it; dragging the thumb past halfway drops it to the target end, and less than halfway springs it back; the keyboard ",[18,34,35],{},"Space"," \u002F ",[18,38,39],{},"Enter"," toggles, ",[18,42,43],{},"◀"," turns off, and ",[18,46,47],{},"▶"," turns on.",[50,51,52,59],"demo-block",{"title":26},[53,54,56],"template",{"v-slot:preview":55},"",[57,58],"toggle-switch-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","\u003CFluereToggleSwitch v-model=\"wifi\">Wi-Fi\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch v-model=\"bluetooth\">Bluetooth\u003C\u002FFluereToggleSwitch>\n","vue",[18,68,69,106],{"__ignoreMap":55},[70,71,74,78,82,86,89,93,96,98,101,103],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"sVt8B","\u003C",[70,79,81],{"class":80},"s9eBZ","FluereToggleSwitch",[70,83,85],{"class":84},"sScJk"," v-model",[70,87,88],{"class":76},"=",[70,90,92],{"class":91},"sZZnC","\"",[70,94,95],{"class":76},"wifi",[70,97,92],{"class":91},[70,99,100],{"class":76},">Wi-Fi\u003C\u002F",[70,102,81],{"class":80},[70,104,105],{"class":76},">\n",[70,107,109,111,113,115,117,119,122,124,127,129],{"class":72,"line":108},2,[70,110,77],{"class":76},[70,112,81],{"class":80},[70,114,85],{"class":84},[70,116,88],{"class":76},[70,118,92],{"class":91},[70,120,121],{"class":76},"bluetooth",[70,123,92],{"class":91},[70,125,126],{"class":76},">Bluetooth\u003C\u002F",[70,128,81],{"class":80},[70,130,105],{"class":76},[23,132,134],{"id":133},"sizes","Sizes",[14,136,137,138,141,142,145,146,149,150,153,154,157],{},"The standard WinUI ToggleSwitch track is 40×20 (",[18,139,140],{},"medium","). The web side additionally provides ",[18,143,144],{},"small"," (32×16) and ",[18,147,148],{},"large"," (48×24), keeping a 2:1 ratio; ",[18,151,152],{},"travel"," (thumb travel 16 \u002F 20 \u002F 24) aligns with Fluent ",[18,155,156],{},"spacing"," L \u002F XL \u002F XXL respectively.",[50,159,161,166],{"title":160},"Three sizes",[53,162,163],{"v-slot:preview":55},[164,165],"toggle-switch-size-demo",{},[53,167,168],{"v-slot:code":55},[62,169,171],{"className":64,"code":170,"language":66,"meta":55,"style":55},"\u003CFluereToggleSwitch size=\"small\">small (32×16)\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch size=\"medium\">medium (40×20, WinUI standard)\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch size=\"large\">large (48×24)\u003C\u002FFluereToggleSwitch>\n",[18,172,173,194,214],{"__ignoreMap":55},[70,174,175,177,179,182,184,187,190,192],{"class":72,"line":73},[70,176,77],{"class":76},[70,178,81],{"class":80},[70,180,181],{"class":84}," size",[70,183,88],{"class":76},[70,185,186],{"class":91},"\"small\"",[70,188,189],{"class":76},">small (32×16)\u003C\u002F",[70,191,81],{"class":80},[70,193,105],{"class":76},[70,195,196,198,200,202,204,207,210,212],{"class":72,"line":108},[70,197,77],{"class":76},[70,199,81],{"class":80},[70,201,181],{"class":84},[70,203,88],{"class":76},[70,205,206],{"class":91},"\"medium\"",[70,208,209],{"class":76},">medium (40×20, WinUI standard)\u003C\u002F",[70,211,81],{"class":80},[70,213,105],{"class":76},[70,215,217,219,221,223,225,228,231,233],{"class":72,"line":216},3,[70,218,77],{"class":76},[70,220,81],{"class":80},[70,222,181],{"class":84},[70,224,88],{"class":76},[70,226,227],{"class":91},"\"large\"",[70,229,230],{"class":76},">large (48×24)\u003C\u002F",[70,232,81],{"class":80},[70,234,105],{"class":76},[23,236,238],{"id":237},"title-switch-content","Title + switch content",[14,240,241,242,245,246,36,249,252],{},"Reproduces the WinUI three-layer structure: ",[18,243,244],{},"#header"," top description row, ",[18,247,248],{},"#on-content",[18,250,251],{},"#off-content"," cross-fading in the same cell to the right of the track, and the default slot as the row label (also semantically visible text).",[50,254,256,261],{"title":255},"Title + On\u002FOff content",[53,257,258],{"v-slot:preview":55},[259,260],"toggle-switch-header-content-demo",{},[53,262,263],{"v-slot:code":55},[62,264,266],{"className":64,"code":265,"language":66,"meta":55,"style":55},"\u003CFluereToggleSwitch v-model=\"notify\">\n  \u003Ctemplate #header>System notifications\u003C\u002Ftemplate>\n  \u003Ctemplate #off-content>Off\u003C\u002Ftemplate>\n  \u003Ctemplate #on-content>On\u003C\u002Ftemplate>\n  Receive desktop notifications\n\u003C\u002FFluereToggleSwitch>\n",[18,267,268,287,292,297,303,309],{"__ignoreMap":55},[70,269,270,272,274,276,278,280,283,285],{"class":72,"line":73},[70,271,77],{"class":76},[70,273,81],{"class":80},[70,275,85],{"class":84},[70,277,88],{"class":76},[70,279,92],{"class":91},[70,281,282],{"class":76},"notify",[70,284,92],{"class":91},[70,286,105],{"class":76},[70,288,289],{"class":72,"line":108},[70,290,291],{"class":76},"  \u003Ctemplate #header>System notifications\u003C\u002Ftemplate>\n",[70,293,294],{"class":72,"line":216},[70,295,296],{"class":76},"  \u003Ctemplate #off-content>Off\u003C\u002Ftemplate>\n",[70,298,300],{"class":72,"line":299},4,[70,301,302],{"class":76},"  \u003Ctemplate #on-content>On\u003C\u002Ftemplate>\n",[70,304,306],{"class":72,"line":305},5,[70,307,308],{"class":76},"  Receive desktop notifications\n",[70,310,312,315,317],{"class":72,"line":311},6,[70,313,314],{"class":76},"\u003C\u002F",[70,316,81],{"class":80},[70,318,105],{"class":76},[23,320,322],{"id":321},"drag-interaction","Drag interaction",[14,324,325,326,329],{},"Hold and drag the thumb left or right and it follows the pointer; on release, if it passed the midpoint it lands on the other end, otherwise it springs back to its original state — consistent with WinUI. During a drag only ",[18,327,328],{},"will-change: transform"," is enabled (never resident in the idle state); after releasing, an easing curve smoothly animates the thumb to its end point.",[50,331,333,337],{"title":332},"Drag to toggle",[53,334,335],{"v-slot:preview":55},[57,336],{},[53,338,339],{"v-slot:code":55},[62,340,342],{"className":64,"code":341,"language":66,"meta":55,"style":55},"\u003CFluereToggleSwitch v-model=\"vpn\">VPN\u003C\u002FFluereToggleSwitch>\n",[18,343,344],{"__ignoreMap":55},[70,345,346,348,350,352,354,356,359,361,364,366],{"class":72,"line":73},[70,347,77],{"class":76},[70,349,81],{"class":80},[70,351,85],{"class":84},[70,353,88],{"class":76},[70,355,92],{"class":91},[70,357,358],{"class":76},"vpn",[70,360,92],{"class":91},[70,362,363],{"class":76},">VPN\u003C\u002F",[70,365,81],{"class":80},[70,367,105],{"class":76},[23,369,371],{"id":370},"disabled","Disabled",[14,373,374,375,377],{},"When ",[18,376,370],{},", it is not interactive, and the track, the thumb, and the text all fall to the …Disabled tier.",[50,379,381,386],{"title":380},"Disabled state",[53,382,383],{"v-slot:preview":55},[384,385],"toggle-switch-disabled-demo",{},[53,387,388],{"v-slot:code":55},[62,389,391],{"className":64,"code":390,"language":66,"meta":55,"style":55},"\u003CFluereToggleSwitch disabled>Off (disabled)\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch disabled :model-value=\"true\">On (disabled)\u003C\u002FFluereToggleSwitch>\n",[18,392,393,409],{"__ignoreMap":55},[70,394,395,397,399,402,405,407],{"class":72,"line":73},[70,396,77],{"class":76},[70,398,81],{"class":80},[70,400,401],{"class":84}," disabled",[70,403,404],{"class":76},">Off (disabled)\u003C\u002F",[70,406,81],{"class":80},[70,408,105],{"class":76},[70,410,411,413,415,417,420,423,425,427,431,433,436,438],{"class":72,"line":108},[70,412,77],{"class":76},[70,414,81],{"class":80},[70,416,401],{"class":84},[70,418,419],{"class":76}," :",[70,421,422],{"class":84},"model-value",[70,424,88],{"class":76},[70,426,92],{"class":91},[70,428,430],{"class":429},"sj4cs","true",[70,432,92],{"class":91},[70,434,435],{"class":76},">On (disabled)\u003C\u002F",[70,437,81],{"class":80},[70,439,105],{"class":76},[23,441,443],{"id":442},"form-submission","Form submission",[14,445,446,447,450,451,454,455,458,459,462,463,466],{},"When inside a ",[18,448,449],{},"\u003Cform>"," with ",[18,452,453],{},"name"," passed, a hidden native ",[18,456,457],{},"\u003Cinput type=\"checkbox\">"," is added, and the enabled result is submitted with the form (",[18,460,461],{},"value"," is the submitted value, default ",[18,464,465],{},"\"on\"",").",[50,468,469,473],{"title":443},[53,470,471],{"v-slot:preview":55},[57,472],{},[53,474,475],{"v-slot:code":55},[62,476,478],{"className":64,"code":477,"language":66,"meta":55,"style":55},"\u003Cform @submit.prevent>\n  \u003CFluereToggleSwitch name=\"dark-mode\" value=\"yes\">Dark mode\u003C\u002FFluereToggleSwitch>\n\u003C\u002Fform>\n",[18,479,480,501,506],{"__ignoreMap":55},[70,481,482,484,487,490,493,496,499],{"class":72,"line":73},[70,483,77],{"class":76},[70,485,486],{"class":80},"form",[70,488,489],{"class":76}," @",[70,491,492],{"class":84},"submit",[70,494,495],{"class":76},".",[70,497,498],{"class":84},"prevent",[70,500,105],{"class":76},[70,502,503],{"class":72,"line":108},[70,504,505],{"class":76},"  \u003CFluereToggleSwitch name=\"dark-mode\" value=\"yes\">Dark mode\u003C\u002FFluereToggleSwitch>\n",[70,507,508,510,512],{"class":72,"line":216},[70,509,314],{"class":76},[70,511,486],{"class":80},[70,513,105],{"class":76},[23,515,517],{"id":516},"api","API",[519,520,521,540],"table",{},[522,523,524],"thead",{},[525,526,527,531,534,537],"tr",{},[528,529,530],"th",{},"Prop",[528,532,533],{},"Type",[528,535,536],{},"Default",[528,538,539],{},"Description",[541,542,543,567,584,604,623,641],"tbody",{},[525,544,545,551,556,561],{},[546,547,548],"td",{},[18,549,550],{},"modelValue",[546,552,553],{},[18,554,555],{},"boolean",[546,557,558],{},[18,559,560],{},"false",[546,562,563,564,566],{},"Whether on (",[18,565,31],{},")",[525,568,569,573,577,581],{},[546,570,571],{},[18,572,370],{},[546,574,575],{},[18,576,555],{},[546,578,579],{},[18,580,560],{},[546,582,583],{},"Whether disabled",[525,585,586,591,596,601],{},[546,587,588],{},[18,589,590],{},"size",[546,592,593],{},[18,594,595],{},"'small' | 'medium' | 'large'",[546,597,598],{},[18,599,600],{},"'medium'",[546,602,603],{},"Size (medium aligns with WinUI 40×20)",[525,605,606,610,615,620],{},[546,607,608],{},[18,609,453],{},[546,611,612],{},[18,613,614],{},"string",[546,616,617],{},[18,618,619],{},"—",[546,621,622],{},"Form submission name, paired with a hidden native input",[525,624,625,629,633,638],{},[546,626,627],{},[18,628,461],{},[546,630,631],{},[18,632,614],{},[546,634,635],{},[18,636,637],{},"'on'",[546,639,640],{},"The value submitted when on",[525,642,643,648,652,656],{},[546,644,645],{},[18,646,647],{},"label",[546,649,650],{},[18,651,614],{},[546,653,654],{},[18,655,619],{},[546,657,658],{},"Accessible name (defaults to content\u002Ftitle text)",[519,660,661,670],{},[522,662,663],{},[525,664,665,668],{},[528,666,667],{},"Slot",[528,669,539],{},[541,671,672,682,692,702],{},[525,673,674,679],{},[546,675,676],{},[18,677,678],{},"default",[546,680,681],{},"Row label (semantic name)",[525,683,684,689],{},[546,685,686],{},[18,687,688],{},"header",[546,690,691],{},"Top title row (WinUI Header)",[525,693,694,699],{},[546,695,696],{},[18,697,698],{},"on-content",[546,700,701],{},"Text shown when on (cross-fade)",[525,703,704,709],{},[546,705,706],{},[18,707,708],{},"off-content",[546,710,711],{},"Text shown when off (cross-fade)",[713,714,715],"blockquote",{},[14,716,717,718,721,722,725,726,729,730,733,734,737,738,741,742,745],{},"Movement only uses ",[18,719,720],{},"transform: translateX"," (",[18,723,724],{},"calc(var(--travel) * progress)","), never touching ",[18,727,728],{},"left\u002Fright","; there is no resident ",[18,731,732],{},"will-change"," in the normal state, enabled only during dragging; the animation duration comes from Fluent ",[18,735,736],{},"duration*",", the easing from ",[18,739,740],{},"curveEasyEase(Max)",", and ",[18,743,744],{},"prefers-reduced-motion"," is respected.",[747,748,749],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":55,"searchDepth":108,"depth":108,"links":751},[752,753,754,755,756,757,758],{"id":25,"depth":108,"text":26},{"id":133,"depth":108,"text":134},{"id":237,"depth":108,"text":238},{"id":321,"depth":108,"text":322},{"id":370,"depth":108,"text":371},{"id":442,"depth":108,"text":443},{"id":516,"depth":108,"text":517},"[object Object]","md",{},null,true,"\u002Fen\u002Fcomponents\u002Fswitch",{"title":5,"description":766},{"A toggle component for switching between two states":767,"nav":768},"on \u002F off.",{"title":5},"en\u002Fcomponents\u002Fswitch","RJYb3FKcbVVABm2_E-ZySU1lmaB6RBmD-Weeg3UgPTA",{"id":772,"title":773,"body":774,"description":1413,"extension":760,"meta":1414,"nav":1415,"navigation":763,"path":1416,"seo":1417,"stem":1418,"__hash__":1419},"content\u002Fcomponents\u002Fswitch.md","Switch 开关",{"type":7,"value":775,"toc":1404},[776,779,785,788,804,862,865,883,954,958,969,1029,1032,1038,1073,1076,1081,1137,1140,1158,1200,1202,1327,1376,1402],[10,777,773],{"id":778},"switch-开关",[14,780,781,782,784],{},"开关用于在两个互斥状态（开 \u002F 关）间切换，通常表示某项功能的启用与否。样式还原 WinUI 3 \u002F Windows App SDK 的 ToggleSwitch：自研实现轨道 + 滑块，完整还原「点击切换 \u002F 拖拽滑块到终点 \u002F 键盘切换 \u002F hover 滑块放大 \u002F active 滑块原地增宽（药丸形）」的 WinUI 手感。位移只走 ",[18,783,20],{},"、缓动动画只在切换时启用；滑块只在 rail 内做尺寸变化、天然无法离开轨道区域，切换瞬间也不会出现反方向小跳动。",[23,786,787],{"id":787},"基础用法",[14,789,790,792,793,36,795,797,798,800,801,803],{},[18,791,31],{}," 绑定布尔值。点击开关任意处切换；拖拽滑块超过半程落到目标端、不足半程回弹；键盘 ",[18,794,35],{},[18,796,39],{}," 切换、",[18,799,43],{}," 关闭、",[18,802,47],{}," 开启。",[50,805,806,810],{"title":787},[53,807,808],{"v-slot:preview":55},[57,809],{},[53,811,812],{"v-slot:code":55},[62,813,815],{"className":64,"code":814,"language":66,"meta":55,"style":55},"\u003CFluereToggleSwitch v-model=\"wifi\">Wi-Fi\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch v-model=\"bluetooth\">蓝牙\u003C\u002FFluereToggleSwitch>\n",[18,816,817,839],{"__ignoreMap":55},[70,818,819,821,823,825,827,829,831,833,835,837],{"class":72,"line":73},[70,820,77],{"class":76},[70,822,81],{"class":80},[70,824,85],{"class":84},[70,826,88],{"class":76},[70,828,92],{"class":91},[70,830,95],{"class":76},[70,832,92],{"class":91},[70,834,100],{"class":76},[70,836,81],{"class":80},[70,838,105],{"class":76},[70,840,841,843,845,847,849,851,853,855,858,860],{"class":72,"line":108},[70,842,77],{"class":76},[70,844,81],{"class":80},[70,846,85],{"class":84},[70,848,88],{"class":76},[70,850,92],{"class":91},[70,852,121],{"class":76},[70,854,92],{"class":91},[70,856,857],{"class":76},">蓝牙\u003C\u002F",[70,859,81],{"class":80},[70,861,105],{"class":76},[23,863,864],{"id":864},"尺寸",[14,866,867,868,870,871,873,874,876,877,879,880,882],{},"标准 WinUI ToggleSwitch 轨道为 40×20（",[18,869,140],{},"）。Web 侧另提供 ",[18,872,144],{},"（32×16）与 ",[18,875,148],{},"（48×24），保持 2:1 比例；",[18,878,152],{},"（滑块行程 16 \u002F 20 \u002F 24）分别对齐 Fluent ",[18,881,156],{}," L \u002F XL \u002F XXL。",[50,884,886,890],{"title":885},"三档尺寸",[53,887,888],{"v-slot:preview":55},[164,889],{},[53,891,892],{"v-slot:code":55},[62,893,895],{"className":64,"code":894,"language":66,"meta":55,"style":55},"\u003CFluereToggleSwitch size=\"small\">small（32×16）\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch size=\"medium\">medium（40×20）\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch size=\"large\">large（48×24）\u003C\u002FFluereToggleSwitch>\n",[18,896,897,916,935],{"__ignoreMap":55},[70,898,899,901,903,905,907,909,912,914],{"class":72,"line":73},[70,900,77],{"class":76},[70,902,81],{"class":80},[70,904,181],{"class":84},[70,906,88],{"class":76},[70,908,186],{"class":91},[70,910,911],{"class":76},">small（32×16）\u003C\u002F",[70,913,81],{"class":80},[70,915,105],{"class":76},[70,917,918,920,922,924,926,928,931,933],{"class":72,"line":108},[70,919,77],{"class":76},[70,921,81],{"class":80},[70,923,181],{"class":84},[70,925,88],{"class":76},[70,927,206],{"class":91},[70,929,930],{"class":76},">medium（40×20）\u003C\u002F",[70,932,81],{"class":80},[70,934,105],{"class":76},[70,936,937,939,941,943,945,947,950,952],{"class":72,"line":216},[70,938,77],{"class":76},[70,940,81],{"class":80},[70,942,181],{"class":84},[70,944,88],{"class":76},[70,946,227],{"class":91},[70,948,949],{"class":76},">large（48×24）\u003C\u002F",[70,951,81],{"class":80},[70,953,105],{"class":76},[23,955,957],{"id":956},"标题-开关内容","标题 + 开关内容",[14,959,960,961,963,964,36,966,968],{},"还原 WinUI 三层结构：",[18,962,244],{}," 顶部说明行、",[18,965,248],{},[18,967,251],{}," 在轨道右侧同一格交叉淡入淡出、默认插槽作为行标签（同时是有语义的可见文本）。",[50,970,972,976],{"title":971},"标题 + On\u002FOff 内容",[53,973,974],{"v-slot:preview":55},[259,975],{},[53,977,978],{"v-slot:code":55},[62,979,981],{"className":64,"code":980,"language":66,"meta":55,"style":55},"\u003CFluereToggleSwitch v-model=\"notify\">\n  \u003Ctemplate #header>系统通知\u003C\u002Ftemplate>\n  \u003Ctemplate #off-content>关\u003C\u002Ftemplate>\n  \u003Ctemplate #on-content>开\u003C\u002Ftemplate>\n  接收桌面通知\n\u003C\u002FFluereToggleSwitch>\n",[18,982,983,1001,1006,1011,1016,1021],{"__ignoreMap":55},[70,984,985,987,989,991,993,995,997,999],{"class":72,"line":73},[70,986,77],{"class":76},[70,988,81],{"class":80},[70,990,85],{"class":84},[70,992,88],{"class":76},[70,994,92],{"class":91},[70,996,282],{"class":76},[70,998,92],{"class":91},[70,1000,105],{"class":76},[70,1002,1003],{"class":72,"line":108},[70,1004,1005],{"class":76},"  \u003Ctemplate #header>系统通知\u003C\u002Ftemplate>\n",[70,1007,1008],{"class":72,"line":216},[70,1009,1010],{"class":76},"  \u003Ctemplate #off-content>关\u003C\u002Ftemplate>\n",[70,1012,1013],{"class":72,"line":299},[70,1014,1015],{"class":76},"  \u003Ctemplate #on-content>开\u003C\u002Ftemplate>\n",[70,1017,1018],{"class":72,"line":305},[70,1019,1020],{"class":76},"  接收桌面通知\n",[70,1022,1023,1025,1027],{"class":72,"line":311},[70,1024,314],{"class":76},[70,1026,81],{"class":80},[70,1028,105],{"class":76},[23,1030,1031],{"id":1031},"拖拽交互",[14,1033,1034,1035,1037],{},"按住滑块左右拖动，滑块会跟随指针移动；松手时若越过中点则落到另一端，否则回弹到原状态——与 WinUI 一致。拖动过程中仅启用 ",[18,1036,328],{},"（不在空闲态常驻），松手后由缓动曲线把滑块平滑滑到终点。",[50,1039,1041,1045],{"title":1040},"拖拽切换",[53,1042,1043],{"v-slot:preview":55},[57,1044],{},[53,1046,1047],{"v-slot:code":55},[62,1048,1049],{"className":64,"code":341,"language":66,"meta":55,"style":55},[18,1050,1051],{"__ignoreMap":55},[70,1052,1053,1055,1057,1059,1061,1063,1065,1067,1069,1071],{"class":72,"line":73},[70,1054,77],{"class":76},[70,1056,81],{"class":80},[70,1058,85],{"class":84},[70,1060,88],{"class":76},[70,1062,92],{"class":91},[70,1064,358],{"class":76},[70,1066,92],{"class":91},[70,1068,363],{"class":76},[70,1070,81],{"class":80},[70,1072,105],{"class":76},[23,1074,1075],{"id":1075},"禁用",[14,1077,1078,1080],{},[18,1079,370],{}," 时不可交互，轨道、滑块、文字全部落到 …Disabled 档。",[50,1082,1084,1088],{"title":1083},"禁用状态",[53,1085,1086],{"v-slot:preview":55},[384,1087],{},[53,1089,1090],{"v-slot:code":55},[62,1091,1093],{"className":64,"code":1092,"language":66,"meta":55,"style":55},"\u003CFluereToggleSwitch disabled>未开启（禁用）\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch disabled :model-value=\"true\">已开启（禁用）\u003C\u002FFluereToggleSwitch>\n",[18,1094,1095,1110],{"__ignoreMap":55},[70,1096,1097,1099,1101,1103,1106,1108],{"class":72,"line":73},[70,1098,77],{"class":76},[70,1100,81],{"class":80},[70,1102,401],{"class":84},[70,1104,1105],{"class":76},">未开启（禁用）\u003C\u002F",[70,1107,81],{"class":80},[70,1109,105],{"class":76},[70,1111,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1133,1135],{"class":72,"line":108},[70,1113,77],{"class":76},[70,1115,81],{"class":80},[70,1117,401],{"class":84},[70,1119,419],{"class":76},[70,1121,422],{"class":84},[70,1123,88],{"class":76},[70,1125,92],{"class":91},[70,1127,430],{"class":429},[70,1129,92],{"class":91},[70,1131,1132],{"class":76},">已开启（禁用）\u003C\u002F",[70,1134,81],{"class":80},[70,1136,105],{"class":76},[23,1138,1139],{"id":1139},"表单提交",[14,1141,1142,1143,1145,1146,1148,1149,1151,1152,1154,1155,1157],{},"位于 ",[18,1144,449],{}," 内并传 ",[18,1147,453],{}," 时补隐藏原生 ",[18,1150,457],{},"，开启结果随表单提交（",[18,1153,461],{}," 作为提交值，默认 ",[18,1156,465],{},"）。",[50,1159,1160,1164],{"title":1139},[53,1161,1162],{"v-slot:preview":55},[57,1163],{},[53,1165,1166],{"v-slot:code":55},[62,1167,1169],{"className":64,"code":1168,"language":66,"meta":55,"style":55},"\u003Cform @submit.prevent>\n  \u003CFluereToggleSwitch name=\"dark-mode\" value=\"yes\">深色模式\u003C\u002FFluereToggleSwitch>\n\u003C\u002Fform>\n",[18,1170,1171,1187,1192],{"__ignoreMap":55},[70,1172,1173,1175,1177,1179,1181,1183,1185],{"class":72,"line":73},[70,1174,77],{"class":76},[70,1176,486],{"class":80},[70,1178,489],{"class":76},[70,1180,492],{"class":84},[70,1182,495],{"class":76},[70,1184,498],{"class":84},[70,1186,105],{"class":76},[70,1188,1189],{"class":72,"line":108},[70,1190,1191],{"class":76},"  \u003CFluereToggleSwitch name=\"dark-mode\" value=\"yes\">深色模式\u003C\u002FFluereToggleSwitch>\n",[70,1193,1194,1196,1198],{"class":72,"line":216},[70,1195,314],{"class":76},[70,1197,486],{"class":80},[70,1199,105],{"class":76},[23,1201,517],{"id":516},[519,1203,1204,1220],{},[522,1205,1206],{},[525,1207,1208,1211,1214,1217],{},[528,1209,1210],{},"属性（Props）",[528,1212,1213],{},"类型",[528,1215,1216],{},"默认",[528,1218,1219],{},"说明",[541,1221,1222,1242,1259,1276,1293,1310],{},[525,1223,1224,1228,1232,1236],{},[546,1225,1226],{},[18,1227,550],{},[546,1229,1230],{},[18,1231,555],{},[546,1233,1234],{},[18,1235,560],{},[546,1237,1238,1239,1241],{},"是否开启（",[18,1240,31],{},"）",[525,1243,1244,1248,1252,1256],{},[546,1245,1246],{},[18,1247,370],{},[546,1249,1250],{},[18,1251,555],{},[546,1253,1254],{},[18,1255,560],{},[546,1257,1258],{},"是否禁用",[525,1260,1261,1265,1269,1273],{},[546,1262,1263],{},[18,1264,590],{},[546,1266,1267],{},[18,1268,595],{},[546,1270,1271],{},[18,1272,600],{},[546,1274,1275],{},"尺寸（medium 对齐 WinUI 40×20）",[525,1277,1278,1282,1286,1290],{},[546,1279,1280],{},[18,1281,453],{},[546,1283,1284],{},[18,1285,614],{},[546,1287,1288],{},[18,1289,619],{},[546,1291,1292],{},"表单提交名，配合隐藏原生 input",[525,1294,1295,1299,1303,1307],{},[546,1296,1297],{},[18,1298,461],{},[546,1300,1301],{},[18,1302,614],{},[546,1304,1305],{},[18,1306,637],{},[546,1308,1309],{},"开启时提交给后端的值",[525,1311,1312,1316,1320,1324],{},[546,1313,1314],{},[18,1315,647],{},[546,1317,1318],{},[18,1319,614],{},[546,1321,1322],{},[18,1323,619],{},[546,1325,1326],{},"可访问名称（缺省取内容\u002F标题文本）",[519,1328,1329,1338],{},[522,1330,1331],{},[525,1332,1333,1336],{},[528,1334,1335],{},"插槽（Slots）",[528,1337,1219],{},[541,1339,1340,1349,1358,1367],{},[525,1341,1342,1346],{},[546,1343,1344],{},[18,1345,678],{},[546,1347,1348],{},"行标签（语义名）",[525,1350,1351,1355],{},[546,1352,1353],{},[18,1354,688],{},[546,1356,1357],{},"顶部标题行（WinUI Header）",[525,1359,1360,1364],{},[546,1361,1362],{},[18,1363,698],{},[546,1365,1366],{},"开启时显示的文本（交叉淡入淡出）",[525,1368,1369,1373],{},[546,1370,1371],{},[18,1372,708],{},[546,1374,1375],{},"关闭时显示的文本（交叉淡入淡出）",[713,1377,1378],{},[14,1379,1380,1381,1383,1384,1386,1387,1389,1390,1392,1393,1395,1396,1398,1399,1401],{},"位移只使用 ",[18,1382,720],{},"（",[18,1385,724],{},"），不触碰 ",[18,1388,728],{},"；常态不带常驻 ",[18,1391,732],{},"，仅在拖拽中开启；动效时长来自 Fluent ",[18,1394,736],{},"、缓动来自 ",[18,1397,740],{},"，并遵循 ",[18,1400,744],{},"。",[747,1403,749],{},{"title":55,"searchDepth":108,"depth":108,"links":1405},[1406,1407,1408,1409,1410,1411,1412],{"id":787,"depth":108,"text":787},{"id":864,"depth":108,"text":864},{"id":956,"depth":108,"text":957},{"id":1031,"depth":108,"text":1031},{"id":1075,"depth":108,"text":1075},{"id":1139,"depth":108,"text":1139},{"id":516,"depth":108,"text":517},"开关组件，用于在「开 \u002F 关」两个状态间切换。",{},{"title":773},"\u002Fcomponents\u002Fswitch",{"title":773,"description":1413},"components\u002Fswitch","-RmXigREblhcvVG_jpo7GLeSV2evhm8PoMj0FdD4nQs",1792150931019]