[{"data":1,"prerenderedAt":755},["ShallowReactive",2],{"content-\u002Fcomponents\u002Fradio-group":3,"content-en-fallback-\u002Fcomponents\u002Fradio-group":754},{"id":4,"title":5,"body":6,"description":746,"extension":747,"meta":748,"nav":749,"navigation":288,"path":750,"seo":751,"stem":752,"__hash__":753},"content\u002Fcomponents\u002Fradio-group.md","Radio 单选",{"type":7,"value":8,"toc":735},"minimark",[9,13,39,43,55,134,137,148,213,216,229,331,334,366,369,387,391,395,594,597,725,731],[10,11,5],"h1",{"id":12},"radio-单选",[14,15,16,17,21,22,26,27,30,31,34,35,38],"p",{},"单选组件把 WinUI 3 \u002F Windows App SDK 的 ",[18,19,20],"strong",{},"RadioButton"," 还原为两个协作组件：",[23,24,25],"code",{},"FluereRadioGroup","（组容器，管 ",[23,28,29],{},"v-model","、同组互斥与方向键导航）与 ",[23,32,33],{},"FluereRadioButton","（每一项）。交互底座复用 reka-ui 的 RadioGroup，完整还原方向键在组内循环导航 \u002F 选中、选中态品牌实心圆 + 白色内点、按住时内点浅显预览（WinUI 独有的 ",[23,36,37],{},"PressedCheckGlyph","）。",[40,41,42],"h2",{"id":42},"基础用法",[14,44,45,47,48,50,51,54],{},[23,46,29],{}," 绑定当前选中值，",[23,49,33],{}," 的 ",[23,52,53],{},"value"," 决定各自的值。同组互斥，点击任意项选其一。",[56,57,58,65],"demo-block",{"title":42},[59,60,62],"template",{"v-slot:preview":61},"",[63,64],"radio-basic-demo",{},[59,66,67],{"v-slot:code":61},[68,69,73],"pre",{"className":70,"code":71,"language":72,"meta":61,"style":61},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereRadioGroup v-model=\"color\">\n  \u003CFluereRadioButton value=\"red\">番茄红\u003C\u002FFluereRadioButton>\n  \u003CFluereRadioButton value=\"teal\">蓝绿\u003C\u002FFluereRadioButton>\n  \u003CFluereRadioButton value=\"blue\">星辰蓝\u003C\u002FFluereRadioButton>\n\u003C\u002FFluereRadioGroup>\n","vue",[23,74,75,106,112,118,124],{"__ignoreMap":61},[76,77,80,84,87,91,94,98,101,103],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sVt8B","\u003C",[76,85,25],{"class":86},"s9eBZ",[76,88,90],{"class":89},"sScJk"," v-model",[76,92,93],{"class":82},"=",[76,95,97],{"class":96},"sZZnC","\"",[76,99,100],{"class":82},"color",[76,102,97],{"class":96},[76,104,105],{"class":82},">\n",[76,107,109],{"class":78,"line":108},2,[76,110,111],{"class":82},"  \u003CFluereRadioButton value=\"red\">番茄红\u003C\u002FFluereRadioButton>\n",[76,113,115],{"class":78,"line":114},3,[76,116,117],{"class":82},"  \u003CFluereRadioButton value=\"teal\">蓝绿\u003C\u002FFluereRadioButton>\n",[76,119,121],{"class":78,"line":120},4,[76,122,123],{"class":82},"  \u003CFluereRadioButton value=\"blue\">星辰蓝\u003C\u002FFluereRadioButton>\n",[76,125,127,130,132],{"class":78,"line":126},5,[76,128,129],{"class":82},"\u003C\u002F",[76,131,25],{"class":86},[76,133,105],{"class":82},[40,135,136],{"id":136},"横向组",[14,138,139,140,143,144,147],{},"默认纵向堆叠；传 ",[23,141,142],{},"orientation=\"horizontal\""," 改为横向排开（可叠加 ",[23,145,146],{},"flex-wrap"," 换行）。",[56,149,151,156],{"title":150},"横向排布",[59,152,153],{"v-slot:preview":61},[154,155],"radio-orientation-demo",{},[59,157,158],{"v-slot:code":61},[68,159,161],{"className":70,"code":160,"language":72,"meta":61,"style":61},"\u003CFluereRadioGroup v-model=\"align\" orientation=\"horizontal\">\n  \u003CFluereRadioButton value=\"left\">左对齐\u003C\u002FFluereRadioButton>\n  \u003CFluereRadioButton value=\"center\">居中\u003C\u002FFluereRadioButton>\n  \u003CFluereRadioButton value=\"right\">右对齐\u003C\u002FFluereRadioButton>\n\u003C\u002FFluereRadioGroup>\n",[23,162,163,190,195,200,205],{"__ignoreMap":61},[76,164,165,167,169,171,173,175,178,180,183,185,188],{"class":78,"line":79},[76,166,83],{"class":82},[76,168,25],{"class":86},[76,170,90],{"class":89},[76,172,93],{"class":82},[76,174,97],{"class":96},[76,176,177],{"class":82},"align",[76,179,97],{"class":96},[76,181,182],{"class":89}," orientation",[76,184,93],{"class":82},[76,186,187],{"class":96},"\"horizontal\"",[76,189,105],{"class":82},[76,191,192],{"class":78,"line":108},[76,193,194],{"class":82},"  \u003CFluereRadioButton value=\"left\">左对齐\u003C\u002FFluereRadioButton>\n",[76,196,197],{"class":78,"line":114},[76,198,199],{"class":82},"  \u003CFluereRadioButton value=\"center\">居中\u003C\u002FFluereRadioButton>\n",[76,201,202],{"class":78,"line":120},[76,203,204],{"class":82},"  \u003CFluereRadioButton value=\"right\">右对齐\u003C\u002FFluereRadioButton>\n",[76,206,207,209,211],{"class":78,"line":126},[76,208,129],{"class":82},[76,210,25],{"class":86},[76,212,105],{"class":82},[40,214,215],{"id":215},"禁用",[14,217,218,219,222,223,225,226,228],{},"组级禁用传 ",[23,220,221],{},"disabled","；只禁用个别项时在对应 ",[23,224,33],{}," 上传 ",[23,227,221],{},"。",[56,230,232,237],{"title":231},"禁用状态",[59,233,234],{"v-slot:preview":61},[235,236],"radio-disabled-demo",{},[59,238,239],{"v-slot:code":61},[68,240,242],{"className":70,"code":241,"language":72,"meta":61,"style":61},"\u003CFluereRadioGroup v-model=\"plan\" disabled>\n  \u003CFluereRadioButton value=\"free\">免费版\u003C\u002FFluereRadioButton>\n  \u003CFluereRadioButton value=\"pro\">专业版\u003C\u002FFluereRadioButton>\n\u003C\u002FFluereRadioGroup>\n\n\u003CFluereRadioGroup v-model=\"network\">\n  \u003CFluereRadioButton value=\"wifi\">Wi-Fi\u003C\u002FFluereRadioButton>\n  \u003CFluereRadioButton value=\"ethernet\" disabled>以太网\u003C\u002FFluereRadioButton>\n\u003C\u002FFluereRadioGroup>\n",[23,243,244,266,271,276,284,290,310,316,322],{"__ignoreMap":61},[76,245,246,248,250,252,254,256,259,261,264],{"class":78,"line":79},[76,247,83],{"class":82},[76,249,25],{"class":86},[76,251,90],{"class":89},[76,253,93],{"class":82},[76,255,97],{"class":96},[76,257,258],{"class":82},"plan",[76,260,97],{"class":96},[76,262,263],{"class":89}," disabled",[76,265,105],{"class":82},[76,267,268],{"class":78,"line":108},[76,269,270],{"class":82},"  \u003CFluereRadioButton value=\"free\">免费版\u003C\u002FFluereRadioButton>\n",[76,272,273],{"class":78,"line":114},[76,274,275],{"class":82},"  \u003CFluereRadioButton value=\"pro\">专业版\u003C\u002FFluereRadioButton>\n",[76,277,278,280,282],{"class":78,"line":120},[76,279,129],{"class":82},[76,281,25],{"class":86},[76,283,105],{"class":82},[76,285,286],{"class":78,"line":126},[76,287,289],{"emptyLinePlaceholder":288},true,"\n",[76,291,293,295,297,299,301,303,306,308],{"class":78,"line":292},6,[76,294,83],{"class":82},[76,296,25],{"class":86},[76,298,90],{"class":89},[76,300,93],{"class":82},[76,302,97],{"class":96},[76,304,305],{"class":82},"network",[76,307,97],{"class":96},[76,309,105],{"class":82},[76,311,313],{"class":78,"line":312},7,[76,314,315],{"class":82},"  \u003CFluereRadioButton value=\"wifi\">Wi-Fi\u003C\u002FFluereRadioButton>\n",[76,317,319],{"class":78,"line":318},8,[76,320,321],{"class":82},"  \u003CFluereRadioButton value=\"ethernet\" disabled>以太网\u003C\u002FFluereRadioButton>\n",[76,323,325,327,329],{"class":78,"line":324},9,[76,326,129],{"class":82},[76,328,25],{"class":86},[76,330,105],{"class":82},[40,332,333],{"id":333},"无障碍",[14,335,336,338,339,342,343,346,347,350,351,354,355,358,359,225,361,363,364,228],{},[23,337,25],{}," 自带 ",[23,340,341],{},"role=\"radiogroup\"","，每项自带 ",[23,344,345],{},"role=\"radio\""," + ",[23,348,349],{},"aria-checked","；方向键（↑↓\u002F←→ + Home\u002FEnd）在组内循环导航并实时选中（reka roving focus）。可见文本本就在按钮内部，自动作为可访问名；若某项是纯图标（无可读文本），用 ",[23,352,353],{},"label"," 提供 ",[23,356,357],{},"aria-label","；整组无可见标题时可在 ",[23,360,25],{},[23,362,353],{}," 作为组的 ",[23,365,357],{},[40,367,368],{"id":368},"表单提交",[14,370,371,372,375,376,379,380,383,384,386],{},"位于 ",[23,373,374],{},"\u003Cform>"," 内并传 ",[23,377,378],{},"name"," 时，会自动补隐藏原生 ",[23,381,382],{},"\u003Cinput type=\"radio\">","，选中值随表单提交。建议把 ",[23,385,378],{}," 放在组上即可让整组作为同一字段提交。",[40,388,390],{"id":389},"api","API",[392,393,25],"h3",{"id":394},"fluereradiogroup",[396,397,398,417],"table",{},[399,400,401],"thead",{},[402,403,404,408,411,414],"tr",{},[405,406,407],"th",{},"属性（Props）",[405,409,410],{},"类型",[405,412,413],{},"默认",[405,415,416],{},"说明",[418,419,420,444,462,481,501,519,537,556,575],"tbody",{},[402,421,422,428,433,438],{},[423,424,425],"td",{},[23,426,427],{},"modelValue",[423,429,430],{},[23,431,432],{},"AcceptableValue",[423,434,435],{},[23,436,437],{},"—",[423,439,440,441,443],{},"当前选中值（",[23,442,29],{},"）",[402,445,446,451,455,459],{},[423,447,448],{},[23,449,450],{},"defaultValue",[423,452,453],{},[23,454,432],{},[423,456,457],{},[23,458,437],{},[423,460,461],{},"非受控初始选中值",[402,463,464,468,473,478],{},[423,465,466],{},[23,467,221],{},[423,469,470],{},[23,471,472],{},"boolean",[423,474,475],{},[23,476,477],{},"false",[423,479,480],{},"是否禁用整组单选项",[402,482,483,488,493,498],{},[423,484,485],{},[23,486,487],{},"orientation",[423,489,490],{},[23,491,492],{},"'vertical' | 'horizontal'",[423,494,495],{},[23,496,497],{},"vertical",[423,499,500],{},"排布方向",[402,502,503,507,512,516],{},[423,504,505],{},[23,506,378],{},[423,508,509],{},[23,510,511],{},"string",[423,513,514],{},[23,515,437],{},[423,517,518],{},"表单提交名（整组作为同一字段提交）",[402,520,521,526,530,534],{},[423,522,523],{},[23,524,525],{},"required",[423,527,528],{},[23,529,472],{},[423,531,532],{},[23,533,477],{},[423,535,536],{},"组内必选约束",[402,538,539,544,548,553],{},[423,540,541],{},[23,542,543],{},"loop",[423,545,546],{},[23,547,472],{},[423,549,550],{},[23,551,552],{},"true",[423,554,555],{},"方向键在首尾项之间循环导航",[402,557,558,563,568,572],{},[423,559,560],{},[23,561,562],{},"dir",[423,564,565],{},[23,566,567],{},"'ltr' | 'rtl'",[423,569,570],{},[23,571,437],{},[423,573,574],{},"阅读方向（一般无需设置）",[402,576,577,581,585,589],{},[423,578,579],{},[23,580,353],{},[423,582,583],{},[23,584,511],{},[423,586,587],{},[23,588,437],{},[423,590,591,592,443],{},"组的可访问名称（等价 ",[23,593,357],{},[392,595,33],{"id":596},"fluereradiobutton",[396,598,599,611],{},[399,600,601],{},[402,602,603,605,607,609],{},[405,604,407],{},[405,606,410],{},[405,608,413],{},[405,610,416],{},[418,612,613,630,647,666,683,705],{},[402,614,615,619,623,627],{},[423,616,617],{},[23,618,53],{},[423,620,621],{},[23,622,432],{},[423,624,625],{},[23,626,437],{},[423,628,629],{},"该单选项的值（决定选中态 \u002F 提交值）",[402,631,632,636,640,644],{},[423,633,634],{},[23,635,221],{},[423,637,638],{},[23,639,472],{},[423,641,642],{},[23,643,477],{},[423,645,646],{},"是否禁用该项（叠加在组之上）",[402,648,649,653,657,661],{},[423,650,651],{},[23,652,378],{},[423,654,655],{},[23,656,511],{},[423,658,659],{},[23,660,437],{},[423,662,663,664,443],{},"该项表单提交名（通常用组上的 ",[23,665,378],{},[402,667,668,672,676,680],{},[423,669,670],{},[23,671,525],{},[423,673,674],{},[23,675,472],{},[423,677,678],{},[23,679,477],{},[423,681,682],{},"必选约束",[402,684,685,690,694,698],{},[423,686,687],{},[23,688,689],{},"id",[423,691,692],{},[23,693,511],{},[423,695,696],{},[23,697,437],{},[423,699,700,701,704],{},"原生 id，可与外部 label 的 ",[23,702,703],{},"for"," 关联",[402,706,707,711,715,719],{},[423,708,709],{},[23,710,353],{},[423,712,713],{},[23,714,511],{},[423,716,717],{},[23,718,437],{},[423,720,721,722,724],{},"纯图标时的 ",[23,723,357],{}," 兜底",[726,727,728],"blockquote",{},[14,729,730],{},"圆（circle）固定 20px 直径（对应 WinUI 的 RadioButton 圆尺寸），不随尺寸缩放；选中态为「品牌色实心圆 + 白色内点」，按住时内点浅显预览——与 WinUI RadioButton 一致。",[732,733,734],"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":61,"searchDepth":108,"depth":108,"links":736},[737,738,739,740,741,742],{"id":42,"depth":108,"text":42},{"id":136,"depth":108,"text":136},{"id":215,"depth":108,"text":215},{"id":333,"depth":108,"text":333},{"id":368,"depth":108,"text":368},{"id":389,"depth":108,"text":390,"children":743},[744,745],{"id":394,"depth":114,"text":25},{"id":596,"depth":114,"text":33},"单选按钮组件，用于在一组互斥选项中选择一个。","md",{},{"title":5},"\u002Fcomponents\u002Fradio-group",{"title":5,"description":746},"components\u002Fradio-group","kY5znjKSg1Hx8ZsDWblLEj9wp3mE_aSdqx1_oRBEkM8",null,1791802960540]