[{"data":1,"prerenderedAt":4033},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Fcombobox":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Fcombobox":2139},{"id":4,"title":5,"body":6,"description":2130,"extension":2131,"meta":2132,"nav":2133,"navigation":2134,"path":2135,"seo":2136,"stem":2137,"__hash__":2138},"content_en\u002Fen\u002Fcomponents\u002Fcombobox.md","Combobox Dropdown",{"type":7,"value":8,"toc":2119},"minimark",[9,13,31,38,41,108,113,130,213,217,249,343,347,386,497,508,553,557,567,738,765,853,864,868,886,953,1045,1049,1064,1156,1160,1174,1241,1245,1266,1327,1331,1743,1869,1930,1976,2115],[10,11,5],"h1",{"id":12},"combobox-dropdown",[14,15,16,17,21,22,26,27,30],"p",{},"The dropdown lets users pick one item from a set of single-line text options (color, font size, shipping method…). Its style and behavior reproduce the ",[18,19,20],"strong",{},"ComboBox"," of WinUI 3 (Windows App SDK 2.0): geometry, state colors, dropdown item indicator bars, panel positioning and animation are all checked line by line against ",[23,24,25],"code",{},"src\u002Fcontrols\u002Fdev\u002FComboBox\u002FComboBox_themeresources.xaml","; key handling, text search and the editable state follow ",[23,28,29],{},"src\u002Fdxaml\u002Fxcp\u002Fdxaml\u002Flib\u002FComboBox_Partial.cpp",".",[14,32,33,34,37],{},"The interaction foundation reuses the Combobox primitive of ",[23,35,36],{},"reka-ui"," (ARIA combobox semantics, roving highlight, popup positioning, close on outside click); this component adds WinUI's key handling, text search, editable state and visual states.",[14,39,40],{},"Three value-handling conventions aligned with WinUI:",[42,43,44,68,91],"ul",{},[45,46,47,53,54,57,58,61,62,64,65,67],"li",{},[18,48,49,50],{},"No selection means ",[23,51,52],{},"null"," (matches WinUI ",[23,55,56],{},"SelectedIndex = -1","): without ",[23,59,60],{},"modelValue"," it is uncontrolled, ",[23,63,52],{}," means nothing is selected, and clearing the selection emits ",[23,66,52],{},";",[45,69,70,53,76,79,80,83,84,87,88,67],{},[18,71,72,73],{},"Option data goes through ",[23,74,75],{},"items",[23,77,78],{},"ItemsSource","), each item ",[23,81,82],{},"{ value, text?, disabled? }",", ",[23,85,86],{},"text"," defaults to ",[23,89,90],{},"String(value)",[45,92,93,99,100,103,104,107],{},[18,94,95,98],{},[23,96,97],{},"selectionChangedTrigger"," decides when to commit",": default ",[23,101,102],{},"committed"," — a click \u002F Enter \u002F text search changes the selection; with the panel open, arrow keys only move the highlight (WinUI ",[23,105,106],{},"SelectionChangedTrigger"," default behavior).",[109,110,112],"h2",{"id":111},"basic-usage","Basic usage",[14,114,115,118,119,121,122,125,126,129],{},[23,116,117],{},"v-model"," binds the selected value, ",[23,120,75],{}," supplies the options, ",[23,123,124],{},"header"," is WinUI's title row (also the default accessible name), and ",[23,127,128],{},"placeholder"," is shown when nothing is selected.",[131,132,133,140],"demo-block",{"title":112},[134,135,137],"template",{"v-slot:preview":136},"",[138,139],"combobox-basic-demo",{},[134,141,142],{"v-slot:code":136},[143,144,148],"pre",{"className":145,"code":146,"language":147,"meta":136,"style":136},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereCombobox v-model=\"picked\" :items=\"COLORS\" header=\"Colors\" placeholder=\"Select a color\" \u002F>\n","vue",[23,149,150],{"__ignoreMap":136},[151,152,155,159,163,167,170,174,177,179,182,184,186,188,192,194,197,199,202,205,207,210],"span",{"class":153,"line":154},"line",1,[151,156,158],{"class":157},"sVt8B","\u003C",[151,160,162],{"class":161},"s9eBZ","FluereCombobox",[151,164,166],{"class":165},"sScJk"," v-model",[151,168,169],{"class":157},"=",[151,171,173],{"class":172},"sZZnC","\"",[151,175,176],{"class":157},"picked",[151,178,173],{"class":172},[151,180,181],{"class":157}," :",[151,183,75],{"class":165},[151,185,169],{"class":157},[151,187,173],{"class":172},[151,189,191],{"class":190},"sj4cs","COLORS",[151,193,173],{"class":172},[151,195,196],{"class":165}," header",[151,198,169],{"class":157},[151,200,201],{"class":172},"\"Colors\"",[151,203,204],{"class":165}," placeholder",[151,206,169],{"class":157},[151,208,209],{"class":172},"\"Select a color\"",[151,211,212],{"class":157}," \u002F>\n",[109,214,216],{"id":215},"title-description-and-accessible-name","Title, description and accessible name",[14,218,219,221,222,225,226,229,230,233,234,237,238,241,242,245,246,248],{},[23,220,124],{}," maps to WinUI ",[23,223,224],{},"Header"," (",[23,227,228],{},"LineHeight 20",", bottom margin 8, weight Normal), ",[23,231,232],{},"description"," maps to ",[23,235,236],{},"Description"," (rendered below the control and used as ",[23,239,240],{},"aria-describedby","), and ",[23,243,244],{},"label"," takes precedence over ",[23,247,124],{}," as the accessible name.",[131,250,252,257],{"title":251},"Title and description",[134,253,254],{"v-slot:preview":136},[255,256],"combobox-header-demo",{},[134,258,259],{"v-slot:code":136},[143,260,262],{"className":145,"code":261,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"fontSize\"\n  :items=\"FONT_SIZES\"\n  header=\"Body font size\"\n  description=\"The header doubles as the default accessible name; the description is attached via aria-describedby\"\n  label=\"Body font size selector\"\n\u002F>\n",[23,263,264,271,287,304,315,326,337],{"__ignoreMap":136},[151,265,266,268],{"class":153,"line":154},[151,267,158],{"class":157},[151,269,270],{"class":161},"FluereCombobox\n",[151,272,274,277,279,281,284],{"class":153,"line":273},2,[151,275,276],{"class":165},"  v-model",[151,278,169],{"class":157},[151,280,173],{"class":172},[151,282,283],{"class":157},"fontSize",[151,285,286],{"class":172},"\"\n",[151,288,290,293,295,297,299,302],{"class":153,"line":289},3,[151,291,292],{"class":157},"  :",[151,294,75],{"class":165},[151,296,169],{"class":157},[151,298,173],{"class":172},[151,300,301],{"class":190},"FONT_SIZES",[151,303,286],{"class":172},[151,305,307,310,312],{"class":153,"line":306},4,[151,308,309],{"class":165},"  header",[151,311,169],{"class":157},[151,313,314],{"class":172},"\"Body font size\"\n",[151,316,318,321,323],{"class":153,"line":317},5,[151,319,320],{"class":165},"  description",[151,322,169],{"class":157},[151,324,325],{"class":172},"\"The header doubles as the default accessible name; the description is attached via aria-describedby\"\n",[151,327,329,332,334],{"class":153,"line":328},6,[151,330,331],{"class":165},"  label",[151,333,169],{"class":157},[151,335,336],{"class":172},"\"Body font size selector\"\n",[151,338,340],{"class":153,"line":339},7,[151,341,342],{"class":157},"\u002F>\n",[109,344,346],{"id":345},"selection-and-events","Selection and events",[14,348,349,350,352,353,356,357,359,360,363,364,367,368,371,372,371,375,371,378,381,382,385],{},"Elements of ",[23,351,75],{}," can be of any type: use ",[23,354,355],{},"by"," to specify item identity (field name or compare function) and ",[23,358,86],{}," to specify the display and search text. The payload of ",[23,361,362],{},"selectionChanged"," aligns with WinUI ",[23,365,366],{},"SelectionChangedEventArgs",": ",[23,369,370],{},"addedItem"," \u002F ",[23,373,374],{},"removedItem",[23,376,377],{},"addedIndex",[23,379,380],{},"removedIndex"," (single-select, at most one of each; index is ",[23,383,384],{},"-1"," when nothing is selected).",[131,387,389,394],{"title":388},"Object items and selection events",[134,390,391],{"v-slot:preview":136},[392,393],"combobox-object-demo",{},[134,395,396],{"v-slot:code":136},[143,397,399],{"className":145,"code":398,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"city\"\n  :items=\"CITIES.map((item) => ({ value: item, text: item.name }))\"\n  by=\"id\"\n  header=\"Cities (object items + by)\"\n  @selection-changed=\"onSelectionChanged\"\n\u002F>\n",[23,400,401,407,420,457,467,476,493],{"__ignoreMap":136},[151,402,403,405],{"class":153,"line":154},[151,404,158],{"class":157},[151,406,270],{"class":161},[151,408,409,411,413,415,418],{"class":153,"line":273},[151,410,276],{"class":165},[151,412,169],{"class":157},[151,414,173],{"class":172},[151,416,417],{"class":157},"city",[151,419,286],{"class":172},[151,421,422,424,426,428,430,433,435,438,441,445,448,452,455],{"class":153,"line":289},[151,423,292],{"class":157},[151,425,75],{"class":165},[151,427,169],{"class":157},[151,429,173],{"class":172},[151,431,432],{"class":190},"CITIES",[151,434,30],{"class":157},[151,436,437],{"class":165},"map",[151,439,440],{"class":157},"((",[151,442,444],{"class":443},"s4XuR","item",[151,446,447],{"class":157},") ",[151,449,451],{"class":450},"szBVR","=>",[151,453,454],{"class":157}," ({ value: item, text: item.name }))",[151,456,286],{"class":172},[151,458,459,462,464],{"class":153,"line":306},[151,460,461],{"class":165},"  by",[151,463,169],{"class":157},[151,465,466],{"class":172},"\"id\"\n",[151,468,469,471,473],{"class":153,"line":317},[151,470,309],{"class":165},[151,472,169],{"class":157},[151,474,475],{"class":172},"\"Cities (object items + by)\"\n",[151,477,478,481,484,486,488,491],{"class":153,"line":328},[151,479,480],{"class":157},"  @",[151,482,483],{"class":165},"selection-changed",[151,485,169],{"class":157},[151,487,173],{"class":172},[151,489,490],{"class":157},"onSelectionChanged",[151,492,286],{"class":172},[151,494,495],{"class":153,"line":339},[151,496,342],{"class":157},[14,498,499,500,503,504,507],{},"For \"highlight follows the selection\" behavior (WinUI ",[23,501,502],{},"SelectionChangedTrigger = Always",", the feel of a font picker), pass ",[23,505,506],{},"selection-changed-trigger=\"always\"",":",[143,509,511],{"className":145,"code":510,"language":147,"meta":136,"style":136},"\u003CFluereCombobox v-model=\"font\" :items=\"FONTS\" selection-changed-trigger=\"always\" \u002F>\n",[23,512,513],{"__ignoreMap":136},[151,514,515,517,519,521,523,525,528,530,532,534,536,538,541,543,546,548,551],{"class":153,"line":154},[151,516,158],{"class":157},[151,518,162],{"class":161},[151,520,166],{"class":165},[151,522,169],{"class":157},[151,524,173],{"class":172},[151,526,527],{"class":157},"font",[151,529,173],{"class":172},[151,531,181],{"class":157},[151,533,75],{"class":165},[151,535,169],{"class":157},[151,537,173],{"class":172},[151,539,540],{"class":190},"FONTS",[151,542,173],{"class":172},[151,544,545],{"class":165}," selection-changed-trigger",[151,547,169],{"class":157},[151,549,550],{"class":172},"\"always\"",[151,552,212],{"class":157},[109,554,556],{"id":555},"keyboard-and-text-search","Keyboard and text search",[14,558,559,560,371,563,566],{},"Key handling follows WinUI's two key maps line by line (",[23,561,562],{},"MainKeyDown",[23,564,565],{},"PopupKeyDown","):",[568,569,570,586],"table",{},[571,572,573],"thead",{},[574,575,576,580,583],"tr",{},[577,578,579],"th",{},"Key",[577,581,582],{},"Panel collapsed (non-editable)",[577,584,585],{},"Panel expanded",[587,588,589,612,628,641,655,674,690,701,714,725],"tbody",{},[574,590,591,600,606],{},[592,593,594,371,597],"td",{},[23,595,596],{},"↑",[23,598,599],{},"↓",[592,601,602,605],{},[18,603,604],{},"changes the selection directly"," (skips disabled items)",[592,607,608,609,611],{},"moves the highlight (does not change selection under ",[23,610,102],{},")",[574,613,614,622,625],{},[592,615,616,371,619],{},[23,617,618],{},"Home",[23,620,621],{},"End",[592,623,624],{},"selects first \u002F last enabled item",[592,626,627],{},"highlights first \u002F last",[574,629,630,635,638],{},[592,631,632],{},[23,633,634],{},"Enter",[592,636,637],{},"opens the panel",[592,639,640],{},"commits the highlighted item and closes",[574,642,643,648,650],{},[592,644,645],{},[23,646,647],{},"Space",[592,649,637],{},[592,651,652,653],{},"equivalent to ",[23,654,634],{},[574,656,657,668,671],{},[592,658,659,371,662,665,666],{},[23,660,661],{},"Ctrl",[23,663,664],{},"Cmd"," + ",[23,667,634],{},[592,669,670],{},"—",[592,672,673],{},"deselects the currently selected item",[574,675,676,685,687],{},[592,677,678,665,681,371,683],{},[23,679,680],{},"Alt",[23,682,596],{},[23,684,599],{},[592,686,637],{},[592,688,689],{},"closes the panel",[574,691,692,697,699],{},[592,693,694],{},[23,695,696],{},"F4",[592,698,637],{},[592,700,689],{},[574,702,703,708,711],{},[592,704,705],{},[23,706,707],{},"Escape",[592,709,710],{},"not handled (bubbles to the parent)",[592,712,713],{},"closes the panel without changing the selection",[574,715,716,719,722],{},[592,717,718],{},"Character keys",[592,720,721],{},"prefix-searches and selects the hit directly",[592,723,724],{},"same (the popup bubbles the character back to the control)",[574,726,727,732,735],{},[592,728,729],{},[23,730,731],{},"Tab",[592,733,734],{},"focus leaves normally",[592,736,737],{},"closes the panel; focus leaves normally",[14,739,740,741,744,745,748,749,752,753,756,757,760,761,764],{},"Text search shares WinUI's semantics: item text is first ",[23,742,743],{},"TrimStart(' ')"," and then matched by ",[18,746,747],{},"case-insensitive prefix match"," (no substring \u002F fuzzy matching); the search string accumulates when two keystrokes are ≤ ",[18,750,751],{},"1000ms"," apart and restarts otherwise; the new search string scans ",[18,754,755],{},"circularly"," starting from \"current item + 1\", and the hit directly becomes the selection. ",[23,758,759],{},"text-search-enabled=\"false\""," turns it off entirely (matches ",[23,762,763],{},"IsTextSearchEnabled","). When focus is on the control and the panel is collapsed, the mouse wheel also changes the selection (WinUI only responds when focused and collapsed).",[131,766,768,773],{"title":767},"Long list and text search",[134,769,770],{"v-slot:preview":136},[771,772],"combobox-long-list-demo",{},[134,774,775],{"v-slot:code":136},[143,776,778],{"className":145,"code":777,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"state\"\n  :items=\"STATES\"\n  header=\"States (type w to try text search)\"\n  placeholder=\"Select or type the first letter\"\n  :max-drop-down-height=\"200\"\n\u002F>\n",[23,779,780,786,799,814,823,833,849],{"__ignoreMap":136},[151,781,782,784],{"class":153,"line":154},[151,783,158],{"class":157},[151,785,270],{"class":161},[151,787,788,790,792,794,797],{"class":153,"line":273},[151,789,276],{"class":165},[151,791,169],{"class":157},[151,793,173],{"class":172},[151,795,796],{"class":157},"state",[151,798,286],{"class":172},[151,800,801,803,805,807,809,812],{"class":153,"line":289},[151,802,292],{"class":157},[151,804,75],{"class":165},[151,806,169],{"class":157},[151,808,173],{"class":172},[151,810,811],{"class":190},"STATES",[151,813,286],{"class":172},[151,815,816,818,820],{"class":153,"line":306},[151,817,309],{"class":165},[151,819,169],{"class":157},[151,821,822],{"class":172},"\"States (type w to try text search)\"\n",[151,824,825,828,830],{"class":153,"line":317},[151,826,827],{"class":165},"  placeholder",[151,829,169],{"class":157},[151,831,832],{"class":172},"\"Select or type the first letter\"\n",[151,834,835,837,840,842,844,847],{"class":153,"line":328},[151,836,292],{"class":157},[151,838,839],{"class":165},"max-drop-down-height",[151,841,169],{"class":157},[151,843,173],{"class":172},[151,845,846],{"class":190},"200",[151,848,286],{"class":172},[151,850,851],{"class":153,"line":339},[151,852,342],{"class":157},[14,854,855,856,859,860,863],{},"The panel's maximum height defaults to 504px (WinUI ",[23,857,858],{},"DefaultComboBoxStyle"," ",[23,861,862],{},"MaxDropDownHeight",", roughly 15 items); beyond that the list scrolls internally.",[109,865,867],{"id":866},"editable-state","Editable state",[14,869,870,221,873,876,877,880,881,371,883,30],{},[23,871,872],{},"editable",[23,874,875],{},"IsEditable",": the input box accepts a custom value, and ",[18,878,879],{},"typing does not filter the list"," (an editable WinUI ComboBox only does inline completion, not filtering); the panel is still opened via the arrow hotspot \u002F ",[23,882,696],{},[23,884,885],{},"Alt+↓",[42,887,888,898,913,931,942],{},[45,889,890,893,894,897],{},[18,891,892],{},"Inline completion",": when a typed prefix matches an item, it completes to that item's text and selects the completed part (WinUI ",[23,895,896],{},"UpdateEditableTextBox(selectText: true)","); continued typing replaces it;",[45,899,900,905,906,909,910,67],{},[18,901,902,904],{},[23,903,634],{}," \u002F commit on blur",": text matching an existing item → selects that item; otherwise it emits ",[23,907,908],{},"textSubmitted"," and, following WinUI's default behavior, clears the selection while ",[18,911,912],{},"keeping the text",[45,914,915,922,923,926,927,930],{},[18,916,917,859,919],{},[23,918,908],{},[23,920,921],{},"handled",": setting ",[23,924,925],{},"true"," equals WinUI ",[23,928,929],{},"e.Handled = true",", and the component no longer changes the selection (convenient for filling the value back after validation);",[45,932,933,937,938,941],{},[18,934,935],{},[23,936,707],{},": rolls the text back to the current selection (WinUI ",[23,939,940],{},"CommitRevertEditableSearch(restoreValue: true)",");",[45,943,944,945,948,949,952],{},"The text can be controlled with ",[23,946,947],{},"v-model:text"," (maps to WinUI ",[23,950,951],{},"Text",").",[131,954,955,960],{"title":867},[134,956,957],{"v-slot:preview":136},[958,959],"combobox-editable-demo",{},[134,961,962],{"v-slot:code":136},[143,963,965],{"className":145,"code":964,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"name\"\n  :items=\"RECENT_NAMES\"\n  editable\n  header=\"Name (customizable)\"\n  placeholder=\"Type or select\"\n  @text-submitted=\"onTextSubmitted\"\n\u002F>\n",[23,966,967,973,986,1001,1006,1015,1024,1040],{"__ignoreMap":136},[151,968,969,971],{"class":153,"line":154},[151,970,158],{"class":157},[151,972,270],{"class":161},[151,974,975,977,979,981,984],{"class":153,"line":273},[151,976,276],{"class":165},[151,978,169],{"class":157},[151,980,173],{"class":172},[151,982,983],{"class":157},"name",[151,985,286],{"class":172},[151,987,988,990,992,994,996,999],{"class":153,"line":289},[151,989,292],{"class":157},[151,991,75],{"class":165},[151,993,169],{"class":157},[151,995,173],{"class":172},[151,997,998],{"class":190},"RECENT_NAMES",[151,1000,286],{"class":172},[151,1002,1003],{"class":153,"line":306},[151,1004,1005],{"class":165},"  editable\n",[151,1007,1008,1010,1012],{"class":153,"line":317},[151,1009,309],{"class":165},[151,1011,169],{"class":157},[151,1013,1014],{"class":172},"\"Name (customizable)\"\n",[151,1016,1017,1019,1021],{"class":153,"line":328},[151,1018,827],{"class":165},[151,1020,169],{"class":157},[151,1022,1023],{"class":172},"\"Type or select\"\n",[151,1025,1026,1028,1031,1033,1035,1038],{"class":153,"line":339},[151,1027,480],{"class":157},[151,1029,1030],{"class":165},"text-submitted",[151,1032,169],{"class":157},[151,1034,173],{"class":172},[151,1036,1037],{"class":157},"onTextSubmitted",[151,1039,286],{"class":172},[151,1041,1043],{"class":153,"line":1042},8,[151,1044,342],{"class":157},[109,1046,1048],{"id":1047},"custom-dropdown-items","Custom dropdown items",[14,1050,1051,1052,1055,1056,1059,1060,1063],{},"Use the ",[23,1053,1054],{},"#item"," slot to override row content (maps to WinUI ",[23,1057,1058],{},"ItemTemplate","); slot params are ",[23,1061,1062],{},"{ item, index }",". The selection indicator bar, padding, corner radius and state colors are still handled by the component.",[131,1065,1066,1071],{"title":1048},[134,1067,1068],{"v-slot:preview":136},[1069,1070],"combobox-custom-item-demo",{},[134,1072,1073],{"v-slot:code":136},[143,1074,1076],{"className":145,"code":1075,"language":147,"meta":136,"style":136},"\u003CFluereCombobox v-model=\"color\" :items=\"COLORS\" header=\"Accent color\">\n  \u003Ctemplate #item=\"{ item }\">\n    \u003Cspan class=\"flex items-center gap-2\">\n      \u003Cspan class=\"inline-block w-4 h-4 rounded-fluent-sm\" :style=\"{ backgroundColor: item.value }\" \u002F>\n      {{ item.text }}\n    \u003C\u002Fspan>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereCombobox>\n",[23,1077,1078,1117,1122,1127,1132,1137,1142,1147],{"__ignoreMap":136},[151,1079,1080,1082,1084,1086,1088,1090,1093,1095,1097,1099,1101,1103,1105,1107,1109,1111,1114],{"class":153,"line":154},[151,1081,158],{"class":157},[151,1083,162],{"class":161},[151,1085,166],{"class":165},[151,1087,169],{"class":157},[151,1089,173],{"class":172},[151,1091,1092],{"class":157},"color",[151,1094,173],{"class":172},[151,1096,181],{"class":157},[151,1098,75],{"class":165},[151,1100,169],{"class":157},[151,1102,173],{"class":172},[151,1104,191],{"class":190},[151,1106,173],{"class":172},[151,1108,196],{"class":165},[151,1110,169],{"class":157},[151,1112,1113],{"class":172},"\"Accent color\"",[151,1115,1116],{"class":157},">\n",[151,1118,1119],{"class":153,"line":273},[151,1120,1121],{"class":157},"  \u003Ctemplate #item=\"{ item }\">\n",[151,1123,1124],{"class":153,"line":289},[151,1125,1126],{"class":157},"    \u003Cspan class=\"flex items-center gap-2\">\n",[151,1128,1129],{"class":153,"line":306},[151,1130,1131],{"class":157},"      \u003Cspan class=\"inline-block w-4 h-4 rounded-fluent-sm\" :style=\"{ backgroundColor: item.value }\" \u002F>\n",[151,1133,1134],{"class":153,"line":317},[151,1135,1136],{"class":157},"      {{ item.text }}\n",[151,1138,1139],{"class":153,"line":328},[151,1140,1141],{"class":157},"    \u003C\u002Fspan>\n",[151,1143,1144],{"class":153,"line":339},[151,1145,1146],{"class":157},"  \u003C\u002Ftemplate>\n",[151,1148,1149,1152,1154],{"class":153,"line":1042},[151,1150,1151],{"class":157},"\u003C\u002F",[151,1153,162],{"class":161},[151,1155,1116],{"class":157},[109,1157,1159],{"id":1158},"disabled","Disabled",[14,1161,1162,221,1164,1167,1168,233,1170,1173],{},[23,1163,1158],{},[23,1165,1166],{},"IsEnabled = false"," (fill \u002F foreground \u002F arrow \u002F indicator bar all use the disabled slots, and it ignores pointer and keyboard); an individual option's ",[23,1169,1158],{},[23,1171,1172],{},"ComboBoxItem.IsEnabled = false"," and is excluded from arrow-key selection and text search.",[131,1175,1177,1182],{"title":1176},"Disabled state",[134,1178,1179],{"v-slot:preview":136},[1180,1181],"combobox-disabled-demo",{},[134,1183,1184],{"v-slot:code":136},[143,1185,1187],{"className":145,"code":1186,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"plan\"\n  :items=\"PLANS\"\n  header=\"Selectable: arrow keys and type-to-search skip disabled items\"\n\u002F>\n\u003CFluereCombobox v-model=\"locked\" :items=\"PLANS\" disabled header=\"Disabled entirely\" \u002F>\n",[23,1188,1189,1195,1208,1223,1232,1236],{"__ignoreMap":136},[151,1190,1191,1193],{"class":153,"line":154},[151,1192,158],{"class":157},[151,1194,270],{"class":161},[151,1196,1197,1199,1201,1203,1206],{"class":153,"line":273},[151,1198,276],{"class":165},[151,1200,169],{"class":157},[151,1202,173],{"class":172},[151,1204,1205],{"class":157},"plan",[151,1207,286],{"class":172},[151,1209,1210,1212,1214,1216,1218,1221],{"class":153,"line":289},[151,1211,292],{"class":157},[151,1213,75],{"class":165},[151,1215,169],{"class":157},[151,1217,173],{"class":172},[151,1219,1220],{"class":190},"PLANS",[151,1222,286],{"class":172},[151,1224,1225,1227,1229],{"class":153,"line":306},[151,1226,309],{"class":165},[151,1228,169],{"class":157},[151,1230,1231],{"class":172},"\"Selectable: arrow keys and type-to-search skip disabled items\"\n",[151,1233,1234],{"class":153,"line":317},[151,1235,342],{"class":157},[151,1237,1238],{"class":153,"line":328},[151,1239,1240],{"class":157},"\u003CFluereCombobox v-model=\"locked\" :items=\"PLANS\" disabled header=\"Disabled entirely\" \u002F>\n",[109,1242,1244],{"id":1243},"form-submission","Form submission",[14,1246,1247,1248,1251,1252,1254,1255,1258,1259,1262,1263,30],{},"When placed inside a ",[23,1249,1250],{},"\u003Cform>"," with a ",[23,1253,983],{},", it adds a hidden native ",[23,1256,1257],{},"\u003Cinput type=\"hidden\">"," submitting ",[23,1260,1261],{},"name=value"," (an empty string when nothing is selected), matching the use of WinUI ",[23,1264,1265],{},"SelectedValue",[131,1267,1268,1273],{"title":1244},[134,1269,1270],{"v-slot:preview":136},[1271,1272],"combobox-form-demo",{},[134,1274,1275],{"v-slot:code":136},[143,1276,1278],{"className":145,"code":1277,"language":147,"meta":136,"style":136},"\u003Cform @submit.prevent=\"onSubmit\">\n  \u003CFluereCombobox v-model=\"shipping\" :items=\"SHIPPING\" name=\"shipping\" header=\"Shipping method\" \u002F>\n  \u003CFluereButton type=\"submit\" appearance=\"primary\">Submit\u003C\u002FFluereButton>\n\u003C\u002Fform>\n",[23,1279,1280,1309,1314,1319],{"__ignoreMap":136},[151,1281,1282,1284,1287,1290,1293,1295,1298,1300,1302,1305,1307],{"class":153,"line":154},[151,1283,158],{"class":157},[151,1285,1286],{"class":161},"form",[151,1288,1289],{"class":157}," @",[151,1291,1292],{"class":165},"submit",[151,1294,30],{"class":157},[151,1296,1297],{"class":165},"prevent",[151,1299,169],{"class":157},[151,1301,173],{"class":172},[151,1303,1304],{"class":157},"onSubmit",[151,1306,173],{"class":172},[151,1308,1116],{"class":157},[151,1310,1311],{"class":153,"line":273},[151,1312,1313],{"class":157},"  \u003CFluereCombobox v-model=\"shipping\" :items=\"SHIPPING\" name=\"shipping\" header=\"Shipping method\" \u002F>\n",[151,1315,1316],{"class":153,"line":289},[151,1317,1318],{"class":157},"  \u003CFluereButton type=\"submit\" appearance=\"primary\">Submit\u003C\u002FFluereButton>\n",[151,1320,1321,1323,1325],{"class":153,"line":306},[151,1322,1151],{"class":157},[151,1324,1286],{"class":161},[151,1326,1116],{"class":157},[109,1328,1330],{"id":1329},"api","API",[568,1332,1333,1348],{},[571,1334,1335],{},[574,1336,1337,1340,1343,1346],{},[577,1338,1339],{},"Prop (Props)",[577,1341,1342],{},"Type",[577,1344,1345],{},"Default",[577,1347,236],{},[587,1349,1350,1377,1395,1419,1445,1464,1484,1503,1525,1544,1565,1585,1604,1626,1643,1661,1683,1703,1724],{},[574,1351,1352,1356,1361,1365],{},[592,1353,1354],{},[23,1355,60],{},[592,1357,1358],{},[23,1359,1360],{},"unknown | null",[592,1362,1363],{},[23,1364,670],{},[592,1366,1367,1368,1370,1371,1373,1374,611],{},"Current selected value (",[23,1369,117],{},"); ",[23,1372,52],{}," means nothing is selected (WinUI ",[23,1375,1376],{},"SelectedItem",[574,1378,1379,1384,1388,1392],{},[592,1380,1381],{},[23,1382,1383],{},"defaultValue",[592,1385,1386],{},[23,1387,1360],{},[592,1389,1390],{},[23,1391,52],{},[592,1393,1394],{},"Uncontrolled initial selected value",[574,1396,1397,1401,1406,1411],{},[592,1398,1399],{},[23,1400,75],{},[592,1402,1403],{},[23,1404,1405],{},"FluereComboboxItem[]",[592,1407,1408],{},[23,1409,1410],{},"[]",[592,1412,1413,1414,1416,1417],{},"Option data (WinUI ",[23,1415,78],{},"): ",[23,1418,82],{},[574,1420,1421,1426,1431,1435],{},[592,1422,1423],{},[23,1424,1425],{},"open",[592,1427,1428],{},[23,1429,1430],{},"boolean",[592,1432,1433],{},[23,1434,670],{},[592,1436,1437,1438,1441,1442,611],{},"Panel open state (",[23,1439,1440],{},"v-model:open",", WinUI ",[23,1443,1444],{},"IsDropDownOpen",[574,1446,1447,1452,1456,1461],{},[592,1448,1449],{},[23,1450,1451],{},"defaultOpen",[592,1453,1454],{},[23,1455,1430],{},[592,1457,1458],{},[23,1459,1460],{},"false",[592,1462,1463],{},"Uncontrolled initial open state",[574,1465,1466,1470,1474,1478],{},[592,1467,1468],{},[23,1469,1158],{},[592,1471,1472],{},[23,1473,1430],{},[592,1475,1476],{},[23,1477,1460],{},[592,1479,1480,1481,611],{},"Whether the control is disabled (WinUI ",[23,1482,1483],{},"IsEnabled",[574,1485,1486,1490,1494,1498],{},[592,1487,1488],{},[23,1489,872],{},[592,1491,1492],{},[23,1493,1430],{},[592,1495,1496],{},[23,1497,1460],{},[592,1499,1500,1501,611],{},"Editable state (WinUI ",[23,1502,875],{},[574,1504,1505,1509,1514,1518],{},[592,1506,1507],{},[23,1508,86],{},[592,1510,1511],{},[23,1512,1513],{},"string",[592,1515,1516],{},[23,1517,670],{},[592,1519,1520,1521,1441,1523,611],{},"Editable-state text (",[23,1522,947],{},[23,1524,951],{},[574,1526,1527,1532,1536,1541],{},[592,1528,1529],{},[23,1530,1531],{},"defaultText",[592,1533,1534],{},[23,1535,1513],{},[592,1537,1538],{},[23,1539,1540],{},"''",[592,1542,1543],{},"Uncontrolled initial text in editable state",[574,1545,1546,1550,1554,1558],{},[592,1547,1548],{},[23,1549,128],{},[592,1551,1552],{},[23,1553,1513],{},[592,1555,1556],{},[23,1557,670],{},[592,1559,1560,1561,1564],{},"Placeholder (WinUI ",[23,1562,1563],{},"PlaceholderText","), shown only when nothing is selected",[574,1566,1567,1571,1575,1579],{},[592,1568,1569],{},[23,1570,124],{},[592,1572,1573],{},[23,1574,1513],{},[592,1576,1577],{},[23,1578,670],{},[592,1580,1581,1582,1584],{},"Top title (WinUI ",[23,1583,224],{},"), also the default accessible name",[574,1586,1587,1591,1595,1599],{},[592,1588,1589],{},[23,1590,244],{},[592,1592,1593],{},[23,1594,1513],{},[592,1596,1597],{},[23,1598,670],{},[592,1600,1601,1602,611],{},"Accessible name (takes precedence over ",[23,1603,124],{},[574,1605,1606,1610,1614,1618],{},[592,1607,1608],{},[23,1609,232],{},[592,1611,1612],{},[23,1613,1513],{},[592,1615,1616],{},[23,1617,670],{},[592,1619,1620,1621,1623,1624],{},"Description below the control (WinUI ",[23,1622,236],{},"), also used as ",[23,1625,240],{},[574,1627,1628,1632,1636,1640],{},[592,1629,1630],{},[23,1631,983],{},[592,1633,1634],{},[23,1635,1513],{},[592,1637,1638],{},[23,1639,670],{},[592,1641,1642],{},"Form submission name, paired with the hidden native input",[574,1644,1645,1649,1654,1658],{},[592,1646,1647],{},[23,1648,355],{},[592,1650,1651],{},[23,1652,1653],{},"string | ((a, b) => boolean)",[592,1655,1656],{},[23,1657,670],{},[592,1659,1660],{},"Item-identity comparison for object items",[574,1662,1663,1668,1673,1678],{},[592,1664,1665],{},[23,1666,1667],{},"maxDropDownHeight",[592,1669,1670],{},[23,1671,1672],{},"number",[592,1674,1675],{},[23,1676,1677],{},"504",[592,1679,1680,1681,611],{},"Maximum panel height (WinUI ",[23,1682,862],{},[574,1684,1685,1690,1694,1698],{},[592,1686,1687],{},[23,1688,1689],{},"textSearchEnabled",[592,1691,1692],{},[23,1693,1430],{},[592,1695,1696],{},[23,1697,925],{},[592,1699,1700,1701,611],{},"Whether prefix search is enabled (WinUI ",[23,1702,763],{},[574,1704,1705,1709,1714,1719],{},[592,1706,1707],{},[23,1708,97],{},[592,1710,1711],{},[23,1712,1713],{},"'committed' | 'always'",[592,1715,1716],{},[23,1717,1718],{},"'committed'",[592,1720,1721,1722,611],{},"Commit timing (WinUI ",[23,1723,106],{},[574,1725,1726,1731,1736,1740],{},[592,1727,1728],{},[23,1729,1730],{},"dir",[592,1732,1733],{},[23,1734,1735],{},"'ltr' | 'rtl'",[592,1737,1738],{},[23,1739,670],{},[592,1741,1742],{},"Reading direction",[568,1744,1745,1757],{},[571,1746,1747],{},[574,1748,1749,1752,1755],{},[577,1750,1751],{},"Event",[577,1753,1754],{},"Payload",[577,1756,236],{},[587,1758,1759,1775,1791,1807,1824,1838,1852],{},[574,1760,1761,1766,1770],{},[592,1762,1763],{},[23,1764,1765],{},"update:modelValue",[592,1767,1768],{},[23,1769,1360],{},[592,1771,1772,1773,611],{},"Selected value change (",[23,1774,117],{},[574,1776,1777,1782,1786],{},[592,1778,1779],{},[23,1780,1781],{},"update:open",[592,1783,1784],{},[23,1785,1430],{},[592,1787,1788,1789,611],{},"Panel open state change (",[23,1790,1440],{},[574,1792,1793,1798,1802],{},[592,1794,1795],{},[23,1796,1797],{},"update:text",[592,1799,1800],{},[23,1801,1513],{},[592,1803,1804,1805,611],{},"Editable-state text change (",[23,1806,947],{},[574,1808,1809,1813,1818],{},[592,1810,1811],{},[23,1812,362],{},[592,1814,1815],{},[23,1816,1817],{},"{ addedItem, removedItem, addedIndex, removedIndex }",[592,1819,1820,1821],{},"Corresponds to WinUI ",[23,1822,1823],{},"SelectionChanged",[574,1825,1826,1831,1833],{},[592,1827,1828],{},[23,1829,1830],{},"dropDownOpened",[592,1832,670],{},[592,1834,1820,1835],{},[23,1836,1837],{},"DropDownOpened",[574,1839,1840,1845,1847],{},[592,1841,1842],{},[23,1843,1844],{},"dropDownClosed",[592,1846,670],{},[592,1848,1820,1849],{},[23,1850,1851],{},"DropDownClosed",[574,1853,1854,1858,1863],{},[592,1855,1856],{},[23,1857,908],{},[592,1859,1860],{},[23,1861,1862],{},"{ text: string, handled: boolean }",[592,1864,1820,1865,1868],{},[23,1866,1867],{},"TextSubmitted"," (editable state)",[568,1870,1871,1880],{},[571,1872,1873],{},[574,1874,1875,1878],{},[577,1876,1877],{},"Slot (Slots)",[577,1879,236],{},[587,1881,1882,1896,1910,1920],{},[574,1883,1884,1888],{},[592,1885,1886],{},[23,1887,444],{},[592,1889,1890,1891,1893,1894],{},"Dropdown item content (",[23,1892,1062],{},"), corresponds to WinUI ",[23,1895,1058],{},[574,1897,1898,1902],{},[592,1899,1900],{},[23,1901,124],{},[592,1903,1904,1905,371,1907,611],{},"Top title row (WinUI ",[23,1906,224],{},[23,1908,1909],{},"HeaderTemplate",[574,1911,1912,1916],{},[592,1913,1914],{},[23,1915,232],{},[592,1917,1620,1918,611],{},[23,1919,236],{},[574,1921,1922,1927],{},[592,1923,1924],{},[23,1925,1926],{},"empty",[592,1928,1929],{},"Content when there are no options (WinUI has no empty-state text; if not provided an empty panel renders)",[1931,1932,1933],"blockquote",{},[14,1934,1935,1936,83,1939,371,1942,371,1945,1948,1949,1952,1953,1956,1957,1960,1961,665,1964,1967,1968,1971,1972,1975],{},"Accessibility: the input box carries ",[23,1937,1938],{},"role=\"combobox\"",[23,1940,1941],{},"aria-expanded",[23,1943,1944],{},"aria-controls",[23,1946,1947],{},"aria-activedescendant","; the non-editable state adds ",[23,1950,1951],{},"readonly"," and ",[23,1954,1955],{},"aria-autocomplete=\"none\"",", while the editable state uses ",[23,1958,1959],{},"aria-autocomplete=\"list\"","; dropdown items are ",[23,1962,1963],{},"role=\"option\"",[23,1965,1966],{},"aria-selected",", and disabled items carry ",[23,1969,1970],{},"aria-disabled",". Focus stays on the control (",[23,1973,1974],{},"TabNavigation=\"Once\""," semantics); dropdown items never enter the Tab sequence.",[1931,1977,1978,1981],{},[14,1979,1980],{},"Differences from WinUI (all are web-side approximations, recorded line by line):",[1982,1983,1984,2001,2035,2056,2084,2095,2112],"ol",{},[45,1985,1986,1989,1990,665,1993,1996,1997,2000],{},[18,1987,1988],{},"Acrylic surface",": the Fluent token set has no material tokens, so the popup approximates the surface with ",[23,1991,1992],{},"colorNeutralBackground1",[23,1994,1995],{},"shadow16"," (same as the compact NumberBox popup); the blur recipe of ",[23,1998,1999],{},"AcrylicInAppFillColorDefaultBrush"," is not reproduced.",[45,2002,2003,2006,2007,2010,2011,2014,2015,2018,2019,2022,2023,2026,2027,2030,2031,2034],{},[18,2004,2005],{},"Popup open animation",": a ",[23,2008,2009],{},"clip-path"," that expands from the ",[18,2012,2013],{},"horizontal midline of the selected item toward both the top and the bottom"," approximates ",[23,2016,2017],{},"SplitOpenThemeAnimation"," (when nothing is selected it hugs the trigger-control side; 250ms \u002F ",[23,2020,2021],{},"0,0,0,1",") — the panel first collapses into a thin slit, then plays only after the measured selected-item position is written into a CSS variable; ",[18,2024,2025],{},"the close animation is omitted"," — reka's ",[23,2028,2029],{},"Presence"," unmounts content immediately in order to keep ",[23,2032,2033],{},"aria-hidden"," semantics correct.",[45,2036,2037,2040,2041,2044,2045,2048,2049,2052,2053,952],{},[18,2038,2039],{},"Arrow pressed state",": the WinUI 3 Gallery arrow press is ",[18,2042,2043],{},"a slight press-down (not a flip)",", approximated here with ",[23,2046,2047],{},"translateY(1px)"," (in via ",[23,2050,2051],{},"durationFast"," \u002F back via ",[23,2054,2055],{},"durationNormal",[45,2057,2058,2061,2062,2065,2066,2069,2070,2073,2074,2077,2078,1952,2081,952],{},[18,2059,2060],{},"Focus rectangle",": WinUI uses ",[23,2063,2064],{},"FocusStrokeColorOuter"," (light ",[23,2067,2068],{},"#E4000000"," \u002F white in dark), which maps to ",[23,2071,2072],{},"colorStrokeFocus2"," in the token set; the other controls of the component library currently use ",[23,2075,2076],{},"colorCompoundBrandStroke",", while this component takes its color from the WinUI source. The focus rectangle and the 3×16 brand-color indicator bar appear only for keyboard \u002F programmatic focus (corresponding to the distinction between WinUI ",[23,2079,2080],{},"Focused",[23,2082,2083],{},"PointerFocused",[45,2085,2086,2094],{},[18,2087,2088,371,2091],{},[23,2089,2090],{},"PageUp",[23,2092,2093],{},"PageDown",": WinUI moves the highlight by page while expanded; here the keys are only swallowed (to prevent page scrolling), without moving the highlight.",[45,2096,2097,2104,2105,2108,2109,2111],{},[18,2098,2099,2100,2103],{},"An item ",[23,2101,2102],{},"value"," cannot be an empty string",": the reka foundation uses it to mean \"clear the selection\", so ",[23,2106,2107],{},"value: ''"," is rejected (WinUI has no such restriction); use ",[23,2110,52],{}," or a sentinel value when empty-string semantics are needed.",[45,2113,2114],{},"When text is too long, the input box truncates it with an ellipsis (WinUI just clips it).",[2116,2117,2118],"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 pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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}",{"title":136,"searchDepth":273,"depth":273,"links":2120},[2121,2122,2123,2124,2125,2126,2127,2128,2129],{"id":111,"depth":273,"text":112},{"id":215,"depth":273,"text":216},{"id":345,"depth":273,"text":346},{"id":555,"depth":273,"text":556},{"id":866,"depth":273,"text":867},{"id":1047,"depth":273,"text":1048},{"id":1158,"depth":273,"text":1159},{"id":1243,"depth":273,"text":1244},{"id":1329,"depth":273,"text":1330},"A dropdown select control for choosing one option from a set of single-line text options, with support for text search and editable custom values.","md",{},{"title":5},true,"\u002Fen\u002Fcomponents\u002Fcombobox",{"title":5,"description":2130},"en\u002Fcomponents\u002Fcombobox","0pQCsYOXbqJucp-sJ34PzON6iEeavBvRWJT4bu8H9QQ",{"id":2140,"title":2141,"body":2142,"description":4026,"extension":2131,"meta":4027,"nav":4028,"navigation":2134,"path":4029,"seo":4030,"stem":4031,"__hash__":4032},"content\u002Fcomponents\u002Fcombobox.md","Combobox 下拉框",{"type":7,"value":2143,"toc":4015},[2144,2147,2159,2165,2168,2222,2225,2238,2295,2299,2325,2402,2405,2434,2529,2538,2578,2581,2589,2740,2763,2845,2854,2857,2873,2931,3016,3019,3031,3113,3116,3128,3220,3223,3241,3296,3298,3685,3800,3859,3894,4013],[10,2145,2141],{"id":2146},"combobox-下拉框",[14,2148,2149,2150,2152,2153,2155,2156,2158],{},"下拉框让用户从一组单行文本选项里选一项（颜色、字号、配送方式……）。样式与行为还原 WinUI 3（Windows App SDK 2.0）的 ",[18,2151,20],{},"：几何、状态色、下拉项指示条、面板定位与动画都逐项对照 ",[23,2154,25],{},"；键位、文本搜索、可编辑态对照 ",[23,2157,29],{},"。",[14,2160,2161,2162,2164],{},"交互底座复用 ",[23,2163,36],{}," 的 Combobox 原语（ARIA combobox 语义、roving highlight、弹层定位、外部点击关闭），本组件补齐 WinUI 的键位口径、文本搜索、可编辑态与视觉状态。",[14,2166,2167],{},"与 WinUI 一致的三条取值口径：",[42,2169,2170,2190,2208],{},[45,2171,2172,2177,2178,2180,2181,2183,2184,2186,2187,2189],{},[18,2173,2174,2175],{},"无选中就是 ",[23,2176,52],{},"（对应 WinUI ",[23,2179,56],{},"）：不传 ",[23,2182,60],{}," 时为非受控，",[23,2185,52],{}," 表示未选中，清空选中会抛出 ",[23,2188,52],{},"；",[45,2191,2192,2177,2197,2199,2200,2202,2203,2205,2206,2189],{},[18,2193,2194,2195],{},"选项数据走 ",[23,2196,75],{},[23,2198,78],{},"），每项 ",[23,2201,82],{},"，",[23,2204,86],{}," 缺省取 ",[23,2207,90],{},[45,2209,2210,2215,2216,2218,2219,2221],{},[18,2211,2212,2214],{},[23,2213,97],{}," 决定何时提交","：缺省 ",[23,2217,102],{},"——点击 \u002F 回车 \u002F 文本搜索才改选中项；开着面板按方向键只移动高亮（WinUI ",[23,2220,106],{}," 的缺省行为）。",[109,2223,2224],{"id":2224},"基础用法",[14,2226,2227,2229,2230,2232,2233,2235,2236,2158],{},[23,2228,117],{}," 绑定选中值，",[23,2231,75],{}," 提供选项，",[23,2234,124],{}," 是 WinUI 的标题行（同时作为缺省的可访问名），未选中时显示 ",[23,2237,128],{},[131,2239,2240,2244],{"title":2224},[134,2241,2242],{"v-slot:preview":136},[138,2243],{},[134,2245,2246],{"v-slot:code":136},[143,2247,2249],{"className":145,"code":2248,"language":147,"meta":136,"style":136},"\u003CFluereCombobox v-model=\"picked\" :items=\"COLORS\" header=\"颜色\" placeholder=\"请选择颜色\" \u002F>\n",[23,2250,2251],{"__ignoreMap":136},[151,2252,2253,2255,2257,2259,2261,2263,2265,2267,2269,2271,2273,2275,2277,2279,2281,2283,2286,2288,2290,2293],{"class":153,"line":154},[151,2254,158],{"class":157},[151,2256,162],{"class":161},[151,2258,166],{"class":165},[151,2260,169],{"class":157},[151,2262,173],{"class":172},[151,2264,176],{"class":157},[151,2266,173],{"class":172},[151,2268,181],{"class":157},[151,2270,75],{"class":165},[151,2272,169],{"class":157},[151,2274,173],{"class":172},[151,2276,191],{"class":190},[151,2278,173],{"class":172},[151,2280,196],{"class":165},[151,2282,169],{"class":157},[151,2284,2285],{"class":172},"\"颜色\"",[151,2287,204],{"class":165},[151,2289,169],{"class":157},[151,2291,2292],{"class":172},"\"请选择颜色\"",[151,2294,212],{"class":157},[109,2296,2298],{"id":2297},"标题说明与可访问名","标题、说明与可访问名",[14,2300,2301,2303,2304,2306,2307,2309,2310,2312,2313,2315,2316,2318,2319,2321,2322,2324],{},[23,2302,124],{}," 对应 WinUI ",[23,2305,224],{},"（",[23,2308,228],{},"、下边距 8、字重 Normal），",[23,2311,232],{}," 对应 ",[23,2314,236],{},"（挂在控件下方并作为 ",[23,2317,240],{},"），",[23,2320,244],{}," 优先于 ",[23,2323,124],{}," 作为可访问名。",[131,2326,2328,2332],{"title":2327},"标题与说明",[134,2329,2330],{"v-slot:preview":136},[255,2331],{},[134,2333,2334],{"v-slot:code":136},[143,2335,2337],{"className":145,"code":2336,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"fontSize\"\n  :items=\"FONT_SIZES\"\n  header=\"正文字号\"\n  description=\"Header 同时作为缺省的可访问名\"\n  label=\"正文字号选择器\"\n\u002F>\n",[23,2338,2339,2345,2357,2371,2380,2389,2398],{"__ignoreMap":136},[151,2340,2341,2343],{"class":153,"line":154},[151,2342,158],{"class":157},[151,2344,270],{"class":161},[151,2346,2347,2349,2351,2353,2355],{"class":153,"line":273},[151,2348,276],{"class":165},[151,2350,169],{"class":157},[151,2352,173],{"class":172},[151,2354,283],{"class":157},[151,2356,286],{"class":172},[151,2358,2359,2361,2363,2365,2367,2369],{"class":153,"line":289},[151,2360,292],{"class":157},[151,2362,75],{"class":165},[151,2364,169],{"class":157},[151,2366,173],{"class":172},[151,2368,301],{"class":190},[151,2370,286],{"class":172},[151,2372,2373,2375,2377],{"class":153,"line":306},[151,2374,309],{"class":165},[151,2376,169],{"class":157},[151,2378,2379],{"class":172},"\"正文字号\"\n",[151,2381,2382,2384,2386],{"class":153,"line":317},[151,2383,320],{"class":165},[151,2385,169],{"class":157},[151,2387,2388],{"class":172},"\"Header 同时作为缺省的可访问名\"\n",[151,2390,2391,2393,2395],{"class":153,"line":328},[151,2392,331],{"class":165},[151,2394,169],{"class":157},[151,2396,2397],{"class":172},"\"正文字号选择器\"\n",[151,2399,2400],{"class":153,"line":339},[151,2401,342],{"class":157},[109,2403,2404],{"id":2404},"选中与事件",[14,2406,2407,2409,2410,2412,2413,2415,2416,2418,2419,2421,2422,371,2424,371,2426,371,2428,2430,2431,2433],{},[23,2408,75],{}," 的元素可以是任意类型，用 ",[23,2411,355],{}," 指定项身份（字段名或比较函数）、用 ",[23,2414,86],{}," 指定显示与搜索文本。",[23,2417,362],{}," 的载荷与 WinUI ",[23,2420,366],{}," 对齐：",[23,2423,370],{},[23,2425,374],{},[23,2427,377],{},[23,2429,380],{},"（单选，各至多一项；无选中时下标为 ",[23,2432,384],{},"）。",[131,2435,2437,2441],{"title":2436},"对象项与选中事件",[134,2438,2439],{"v-slot:preview":136},[392,2440],{},[134,2442,2443],{"v-slot:code":136},[143,2444,2446],{"className":145,"code":2445,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"city\"\n  :items=\"CITIES.map((item) => ({ value: item, text: item.name }))\"\n  by=\"id\"\n  header=\"城市（对象项 + by）\"\n  @selection-changed=\"onSelectionChanged\"\n\u002F>\n",[23,2447,2448,2454,2466,2494,2502,2511,2525],{"__ignoreMap":136},[151,2449,2450,2452],{"class":153,"line":154},[151,2451,158],{"class":157},[151,2453,270],{"class":161},[151,2455,2456,2458,2460,2462,2464],{"class":153,"line":273},[151,2457,276],{"class":165},[151,2459,169],{"class":157},[151,2461,173],{"class":172},[151,2463,417],{"class":157},[151,2465,286],{"class":172},[151,2467,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492],{"class":153,"line":289},[151,2469,292],{"class":157},[151,2471,75],{"class":165},[151,2473,169],{"class":157},[151,2475,173],{"class":172},[151,2477,432],{"class":190},[151,2479,30],{"class":157},[151,2481,437],{"class":165},[151,2483,440],{"class":157},[151,2485,444],{"class":443},[151,2487,447],{"class":157},[151,2489,451],{"class":450},[151,2491,454],{"class":157},[151,2493,286],{"class":172},[151,2495,2496,2498,2500],{"class":153,"line":306},[151,2497,461],{"class":165},[151,2499,169],{"class":157},[151,2501,466],{"class":172},[151,2503,2504,2506,2508],{"class":153,"line":317},[151,2505,309],{"class":165},[151,2507,169],{"class":157},[151,2509,2510],{"class":172},"\"城市（对象项 + by）\"\n",[151,2512,2513,2515,2517,2519,2521,2523],{"class":153,"line":328},[151,2514,480],{"class":157},[151,2516,483],{"class":165},[151,2518,169],{"class":157},[151,2520,173],{"class":172},[151,2522,490],{"class":157},[151,2524,286],{"class":172},[151,2526,2527],{"class":153,"line":339},[151,2528,342],{"class":157},[14,2530,2531,2532,2534,2535,2537],{},"需要「高亮走到哪就选到哪」（WinUI 的 ",[23,2533,502],{},"，字体选择器那种手感）时，传 ",[23,2536,506],{},"：",[143,2539,2540],{"className":145,"code":510,"language":147,"meta":136,"style":136},[23,2541,2542],{"__ignoreMap":136},[151,2543,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568,2570,2572,2574,2576],{"class":153,"line":154},[151,2545,158],{"class":157},[151,2547,162],{"class":161},[151,2549,166],{"class":165},[151,2551,169],{"class":157},[151,2553,173],{"class":172},[151,2555,527],{"class":157},[151,2557,173],{"class":172},[151,2559,181],{"class":157},[151,2561,75],{"class":165},[151,2563,169],{"class":157},[151,2565,173],{"class":172},[151,2567,540],{"class":190},[151,2569,173],{"class":172},[151,2571,545],{"class":165},[151,2573,169],{"class":157},[151,2575,550],{"class":172},[151,2577,212],{"class":157},[109,2579,2580],{"id":2580},"键盘与文本搜索",[14,2582,2583,2584,371,2586,2588],{},"键盘口径逐条对照 WinUI 的两张键位表（",[23,2585,562],{},[23,2587,565],{},"）：",[568,2590,2591,2604],{},[571,2592,2593],{},[574,2594,2595,2598,2601],{},[577,2596,2597],{},"按键",[577,2599,2600],{},"面板收起（非可编辑）",[577,2602,2603],{},"面板展开",[587,2605,2606,2626,2640,2652,2665,2680,2695,2705,2717,2728],{},[574,2607,2608,2614,2620],{},[592,2609,2610,371,2612],{},[23,2611,596],{},[23,2613,599],{},[592,2615,2616,2619],{},[18,2617,2618],{},"直接改选中项","（跳过禁用项）",[592,2621,2622,2623,2625],{},"移动高亮（",[23,2624,102],{}," 下不改选中）",[574,2627,2628,2634,2637],{},[592,2629,2630,371,2632],{},[23,2631,618],{},[23,2633,621],{},[592,2635,2636],{},"选首个 \u002F 末个可选项",[592,2638,2639],{},"高亮首个 \u002F 末个",[574,2641,2642,2646,2649],{},[592,2643,2644],{},[23,2645,634],{},[592,2647,2648],{},"展开面板",[592,2650,2651],{},"提交高亮项并收起",[574,2653,2654,2658,2660],{},[592,2655,2656],{},[23,2657,647],{},[592,2659,2648],{},[592,2661,2662,2663],{},"等价于 ",[23,2664,634],{},[574,2666,2667,2675,2677],{},[592,2668,2669,371,2671,665,2673],{},[23,2670,661],{},[23,2672,664],{},[23,2674,634],{},[592,2676,670],{},[592,2678,2679],{},"取消已选中项的选中",[574,2681,2682,2690,2692],{},[592,2683,2684,665,2686,371,2688],{},[23,2685,680],{},[23,2687,596],{},[23,2689,599],{},[592,2691,2648],{},[592,2693,2694],{},"收起面板",[574,2696,2697,2701,2703],{},[592,2698,2699],{},[23,2700,696],{},[592,2702,2648],{},[592,2704,2694],{},[574,2706,2707,2711,2714],{},[592,2708,2709],{},[23,2710,707],{},[592,2712,2713],{},"不处理（冒泡给上层）",[592,2715,2716],{},"收起面板，不改选中项",[574,2718,2719,2722,2725],{},[592,2720,2721],{},"字符键",[592,2723,2724],{},"前缀搜索并直接选中命中项",[592,2726,2727],{},"同上（弹层把字符冒泡回控件）",[574,2729,2730,2734,2737],{},[592,2731,2732],{},[23,2733,731],{},[592,2735,2736],{},"焦点照常离开",[592,2738,2739],{},"收起面板，焦点照常离开",[14,2741,2742,2743,2745,2746,2749,2750,2752,2753,2756,2757,2759,2760,2762],{},"文本搜索与 WinUI 同口径：项文本先 ",[23,2744,743],{}," 再",[18,2747,2748],{},"忽略大小写做前缀匹配","（不做子串 \u002F 模糊匹配）；两次按键间隔 ≤ ",[18,2751,751],{}," 时搜索串累积，超过则另起一次；新搜索串从「当前项 + 1」起",[18,2754,2755],{},"环状","扫描，命中即直接改选中项。",[23,2758,759],{}," 可整体关掉（对应 ",[23,2761,763],{},"）。焦点在控件上、面板收起时，滚轮也会改选中项（WinUI 只在聚焦且收起时响应）。",[131,2764,2766,2770],{"title":2765},"长列表与文本搜索",[134,2767,2768],{"v-slot:preview":136},[771,2769],{},[134,2771,2772],{"v-slot:code":136},[143,2773,2775],{"className":145,"code":2774,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"state\"\n  :items=\"STATES\"\n  header=\"州（输入 w 试试文本搜索）\"\n  placeholder=\"选择或直接输入首字母\"\n  :max-drop-down-height=\"200\"\n\u002F>\n",[23,2776,2777,2783,2795,2809,2818,2827,2841],{"__ignoreMap":136},[151,2778,2779,2781],{"class":153,"line":154},[151,2780,158],{"class":157},[151,2782,270],{"class":161},[151,2784,2785,2787,2789,2791,2793],{"class":153,"line":273},[151,2786,276],{"class":165},[151,2788,169],{"class":157},[151,2790,173],{"class":172},[151,2792,796],{"class":157},[151,2794,286],{"class":172},[151,2796,2797,2799,2801,2803,2805,2807],{"class":153,"line":289},[151,2798,292],{"class":157},[151,2800,75],{"class":165},[151,2802,169],{"class":157},[151,2804,173],{"class":172},[151,2806,811],{"class":190},[151,2808,286],{"class":172},[151,2810,2811,2813,2815],{"class":153,"line":306},[151,2812,309],{"class":165},[151,2814,169],{"class":157},[151,2816,2817],{"class":172},"\"州（输入 w 试试文本搜索）\"\n",[151,2819,2820,2822,2824],{"class":153,"line":317},[151,2821,827],{"class":165},[151,2823,169],{"class":157},[151,2825,2826],{"class":172},"\"选择或直接输入首字母\"\n",[151,2828,2829,2831,2833,2835,2837,2839],{"class":153,"line":328},[151,2830,292],{"class":157},[151,2832,839],{"class":165},[151,2834,169],{"class":157},[151,2836,173],{"class":172},[151,2838,846],{"class":190},[151,2840,286],{"class":172},[151,2842,2843],{"class":153,"line":339},[151,2844,342],{"class":157},[14,2846,2847,2848,2850,2851,2853],{},"面板最大高度缺省 504px（WinUI ",[23,2849,858],{}," 的 ",[23,2852,862],{},"，约 15 项），超出后列表内滚动。",[109,2855,2856],{"id":2856},"可编辑态",[14,2858,2859,2303,2861,2863,2864,2867,2868,371,2870,2872],{},[23,2860,872],{},[23,2862,875],{},"：输入框可输入自定义值，",[18,2865,2866],{},"输入不会过滤列表","（WinUI 的可编辑 ComboBox 只做行内补全，不过滤），面板仍由箭头热区 \u002F ",[23,2869,696],{},[23,2871,885],{}," 打开。",[42,2874,2875,2884,2898,2913,2923],{},[45,2876,2877,2880,2881,2883],{},[18,2878,2879],{},"行内补全","：输入前缀命中某项时补全为该项文本，并选中补全部分（WinUI ",[23,2882,896],{},"），继续输入即替换；",[45,2885,2886,2891,2892,2894,2895,2189],{},[18,2887,2888,2890],{},[23,2889,634],{}," \u002F 失焦提交","：文本匹配已有项 → 选中该项；否则抛 ",[23,2893,908],{},"，并按 WinUI 的缺省行为把选中项清空、",[18,2896,2897],{},"保留文本",[45,2899,2900,2906,2907,2909,2910,2912],{},[18,2901,2902,2850,2904],{},[23,2903,908],{},[23,2905,921],{},"：置 ",[23,2908,925],{}," 即等同 WinUI ",[23,2911,929],{},"，组件不再改动选中项（便于校验后回填）；",[45,2914,2915,2919,2920,2922],{},[18,2916,2917],{},[23,2918,707],{},"：回滚文本到当前选中项（WinUI ",[23,2921,940],{},"）；",[45,2924,2925,2926,2928,2929,2433],{},"文本可用 ",[23,2927,947],{}," 受控（对应 WinUI ",[23,2930,951],{},[131,2932,2933,2937],{"title":2856},[134,2934,2935],{"v-slot:preview":136},[958,2936],{},[134,2938,2939],{"v-slot:code":136},[143,2940,2942],{"className":145,"code":2941,"language":147,"meta":136,"style":136},"\u003CFluereCombobox\n  v-model=\"name\"\n  :items=\"RECENT_NAMES\"\n  editable\n  header=\"名称（可自定义）\"\n  placeholder=\"输入或选择\"\n  @text-submitted=\"onTextSubmitted\"\n\u002F>\n",[23,2943,2944,2950,2962,2976,2980,2989,2998,3012],{"__ignoreMap":136},[151,2945,2946,2948],{"class":153,"line":154},[151,2947,158],{"class":157},[151,2949,270],{"class":161},[151,2951,2952,2954,2956,2958,2960],{"class":153,"line":273},[151,2953,276],{"class":165},[151,2955,169],{"class":157},[151,2957,173],{"class":172},[151,2959,983],{"class":157},[151,2961,286],{"class":172},[151,2963,2964,2966,2968,2970,2972,2974],{"class":153,"line":289},[151,2965,292],{"class":157},[151,2967,75],{"class":165},[151,2969,169],{"class":157},[151,2971,173],{"class":172},[151,2973,998],{"class":190},[151,2975,286],{"class":172},[151,2977,2978],{"class":153,"line":306},[151,2979,1005],{"class":165},[151,2981,2982,2984,2986],{"class":153,"line":317},[151,2983,309],{"class":165},[151,2985,169],{"class":157},[151,2987,2988],{"class":172},"\"名称（可自定义）\"\n",[151,2990,2991,2993,2995],{"class":153,"line":328},[151,2992,827],{"class":165},[151,2994,169],{"class":157},[151,2996,2997],{"class":172},"\"输入或选择\"\n",[151,2999,3000,3002,3004,3006,3008,3010],{"class":153,"line":339},[151,3001,480],{"class":157},[151,3003,1030],{"class":165},[151,3005,169],{"class":157},[151,3007,173],{"class":172},[151,3009,1037],{"class":157},[151,3011,286],{"class":172},[151,3013,3014],{"class":153,"line":1042},[151,3015,342],{"class":157},[109,3017,3018],{"id":3018},"自定义下拉项",[14,3020,3021,3022,3024,3025,3027,3028,3030],{},"用 ",[23,3023,1054],{}," 插槽覆盖行内容（对应 WinUI ",[23,3026,1058],{},"），插槽参数是 ",[23,3029,1062],{},"。选中指示条、内边距、圆角与状态色仍由组件负责。",[131,3032,3033,3037],{"title":3018},[134,3034,3035],{"v-slot:preview":136},[1069,3036],{},[134,3038,3039],{"v-slot:code":136},[143,3040,3042],{"className":145,"code":3041,"language":147,"meta":136,"style":136},"\u003CFluereCombobox v-model=\"color\" :items=\"COLORS\" header=\"强调色\">\n  \u003Ctemplate #item=\"{ item }\">\n    \u003Cspan class=\"flex items-center gap-2\">\n      \u003Cspan class=\"inline-block w-4 h-4 rounded-fluent-sm\" :style=\"{ backgroundColor: item.value }\" \u002F>\n      {{ item.text }}\n    \u003C\u002Fspan>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereCombobox>\n",[23,3043,3044,3081,3085,3089,3093,3097,3101,3105],{"__ignoreMap":136},[151,3045,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3066,3068,3070,3072,3074,3076,3079],{"class":153,"line":154},[151,3047,158],{"class":157},[151,3049,162],{"class":161},[151,3051,166],{"class":165},[151,3053,169],{"class":157},[151,3055,173],{"class":172},[151,3057,1092],{"class":157},[151,3059,173],{"class":172},[151,3061,181],{"class":157},[151,3063,75],{"class":165},[151,3065,169],{"class":157},[151,3067,173],{"class":172},[151,3069,191],{"class":190},[151,3071,173],{"class":172},[151,3073,196],{"class":165},[151,3075,169],{"class":157},[151,3077,3078],{"class":172},"\"强调色\"",[151,3080,1116],{"class":157},[151,3082,3083],{"class":153,"line":273},[151,3084,1121],{"class":157},[151,3086,3087],{"class":153,"line":289},[151,3088,1126],{"class":157},[151,3090,3091],{"class":153,"line":306},[151,3092,1131],{"class":157},[151,3094,3095],{"class":153,"line":317},[151,3096,1136],{"class":157},[151,3098,3099],{"class":153,"line":328},[151,3100,1141],{"class":157},[151,3102,3103],{"class":153,"line":339},[151,3104,1146],{"class":157},[151,3106,3107,3109,3111],{"class":153,"line":1042},[151,3108,1151],{"class":157},[151,3110,162],{"class":161},[151,3112,1116],{"class":157},[109,3114,3115],{"id":3115},"禁用",[14,3117,3118,2303,3120,3122,3123,2312,3125,3127],{},[23,3119,1158],{},[23,3121,1166],{},"（填充 \u002F 前景 \u002F 箭头 \u002F 指示条全走禁用档，且不响应指针与键盘）；单个选项的 ",[23,3124,1158],{},[23,3126,1172],{},"，不参与方向键选区与文本搜索。",[131,3129,3131,3135],{"title":3130},"禁用状态",[134,3132,3133],{"v-slot:preview":136},[1180,3134],{},[134,3136,3137],{"v-slot:code":136},[143,3138,3140],{"className":145,"code":3139,"language":147,"meta":136,"style":136},"\u003CFluereCombobox v-model=\"plan\" :items=\"PLANS\" header=\"可选中\" \u002F>\n\u003CFluereCombobox v-model=\"locked\" :items=\"PLANS\" disabled header=\"整体禁用\" \u002F>\n",[23,3141,3142,3179],{"__ignoreMap":136},[151,3143,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162,3164,3166,3168,3170,3172,3174,3177],{"class":153,"line":154},[151,3145,158],{"class":157},[151,3147,162],{"class":161},[151,3149,166],{"class":165},[151,3151,169],{"class":157},[151,3153,173],{"class":172},[151,3155,1205],{"class":157},[151,3157,173],{"class":172},[151,3159,181],{"class":157},[151,3161,75],{"class":165},[151,3163,169],{"class":157},[151,3165,173],{"class":172},[151,3167,1220],{"class":190},[151,3169,173],{"class":172},[151,3171,196],{"class":165},[151,3173,169],{"class":157},[151,3175,3176],{"class":172},"\"可选中\"",[151,3178,212],{"class":157},[151,3180,3181,3183,3185,3187,3189,3191,3194,3196,3198,3200,3202,3204,3206,3208,3211,3213,3215,3218],{"class":153,"line":273},[151,3182,158],{"class":157},[151,3184,162],{"class":161},[151,3186,166],{"class":165},[151,3188,169],{"class":157},[151,3190,173],{"class":172},[151,3192,3193],{"class":157},"locked",[151,3195,173],{"class":172},[151,3197,181],{"class":157},[151,3199,75],{"class":165},[151,3201,169],{"class":157},[151,3203,173],{"class":172},[151,3205,1220],{"class":190},[151,3207,173],{"class":172},[151,3209,3210],{"class":165}," disabled",[151,3212,196],{"class":165},[151,3214,169],{"class":157},[151,3216,3217],{"class":172},"\"整体禁用\"",[151,3219,212],{"class":157},[109,3221,3222],{"id":3222},"表单提交",[14,3224,3225,3226,3228,3229,3231,3232,3234,3235,3237,3238,3240],{},"位于 ",[23,3227,1250],{}," 内并传 ",[23,3230,983],{}," 时，会补一个隐藏的原生 ",[23,3233,1257],{},"，提交 ",[23,3236,1261],{},"（无选中时提交空串），对应 WinUI ",[23,3239,1265],{}," 的用法。",[131,3242,3243,3247],{"title":3222},[134,3244,3245],{"v-slot:preview":136},[1271,3246],{},[134,3248,3249],{"v-slot:code":136},[143,3250,3252],{"className":145,"code":3251,"language":147,"meta":136,"style":136},"\u003Cform @submit.prevent=\"onSubmit\">\n  \u003CFluereCombobox v-model=\"shipping\" :items=\"SHIPPING\" name=\"shipping\" header=\"配送方式\" \u002F>\n  \u003CFluereButton type=\"submit\" appearance=\"primary\">提交\u003C\u002FFluereButton>\n\u003C\u002Fform>\n",[23,3253,3254,3278,3283,3288],{"__ignoreMap":136},[151,3255,3256,3258,3260,3262,3264,3266,3268,3270,3272,3274,3276],{"class":153,"line":154},[151,3257,158],{"class":157},[151,3259,1286],{"class":161},[151,3261,1289],{"class":157},[151,3263,1292],{"class":165},[151,3265,30],{"class":157},[151,3267,1297],{"class":165},[151,3269,169],{"class":157},[151,3271,173],{"class":172},[151,3273,1304],{"class":157},[151,3275,173],{"class":172},[151,3277,1116],{"class":157},[151,3279,3280],{"class":153,"line":273},[151,3281,3282],{"class":157},"  \u003CFluereCombobox v-model=\"shipping\" :items=\"SHIPPING\" name=\"shipping\" header=\"配送方式\" \u002F>\n",[151,3284,3285],{"class":153,"line":289},[151,3286,3287],{"class":157},"  \u003CFluereButton type=\"submit\" appearance=\"primary\">提交\u003C\u002FFluereButton>\n",[151,3289,3290,3292,3294],{"class":153,"line":306},[151,3291,1151],{"class":157},[151,3293,1286],{"class":161},[151,3295,1116],{"class":157},[109,3297,1330],{"id":1329},[568,3299,3300,3316],{},[571,3301,3302],{},[574,3303,3304,3307,3310,3313],{},[577,3305,3306],{},"属性（Props）",[577,3308,3309],{},"类型",[577,3311,3312],{},"默认",[577,3314,3315],{},"说明",[587,3317,3318,3343,3360,3381,3403,3420,3439,3458,3479,3496,3516,3536,3555,3577,3594,3611,3630,3649,3668],{},[574,3319,3320,3324,3328,3332],{},[592,3321,3322],{},[23,3323,60],{},[592,3325,3326],{},[23,3327,1360],{},[592,3329,3330],{},[23,3331,670],{},[592,3333,3334,3335,2922,3337,3339,3340,3342],{},"当前选中值（",[23,3336,117],{},[23,3338,52],{}," 表示未选中（WinUI ",[23,3341,1376],{},"）",[574,3344,3345,3349,3353,3357],{},[592,3346,3347],{},[23,3348,1383],{},[592,3350,3351],{},[23,3352,1360],{},[592,3354,3355],{},[23,3356,52],{},[592,3358,3359],{},"非受控初始选中值",[574,3361,3362,3366,3370,3374],{},[592,3363,3364],{},[23,3365,75],{},[592,3367,3368],{},[23,3369,1405],{},[592,3371,3372],{},[23,3373,1410],{},[592,3375,3376,3377,2588,3379],{},"选项数据（WinUI ",[23,3378,78],{},[23,3380,82],{},[574,3382,3383,3387,3391,3395],{},[592,3384,3385],{},[23,3386,1425],{},[592,3388,3389],{},[23,3390,1430],{},[592,3392,3393],{},[23,3394,670],{},[592,3396,3397,3398,3400,3401,3342],{},"面板展开状态（",[23,3399,1440],{},"，WinUI ",[23,3402,1444],{},[574,3404,3405,3409,3413,3417],{},[592,3406,3407],{},[23,3408,1451],{},[592,3410,3411],{},[23,3412,1430],{},[592,3414,3415],{},[23,3416,1460],{},[592,3418,3419],{},"非受控初始展开状态",[574,3421,3422,3426,3430,3434],{},[592,3423,3424],{},[23,3425,1158],{},[592,3427,3428],{},[23,3429,1430],{},[592,3431,3432],{},[23,3433,1460],{},[592,3435,3436,3437,3342],{},"是否禁用（WinUI ",[23,3438,1483],{},[574,3440,3441,3445,3449,3453],{},[592,3442,3443],{},[23,3444,872],{},[592,3446,3447],{},[23,3448,1430],{},[592,3450,3451],{},[23,3452,1460],{},[592,3454,3455,3456,3342],{},"可编辑态（WinUI ",[23,3457,875],{},[574,3459,3460,3464,3468,3472],{},[592,3461,3462],{},[23,3463,86],{},[592,3465,3466],{},[23,3467,1513],{},[592,3469,3470],{},[23,3471,670],{},[592,3473,3474,3475,3400,3477,3342],{},"可编辑态文本（",[23,3476,947],{},[23,3478,951],{},[574,3480,3481,3485,3489,3493],{},[592,3482,3483],{},[23,3484,1531],{},[592,3486,3487],{},[23,3488,1513],{},[592,3490,3491],{},[23,3492,1540],{},[592,3494,3495],{},"可编辑态非受控初始文本",[574,3497,3498,3502,3506,3510],{},[592,3499,3500],{},[23,3501,128],{},[592,3503,3504],{},[23,3505,1513],{},[592,3507,3508],{},[23,3509,670],{},[592,3511,3512,3513,3515],{},"占位符（WinUI ",[23,3514,1563],{},"），仅未选中时显示",[574,3517,3518,3522,3526,3530],{},[592,3519,3520],{},[23,3521,124],{},[592,3523,3524],{},[23,3525,1513],{},[592,3527,3528],{},[23,3529,670],{},[592,3531,3532,3533,3535],{},"顶部标题（WinUI ",[23,3534,224],{},"），同时是缺省可访问名",[574,3537,3538,3542,3546,3550],{},[592,3539,3540],{},[23,3541,244],{},[592,3543,3544],{},[23,3545,1513],{},[592,3547,3548],{},[23,3549,670],{},[592,3551,3552,3553,3342],{},"可访问名称（优先于 ",[23,3554,124],{},[574,3556,3557,3561,3565,3569],{},[592,3558,3559],{},[23,3560,232],{},[592,3562,3563],{},[23,3564,1513],{},[592,3566,3567],{},[23,3568,670],{},[592,3570,3571,3572,3574,3575],{},"控件下方说明（WinUI ",[23,3573,236],{},"），并作为 ",[23,3576,240],{},[574,3578,3579,3583,3587,3591],{},[592,3580,3581],{},[23,3582,983],{},[592,3584,3585],{},[23,3586,1513],{},[592,3588,3589],{},[23,3590,670],{},[592,3592,3593],{},"表单提交名，配合隐藏原生 input",[574,3595,3596,3600,3604,3608],{},[592,3597,3598],{},[23,3599,355],{},[592,3601,3602],{},[23,3603,1653],{},[592,3605,3606],{},[23,3607,670],{},[592,3609,3610],{},"对象项的项身份比较",[574,3612,3613,3617,3621,3625],{},[592,3614,3615],{},[23,3616,1667],{},[592,3618,3619],{},[23,3620,1672],{},[592,3622,3623],{},[23,3624,1677],{},[592,3626,3627,3628,3342],{},"面板最大高度（WinUI ",[23,3629,862],{},[574,3631,3632,3636,3640,3644],{},[592,3633,3634],{},[23,3635,1689],{},[592,3637,3638],{},[23,3639,1430],{},[592,3641,3642],{},[23,3643,925],{},[592,3645,3646,3647,3342],{},"是否启用前缀搜索（WinUI ",[23,3648,763],{},[574,3650,3651,3655,3659,3663],{},[592,3652,3653],{},[23,3654,97],{},[592,3656,3657],{},[23,3658,1713],{},[592,3660,3661],{},[23,3662,1718],{},[592,3664,3665,3666,3342],{},"提交时机（WinUI ",[23,3667,106],{},[574,3669,3670,3674,3678,3682],{},[592,3671,3672],{},[23,3673,1730],{},[592,3675,3676],{},[23,3677,1735],{},[592,3679,3680],{},[23,3681,670],{},[592,3683,3684],{},"阅读方向",[568,3686,3687,3699],{},[571,3688,3689],{},[574,3690,3691,3694,3697],{},[577,3692,3693],{},"事件（Events）",[577,3695,3696],{},"载荷",[577,3698,3315],{},[587,3700,3701,3716,3731,3746,3761,3773,3785],{},[574,3702,3703,3707,3711],{},[592,3704,3705],{},[23,3706,1765],{},[592,3708,3709],{},[23,3710,1360],{},[592,3712,3713,3714,3342],{},"选中值变化（",[23,3715,117],{},[574,3717,3718,3722,3726],{},[592,3719,3720],{},[23,3721,1781],{},[592,3723,3724],{},[23,3725,1430],{},[592,3727,3728,3729,3342],{},"面板展开状态变化（",[23,3730,1440],{},[574,3732,3733,3737,3741],{},[592,3734,3735],{},[23,3736,1797],{},[592,3738,3739],{},[23,3740,1513],{},[592,3742,3743,3744,3342],{},"可编辑态文本变化（",[23,3745,947],{},[574,3747,3748,3752,3756],{},[592,3749,3750],{},[23,3751,362],{},[592,3753,3754],{},[23,3755,1817],{},[592,3757,3758,3759],{},"对应 WinUI ",[23,3760,1823],{},[574,3762,3763,3767,3769],{},[592,3764,3765],{},[23,3766,1830],{},[592,3768,670],{},[592,3770,3758,3771],{},[23,3772,1837],{},[574,3774,3775,3779,3781],{},[592,3776,3777],{},[23,3778,1844],{},[592,3780,670],{},[592,3782,3758,3783],{},[23,3784,1851],{},[574,3786,3787,3791,3795],{},[592,3788,3789],{},[23,3790,908],{},[592,3792,3793],{},[23,3794,1862],{},[592,3796,3758,3797,3799],{},[23,3798,1867],{},"（可编辑态）",[568,3801,3802,3811],{},[571,3803,3804],{},[574,3805,3806,3809],{},[577,3807,3808],{},"插槽（Slots）",[577,3810,3315],{},[587,3812,3813,3827,3840,3850],{},[574,3814,3815,3819],{},[592,3816,3817],{},[23,3818,444],{},[592,3820,3821,3822,3824,3825],{},"下拉项内容（",[23,3823,1062],{},"），对应 WinUI ",[23,3826,1058],{},[574,3828,3829,3833],{},[592,3830,3831],{},[23,3832,124],{},[592,3834,3835,3836,371,3838,3342],{},"顶部标题行（WinUI ",[23,3837,224],{},[23,3839,1909],{},[574,3841,3842,3846],{},[592,3843,3844],{},[23,3845,232],{},[592,3847,3571,3848,3342],{},[23,3849,236],{},[574,3851,3852,3856],{},[592,3853,3854],{},[23,3855,1926],{},[592,3857,3858],{},"选项为空时的内容（WinUI 没有空态文案，不提供即渲染空面板）",[1931,3860,3861],{},[14,3862,3863,3864,3866,3867,371,3869,371,3871,3873,3874,3876,3877,3879,3880,3882,3883,665,3885,3887,3888,3890,3891,3893],{},"无障碍：输入框带 ",[23,3865,1938],{},"、",[23,3868,1941],{},[23,3870,1944],{},[23,3872,1947],{},"，非可编辑态补 ",[23,3875,1951],{}," 与 ",[23,3878,1955],{},"，可编辑态为 ",[23,3881,1959],{},"；下拉项是 ",[23,3884,1963],{},[23,3886,1966],{},"，禁用项带 ",[23,3889,1970],{},"。焦点始终停在控件上（",[23,3892,1974],{}," 语义），下拉项不进入 Tab 序列。",[1931,3895,3896,3899],{},[14,3897,3898],{},"与 WinUI 的差异（均为 Web 侧近似，逐条记录）：",[1982,3900,3901,3915,3944,3963,3986,3995,4010],{},[45,3902,3903,3906,3907,665,3909,3911,3912,3914],{},[18,3904,3905],{},"Acrylic 表面","：Fluent 令牌集中没有材质令牌，浮层用 ",[23,3908,1992],{},[23,3910,1995],{}," 近似（与 NumberBox 紧凑浮层一致），未复刻 ",[23,3913,1999],{}," 的模糊配方。",[45,3916,3917,3920,3921,3923,3924,3927,3928,3930,3931,3933,3934,3937,3938,3940,3941,3943],{},[18,3918,3919],{},"浮层开启动画","：以 ",[23,3922,2009],{}," 从",[18,3925,3926],{},"选中项中线向上下两侧展开","近似 ",[23,3929,2017],{},"（无选中时贴触发控件一侧；250ms \u002F ",[23,3932,2021],{},"）——面板先收拢成一条缝、实测选中项位置写入 CSS 变量后再起播；",[18,3935,3936],{},"关闭动画省略","——reka 的 ",[23,3939,2029],{}," 会立即卸载内容，以保住 ",[23,3942,2033],{}," 语义正确。",[45,3945,3946,3949,3950,3953,3954,3956,3957,3959,3960,3962],{},[18,3947,3948],{},"箭头按下态","：WinUI 3 Gallery 的箭头按下是",[18,3951,3952],{},"轻微下沉（不翻转）","，这里以 ",[23,3955,2047],{},"（进 ",[23,3958,2051],{}," \u002F 回 ",[23,3961,2055],{},"）近似。",[45,3964,3965,3968,3969,3971,3972,3974,3975,3977,3978,3980,3981,3876,3983,3985],{},[18,3966,3967],{},"焦点矩形","：WinUI 用 ",[23,3970,2064],{},"（浅色 ",[23,3973,2068],{}," \u002F 深色白），令牌集中对应 ",[23,3976,2072],{},"；组件库其余控件目前用 ",[23,3979,2076],{},"，本组件按 WinUI 源取色。仅键盘 \u002F 程序化聚焦显示焦点矩形与 3×16 品牌色指示条（对应 WinUI ",[23,3982,2080],{},[23,3984,2083],{}," 的区分）。",[45,3987,3988,3994],{},[18,3989,3990,371,3992],{},[23,3991,2090],{},[23,3993,2093],{},"：WinUI 在展开态按页移动高亮，这里只吃掉按键（阻止页面滚动），不移动高亮。",[45,3996,3997,4003,4004,4006,4007,4009],{},[18,3998,3999,4000,4002],{},"项 ",[23,4001,2102],{}," 不能是空字符串","：reka 底座用它表示「清空选中」，故 ",[23,4005,2107],{}," 会被拒绝（WinUI 无此限制）；需要空串语义时用 ",[23,4008,52],{}," 或哨兵值。",[45,4011,4012],{},"文本超长时输入框用省略号截断（WinUI 是直接裁切）。",[2116,4014,2118],{},{"title":136,"searchDepth":273,"depth":273,"links":4016},[4017,4018,4019,4020,4021,4022,4023,4024,4025],{"id":2224,"depth":273,"text":2224},{"id":2297,"depth":273,"text":2298},{"id":2404,"depth":273,"text":2404},{"id":2580,"depth":273,"text":2580},{"id":2856,"depth":273,"text":2856},{"id":3018,"depth":273,"text":3018},{"id":3115,"depth":273,"text":3115},{"id":3222,"depth":273,"text":3222},{"id":1329,"depth":273,"text":1330},"下拉选择框，用于从一组单行文本选项中选中一项，支持文本搜索与可编辑自定义值。",{},{"title":2141},"\u002Fcomponents\u002Fcombobox",{"title":2141,"description":4026},"components\u002Fcombobox","pWRxH-8RDbQcchnYUfz9KG50P4XyQ7kO4tWo26x3G5I",1792150929345]