[{"data":1,"prerenderedAt":764},["ShallowReactive",2],{"content-\u002Fcomponents\u002Fswitch":3,"content-en-fallback-\u002Fcomponents\u002Fswitch":763},{"id":4,"title":5,"body":6,"description":754,"extension":755,"meta":756,"nav":757,"navigation":758,"path":759,"seo":760,"stem":761,"__hash__":762},"content\u002Fcomponents\u002Fswitch.md","Switch 开关",{"type":7,"value":8,"toc":745},"minimark",[9,13,22,26,48,130,133,156,233,237,251,317,320,327,365,368,374,436,439,462,509,513,654,707,741],[10,11,5],"h1",{"id":12},"switch-开关",[14,15,16,17,21],"p",{},"开关用于在两个互斥状态（开 \u002F 关）间切换，通常表示某项功能的启用与否。样式还原 WinUI 3 \u002F Windows App SDK 的 ToggleSwitch：自研实现轨道 + 滑块，完整还原「点击切换 \u002F 拖拽滑块到终点 \u002F 键盘切换 \u002F hover 滑块放大 \u002F active 滑块原地增宽（药丸形）」的 WinUI 手感。位移只走 ",[18,19,20],"code",{},"transform","、缓动动画只在切换时启用；滑块只在 rail 内做尺寸变化、天然无法离开轨道区域，切换瞬间也不会出现反方向小跳动。",[23,24,25],"h2",{"id":25},"基础用法",[14,27,28,31,32,35,36,39,40,43,44,47],{},[18,29,30],{},"v-model"," 绑定布尔值。点击开关任意处切换；拖拽滑块超过半程落到目标端、不足半程回弹；键盘 ",[18,33,34],{},"Space"," \u002F ",[18,37,38],{},"Enter"," 切换、",[18,41,42],{},"◀"," 关闭、",[18,45,46],{},"▶"," 开启。",[49,50,51,58],"demo-block",{"title":25},[52,53,55],"template",{"v-slot:preview":54},"",[56,57],"toggle-switch-basic-demo",{},[52,59,60],{"v-slot:code":54},[61,62,66],"pre",{"className":63,"code":64,"language":65,"meta":54,"style":54},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereToggleSwitch v-model=\"wifi\">Wi-Fi\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch v-model=\"bluetooth\">蓝牙\u003C\u002FFluereToggleSwitch>\n","vue",[18,67,68,105],{"__ignoreMap":54},[69,70,73,77,81,85,88,92,95,97,100,102],"span",{"class":71,"line":72},"line",1,[69,74,76],{"class":75},"sVt8B","\u003C",[69,78,80],{"class":79},"s9eBZ","FluereToggleSwitch",[69,82,84],{"class":83},"sScJk"," v-model",[69,86,87],{"class":75},"=",[69,89,91],{"class":90},"sZZnC","\"",[69,93,94],{"class":75},"wifi",[69,96,91],{"class":90},[69,98,99],{"class":75},">Wi-Fi\u003C\u002F",[69,101,80],{"class":79},[69,103,104],{"class":75},">\n",[69,106,108,110,112,114,116,118,121,123,126,128],{"class":71,"line":107},2,[69,109,76],{"class":75},[69,111,80],{"class":79},[69,113,84],{"class":83},[69,115,87],{"class":75},[69,117,91],{"class":90},[69,119,120],{"class":75},"bluetooth",[69,122,91],{"class":90},[69,124,125],{"class":75},">蓝牙\u003C\u002F",[69,127,80],{"class":79},[69,129,104],{"class":75},[23,131,132],{"id":132},"尺寸",[14,134,135,136,139,140,143,144,147,148,151,152,155],{},"标准 WinUI ToggleSwitch 轨道为 40×20（",[18,137,138],{},"medium","）。Web 侧另提供 ",[18,141,142],{},"small","（32×16）与 ",[18,145,146],{},"large","（48×24），保持 2:1 比例；",[18,149,150],{},"travel","（滑块行程 16 \u002F 20 \u002F 24）分别对齐 Fluent ",[18,153,154],{},"spacing"," L \u002F XL \u002F XXL。",[49,157,159,164],{"title":158},"三档尺寸",[52,160,161],{"v-slot:preview":54},[162,163],"toggle-switch-size-demo",{},[52,165,166],{"v-slot:code":54},[61,167,169],{"className":63,"code":168,"language":65,"meta":54,"style":54},"\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,170,171,192,212],{"__ignoreMap":54},[69,172,173,175,177,180,182,185,188,190],{"class":71,"line":72},[69,174,76],{"class":75},[69,176,80],{"class":79},[69,178,179],{"class":83}," size",[69,181,87],{"class":75},[69,183,184],{"class":90},"\"small\"",[69,186,187],{"class":75},">small（32×16）\u003C\u002F",[69,189,80],{"class":79},[69,191,104],{"class":75},[69,193,194,196,198,200,202,205,208,210],{"class":71,"line":107},[69,195,76],{"class":75},[69,197,80],{"class":79},[69,199,179],{"class":83},[69,201,87],{"class":75},[69,203,204],{"class":90},"\"medium\"",[69,206,207],{"class":75},">medium（40×20）\u003C\u002F",[69,209,80],{"class":79},[69,211,104],{"class":75},[69,213,215,217,219,221,223,226,229,231],{"class":71,"line":214},3,[69,216,76],{"class":75},[69,218,80],{"class":79},[69,220,179],{"class":83},[69,222,87],{"class":75},[69,224,225],{"class":90},"\"large\"",[69,227,228],{"class":75},">large（48×24）\u003C\u002F",[69,230,80],{"class":79},[69,232,104],{"class":75},[23,234,236],{"id":235},"标题-开关内容","标题 + 开关内容",[14,238,239,240,243,244,35,247,250],{},"还原 WinUI 三层结构：",[18,241,242],{},"#header"," 顶部说明行、",[18,245,246],{},"#on-content",[18,248,249],{},"#off-content"," 在轨道右侧同一格交叉淡入淡出、默认插槽作为行标签（同时是有语义的可见文本）。",[49,252,254,259],{"title":253},"标题 + On\u002FOff 内容",[52,255,256],{"v-slot:preview":54},[257,258],"toggle-switch-header-content-demo",{},[52,260,261],{"v-slot:code":54},[61,262,264],{"className":63,"code":263,"language":65,"meta":54,"style":54},"\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,265,266,285,290,295,301,307],{"__ignoreMap":54},[69,267,268,270,272,274,276,278,281,283],{"class":71,"line":72},[69,269,76],{"class":75},[69,271,80],{"class":79},[69,273,84],{"class":83},[69,275,87],{"class":75},[69,277,91],{"class":90},[69,279,280],{"class":75},"notify",[69,282,91],{"class":90},[69,284,104],{"class":75},[69,286,287],{"class":71,"line":107},[69,288,289],{"class":75},"  \u003Ctemplate #header>系统通知\u003C\u002Ftemplate>\n",[69,291,292],{"class":71,"line":214},[69,293,294],{"class":75},"  \u003Ctemplate #off-content>关\u003C\u002Ftemplate>\n",[69,296,298],{"class":71,"line":297},4,[69,299,300],{"class":75},"  \u003Ctemplate #on-content>开\u003C\u002Ftemplate>\n",[69,302,304],{"class":71,"line":303},5,[69,305,306],{"class":75},"  接收桌面通知\n",[69,308,310,313,315],{"class":71,"line":309},6,[69,311,312],{"class":75},"\u003C\u002F",[69,314,80],{"class":79},[69,316,104],{"class":75},[23,318,319],{"id":319},"拖拽交互",[14,321,322,323,326],{},"按住滑块左右拖动，滑块会跟随指针移动；松手时若越过中点则落到另一端，否则回弹到原状态——与 WinUI 一致。拖动过程中仅启用 ",[18,324,325],{},"will-change: transform","（不在空闲态常驻），松手后由缓动曲线把滑块平滑滑到终点。",[49,328,330,334],{"title":329},"拖拽切换",[52,331,332],{"v-slot:preview":54},[56,333],{},[52,335,336],{"v-slot:code":54},[61,337,339],{"className":63,"code":338,"language":65,"meta":54,"style":54},"\u003CFluereToggleSwitch v-model=\"vpn\">VPN\u003C\u002FFluereToggleSwitch>\n",[18,340,341],{"__ignoreMap":54},[69,342,343,345,347,349,351,353,356,358,361,363],{"class":71,"line":72},[69,344,76],{"class":75},[69,346,80],{"class":79},[69,348,84],{"class":83},[69,350,87],{"class":75},[69,352,91],{"class":90},[69,354,355],{"class":75},"vpn",[69,357,91],{"class":90},[69,359,360],{"class":75},">VPN\u003C\u002F",[69,362,80],{"class":79},[69,364,104],{"class":75},[23,366,367],{"id":367},"禁用",[14,369,370,373],{},[18,371,372],{},"disabled"," 时不可交互，轨道、滑块、文字全部落到 …Disabled 档。",[49,375,377,382],{"title":376},"禁用状态",[52,378,379],{"v-slot:preview":54},[380,381],"toggle-switch-disabled-demo",{},[52,383,384],{"v-slot:code":54},[61,385,387],{"className":63,"code":386,"language":65,"meta":54,"style":54},"\u003CFluereToggleSwitch disabled>未开启（禁用）\u003C\u002FFluereToggleSwitch>\n\u003CFluereToggleSwitch disabled :model-value=\"true\">已开启（禁用）\u003C\u002FFluereToggleSwitch>\n",[18,388,389,405],{"__ignoreMap":54},[69,390,391,393,395,398,401,403],{"class":71,"line":72},[69,392,76],{"class":75},[69,394,80],{"class":79},[69,396,397],{"class":83}," disabled",[69,399,400],{"class":75},">未开启（禁用）\u003C\u002F",[69,402,80],{"class":79},[69,404,104],{"class":75},[69,406,407,409,411,413,416,419,421,423,427,429,432,434],{"class":71,"line":107},[69,408,76],{"class":75},[69,410,80],{"class":79},[69,412,397],{"class":83},[69,414,415],{"class":75}," :",[69,417,418],{"class":83},"model-value",[69,420,87],{"class":75},[69,422,91],{"class":90},[69,424,426],{"class":425},"sj4cs","true",[69,428,91],{"class":90},[69,430,431],{"class":75},">已开启（禁用）\u003C\u002F",[69,433,80],{"class":79},[69,435,104],{"class":75},[23,437,438],{"id":438},"表单提交",[14,440,441,442,445,446,449,450,453,454,457,458,461],{},"位于 ",[18,443,444],{},"\u003Cform>"," 内并传 ",[18,447,448],{},"name"," 时补隐藏原生 ",[18,451,452],{},"\u003Cinput type=\"checkbox\">","，开启结果随表单提交（",[18,455,456],{},"value"," 作为提交值，默认 ",[18,459,460],{},"\"on\"","）。",[49,463,464,468],{"title":438},[52,465,466],{"v-slot:preview":54},[56,467],{},[52,469,470],{"v-slot:code":54},[61,471,473],{"className":63,"code":472,"language":65,"meta":54,"style":54},"\u003Cform @submit.prevent>\n  \u003CFluereToggleSwitch name=\"dark-mode\" value=\"yes\">深色模式\u003C\u002FFluereToggleSwitch>\n\u003C\u002Fform>\n",[18,474,475,496,501],{"__ignoreMap":54},[69,476,477,479,482,485,488,491,494],{"class":71,"line":72},[69,478,76],{"class":75},[69,480,481],{"class":79},"form",[69,483,484],{"class":75}," @",[69,486,487],{"class":83},"submit",[69,489,490],{"class":75},".",[69,492,493],{"class":83},"prevent",[69,495,104],{"class":75},[69,497,498],{"class":71,"line":107},[69,499,500],{"class":75},"  \u003CFluereToggleSwitch name=\"dark-mode\" value=\"yes\">深色模式\u003C\u002FFluereToggleSwitch>\n",[69,502,503,505,507],{"class":71,"line":214},[69,504,312],{"class":75},[69,506,481],{"class":79},[69,508,104],{"class":75},[23,510,512],{"id":511},"api","API",[514,515,516,535],"table",{},[517,518,519],"thead",{},[520,521,522,526,529,532],"tr",{},[523,524,525],"th",{},"属性（Props）",[523,527,528],{},"类型",[523,530,531],{},"默认",[523,533,534],{},"说明",[536,537,538,562,579,599,618,636],"tbody",{},[520,539,540,546,551,556],{},[541,542,543],"td",{},[18,544,545],{},"modelValue",[541,547,548],{},[18,549,550],{},"boolean",[541,552,553],{},[18,554,555],{},"false",[541,557,558,559,561],{},"是否开启（",[18,560,30],{},"）",[520,563,564,568,572,576],{},[541,565,566],{},[18,567,372],{},[541,569,570],{},[18,571,550],{},[541,573,574],{},[18,575,555],{},[541,577,578],{},"是否禁用",[520,580,581,586,591,596],{},[541,582,583],{},[18,584,585],{},"size",[541,587,588],{},[18,589,590],{},"'small' | 'medium' | 'large'",[541,592,593],{},[18,594,595],{},"'medium'",[541,597,598],{},"尺寸（medium 对齐 WinUI 40×20）",[520,600,601,605,610,615],{},[541,602,603],{},[18,604,448],{},[541,606,607],{},[18,608,609],{},"string",[541,611,612],{},[18,613,614],{},"—",[541,616,617],{},"表单提交名，配合隐藏原生 input",[520,619,620,624,628,633],{},[541,621,622],{},[18,623,456],{},[541,625,626],{},[18,627,609],{},[541,629,630],{},[18,631,632],{},"'on'",[541,634,635],{},"开启时提交给后端的值",[520,637,638,643,647,651],{},[541,639,640],{},[18,641,642],{},"label",[541,644,645],{},[18,646,609],{},[541,648,649],{},[18,650,614],{},[541,652,653],{},"可访问名称（缺省取内容\u002F标题文本）",[514,655,656,665],{},[517,657,658],{},[520,659,660,663],{},[523,661,662],{},"插槽（Slots）",[523,664,534],{},[536,666,667,677,687,697],{},[520,668,669,674],{},[541,670,671],{},[18,672,673],{},"default",[541,675,676],{},"行标签（语义名）",[520,678,679,684],{},[541,680,681],{},[18,682,683],{},"header",[541,685,686],{},"顶部标题行（WinUI Header）",[520,688,689,694],{},[541,690,691],{},[18,692,693],{},"on-content",[541,695,696],{},"开启时显示的文本（交叉淡入淡出）",[520,698,699,704],{},[541,700,701],{},[18,702,703],{},"off-content",[541,705,706],{},"关闭时显示的文本（交叉淡入淡出）",[708,709,710],"blockquote",{},[14,711,712,713,716,717,720,721,724,725,728,729,732,733,736,737,740],{},"位移只使用 ",[18,714,715],{},"transform: translateX","（",[18,718,719],{},"calc(var(--travel) * progress)","），不触碰 ",[18,722,723],{},"left\u002Fright","；常态不带常驻 ",[18,726,727],{},"will-change","，仅在拖拽中开启；动效时长来自 Fluent ",[18,730,731],{},"duration*","、缓动来自 ",[18,734,735],{},"curveEasyEase(Max)","，并遵循 ",[18,738,739],{},"prefers-reduced-motion","。",[742,743,744],"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":54,"searchDepth":107,"depth":107,"links":746},[747,748,749,750,751,752,753],{"id":25,"depth":107,"text":25},{"id":132,"depth":107,"text":132},{"id":235,"depth":107,"text":236},{"id":319,"depth":107,"text":319},{"id":367,"depth":107,"text":367},{"id":438,"depth":107,"text":438},{"id":511,"depth":107,"text":512},"开关组件，用于在「开 \u002F 关」两个状态间切换。","md",{},{"title":5},true,"\u002Fcomponents\u002Fswitch",{"title":5,"description":754},"components\u002Fswitch","-RmXigREblhcvVG_jpo7GLeSV2evhm8PoMj0FdD4nQs",null,1791802960541]