[{"data":1,"prerenderedAt":2808},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Ftoggle-group":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Ftoggle-group":1498},{"id":4,"title":5,"body":6,"description":1490,"extension":1491,"meta":1492,"nav":1493,"navigation":517,"path":1494,"seo":1495,"stem":1496,"__hash__":1497},"content_en\u002Fen\u002Fcomponents\u002Ftoggle-group.md","Toggle Group",{"type":7,"value":8,"toc":1477},"minimark",[9,13,41,81,86,111,199,205,289,293,318,440,444,459,556,560,587,718,722,802,806,909,913,1017,1021,1027,1217,1250,1276,1281,1430,1460,1473],[10,11,5],"h1",{"id":12},"toggle-group",[14,15,16,20,21,28,29,32,33,36,37,40],"p",{},[17,18,19],"code",{},"FluereToggleGroup"," turns several ",[22,23,25],"a",{"href":24},".\u002Ftoggle-button",[17,26,27],{},"FluereToggleButton","s into a semantically grouped set: ",[17,30,31],{},"role=\"group\"",", a single Tab stop inside the group (roving tabindex), arrow-key \u002F Home \u002F End focus movement, and single-select (",[17,34,35],{},"string",") or multi-select (",[17,38,39],{},"string[]",") values.",[42,43,44],"blockquote",{},[14,45,46,50,51,54,55,58,59,62,63,66,67,73,74,76,77,80],{},[47,48,49],"strong",{},"WinUI has no ToggleGroup control",": the ",[17,52,53],{},"microsoft-ui-xaml"," tag ",[17,56,57],{},"winui3\u002Frelease\u002F2.5.1"," only ships ",[17,60,61],{},"ToggleButton"," (",[17,64,65],{},"git ls-tree -r winui3\u002Frelease\u002F2.5.1 | grep -i togglegroup"," comes back empty). The split here is therefore: ",[47,68,69,70,72],{},"each item's visuals follow WinUI ",[17,71,61],{}," exactly"," (every item reuses the very same ",[17,75,27],{}," SFC, so there is no second state table), while the ",[47,78,79],{},"grouping semantics"," follow the WAI-ARIA toggle button group contract plus reka-ui — that layer has no A-level source to align with.",[82,83,85],"h2",{"id":84},"basic-usage-single-select","Basic usage (single select)",[14,87,88,91,92,94,95,98,99,102,103,106,107,110],{},[17,89,90],{},"v-model"," holds the current value (",[17,93,35],{},") and each ",[17,96,97],{},"FluereToggleGroupItem"," provides its own ",[17,100,101],{},"value",". A single-select group keeps one item pressed; ",[47,104,105],{},"clicking the pressed item again clears the selection"," (the value becomes ",[17,108,109],{},"undefined"," — ARIA toggle buttons may all be unpressed, unlike a RadioGroup which must keep one selected).",[112,113,115,122],"demo-block",{"title":114},"Single select",[116,117,119],"template",{"v-slot:preview":118},"",[120,121],"toggle-group-single-demo",{},[116,123,124],{"v-slot:code":118},[125,126,130],"pre",{"className":127,"code":128,"language":129,"meta":118,"style":118},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereToggleGroup v-model=\"align\" label=\"Text alignment\">\n  \u003CFluereToggleGroupItem value=\"left\">Align left\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"center\">Center\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"right\">Align right\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n","vue",[17,131,132,171,177,183,189],{"__ignoreMap":118},[133,134,137,141,144,148,151,155,158,160,163,165,168],"span",{"class":135,"line":136},"line",1,[133,138,140],{"class":139},"sVt8B","\u003C",[133,142,19],{"class":143},"s9eBZ",[133,145,147],{"class":146},"sScJk"," v-model",[133,149,150],{"class":139},"=",[133,152,154],{"class":153},"sZZnC","\"",[133,156,157],{"class":139},"align",[133,159,154],{"class":153},[133,161,162],{"class":146}," label",[133,164,150],{"class":139},[133,166,167],{"class":153},"\"Text alignment\"",[133,169,170],{"class":139},">\n",[133,172,174],{"class":135,"line":173},2,[133,175,176],{"class":139},"  \u003CFluereToggleGroupItem value=\"left\">Align left\u003C\u002FFluereToggleGroupItem>\n",[133,178,180],{"class":135,"line":179},3,[133,181,182],{"class":139},"  \u003CFluereToggleGroupItem value=\"center\">Center\u003C\u002FFluereToggleGroupItem>\n",[133,184,186],{"class":135,"line":185},4,[133,187,188],{"class":139},"  \u003CFluereToggleGroupItem value=\"right\">Align right\u003C\u002FFluereToggleGroupItem>\n",[133,190,192,195,197],{"class":135,"line":191},5,[133,193,194],{"class":139},"\u003C\u002F",[133,196,19],{"class":143},[133,198,170],{"class":139},[14,200,201,202,204],{},"If your product requires \"one item must stay selected\", fold ",[17,203,109],{}," back to the previous value:",[125,206,208],{"className":127,"code":207,"language":129,"meta":118,"style":118},"\u003CFluereToggleGroup :model-value=\"align\" @update:model-value=\"(value) => (align = value ?? align)\">\n  \u003C!-- … -->\n\u003C\u002FFluereToggleGroup>\n",[17,209,210,276,281],{"__ignoreMap":118},[133,211,212,214,216,219,222,224,226,228,230,233,236,239,241,243,245,248,251,254,258,261,263,266,269,272,274],{"class":135,"line":136},[133,213,140],{"class":139},[133,215,19],{"class":143},[133,217,218],{"class":139}," :",[133,220,221],{"class":146},"model-value",[133,223,150],{"class":139},[133,225,154],{"class":153},[133,227,157],{"class":139},[133,229,154],{"class":153},[133,231,232],{"class":139}," @",[133,234,235],{"class":146},"update",[133,237,238],{"class":139},":",[133,240,221],{"class":146},[133,242,150],{"class":139},[133,244,154],{"class":153},[133,246,247],{"class":139},"(",[133,249,101],{"class":250},"s4XuR",[133,252,253],{"class":139},") ",[133,255,257],{"class":256},"szBVR","=>",[133,259,260],{"class":139}," (align ",[133,262,150],{"class":256},[133,264,265],{"class":139}," value ",[133,267,268],{"class":256},"??",[133,270,271],{"class":139}," align)",[133,273,154],{"class":153},[133,275,170],{"class":139},[133,277,278],{"class":135,"line":173},[133,279,280],{"class":139},"  \u003C!-- … -->\n",[133,282,283,285,287],{"class":135,"line":179},[133,284,194],{"class":139},[133,286,19],{"class":143},[133,288,170],{"class":139},[82,290,292],{"id":291},"multi-select","Multi select",[14,294,295,296,299,300,302,303,305,306,309,310,313,314,317],{},"With ",[17,297,298],{},"type=\"multiple\""," the ",[17,301,90],{}," is a ",[17,304,39],{}," and clicking adds or removes an element. When ",[17,307,308],{},"type"," is omitted it is inferred from the shape of ",[17,311,312],{},"modelValue"," \u002F ",[17,315,316],{},"defaultValue"," (an array means multi-select).",[112,319,320,325],{"title":292},[116,321,322],{"v-slot:preview":118},[323,324],"toggle-group-multiple-demo",{},[116,326,327],{"v-slot:code":118},[125,328,330],{"className":127,"code":329,"language":129,"meta":118,"style":118},"\u003CFluereToggleGroup v-model=\"formats\" type=\"multiple\" label=\"Text formats\">\n  \u003CFluereToggleGroupItem\n    value=\"bold\"\n    icon-only\n    :icon=\"FluentIconTextBold24Regular\"\n    label=\"Bold\"\n  \u002F>\n  \u003CFluereToggleGroupItem\n    value=\"italic\"\n    icon-only\n    :icon=\"FluentIconTextItalic24Regular\"\n    label=\"Italic\"\n  \u002F>\n\u003C\u002FFluereToggleGroup>\n",[17,331,332,366,371,376,381,386,392,398,403,409,414,420,426,431],{"__ignoreMap":118},[133,333,334,336,338,340,342,344,347,349,352,354,357,359,361,364],{"class":135,"line":136},[133,335,140],{"class":139},[133,337,19],{"class":143},[133,339,147],{"class":146},[133,341,150],{"class":139},[133,343,154],{"class":153},[133,345,346],{"class":139},"formats",[133,348,154],{"class":153},[133,350,351],{"class":146}," type",[133,353,150],{"class":139},[133,355,356],{"class":153},"\"multiple\"",[133,358,162],{"class":146},[133,360,150],{"class":139},[133,362,363],{"class":153},"\"Text formats\"",[133,365,170],{"class":139},[133,367,368],{"class":135,"line":173},[133,369,370],{"class":139},"  \u003CFluereToggleGroupItem\n",[133,372,373],{"class":135,"line":179},[133,374,375],{"class":139},"    value=\"bold\"\n",[133,377,378],{"class":135,"line":185},[133,379,380],{"class":139},"    icon-only\n",[133,382,383],{"class":135,"line":191},[133,384,385],{"class":139},"    :icon=\"FluentIconTextBold24Regular\"\n",[133,387,389],{"class":135,"line":388},6,[133,390,391],{"class":139},"    label=\"Bold\"\n",[133,393,395],{"class":135,"line":394},7,[133,396,397],{"class":139},"  \u002F>\n",[133,399,401],{"class":135,"line":400},8,[133,402,370],{"class":139},[133,404,406],{"class":135,"line":405},9,[133,407,408],{"class":139},"    value=\"italic\"\n",[133,410,412],{"class":135,"line":411},10,[133,413,380],{"class":139},[133,415,417],{"class":135,"line":416},11,[133,418,419],{"class":139},"    :icon=\"FluentIconTextItalic24Regular\"\n",[133,421,423],{"class":135,"line":422},12,[133,424,425],{"class":139},"    label=\"Italic\"\n",[133,427,429],{"class":135,"line":428},13,[133,430,397],{"class":139},[133,432,434,436,438],{"class":135,"line":433},14,[133,435,194],{"class":139},[133,437,19],{"class":143},[133,439,170],{"class":139},[82,441,443],{"id":442},"disabled","Disabled",[14,445,446,448,449,451,452,454,455,458],{},[17,447,442],{}," on the group is layered onto every item (the whole group is inert and the arrow keys never enter it). To disable individual items, pass ",[17,450,442],{}," on those ",[17,453,97],{},"s — the arrow keys ",[47,456,457],{},"skip"," them.",[112,460,461,466],{"title":443},[116,462,463],{"v-slot:preview":118},[464,465],"toggle-group-disabled-demo",{},[116,467,468],{"v-slot:code":118},[125,469,471],{"className":127,"code":470,"language":129,"meta":118,"style":118},"\u003CFluereToggleGroup v-model=\"plan\" disabled>\n  \u003CFluereToggleGroupItem value=\"free\">Free\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"pro\">Pro\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n\n\u003CFluereToggleGroup v-model=\"network\">\n  \u003CFluereToggleGroupItem value=\"wifi\">Wi-Fi\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"ethernet\" disabled>Ethernet\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n",[17,472,473,495,500,505,513,519,538,543,548],{"__ignoreMap":118},[133,474,475,477,479,481,483,485,488,490,493],{"class":135,"line":136},[133,476,140],{"class":139},[133,478,19],{"class":143},[133,480,147],{"class":146},[133,482,150],{"class":139},[133,484,154],{"class":153},[133,486,487],{"class":139},"plan",[133,489,154],{"class":153},[133,491,492],{"class":146}," disabled",[133,494,170],{"class":139},[133,496,497],{"class":135,"line":173},[133,498,499],{"class":139},"  \u003CFluereToggleGroupItem value=\"free\">Free\u003C\u002FFluereToggleGroupItem>\n",[133,501,502],{"class":135,"line":179},[133,503,504],{"class":139},"  \u003CFluereToggleGroupItem value=\"pro\">Pro\u003C\u002FFluereToggleGroupItem>\n",[133,506,507,509,511],{"class":135,"line":185},[133,508,194],{"class":139},[133,510,19],{"class":143},[133,512,170],{"class":139},[133,514,515],{"class":135,"line":191},[133,516,518],{"emptyLinePlaceholder":517},true,"\n",[133,520,521,523,525,527,529,531,534,536],{"class":135,"line":388},[133,522,140],{"class":139},[133,524,19],{"class":143},[133,526,147],{"class":146},[133,528,150],{"class":139},[133,530,154],{"class":153},[133,532,533],{"class":139},"network",[133,535,154],{"class":153},[133,537,170],{"class":139},[133,539,540],{"class":135,"line":394},[133,541,542],{"class":139},"  \u003CFluereToggleGroupItem value=\"wifi\">Wi-Fi\u003C\u002FFluereToggleGroupItem>\n",[133,544,545],{"class":135,"line":400},[133,546,547],{"class":139},"  \u003CFluereToggleGroupItem value=\"ethernet\" disabled>Ethernet\u003C\u002FFluereToggleGroupItem>\n",[133,549,550,552,554],{"class":135,"line":405},[133,551,194],{"class":139},[133,553,19],{"class":143},[133,555,170],{"class":139},[82,557,559],{"id":558},"sizes-vertical-layout-and-controlled-uncontrolled","Sizes, vertical layout and controlled \u002F uncontrolled",[14,561,562,565,566,568,569,571,572,575,576,578,579,582,583,586],{},[17,563,564],{},"size"," on the group sets one uniform size for its items (the 24 \u002F 32 \u002F 40 steps of ",[17,567,27],{},"); a ",[17,570,564],{}," on the item wins. ",[17,573,574],{},"orientation=\"vertical\""," stacks the group and swaps the arrow keys from left\u002Fright to up\u002Fdown. Without ",[17,577,312],{}," the group is ",[47,580,581],{},"uncontrolled"," (the underlying primitive keeps the state; ",[17,584,585],{},"default-value"," seeds it); with it, the group is controlled.",[112,588,590,595],{"title":589},"Sizes, controlled \u002F uncontrolled",[116,591,592],{"v-slot:preview":118},[593,594],"toggle-group-size-demo",{},[116,596,597],{"v-slot:code":118},[125,598,600],{"className":127,"code":599,"language":129,"meta":118,"style":118},"\u003C!-- Uncontrolled: no modelValue, default-value seeds it -->\n\u003CFluereToggleGroup size=\"small\" default-value=\"day\">\n  \u003CFluereToggleGroupItem value=\"day\">Day\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"week\">Week\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"month\">Month\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n\n\u003C!-- Controlled, vertical -->\n\u003CFluereToggleGroup v-model=\"large\" size=\"large\" orientation=\"vertical\">\n  \u003CFluereToggleGroupItem value=\"day\">Day\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"week\">Week\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"month\">Month\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n",[17,601,602,608,632,637,642,647,655,659,664,698,702,706,710],{"__ignoreMap":118},[133,603,604],{"class":135,"line":136},[133,605,607],{"class":606},"sJ8bj","\u003C!-- Uncontrolled: no modelValue, default-value seeds it -->\n",[133,609,610,612,614,617,619,622,625,627,630],{"class":135,"line":173},[133,611,140],{"class":139},[133,613,19],{"class":143},[133,615,616],{"class":146}," size",[133,618,150],{"class":139},[133,620,621],{"class":153},"\"small\"",[133,623,624],{"class":146}," default-value",[133,626,150],{"class":139},[133,628,629],{"class":153},"\"day\"",[133,631,170],{"class":139},[133,633,634],{"class":135,"line":179},[133,635,636],{"class":139},"  \u003CFluereToggleGroupItem value=\"day\">Day\u003C\u002FFluereToggleGroupItem>\n",[133,638,639],{"class":135,"line":185},[133,640,641],{"class":139},"  \u003CFluereToggleGroupItem value=\"week\">Week\u003C\u002FFluereToggleGroupItem>\n",[133,643,644],{"class":135,"line":191},[133,645,646],{"class":139},"  \u003CFluereToggleGroupItem value=\"month\">Month\u003C\u002FFluereToggleGroupItem>\n",[133,648,649,651,653],{"class":135,"line":388},[133,650,194],{"class":139},[133,652,19],{"class":143},[133,654,170],{"class":139},[133,656,657],{"class":135,"line":394},[133,658,518],{"emptyLinePlaceholder":517},[133,660,661],{"class":135,"line":400},[133,662,663],{"class":606},"\u003C!-- Controlled, vertical -->\n",[133,665,666,668,670,672,674,676,679,681,683,685,688,691,693,696],{"class":135,"line":405},[133,667,140],{"class":139},[133,669,19],{"class":143},[133,671,147],{"class":146},[133,673,150],{"class":139},[133,675,154],{"class":153},[133,677,678],{"class":139},"large",[133,680,154],{"class":153},[133,682,616],{"class":146},[133,684,150],{"class":139},[133,686,687],{"class":153},"\"large\"",[133,689,690],{"class":146}," orientation",[133,692,150],{"class":139},[133,694,695],{"class":153},"\"vertical\"",[133,697,170],{"class":139},[133,699,700],{"class":135,"line":411},[133,701,636],{"class":139},[133,703,704],{"class":135,"line":416},[133,705,641],{"class":139},[133,707,708],{"class":135,"line":422},[133,709,646],{"class":139},[133,711,712,714,716],{"class":135,"line":428},[133,713,194],{"class":139},[133,715,19],{"class":143},[133,717,170],{"class":139},[82,719,721],{"id":720},"accessibility","Accessibility",[723,724,725,740,757,796],"ul",{},[726,727,728,729,731,732,735,736,739],"li",{},"The container is ",[17,730,31],{},"; when the group has no visible heading, pass ",[17,733,734],{},"label"," to provide its ",[17,737,738],{},"aria-label",".",[726,741,742,743,746,747,62,750,753,754,756],{},"Every item is a native ",[17,744,745],{},"\u003Cbutton type=\"button\">"," and expresses its pressed state through ",[17,748,749],{},"aria-pressed",[17,751,752],{},"\"mixed\""," for a three-state item); the accessible name comes from the visible text, or from ",[17,755,734],{}," for icon-only items.",[726,758,759,762,763,313,766,769,770,313,773,776,777,313,780,783,784,787,788,791,792,795],{},[47,760,761],{},"Roving tabindex",": Tab hands focus to the group container, which forwards it to the current item; from there ",[17,764,765],{},"←",[17,767,768],{},"→"," (or ",[17,771,772],{},"↑",[17,774,775],{},"↓"," for a vertical group) and ",[17,778,779],{},"Home",[17,781,782],{},"End"," move focus, disabled items are skipped, and ",[17,785,786],{},"loop"," (default ",[17,789,790],{},"true",") wraps around. The focus ring reuses the 0.4.3 two-layer focus-rectangle primitive (",[17,793,794],{},"useFocusVisual",").",[726,797,798,799,739],{},"Space \u002F Enter trigger the toggle through the native ",[17,800,801],{},"\u003Cbutton>",[82,803,805],{"id":804},"spec-source","Spec source",[807,808,809,822],"table",{},[810,811,812],"thead",{},[813,814,815,819],"tr",{},[816,817,818],"th",{},"Item",[816,820,821],{},"Value",[823,824,825,841,858,873,889],"tbody",{},[813,826,827,831],{},[828,829,830],"td",{},"Control",[828,832,833,834,837,838,840],{},"WinUI 3 has ",[47,835,836],{},"no"," ToggleGroup control; visuals follow ",[17,839,61],{},", grouping semantics follow WAI-ARIA \u002F reka-ui",[813,842,843,846],{},[828,844,845],{},"tag\u002Fcommit",[828,847,848,313,850,853,854,857],{},[17,849,57],{},[17,851,852],{},"ba3a8d5"," (local snapshot ",[17,855,856],{},"temp\u002Fwinui-src",")",[813,859,860,863],{},[828,861,862],{},"Visual source",[828,864,865,868,869,872],{},[17,866,867],{},"src\u002Fcontrols\u002Fdev\u002FCommonStyles\u002FToggleButton_themeresources.xaml"," (full mapping table in the ",[17,870,871],{},"toggle-button.vue"," file header)",[813,874,875,878],{},[828,876,877],{},"Behavior source",[828,879,880,62,883,313,886,857],{},[17,881,882],{},"src\u002Fdxaml\u002Fxcp\u002Fdxaml\u002Flib\u002FToggleButton_Partial.cpp",[17,884,885],{},"ChangeVisualState",[17,887,888],{},"OnToggleImpl",[813,890,891,894],{},[828,892,893],{},"Grouping engine",[828,895,896,897,900,901,904,905,908],{},"reka-ui ",[17,898,899],{},"2.10.1",": ",[17,902,903],{},"ToggleGroupRoot"," (value semantics + roving focus), ",[17,906,907],{},"RovingFocusItem"," (roving tabindex)",[82,910,912],{"id":911},"implementation-notes","Implementation notes",[723,914,915,934,956,965,979,992],{},[726,916,917,900,920,922,923,925,926,929,930,933],{},[47,918,919],{},"One single source of visuals",[17,921,97],{}," renders ",[17,924,27],{}," itself (",[17,927,928],{},"toggle-group-item.vue"," has no second ",[17,931,932],{},"\u003Cstyle>"," block and declares no colour or stroke at all), so buttons inside and outside a group share one state table, one geometry and one focus primitive — they cannot drift apart.",[726,935,936,939,940,942,943,945,946,62,948,951,952,955],{},[47,937,938],{},"Division of labour with the primitive",": reka's ",[17,941,903],{}," produces ",[17,944,31],{},", manages the single \u002F multiple value semantics and provides roving focus; the item uses ",[17,947,907],{},[47,949,950],{},"not"," reka's ",[17,953,954],{},"ToggleGroupItem",", which renders reka's own neutral button look) plus injection of the reka group context to read and write the value.",[726,957,958,961,962,964],{},[47,959,960],{},"Single select can be cleared",": this follows reka \u002F ARIA toggle button semantics — clicking the pressed item again yields ",[17,963,109],{},"; use the one-liner from \"Basic usage\" when one item must stay selected.",[726,966,967,970,971,974,975,978],{},[47,968,969],{},"Controlled \u002F uncontrolled",": when ",[17,972,973],{},"modelValue === undefined"," it is forwarded as-is so the primitive self-manages, and the ",[17,976,977],{},"update:modelValue"," it emits is written back locally; when controlled, only the prop is honoured.",[726,980,981,984,985,987,988,991],{},[47,982,983],{},"Group-level size",": in WinUI \"a group of toggle buttons\" is just buttons placed next to each other, with no group-level size concept; this library pushes the group ",[17,986,564],{}," down to items through its own provide\u002Finject (a library extension documented in ",[17,989,990],{},"toggle-group\u002Fcontext.ts",") so a group cannot mix 24 \u002F 32 \u002F 40 px items.",[726,993,994,997,998,1001,1002,1005,1006,313,1009,1012,1013,1016],{},[47,995,996],{},"Known gaps",": ① high contrast is not implemented (same as the rest of the library — WinUI's HC brushes are ",[17,999,1000],{},"SystemColor*","); ② the container gap is our own choice (",[17,1003,1004],{},"--spacingHorizontalXS",", 4px) because WinUI has no control to align with; ③ reka's ",[17,1007,1008],{},"name",[17,1010,1011],{},"required"," are not exposed — add a hidden ",[17,1014,1015],{},"input"," yourself when the group must be submitted with a form.",[82,1018,1020],{"id":1019},"api","API",[1022,1023,1025],"h3",{"id":1024},"flueretogglegroup",[17,1026,19],{},[807,1028,1029,1045],{},[810,1030,1031],{},[813,1032,1033,1036,1039,1042],{},[816,1034,1035],{},"Prop",[816,1037,1038],{},"Type",[816,1040,1041],{},"Default",[816,1043,1044],{},"Description",[823,1046,1047,1067,1082,1108,1127,1147,1164,1181,1200],{},[813,1048,1049,1053,1058,1061],{},[828,1050,1051],{},[17,1052,312],{},[828,1054,1055],{},[17,1056,1057],{},"string | string[]",[828,1059,1060],{},"—",[828,1062,1063,1064,1066],{},"Current value (",[17,1065,90],{},"); omit it for an uncontrolled group",[813,1068,1069,1073,1077,1079],{},[828,1070,1071],{},[17,1072,316],{},[828,1074,1075],{},[17,1076,1057],{},[828,1078,1060],{},[828,1080,1081],{},"Initial value for the uncontrolled case",[813,1083,1084,1088,1093,1096],{},[828,1085,1086],{},[17,1087,308],{},[828,1089,1090],{},[17,1091,1092],{},"'single' | 'multiple'",[828,1094,1095],{},"inferred from the value",[828,1097,1098,1099,1101,1102,1104,1105],{},"Single (",[17,1100,35],{},") \u002F multiple (",[17,1103,39],{},"); an array means ",[17,1106,1107],{},"'multiple'",[813,1109,1110,1114,1119,1124],{},[828,1111,1112],{},[17,1113,442],{},[828,1115,1116],{},[17,1117,1118],{},"boolean",[828,1120,1121],{},[17,1122,1123],{},"false",[828,1125,1126],{},"Disables the whole group",[813,1128,1129,1134,1139,1144],{},[828,1130,1131],{},[17,1132,1133],{},"orientation",[828,1135,1136],{},[17,1137,1138],{},"'horizontal' | 'vertical'",[828,1140,1141],{},[17,1142,1143],{},"'horizontal'",[828,1145,1146],{},"Layout direction; also selects left\u002Fright vs up\u002Fdown arrow navigation",[813,1148,1149,1153,1157,1161],{},[828,1150,1151],{},[17,1152,786],{},[828,1154,1155],{},[17,1156,1118],{},[828,1158,1159],{},[17,1160,790],{},[828,1162,1163],{},"Arrow keys wrap around between the first and last item",[813,1165,1166,1171,1176,1178],{},[828,1167,1168],{},[17,1169,1170],{},"dir",[828,1172,1173],{},[17,1174,1175],{},"'ltr' | 'rtl'",[828,1177,1060],{},[828,1179,1180],{},"Reading direction (rarely needed)",[813,1182,1183,1187,1192,1194],{},[828,1184,1185],{},[17,1186,564],{},[828,1188,1189],{},[17,1190,1191],{},"'small' | 'medium' | 'large'",[828,1193,1060],{},[828,1195,1196,1197,1199],{},"Uniform size for the items; an item's own ",[17,1198,564],{}," wins",[813,1201,1202,1206,1210,1212],{},[828,1203,1204],{},[17,1205,734],{},[828,1207,1208],{},[17,1209,35],{},[828,1211,1060],{},[828,1213,1214,1215,857],{},"Accessible name of the group (equivalent to ",[17,1216,738],{},[807,1218,1219,1231],{},[810,1220,1221],{},[813,1222,1223,1226,1229],{},[816,1224,1225],{},"Emit",[816,1227,1228],{},"Payload",[816,1230,1044],{},[823,1232,1233],{},[813,1234,1235,1239,1244],{},[828,1236,1237],{},[17,1238,977],{},[828,1240,1241],{},[17,1242,1243],{},"string | string[] | undefined",[828,1245,1246,1247,1249],{},"Value change; a single-select group emits ",[17,1248,109],{}," when cleared",[807,1251,1252,1261],{},[810,1253,1254],{},[813,1255,1256,1259],{},[816,1257,1258],{},"Slot",[816,1260,1044],{},[823,1262,1263],{},[813,1264,1265,1270],{},[828,1266,1267],{},[17,1268,1269],{},"default",[828,1271,1272,1273,1275],{},"The list of ",[17,1274,97],{},"s",[1022,1277,1279],{"id":1278},"flueretogglegroupitem",[17,1280,97],{},[807,1282,1283,1295],{},[810,1284,1285],{},[813,1286,1287,1289,1291,1293],{},[816,1288,1035],{},[816,1290,1038],{},[816,1292,1041],{},[816,1294,1044],{},[823,1296,1297,1314,1333,1355,1373,1391,1412],{},[813,1298,1299,1303,1307,1309],{},[828,1300,1301],{},[17,1302,101],{},[828,1304,1305],{},[17,1306,35],{},[828,1308,1060],{},[828,1310,1311,1312,857],{},"The item's value inside the group (",[47,1313,1011],{},[813,1315,1316,1320,1324,1328],{},[828,1317,1318],{},[17,1319,442],{},[828,1321,1322],{},[17,1323,1118],{},[828,1325,1326],{},[17,1327,1123],{},[828,1329,1330,1331,857],{},"Disables this item (layered on top of the group ",[17,1332,442],{},[813,1334,1335,1339,1343,1346],{},[828,1336,1337],{},[17,1338,564],{},[828,1340,1341],{},[17,1342,1191],{},[828,1344,1345],{},"inherited",[828,1347,1348,1349,1351,1352],{},"Size step; inherits the group ",[17,1350,564],{},", then falls back to ",[17,1353,1354],{},"'medium'",[813,1356,1357,1362,1366,1370],{},[828,1358,1359],{},[17,1360,1361],{},"block",[828,1363,1364],{},[17,1365,1118],{},[828,1367,1368],{},[17,1369,1123],{},[828,1371,1372],{},"Stretches the item to the container width",[813,1374,1375,1379,1383,1385],{},[828,1376,1377],{},[17,1378,734],{},[828,1380,1381],{},[17,1382,35],{},[828,1384,1060],{},[828,1386,1387,1388,1390],{},"Accessible name (equivalent to ",[17,1389,738],{},"); required for icon-only",[813,1392,1393,1398,1403,1405],{},[828,1394,1395],{},[17,1396,1397],{},"icon",[828,1399,1400],{},[17,1401,1402],{},"Component",[828,1404,1060],{},[828,1406,1407,1408,1411],{},"Icon component (",[17,1409,1410],{},"@fluere-vue\u002Ficons","), decorative and hidden from AT",[813,1413,1414,1419,1423,1427],{},[828,1415,1416],{},[17,1417,1418],{},"iconOnly",[828,1420,1421],{},[17,1422,1118],{},[828,1424,1425],{},[17,1426,1123],{},[828,1428,1429],{},"Renders the icon only (compact square)",[807,1431,1432,1440],{},[810,1433,1434],{},[813,1435,1436,1438],{},[816,1437,1258],{},[816,1439,1044],{},[823,1441,1442,1451],{},[813,1443,1444,1448],{},[828,1445,1446],{},[17,1447,1269],{},[828,1449,1450],{},"The button label",[813,1452,1453,1457],{},[828,1454,1455],{},[17,1456,1397],{},[828,1458,1459],{},"Replaces the built-in icon",[42,1461,1462],{},[14,1463,1464,1466,1467,1469,1470,1472],{},[17,1465,97],{}," must live inside ",[17,1468,19],{},": the group context comes from reka's provide\u002Finject, and using the item outside a group throws a readable error. Its visuals, disabled colours and focus ring all come from ",[17,1471,27],{},", so those three tables apply to every item in the group as well.",[1474,1475,1476],"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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":118,"searchDepth":173,"depth":173,"links":1478},[1479,1480,1481,1482,1483,1484,1485,1486],{"id":84,"depth":173,"text":85},{"id":291,"depth":173,"text":292},{"id":442,"depth":173,"text":443},{"id":558,"depth":173,"text":559},{"id":720,"depth":173,"text":721},{"id":804,"depth":173,"text":805},{"id":911,"depth":173,"text":912},{"id":1019,"depth":173,"text":1020,"children":1487},[1488,1489],{"id":1024,"depth":179,"text":19},{"id":1278,"depth":179,"text":97},"A group of toggle buttons with single- and multi-select semantics; the visuals follow WinUI ToggleButton, the grouping semantics follow WAI-ARIA \u002F reka-ui.","md",{},{"title":5},"\u002Fen\u002Fcomponents\u002Ftoggle-group",{"title":5,"description":1490},"en\u002Fcomponents\u002Ftoggle-group","D4ka44gj3nOIJArh9g9lgyya2mQYclPpBHTggrXIv1Y",{"id":1499,"title":1500,"body":1501,"description":2801,"extension":1491,"meta":2802,"nav":2803,"navigation":517,"path":2804,"seo":2805,"stem":2806,"__hash__":2807},"content\u002Fcomponents\u002Ftoggle-group.md","Toggle Group 切换按钮组",{"type":7,"value":1502,"toc":2788},[1503,1506,1525,1558,1562,1583,1645,1654,1722,1725,1744,1846,1849,1865,1955,1959,1983,2104,2107,2170,2173,2257,2260,2354,2356,2360,2538,2569,2594,2598,2743,2773,2786],[10,1504,1500],{"id":1505},"toggle-group-切换按钮组",[14,1507,1508,1510,1511,1515,1516,1518,1519,1521,1522,1524],{},[17,1509,19],{}," 把若干 ",[22,1512,1513],{"href":24},[17,1514,27],{}," 组成一个语义化的组：",[17,1517,31],{},"、组内单一 Tab 停靠点（roving tabindex）、方向键 \u002F Home \u002F End 移动焦点，取值支持单选（",[17,1520,35],{},"）与多选（",[17,1523,39],{},"）。",[42,1526,1527],{},[14,1528,1529,1532,1533,54,1535,1537,1538,1540,1541,1543,1544,1550,1551,1553,1554,1557],{},[47,1530,1531],{},"WinUI 没有 ToggleGroup 控件","：",[17,1534,53],{},[17,1536,57],{}," 里只有 ",[17,1539,61],{},"（",[17,1542,65],{}," 为空）。所以本组件的分工是——",[47,1545,1546,1547,1549],{},"每一项的视觉严格以 WinUI ",[17,1548,61],{}," 为准","（每项直接复用 ",[17,1552,27],{}," 的同一份 SFC 样式，不复制状态表），",[47,1555,1556],{},"分组语义","则以 WAI-ARIA 的 toggle button group 契约 + reka-ui 为准，这一层没有 A 级源码可对。",[82,1559,1561],{"id":1560},"基础用法单选","基础用法（单选）",[14,1563,1564,1566,1567,1569,1570,1572,1573,1575,1576,1579,1580,1582],{},[17,1565,90],{}," 绑定当前取值（",[17,1568,35],{},"），",[17,1571,97],{}," 的 ",[17,1574,101],{}," 决定各自的值。单选组只保留一个选中项；",[47,1577,1578],{},"再次点击已选中项会取消选中","（值为 ",[17,1581,109],{},"，ARIA toggle button 允许全部未按下，与 RadioGroup 的「必须选中一项」不同）。",[112,1584,1586,1590],{"title":1585},"单选",[116,1587,1588],{"v-slot:preview":118},[120,1589],{},[116,1591,1592],{"v-slot:code":118},[125,1593,1595],{"className":127,"code":1594,"language":129,"meta":118,"style":118},"\u003CFluereToggleGroup v-model=\"align\" label=\"文本对齐\">\n  \u003CFluereToggleGroupItem value=\"left\">左对齐\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"center\">居中\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"right\">右对齐\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n",[17,1596,1597,1622,1627,1632,1637],{"__ignoreMap":118},[133,1598,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1620],{"class":135,"line":136},[133,1600,140],{"class":139},[133,1602,19],{"class":143},[133,1604,147],{"class":146},[133,1606,150],{"class":139},[133,1608,154],{"class":153},[133,1610,157],{"class":139},[133,1612,154],{"class":153},[133,1614,162],{"class":146},[133,1616,150],{"class":139},[133,1618,1619],{"class":153},"\"文本对齐\"",[133,1621,170],{"class":139},[133,1623,1624],{"class":135,"line":173},[133,1625,1626],{"class":139},"  \u003CFluereToggleGroupItem value=\"left\">左对齐\u003C\u002FFluereToggleGroupItem>\n",[133,1628,1629],{"class":135,"line":179},[133,1630,1631],{"class":139},"  \u003CFluereToggleGroupItem value=\"center\">居中\u003C\u002FFluereToggleGroupItem>\n",[133,1633,1634],{"class":135,"line":185},[133,1635,1636],{"class":139},"  \u003CFluereToggleGroupItem value=\"right\">右对齐\u003C\u002FFluereToggleGroupItem>\n",[133,1638,1639,1641,1643],{"class":135,"line":191},[133,1640,194],{"class":139},[133,1642,19],{"class":143},[133,1644,170],{"class":139},[14,1646,1647,1648,1650,1651,1653],{},"若业务要求「必须选中一项」，在 ",[17,1649,977],{}," 里把 ",[17,1652,109],{}," 回退成旧值即可：",[125,1655,1656],{"className":127,"code":207,"language":129,"meta":118,"style":118},[17,1657,1658,1710,1714],{"__ignoreMap":118},[133,1659,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700,1702,1704,1706,1708],{"class":135,"line":136},[133,1661,140],{"class":139},[133,1663,19],{"class":143},[133,1665,218],{"class":139},[133,1667,221],{"class":146},[133,1669,150],{"class":139},[133,1671,154],{"class":153},[133,1673,157],{"class":139},[133,1675,154],{"class":153},[133,1677,232],{"class":139},[133,1679,235],{"class":146},[133,1681,238],{"class":139},[133,1683,221],{"class":146},[133,1685,150],{"class":139},[133,1687,154],{"class":153},[133,1689,247],{"class":139},[133,1691,101],{"class":250},[133,1693,253],{"class":139},[133,1695,257],{"class":256},[133,1697,260],{"class":139},[133,1699,150],{"class":256},[133,1701,265],{"class":139},[133,1703,268],{"class":256},[133,1705,271],{"class":139},[133,1707,154],{"class":153},[133,1709,170],{"class":139},[133,1711,1712],{"class":135,"line":173},[133,1713,280],{"class":139},[133,1715,1716,1718,1720],{"class":135,"line":179},[133,1717,194],{"class":139},[133,1719,19],{"class":143},[133,1721,170],{"class":139},[82,1723,1724],{"id":1724},"多选",[14,1726,1727,1729,1730,1732,1733,1735,1736,1738,1739,313,1741,1743],{},[17,1728,298],{}," 时 ",[17,1731,90],{}," 是 ",[17,1734,39],{},"，点击即增删数组元素。",[17,1737,308],{}," 缺省时按 ",[17,1740,312],{},[17,1742,316],{}," 是否为数组推断（数组 → 多选）。",[112,1745,1746,1750],{"title":1724},[116,1747,1748],{"v-slot:preview":118},[323,1749],{},[116,1751,1752],{"v-slot:code":118},[125,1753,1755],{"className":127,"code":1754,"language":129,"meta":118,"style":118},"\u003CFluereToggleGroup v-model=\"formats\" type=\"multiple\" label=\"文本格式\">\n  \u003CFluereToggleGroupItem\n    value=\"bold\"\n    icon-only\n    :icon=\"FluentIconTextBold24Regular\"\n    label=\"加粗\"\n  \u002F>\n  \u003CFluereToggleGroupItem\n    value=\"italic\"\n    icon-only\n    :icon=\"FluentIconTextItalic24Regular\"\n    label=\"倾斜\"\n  \u002F>\n\u003C\u002FFluereToggleGroup>\n",[17,1756,1757,1788,1792,1796,1800,1804,1809,1813,1817,1821,1825,1829,1834,1838],{"__ignoreMap":118},[133,1758,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1783,1786],{"class":135,"line":136},[133,1760,140],{"class":139},[133,1762,19],{"class":143},[133,1764,147],{"class":146},[133,1766,150],{"class":139},[133,1768,154],{"class":153},[133,1770,346],{"class":139},[133,1772,154],{"class":153},[133,1774,351],{"class":146},[133,1776,150],{"class":139},[133,1778,356],{"class":153},[133,1780,162],{"class":146},[133,1782,150],{"class":139},[133,1784,1785],{"class":153},"\"文本格式\"",[133,1787,170],{"class":139},[133,1789,1790],{"class":135,"line":173},[133,1791,370],{"class":139},[133,1793,1794],{"class":135,"line":179},[133,1795,375],{"class":139},[133,1797,1798],{"class":135,"line":185},[133,1799,380],{"class":139},[133,1801,1802],{"class":135,"line":191},[133,1803,385],{"class":139},[133,1805,1806],{"class":135,"line":388},[133,1807,1808],{"class":139},"    label=\"加粗\"\n",[133,1810,1811],{"class":135,"line":394},[133,1812,397],{"class":139},[133,1814,1815],{"class":135,"line":400},[133,1816,370],{"class":139},[133,1818,1819],{"class":135,"line":405},[133,1820,408],{"class":139},[133,1822,1823],{"class":135,"line":411},[133,1824,380],{"class":139},[133,1826,1827],{"class":135,"line":416},[133,1828,419],{"class":139},[133,1830,1831],{"class":135,"line":422},[133,1832,1833],{"class":139},"    label=\"倾斜\"\n",[133,1835,1836],{"class":135,"line":428},[133,1837,397],{"class":139},[133,1839,1840,1842,1844],{"class":135,"line":433},[133,1841,194],{"class":139},[133,1843,19],{"class":143},[133,1845,170],{"class":139},[82,1847,1848],{"id":1848},"禁用",[14,1850,1851,1852,1854,1855,1857,1858,1860,1861,1864],{},"组上 ",[17,1853,442],{}," 会叠加到每一项（整组不可交互，方向键也不会进入）；只禁用个别项时在对应 ",[17,1856,97],{}," 上传 ",[17,1859,442],{},"，方向键会",[47,1862,1863],{},"跳过","它。",[112,1866,1867,1871],{"title":1848},[116,1868,1869],{"v-slot:preview":118},[464,1870],{},[116,1872,1873],{"v-slot:code":118},[125,1874,1876],{"className":127,"code":1875,"language":129,"meta":118,"style":118},"\u003CFluereToggleGroup v-model=\"plan\" disabled>\n  \u003CFluereToggleGroupItem value=\"free\">免费版\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"pro\">专业版\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n\n\u003CFluereToggleGroup v-model=\"network\">\n  \u003CFluereToggleGroupItem value=\"wifi\">Wi-Fi\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"ethernet\" disabled>以太网\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n",[17,1877,1878,1898,1903,1908,1916,1920,1938,1942,1947],{"__ignoreMap":118},[133,1879,1880,1882,1884,1886,1888,1890,1892,1894,1896],{"class":135,"line":136},[133,1881,140],{"class":139},[133,1883,19],{"class":143},[133,1885,147],{"class":146},[133,1887,150],{"class":139},[133,1889,154],{"class":153},[133,1891,487],{"class":139},[133,1893,154],{"class":153},[133,1895,492],{"class":146},[133,1897,170],{"class":139},[133,1899,1900],{"class":135,"line":173},[133,1901,1902],{"class":139},"  \u003CFluereToggleGroupItem value=\"free\">免费版\u003C\u002FFluereToggleGroupItem>\n",[133,1904,1905],{"class":135,"line":179},[133,1906,1907],{"class":139},"  \u003CFluereToggleGroupItem value=\"pro\">专业版\u003C\u002FFluereToggleGroupItem>\n",[133,1909,1910,1912,1914],{"class":135,"line":185},[133,1911,194],{"class":139},[133,1913,19],{"class":143},[133,1915,170],{"class":139},[133,1917,1918],{"class":135,"line":191},[133,1919,518],{"emptyLinePlaceholder":517},[133,1921,1922,1924,1926,1928,1930,1932,1934,1936],{"class":135,"line":388},[133,1923,140],{"class":139},[133,1925,19],{"class":143},[133,1927,147],{"class":146},[133,1929,150],{"class":139},[133,1931,154],{"class":153},[133,1933,533],{"class":139},[133,1935,154],{"class":153},[133,1937,170],{"class":139},[133,1939,1940],{"class":135,"line":394},[133,1941,542],{"class":139},[133,1943,1944],{"class":135,"line":400},[133,1945,1946],{"class":139},"  \u003CFluereToggleGroupItem value=\"ethernet\" disabled>以太网\u003C\u002FFluereToggleGroupItem>\n",[133,1948,1949,1951,1953],{"class":135,"line":405},[133,1950,194],{"class":139},[133,1952,19],{"class":143},[133,1954,170],{"class":139},[82,1956,1958],{"id":1957},"尺寸纵向与受控-非受控","尺寸、纵向与受控 \u002F 非受控",[14,1960,1851,1961,1963,1964,1966,1967,1969,1970,1972,1973,1975,1976,1979,1980,1982],{},[17,1962,564],{}," 决定组内统一尺寸（",[17,1965,27],{}," 的 24 \u002F 32 \u002F 40 三档），项自己的 ",[17,1968,564],{}," 优先。",[17,1971,574],{}," 改为竖排，同时把方向键从左右换成上下。不传 ",[17,1974,312],{}," 时是",[47,1977,1978],{},"非受控","（底座自管状态，",[17,1981,585],{}," 给初值），传了就是受控。",[112,1984,1986,1990],{"title":1985},"尺寸与受控 \u002F 非受控",[116,1987,1988],{"v-slot:preview":118},[593,1989],{},[116,1991,1992],{"v-slot:code":118},[125,1993,1995],{"className":127,"code":1994,"language":129,"meta":118,"style":118},"\u003C!-- 非受控：不传 modelValue，default-value 给初值 -->\n\u003CFluereToggleGroup size=\"small\" default-value=\"day\">\n  \u003CFluereToggleGroupItem value=\"day\">日\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"week\">周\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"month\">月\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n\n\u003C!-- 受控 + 纵向 -->\n\u003CFluereToggleGroup v-model=\"large\" size=\"large\" orientation=\"vertical\">\n  \u003CFluereToggleGroupItem value=\"day\">日\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"week\">周\u003C\u002FFluereToggleGroupItem>\n  \u003CFluereToggleGroupItem value=\"month\">月\u003C\u002FFluereToggleGroupItem>\n\u003C\u002FFluereToggleGroup>\n",[17,1996,1997,2002,2022,2027,2032,2037,2045,2049,2054,2084,2088,2092,2096],{"__ignoreMap":118},[133,1998,1999],{"class":135,"line":136},[133,2000,2001],{"class":606},"\u003C!-- 非受控：不传 modelValue，default-value 给初值 -->\n",[133,2003,2004,2006,2008,2010,2012,2014,2016,2018,2020],{"class":135,"line":173},[133,2005,140],{"class":139},[133,2007,19],{"class":143},[133,2009,616],{"class":146},[133,2011,150],{"class":139},[133,2013,621],{"class":153},[133,2015,624],{"class":146},[133,2017,150],{"class":139},[133,2019,629],{"class":153},[133,2021,170],{"class":139},[133,2023,2024],{"class":135,"line":179},[133,2025,2026],{"class":139},"  \u003CFluereToggleGroupItem value=\"day\">日\u003C\u002FFluereToggleGroupItem>\n",[133,2028,2029],{"class":135,"line":185},[133,2030,2031],{"class":139},"  \u003CFluereToggleGroupItem value=\"week\">周\u003C\u002FFluereToggleGroupItem>\n",[133,2033,2034],{"class":135,"line":191},[133,2035,2036],{"class":139},"  \u003CFluereToggleGroupItem value=\"month\">月\u003C\u002FFluereToggleGroupItem>\n",[133,2038,2039,2041,2043],{"class":135,"line":388},[133,2040,194],{"class":139},[133,2042,19],{"class":143},[133,2044,170],{"class":139},[133,2046,2047],{"class":135,"line":394},[133,2048,518],{"emptyLinePlaceholder":517},[133,2050,2051],{"class":135,"line":400},[133,2052,2053],{"class":606},"\u003C!-- 受控 + 纵向 -->\n",[133,2055,2056,2058,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078,2080,2082],{"class":135,"line":405},[133,2057,140],{"class":139},[133,2059,19],{"class":143},[133,2061,147],{"class":146},[133,2063,150],{"class":139},[133,2065,154],{"class":153},[133,2067,678],{"class":139},[133,2069,154],{"class":153},[133,2071,616],{"class":146},[133,2073,150],{"class":139},[133,2075,687],{"class":153},[133,2077,690],{"class":146},[133,2079,150],{"class":139},[133,2081,695],{"class":153},[133,2083,170],{"class":139},[133,2085,2086],{"class":135,"line":411},[133,2087,2026],{"class":139},[133,2089,2090],{"class":135,"line":416},[133,2091,2031],{"class":139},[133,2093,2094],{"class":135,"line":422},[133,2095,2036],{"class":139},[133,2097,2098,2100,2102],{"class":135,"line":428},[133,2099,194],{"class":139},[133,2101,19],{"class":143},[133,2103,170],{"class":139},[82,2105,2106],{"id":2106},"无障碍",[723,2108,2109,2121,2135,2164],{},[726,2110,2111,2112,2114,2115,2117,2118,2120],{},"容器是 ",[17,2113,31],{},"；组内没有可见标题时用 ",[17,2116,734],{}," 提供 ",[17,2119,738],{},"。",[726,2122,2123,2124,2126,2127,2129,2130,2132,2133,2120],{},"每一项都是原生 ",[17,2125,745],{},"，选中态由 ",[17,2128,749],{}," 表达（三态项为 ",[17,2131,752],{},"）；可访问名来自可见文本，纯图标项用 ",[17,2134,734],{},[726,2136,2137,2140,2141,313,2143,2145,2146,313,2148,2150,2151,313,2153,2155,2156,2158,2159,2161,2162,1524],{},[47,2138,2139],{},"roving tabindex","：Tab 先把焦点交给组容器，再落到组内当前项；随后用 ",[17,2142,765],{},[17,2144,768],{},"（纵向组为 ",[17,2147,772],{},[17,2149,775],{},"）、",[17,2152,779],{},[17,2154,782],{}," 在项之间移动焦点，跳过禁用项，",[17,2157,786],{},"（缺省 ",[17,2160,790],{},"）让首尾循环。焦点环沿用 0.4.3 的双层焦点矩形原语（",[17,2163,794],{},[726,2165,2166,2167,2169],{},"Space \u002F Enter 触发切换由原生 ",[17,2168,801],{}," 保证。",[82,2171,2172],{"id":2172},"规格来源",[807,2174,2175,2185],{},[810,2176,2177],{},[813,2178,2179,2182],{},[816,2180,2181],{},"项",[816,2183,2184],{},"值",[823,2186,2187,2202,2216,2229,2242],{},[813,2188,2189,2192],{},[828,2190,2191],{},"控件",[828,2193,2194,2195,2198,2199,2201],{},"WinUI 3 ",[47,2196,2197],{},"没有"," ToggleGroup 控件；视觉以 ",[17,2200,61],{}," 为准，分组语义以 WAI-ARIA \u002F reka-ui 为准",[813,2203,2204,2206],{},[828,2205,845],{},[828,2207,2208,313,2210,2212,2213,2215],{},[17,2209,57],{},[17,2211,852],{},"（本地快照 ",[17,2214,856],{},"）",[813,2217,2218,2221],{},[828,2219,2220],{},"视觉关键文件",[828,2222,2223,2225,2226,2228],{},[17,2224,867],{},"（完整映射表见 ",[17,2227,871],{}," 文件头）",[813,2230,2231,2234],{},[828,2232,2233],{},"行为关键文件",[828,2235,2236,1540,2238,313,2240,2215],{},[17,2237,882],{},[17,2239,885],{},[17,2241,888],{},[813,2243,2244,2247],{},[828,2245,2246],{},"分组底座",[828,2248,896,2249,1532,2251,2253,2254,2256],{},[17,2250,899],{},[17,2252,903],{},"（取值语义 + roving focus）、",[17,2255,907],{},"（roving tabindex）",[82,2258,2259],{"id":2259},"实现要点",[723,2261,2262,2278,2299,2308,2319,2335],{},[726,2263,2264,1532,2267,2269,2270,1540,2272,2274,2275,2277],{},[47,2265,2266],{},"视觉只有一处",[17,2268,97],{}," 渲染的就是 ",[17,2271,27],{},[17,2273,928],{}," 里没有第二个 ",[17,2276,932],{}," 块、也没有任何颜色 \u002F 描边声明），组里组外的按钮共用同一份状态表、几何与焦点原语，不会两套漂移。",[726,2279,2280,2283,2284,2286,2287,2289,2290,1540,2292,2295,2296,2298],{},[47,2281,2282],{},"底座分工","：reka 的 ",[17,2285,903],{}," 产出 ",[17,2288,31],{},"、管 single \u002F multiple 取值、提供 roving focus；项这边用 ",[17,2291,907],{},[47,2293,2294],{},"不用"," reka 的 ",[17,2297,954],{},"——它渲染的是 reka 自己的中性按钮外观，拿不到本库的 WinUI 外观）+ 注入 reka 的组上下文读写取值。",[726,2300,2301,2304,2305,2307],{},[47,2302,2303],{},"单选可清空","：沿用 reka \u002F ARIA toggle button 语义——再次点击已选中项 → 值变 ",[17,2306,109],{},"；要「必须选中一项」用上面「基础用法」里的一行配方。",[726,2309,2310,1532,2313,2315,2316,2318],{},[47,2311,2312],{},"受控 \u002F 非受控",[17,2314,973],{}," 时原样交给底座自管，并用底座抛回的 ",[17,2317,977],{}," 回写本地状态；受控时只认 Prop。",[726,2320,2321,2324,2325,2327,2328,2331,2332,2334],{},[47,2322,2323],{},"组级尺寸","：WinUI 里「一组切换按钮」只是并排的按钮，没有组级尺寸概念；本库用自有 provide\u002Finject 把组上的 ",[17,2326,564],{}," 下发给项（",[17,2329,2330],{},"--fui-*"," 之外的库内扩展，见 ",[17,2333,990],{},"），避免同组 24 \u002F 32 \u002F 40 混排。",[726,2336,2337,2340,2341,2343,2344,2346,2347,313,2349,2351,2352,2120],{},[47,2338,2339],{},"已知缺口","：① 高对比度未实现（与库内其它组件一致，WinUI HC 下这些画刷走 ",[17,2342,1000],{},"）；② 组容器间距是本库自定（",[17,2345,1004],{}," 4px），WinUI 无对应控件可对；③ 未暴露 reka 的 ",[17,2348,1008],{},[17,2350,1011],{},"，需要随表单提交时请自行在组外补隐藏 ",[17,2353,1015],{},[82,2355,1020],{"id":1019},[1022,2357,2358],{"id":1024},[17,2359,19],{},[807,2361,2362,2378],{},[810,2363,2364],{},[813,2365,2366,2369,2372,2375],{},[816,2367,2368],{},"属性（Props）",[816,2370,2371],{},"类型",[816,2373,2374],{},"默认",[816,2376,2377],{},"说明",[823,2379,2380,2398,2413,2437,2454,2471,2488,2503,2521],{},[813,2381,2382,2386,2390,2392],{},[828,2383,2384],{},[17,2385,312],{},[828,2387,2388],{},[17,2389,1057],{},[828,2391,1060],{},[828,2393,2394,2395,2397],{},"当前取值（",[17,2396,90],{},"）；不传则非受控",[813,2399,2400,2404,2408,2410],{},[828,2401,2402],{},[17,2403,316],{},[828,2405,2406],{},[17,2407,1057],{},[828,2409,1060],{},[828,2411,2412],{},"非受控初始值",[813,2414,2415,2419,2423,2426],{},[828,2416,2417],{},[17,2418,308],{},[828,2420,2421],{},[17,2422,1092],{},[828,2424,2425],{},"按取值形状推断",[828,2427,2428,2429,2431,2432,2434,2435],{},"单选（",[17,2430,35],{},"）\u002F 多选（",[17,2433,39],{},"）；数组 → ",[17,2436,1107],{},[813,2438,2439,2443,2447,2451],{},[828,2440,2441],{},[17,2442,442],{},[828,2444,2445],{},[17,2446,1118],{},[828,2448,2449],{},[17,2450,1123],{},[828,2452,2453],{},"禁用整组",[813,2455,2456,2460,2464,2468],{},[828,2457,2458],{},[17,2459,1133],{},[828,2461,2462],{},[17,2463,1138],{},[828,2465,2466],{},[17,2467,1143],{},[828,2469,2470],{},"排布方向；同时决定方向键用左右还是上下",[813,2472,2473,2477,2481,2485],{},[828,2474,2475],{},[17,2476,786],{},[828,2478,2479],{},[17,2480,1118],{},[828,2482,2483],{},[17,2484,790],{},[828,2486,2487],{},"方向键在首尾项之间循环",[813,2489,2490,2494,2498,2500],{},[828,2491,2492],{},[17,2493,1170],{},[828,2495,2496],{},[17,2497,1175],{},[828,2499,1060],{},[828,2501,2502],{},"阅读方向（一般无需设置）",[813,2504,2505,2509,2513,2515],{},[828,2506,2507],{},[17,2508,564],{},[828,2510,2511],{},[17,2512,1191],{},[828,2514,1060],{},[828,2516,2517,2518,2520],{},"组内统一尺寸档；项自己的 ",[17,2519,564],{}," 优先",[813,2522,2523,2527,2531,2533],{},[828,2524,2525],{},[17,2526,734],{},[828,2528,2529],{},[17,2530,35],{},[828,2532,1060],{},[828,2534,2535,2536,2215],{},"组的可访问名称（等价 ",[17,2537,738],{},[807,2539,2540,2552],{},[810,2541,2542],{},[813,2543,2544,2547,2550],{},[816,2545,2546],{},"事件（Emits）",[816,2548,2549],{},"载荷",[816,2551,2377],{},[823,2553,2554],{},[813,2555,2556,2560,2564],{},[828,2557,2558],{},[17,2559,977],{},[828,2561,2562],{},[17,2563,1243],{},[828,2565,2566,2567],{},"取值变化；单选组取消选中时载荷为 ",[17,2568,109],{},[807,2570,2571,2580],{},[810,2572,2573],{},[813,2574,2575,2578],{},[816,2576,2577],{},"插槽（Slots）",[816,2579,2377],{},[823,2581,2582],{},[813,2583,2584,2588],{},[828,2585,2586],{},[17,2587,1269],{},[828,2589,2590,2591,2593],{},"组内的 ",[17,2592,97],{}," 列表",[1022,2595,2596],{"id":1278},[17,2597,97],{},[807,2599,2600,2612],{},[810,2601,2602],{},[813,2603,2604,2606,2608,2610],{},[816,2605,2368],{},[816,2607,2371],{},[816,2609,2374],{},[816,2611,2377],{},[823,2613,2614,2632,2652,2673,2690,2708,2726],{},[813,2615,2616,2620,2624,2626],{},[828,2617,2618],{},[17,2619,101],{},[828,2621,2622],{},[17,2623,35],{},[828,2625,1060],{},[828,2627,2628,2629,2215],{},"该按钮在组内的取值（",[47,2630,2631],{},"必填",[813,2633,2634,2638,2642,2646],{},[828,2635,2636],{},[17,2637,442],{},[828,2639,2640],{},[17,2641,1118],{},[828,2643,2644],{},[17,2645,1123],{},[828,2647,2648,2649,2651],{},"是否禁用该项（叠加在组 ",[17,2650,442],{}," 之上）",[813,2653,2654,2658,2662,2665],{},[828,2655,2656],{},[17,2657,564],{},[828,2659,2660],{},[17,2661,1191],{},[828,2663,2664],{},"继承组",[828,2666,2667,2668,2670,2671],{},"尺寸档；缺省继承组上的 ",[17,2669,564],{},"，再缺省为 ",[17,2672,1354],{},[813,2674,2675,2679,2683,2687],{},[828,2676,2677],{},[17,2678,1361],{},[828,2680,2681],{},[17,2682,1118],{},[828,2684,2685],{},[17,2686,1123],{},[828,2688,2689],{},"撑满容器宽度",[813,2691,2692,2696,2700,2702],{},[828,2693,2694],{},[17,2695,734],{},[828,2697,2698],{},[17,2699,35],{},[828,2701,1060],{},[828,2703,2704,2705,2707],{},"可访问名（等价 ",[17,2706,738],{},"）；纯图标项必须提供",[813,2709,2710,2714,2718,2720],{},[828,2711,2712],{},[17,2713,1397],{},[828,2715,2716],{},[17,2717,1402],{},[828,2719,1060],{},[828,2721,2722,2723,2725],{},"图标组件（",[17,2724,1410],{},"），装饰性、对 AT 隐藏",[813,2727,2728,2732,2736,2740],{},[828,2729,2730],{},[17,2731,1418],{},[828,2733,2734],{},[17,2735,1118],{},[828,2737,2738],{},[17,2739,1123],{},[828,2741,2742],{},"仅显示图标（等比紧凑模式）",[807,2744,2745,2753],{},[810,2746,2747],{},[813,2748,2749,2751],{},[816,2750,2577],{},[816,2752,2377],{},[823,2754,2755,2764],{},[813,2756,2757,2761],{},[828,2758,2759],{},[17,2760,1269],{},[828,2762,2763],{},"按钮文本",[813,2765,2766,2770],{},[828,2767,2768],{},[17,2769,1397],{},[828,2771,2772],{},"替换内建图标",[42,2774,2775],{},[14,2776,2777,2779,2780,2782,2783,2785],{},[17,2778,97],{}," 必须位于 ",[17,2781,19],{}," 内：组上下文由 reka 的 provide\u002Finject 提供，脱离组会直接抛出可读错误。它的外观、禁用配色、焦点环全部来自 ",[17,2784,27],{},"，因此那三张表同样适用于组内每一项。",[1474,2787,1476],{},{"title":118,"searchDepth":173,"depth":173,"links":2789},[2790,2791,2792,2793,2794,2795,2796,2797],{"id":1560,"depth":173,"text":1561},{"id":1724,"depth":173,"text":1724},{"id":1848,"depth":173,"text":1848},{"id":1957,"depth":173,"text":1958},{"id":2106,"depth":173,"text":2106},{"id":2172,"depth":173,"text":2172},{"id":2259,"depth":173,"text":2259},{"id":1019,"depth":173,"text":1020,"children":2798},[2799,2800],{"id":1024,"depth":179,"text":19},{"id":1278,"depth":179,"text":97},"一组切换按钮，支持单选与多选；视觉以 WinUI ToggleButton 为准，分组语义按 WAI-ARIA \u002F reka-ui。",{},{"title":1500},"\u002Fcomponents\u002Ftoggle-group",{"title":1500,"description":2801},"components\u002Ftoggle-group","BSNTkXLsEtxUyJaDZiULVIi95hI-dl3c-9So3F-hxxk",1792150931348]