[{"data":1,"prerenderedAt":5374},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Ftab-view":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Ftab-view":2877},{"id":4,"title":5,"body":6,"description":2865,"extension":2866,"meta":2867,"nav":2868,"navigation":2869,"path":2870,"seo":2871,"stem":2875,"__hash__":2876},"content_en\u002Fen\u002Fcomponents\u002Ftab-view.md","Tab View",{"type":7,"value":8,"toc":2848},"minimark",[9,13,32,108,184,189,259,307,311,466,472,651,655,677,795,823,833,837,944,1057,1064,1137,1215,1219,1267,1330,1351,1360,1415,1419,1567,1590,1619,1703,1707,1869,1873,1879,2105,2173,2229,2234,2360,2406,2410,2425,2715,2746,2750,2844],[10,11,5],"h1",{"id":12},"tab-view",[14,15,16,20,21,24,25,31],"p",{},[17,18,19],"code",{},"FluereTabView"," + ",[17,22,23],{},"FluereTabViewItem"," map to WinUI 3 \u002F Windows App SDK's ",[26,27,28],"strong",{},[17,29,30],{},"Microsoft.UI.Xaml.Controls.TabView",": a horizontally scrollable tab strip plus a content area that only shows the selected item, with close buttons, an add button and three width modes. Keys and focus behaviour follow the source item by item.",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereTabView v-model:selected-index=\"selected\" label=\"Tabs\">\n  \u003CFluereTabViewItem header=\"Documents\" :is-closable=\"true\">Panel content\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"Pictures\">Panel content\u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n","vue","",[17,40,41,86,92,98],{"__ignoreMap":38},[42,43,46,50,53,57,60,63,66,70,73,75,78,80,83],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"sVt8B","\u003C",[42,51,19],{"class":52},"s9eBZ",[42,54,56],{"class":55},"sScJk"," v-model",[42,58,59],{"class":48},":",[42,61,62],{"class":55},"selected-index",[42,64,65],{"class":48},"=",[42,67,69],{"class":68},"sZZnC","\"",[42,71,72],{"class":48},"selected",[42,74,69],{"class":68},[42,76,77],{"class":55}," label",[42,79,65],{"class":48},[42,81,82],{"class":68},"\"Tabs\"",[42,84,85],{"class":48},">\n",[42,87,89],{"class":44,"line":88},2,[42,90,91],{"class":48},"  \u003CFluereTabViewItem header=\"Documents\" :is-closable=\"true\">Panel content\u003C\u002FFluereTabViewItem>\n",[42,93,95],{"class":44,"line":94},3,[42,96,97],{"class":48},"  \u003CFluereTabViewItem header=\"Pictures\">Panel content\u003C\u002FFluereTabViewItem>\n",[42,99,101,104,106],{"class":44,"line":100},4,[42,102,103],{"class":48},"\u003C\u002F",[42,105,19],{"class":52},[42,107,85],{"class":48},[109,110,112,118],"demo-block",{"title":111},"Basic: icon, text and panel",[113,114,115],"template",{"v-slot:preview":38},[116,117],"tab-view-basic-demo",{},[113,119,120],{"v-slot:code":38},[33,121,123],{"className":35,"code":122,"language":37,"meta":38,"style":38},"\u003CFluereTabView v-model:selected-index=\"selected\" label=\"Example tabs\">\n  \u003CFluereTabViewItem v-for=\"tab in tabs\" :key=\"tab.title\" :header=\"tab.title\">\n    \u003Ctemplate #icon>\u003Ccomponent :is=\"tab.icon\" :size=\"16\" \u002F>\u003C\u002Ftemplate>\n    \u003Cdiv class=\"p-fluent-l\">…\u003C\u002Fdiv>\n  \u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,124,125,154,159,164,169,175],{"__ignoreMap":38},[42,126,127,129,131,133,135,137,139,141,143,145,147,149,152],{"class":44,"line":45},[42,128,49],{"class":48},[42,130,19],{"class":52},[42,132,56],{"class":55},[42,134,59],{"class":48},[42,136,62],{"class":55},[42,138,65],{"class":48},[42,140,69],{"class":68},[42,142,72],{"class":48},[42,144,69],{"class":68},[42,146,77],{"class":55},[42,148,65],{"class":48},[42,150,151],{"class":68},"\"Example tabs\"",[42,153,85],{"class":48},[42,155,156],{"class":44,"line":88},[42,157,158],{"class":48},"  \u003CFluereTabViewItem v-for=\"tab in tabs\" :key=\"tab.title\" :header=\"tab.title\">\n",[42,160,161],{"class":44,"line":94},[42,162,163],{"class":48},"    \u003Ctemplate #icon>\u003Ccomponent :is=\"tab.icon\" :size=\"16\" \u002F>\u003C\u002Ftemplate>\n",[42,165,166],{"class":44,"line":100},[42,167,168],{"class":48},"    \u003Cdiv class=\"p-fluent-l\">…\u003C\u002Fdiv>\n",[42,170,172],{"class":44,"line":171},5,[42,173,174],{"class":48},"  \u003C\u002FFluereTabViewItem>\n",[42,176,178,180,182],{"class":44,"line":177},6,[42,179,103],{"class":48},[42,181,19],{"class":52},[42,183,85],{"class":48},[185,186,188],"h2",{"id":187},"version-and-evidence-baseline","Version and evidence baseline",[190,191,192,205],"table",{},[193,194,195],"thead",{},[196,197,198,202],"tr",{},[199,200,201],"th",{},"Item",[199,203,204],{},"Value",[206,207,208,224,240],"tbody",{},[196,209,210,214],{},[211,212,213],"td",{},"Spec source tag",[211,215,216,219,220,223],{},[17,217,218],{},"winui3\u002Frelease\u002F2.5.1"," (commit ",[17,221,222],{},"ba3a8d5",")",[196,225,226,229],{},[211,227,228],{},"Key files",[211,230,231,20,234,20,237],{},[17,232,233],{},"src\u002Fcontrols\u002Fdev\u002FTabView\u002F{TabView.xaml,TabView_themeresources.xaml,TabView.idl,TabView.cpp,TabViewItem.cpp,TabViewListView.cpp,TabViewAutomationPeer.cpp,TabViewItemAutomationPeer.cpp}",[17,235,236],{},"Generated\u002F{TabView,TabViewItem}.properties.cpp",[17,238,239],{},"Strings\u002F{en-us,zh-CN}\u002FResources.resw",[196,241,242,245],{},[211,243,244],{},"Built-in text",[211,246,247,248,251,252,255,256,223],{},"Seven strings (close \u002F add \u002F scroll \u002F announcement) copied ",[26,249,250],{},"verbatim"," from the upstream ",[17,253,254],{},"Resources.resw"," (mapping table in ",[17,257,258],{},"packages\u002Fui\u002Fsrc\u002Ftab-view\u002Flocale.ts",[260,261,262,283],"blockquote",{},[14,263,264,270,271,274,275,278,279,282],{},[26,265,266,269],{},[17,267,268],{},"perf2026"," is not adopted",": upstream ships ",[17,272,273],{},"TabView_perf2026.xaml"," (wired into ",[17,276,277],{},"TabView.vcxitems:43","); this library keeps the 0.5.1 ",[17,280,281],{},"TitleBar"," ruling — not read, not referenced, no corresponding branch.",[14,284,285,291,292,295,296,295,299,302,303,306],{},[26,286,287,288],{},"There is no ",[17,289,290],{},"TabViewItem.idl",": the public API of ",[17,293,294],{},"TabViewItem"," \u002F ",[17,297,298],{},"TabViewItemTemplateSettings",[17,300,301],{},"TabViewListView"," \u002F both automation peers lives entirely in ",[17,304,305],{},"TabView.idl:203-285",".",[185,308,310],{"id":309},"template-and-metrics","Template and metrics",[190,312,313,323],{},[193,314,315],{},[196,316,317,320],{},[199,318,319],{},"Structure",[199,321,322],{},"Content",[206,324,325,341,372,396,425,439],{},[196,326,327,330],{},[211,328,329],{},"Root",[211,331,332,333,336,337,340],{},"Two rows: ",[17,334,335],{},"Auto"," (tab strip) \u002F ",[17,338,339],{},"*"," (content)",[196,342,343,346],{},[211,344,345],{},"Four strip columns",[211,347,348,351,352,355,356,358,359,361,362,365,366,351,368,371],{},[17,349,350],{},"Auto MinWidth=2"," (",[17,353,354],{},"TabStripHeader",") | ",[17,357,335],{}," (strip) | ",[17,360,335],{}," (add button, container ",[17,363,364],{},"Padding 3,0,0,3",", bottom-aligned) | ",[17,367,339],{},[17,369,370],{},"TabStripFooter","), with a 1 px bottom line under all four",[196,373,374,377],{},[211,375,376],{},"Top spacing",[211,378,379,380,383,384,387,388,391,392,395],{},"The 8 px above the strip comes from ",[17,381,382],{},"TabView.Padding = TabViewHeaderPadding(0,8,0,0)"," (through ",[17,385,386],{},"TabListView.Padding"," into the ",[17,389,390],{},"ItemsPresenter",") — ",[26,393,394],{},"not"," a margin",[196,397,398,401],{},[211,399,400],{},"Tab item columns",[211,402,403,406,407,406,410,413,414,417,418,421,422],{},[17,404,405],{},"IconBox(Auto)"," | ",[17,408,409],{},"ContentPresenter(*)",[17,411,412],{},"CloseButton(Auto)","; the ",[17,415,416],{},"ContentPresenter"," has ",[26,419,420],{},"no margin"," in the source, all spacing comes from ",[17,423,424],{},"TabContainer.Padding",[196,426,427,430],{},[211,428,429],{},"Bottom line",[211,431,432,351,435,438],{},[17,433,434],{},"TabViewBorderBrush",[17,436,437],{},"CardStrokeColorDefault",", 1 px)",[196,440,441,444],{},[211,442,443],{},"Selected indicator",[211,445,446,449,450,453,454,457,458,461,462,465],{},[17,447,448],{},"SelectedBackgroundPath"," (8 px top corners, 4 px overhang on both sides, radius-4 ",[26,451,452],{},"concave"," bottom corners) plus two 4×4 arc patches (",[17,455,456],{},"Fill=TabViewBorderBrush","); all three are ",[17,459,460],{},"x:Load=\"False\""," and become ",[17,463,464],{},"Visible"," only when selected",[14,467,468,469,59],{},"Metric values come from ",[17,470,471],{},"TabView_themeresources.xaml:239-269",[190,473,474,483],{},[193,475,476],{},[196,477,478,481],{},[199,479,480],{},"Quantity",[199,482,204],{},[206,484,485,498,514,529,546,566,583,603,617,635],{},[196,486,487,490],{},[211,488,489],{},"Tab min height",[211,491,492,351,495,223],{},[17,493,494],{},"32",[17,496,497],{},"TabViewItemMinHeight",[196,499,500,503],{},[211,501,502],{},"Tab min \u002F max width",[211,504,505,295,508,351,511,223],{},[17,506,507],{},"100",[17,509,510],{},"240",[26,512,513],{},"only enforced in Equal mode, by code",[196,515,516,519],{},[211,517,518],{},"Tab padding",[211,520,521,524,525,528],{},[17,522,523],{},"8,3,4,3"," (close button visible) \u002F ",[17,526,527],{},"8,3,8,3"," (collapsed)",[196,530,531,534],{},[211,532,533],{},"Header font size \u002F icon",[211,535,536,295,539,542,543,223],{},[17,537,538],{},"12",[17,540,541],{},"16"," (icon margin ",[17,544,545],{},"0,0,10,0",[196,547,548,551],{},[211,549,550],{},"Close button",[211,552,553,556,557,560,561,563,564],{},[17,554,555],{},"32×24",", radius ",[17,558,559],{},"4",", font size ",[17,562,538],{},", left margin ",[17,565,559],{},[196,567,568,571],{},[211,569,570],{},"Add button",[211,572,573,556,575,560,577,579,580],{},[17,574,555],{},[17,576,559],{},[17,578,538],{},", container ",[17,581,582],{},"3,0,0,3",[196,584,585,588],{},[211,586,587],{},"Scroll buttons",[211,589,590,592,593,596,597,295,600],{},[17,591,555],{},", glyph font size ",[17,594,595],{},"8","; containers ",[17,598,599],{},"8,0,3,3",[17,601,602],{},"3,0,8,3",[196,604,605,608],{},[211,606,607],{},"Separator",[211,609,610,613,614],{},[17,611,612],{},"1px",", ",[17,615,616],{},"Margin 0,8,0,8",[196,618,619,622],{},[211,620,621],{},"Border",[211,623,624,627,628,631,632],{},[17,625,626],{},"1","; selected ",[17,629,630],{},"1,1,1,0"," with ",[17,633,634],{},"Margin -1,0,-1,1",[196,636,637,640],{},[211,638,639],{},"Radii",[211,641,642,643,646,647,650],{},"selected background top corners ",[17,644,645],{},"OverlayCornerRadius","(8), buttons ",[17,648,649],{},"ControlCornerRadius","(4)",[185,652,654],{"id":653},"keyboard-item-by-item","Keyboard (item by item)",[14,656,657,417,660,666,667,670,671,674,675,306],{},[17,658,659],{},"TabView",[26,661,662,663],{},"no ",[17,664,665],{},"OnKeyDown","; it owns three ",[17,668,669],{},"KeyboardAccelerator","s (scope = this TabView, so they also fire while focus is inside the content) plus a ",[17,672,673],{},"KeyDown"," subscription on the add button. Arrow keys live on ",[17,676,294],{},[190,678,679,692],{},[193,680,681],{},[196,682,683,686,689],{},[199,684,685],{},"Key",[199,687,688],{},"Precondition",[199,690,691],{},"Effect",[206,693,694,720,736,751,775],{},[196,695,696,701,707],{},[211,697,698],{},[17,699,700],{},"Ctrl+F4",[211,702,703,704],{},"selected item exists and ",[17,705,706],{},"IsClosable",[211,708,709,710,351,713,716,717],{},"raises ",[17,711,712],{},"tabCloseRequested",[17,714,715],{},"source: 'keyboard'","); ",[26,718,719],{},"never removes the tab",[196,721,722,727,730],{},[211,723,724],{},[17,725,726],{},"Ctrl+Tab",[211,728,729],{},"—",[211,731,732,733,223],{},"moves the selection forward, wrapping, skipping disabled tabs (",[17,734,735],{},"MoveSelection(true)",[196,737,738,743,745],{},[211,739,740],{},[17,741,742],{},"Ctrl+Shift+Tab",[211,744,729],{},[211,746,747,748,223],{},"moves the selection backward (",[17,749,750],{},"MoveSelection(false)",[196,752,753,762,765],{},[211,754,755,295,758,761],{},[17,756,757],{},"←",[17,759,760],{},"→"," (focus inside strip)",[211,763,764],{},"no Alt \u002F Ctrl \u002F Meta",[211,766,767,768,771,772],{},"walks the focus ring — ",[17,769,770],{},"tab1 → its close button → tab2 → … → add button → back to tab1","; ",[26,773,774],{},"does not change selection",[196,776,777,785,788],{},[211,778,779,295,782],{},[17,780,781],{},"Space",[17,783,784],{},"Enter",[211,786,787],{},"focus on a tab",[211,789,790,791,794],{},"selects it (base ",[17,792,793],{},"TabsTrigger"," keys)",[14,796,797,800,801,295,804,295,807,295,810,295,813,295,816,295,819,822],{},[26,798,799],{},"Keys the source does not implement"," (negative evidence, do not invent): ",[17,802,803],{},"Ctrl+T",[17,805,806],{},"Ctrl+W",[17,808,809],{},"Ctrl+1..9",[17,811,812],{},"Home",[17,814,815],{},"End",[17,817,818],{},"Delete",[17,820,821],{},"Escape",". Those belong to the host app (WinUI Gallery \u002F Terminal bind them themselves).",[260,824,825],{},[14,826,827,828,295,830,832],{},"Browser caveat: Chrome and Edge reserve ",[17,829,726],{},[17,831,700],{}," for switching and closing browser tabs, so the page may never see the keydown. The component implements them regardless; usability depends on the host.",[185,834,836],{"id":835},"selection-and-closing-semantics","Selection and closing semantics",[838,839,840,859,878,903,921,930],"ul",{},[841,842,843,351,846,849,850,852,853,855,856,858],"li",{},[26,844,845],{},"Focus movement does not change selection",[17,847,848],{},"SingleSelectionFollowsFocus=False","): arrow keys only move focus; ",[17,851,726],{},", clicks, ",[17,854,781],{}," and ",[17,857,784],{}," change selection.",[841,860,861,864,865,867,868,870,871,771,874,877],{},[26,862,863],{},"The component never removes tabs",": the close button and ",[17,866,700],{}," only raise ",[17,869,712],{}," (matching ",[17,872,873],{},"TabView.TabCloseRequested",[17,875,876],{},"TabViewItem.CloseRequested"," is folded into the same event). Whether to remove — and what to select next — is the consumer's decision.",[841,879,880,883,884,887,888,891,892,895,896,899,900,306],{},[26,881,882],{},"Removing the selected tab migrates the selection"," using ",[17,885,886],{},"TabView::OnItemsChanged",": ",[17,889,890],{},"start = min(removedIndex, count - 1)",", then scan ",[26,893,894],{},"forward with wrapping"," for the first enabled tab; if the full loop finds none, nothing stays selected. In ",[26,897,898],{},"controlled"," mode the result is reported back through ",[17,901,902],{},"update:selectedIndex",[841,904,905,908,909,912,913,916,917,920],{},[26,906,907],{},"Identity following",": with a ",[17,910,911],{},":key"," (or ",[17,914,915],{},"value",") on the items, inserting or reordering in front of the selected tab keeps it selected (equivalent to WinUI's ",[17,918,919],{},"SelectedItem","); without a stable identity the component falls back to index semantics.",[841,922,923,926,927,306],{},[26,924,925],{},"Focus restoration",": when the focus sat inside the old panel (which gets unmounted), it is moved into the first focusable element of the new panel, falling back to the tab itself — matching ",[17,928,929],{},"UpdateTabContent",[841,931,932,935,936,939,940,943],{},[26,933,934],{},"The add button only raises events"," and additionally announces \"New tab added.\" through a polite ",[17,937,938],{},"aria-live"," region (mirroring upstream's UIA ",[17,941,942],{},"ItemAdded"," notification).",[109,945,947,952],{"title":946},"Closing and adding: the consumer owns the data",[113,948,949],{"v-slot:preview":38},[950,951],"tab-view-close-demo",{},[113,953,954],{"v-slot:code":38},[33,955,957],{"className":35,"code":956,"language":37,"meta":38,"style":38},"\u003CFluereTabView\n  v-model:selected-index=\"selected\"\n  label=\"Closable tabs\"\n  @tab-close-requested=\"onCloseRequested\"\n  @add-tab-button-click=\"onAddClick\"\n>\n  \u003CFluereTabViewItem v-for=\"(id, index) in openIds\" :key=\"id\" :header=\"titleOf(id, index)\">\n    …\n  \u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,958,959,966,984,994,1011,1027,1031,1037,1043,1048],{"__ignoreMap":38},[42,960,961,963],{"class":44,"line":45},[42,962,49],{"class":48},[42,964,965],{"class":52},"FluereTabView\n",[42,967,968,971,973,975,977,979,981],{"class":44,"line":88},[42,969,970],{"class":55},"  v-model",[42,972,59],{"class":48},[42,974,62],{"class":55},[42,976,65],{"class":48},[42,978,69],{"class":68},[42,980,72],{"class":48},[42,982,983],{"class":68},"\"\n",[42,985,986,989,991],{"class":44,"line":94},[42,987,988],{"class":55},"  label",[42,990,65],{"class":48},[42,992,993],{"class":68},"\"Closable tabs\"\n",[42,995,996,999,1002,1004,1006,1009],{"class":44,"line":100},[42,997,998],{"class":48},"  @",[42,1000,1001],{"class":55},"tab-close-requested",[42,1003,65],{"class":48},[42,1005,69],{"class":68},[42,1007,1008],{"class":48},"onCloseRequested",[42,1010,983],{"class":68},[42,1012,1013,1015,1018,1020,1022,1025],{"class":44,"line":171},[42,1014,998],{"class":48},[42,1016,1017],{"class":55},"add-tab-button-click",[42,1019,65],{"class":48},[42,1021,69],{"class":68},[42,1023,1024],{"class":48},"onAddClick",[42,1026,983],{"class":68},[42,1028,1029],{"class":44,"line":177},[42,1030,85],{"class":48},[42,1032,1034],{"class":44,"line":1033},7,[42,1035,1036],{"class":48},"  \u003CFluereTabViewItem v-for=\"(id, index) in openIds\" :key=\"id\" :header=\"titleOf(id, index)\">\n",[42,1038,1040],{"class":44,"line":1039},8,[42,1041,1042],{"class":48},"    …\n",[42,1044,1046],{"class":44,"line":1045},9,[42,1047,174],{"class":48},[42,1049,1051,1053,1055],{"class":44,"line":1050},10,[42,1052,103],{"class":48},[42,1054,19],{"class":52},[42,1056,85],{"class":48},[185,1058,1060,1061,223],{"id":1059},"width-modes-tabwidthmode","Width modes (",[17,1062,1063],{},"tabWidthMode",[190,1065,1066,1078],{},[193,1067,1068],{},[196,1069,1070,1072,1075],{},[199,1071,204],{},[199,1073,1074],{},"WinUI",[199,1076,1077],{},"Semantics",[206,1079,1080,1100,1115],{},[196,1081,1082,1088,1093],{},[211,1083,1084,1087],{},[17,1085,1086],{},"equal"," (default)",[211,1089,1090],{},[17,1091,1092],{},"Equal = 0",[211,1094,1095,1096,1099],{},"width = ",[17,1097,1098],{},"clamp(available \u002F count, 100, 240)",", measured in code (see the component header)",[196,1101,1102,1107,1112],{},[211,1103,1104],{},[17,1105,1106],{},"size-to-content",[211,1108,1109],{},[17,1110,1111],{},"SizeToContent=1",[211,1113,1114],{},"width follows content; no item width is assigned",[196,1116,1117,1122,1127],{},[211,1118,1119],{},[17,1120,1121],{},"compact",[211,1123,1124],{},[17,1125,1126],{},"Compact = 2",[211,1128,1129,1130,1132,1133,1136],{},"same as ",[17,1131,1106],{},", but ",[26,1134,1135],{},"unselected"," tabs collapse to their icon (the selected one stays full)",[109,1138,1140,1145],{"title":1139},"The three width modes side by side",[113,1141,1142],{"v-slot:preview":38},[1143,1144],"tab-view-width-mode-demo",{},[113,1146,1147],{"v-slot:code":38},[33,1148,1150],{"className":35,"code":1149,"language":37,"meta":38,"style":38},"\u003CFluereTabView :tab-width-mode=\"mode\" :default-selected-index=\"0\" label=\"Width mode\">\n  \u003CFluereTabViewItem header=\"Tab one\">…\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"Tab two\">…\u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,1151,1152,1197,1202,1207],{"__ignoreMap":38},[42,1153,1154,1156,1158,1161,1164,1166,1168,1171,1173,1175,1178,1180,1182,1186,1188,1190,1192,1195],{"class":44,"line":45},[42,1155,49],{"class":48},[42,1157,19],{"class":52},[42,1159,1160],{"class":48}," :",[42,1162,1163],{"class":55},"tab-width-mode",[42,1165,65],{"class":48},[42,1167,69],{"class":68},[42,1169,1170],{"class":48},"mode",[42,1172,69],{"class":68},[42,1174,1160],{"class":48},[42,1176,1177],{"class":55},"default-selected-index",[42,1179,65],{"class":48},[42,1181,69],{"class":68},[42,1183,1185],{"class":1184},"sj4cs","0",[42,1187,69],{"class":68},[42,1189,77],{"class":55},[42,1191,65],{"class":48},[42,1193,1194],{"class":68},"\"Width mode\"",[42,1196,85],{"class":48},[42,1198,1199],{"class":44,"line":88},[42,1200,1201],{"class":48},"  \u003CFluereTabViewItem header=\"Tab one\">…\u003C\u002FFluereTabViewItem>\n",[42,1203,1204],{"class":44,"line":94},[42,1205,1206],{"class":48},"  \u003CFluereTabViewItem header=\"Tab two\">…\u003C\u002FFluereTabViewItem>\n",[42,1208,1209,1211,1213],{"class":44,"line":100},[42,1210,103],{"class":48},[42,1212,19],{"class":52},[42,1214,85],{"class":48},[185,1216,1218],{"id":1217},"overflow-scrolling","Overflow scrolling",[14,1220,1221,1222,1225,1226,1228,1229,1231,1232,1235,1236,1239,1240,1243,1244,1247,1248,1251,1252,1255,1256,1259,1260,613,1263,1266],{},"When space runs out the tabs are ",[26,1223,1224],{},"squeezed to their floor first, then overflow",": in ",[17,1227,1086],{}," mode (the default) each tab is ",[17,1230,1098],{},", so tabs shrink to ",[17,1233,1234],{},"TabViewItemMinWidth = 100"," before anything overflows; once they really do overflow (",[17,1237,1238],{},"scrollWidth - clientWidth > 0.5",") two scroll buttons appear — 50 px steps, with \"backward\" disabled at the left edge and \"forward\" disabled at the right edge (threshold ",[17,1241,1242],{},"0.1","), and ",[26,1245,1246],{},"holding a button scrolls continuously",": one step on press, then a repeat every ",[17,1249,1250],{},"100ms"," after a ",[17,1253,1254],{},"50ms"," delay (matching the upstream ",[17,1257,1258],{},"RepeatButton","'s ",[17,1261,1262],{},"Delay=\"50\" Interval=\"100\"",[17,1264,1265],{},"TabView.xaml:158,165",").",[14,1268,1269,1272,1273,1276,1277,1280,1281,1284,1285,1288,1289,1292,1293,351,1296,1299,1300,1303,1304,20,1307,1310,1311,1314,1315,1317,1318,1321,1322,1325,1326,1329],{},[26,1270,1271],{},"No scrollbar is drawn while overflowing",": the upstream ",[17,1274,1275],{},"TabScrollViewerStyle"," template (",[17,1278,1279],{},"TabView.xaml:133-173",") contains ",[26,1282,1283],{},"no scrollbar part"," — only the ",[17,1286,1287],{},"ScrollContentPresenter"," plus the two arrow containers. ",[17,1290,1291],{},"ScrollViewer.ComputedHorizontalScrollBarVisibility"," is bound solely to those two containers' ",[17,1294,1295],{},"Visibility",[17,1297,1298],{},":157,163","), i.e. it decides whether the arrows show, nothing else. This library mirrors that: ",[17,1301,1302],{},"overflow-x: auto"," keeps native scrolling (wheel \u002F Shift + wheel \u002F touch \u002F horizontal wheel deltas) while ",[17,1305,1306],{},"scrollbar-width: none",[17,1308,1309],{},"::-webkit-scrollbar"," ",[26,1312,1313],{},"hides the native scrollbar",". The tab height therefore stays ",[17,1316,494],{}," and the strip row stays ",[17,1319,1320],{},"40"," (8 + 32): a classic scrollbar adds ≈ ",[17,1323,1324],{},"15px"," to that row (measured ",[17,1327,1328],{},"40 → 55"," in a headful Chromium), inflating the strip and squeezing the content.",[14,1331,1332,1333,20,1336,1339,1340,1343,1344,20,1347,1350],{},"Both buttons are ",[17,1334,1335],{},"tabindex=\"-1\"",[17,1337,1338],{},"aria-hidden=\"true\""," — ",[26,1341,1342],{},"out of the tab order and hidden from screen readers",", matching WinUI's ",[17,1345,1346],{},"IsTabStop=False",[17,1348,1349],{},"AccessibilityView=Raw",". With the scrollbar hidden the mouse has the arrows and the wheel (WinUI's strip has no scrollbar either, so this is alignment rather than a concession).",[260,1352,1353],{},[14,1354,1355,1356,1359],{},"Known caveat: inside a ",[17,1357,1358],{},"FluereScrollView"," (such as this documentation site) vertical wheel input is claimed by the outer scroller under the \"nearest scrollable container owns the wheel\" rule — with the pointer over the tab strip, Shift + wheel will not scroll the strip (horizontal wheel deltas and trackpad horizontal swipes are unaffected). On a standalone page Shift + wheel scrolls the strip horizontally (verified with a minimal reproduction). That is pre-existing scroll-chain behaviour, not a consequence of hiding the scrollbar.",[109,1361,1363,1368],{"title":1362},"Ten tabs squeezed into 480 px",[113,1364,1365],{"v-slot:preview":38},[1366,1367],"tab-view-overflow-demo",{},[113,1369,1370],{"v-slot:code":38},[33,1371,1373],{"className":35,"code":1372,"language":37,"meta":38,"style":38},"\u003Cdiv class=\"w-[480px] overflow-hidden\">\n  \u003CFluereTabView :default-selected-index=\"0\" label=\"Overflowing tab strip\">\n    \u003CFluereTabViewItem v-for=\"title in titles\" :key=\"title\" :header=\"title\">…\u003C\u002FFluereTabViewItem>\n  \u003C\u002FFluereTabView>\n\u003C\u002Fdiv>\n",[17,1374,1375,1392,1397,1402,1407],{"__ignoreMap":38},[42,1376,1377,1379,1382,1385,1387,1390],{"class":44,"line":45},[42,1378,49],{"class":48},[42,1380,1381],{"class":52},"div",[42,1383,1384],{"class":55}," class",[42,1386,65],{"class":48},[42,1388,1389],{"class":68},"\"w-[480px] overflow-hidden\"",[42,1391,85],{"class":48},[42,1393,1394],{"class":44,"line":88},[42,1395,1396],{"class":48},"  \u003CFluereTabView :default-selected-index=\"0\" label=\"Overflowing tab strip\">\n",[42,1398,1399],{"class":44,"line":94},[42,1400,1401],{"class":48},"    \u003CFluereTabViewItem v-for=\"title in titles\" :key=\"title\" :header=\"title\">…\u003C\u002FFluereTabViewItem>\n",[42,1403,1404],{"class":44,"line":100},[42,1405,1406],{"class":48},"  \u003C\u002FFluereTabView>\n",[42,1408,1409,1411,1413],{"class":44,"line":171},[42,1410,103],{"class":48},[42,1412,1381],{"class":52},[42,1414,85],{"class":48},[185,1416,1418],{"id":1417},"states-and-the-close-button","States and the close button",[190,1420,1421,1434],{},[193,1422,1423],{},[196,1424,1425,1428,1431],{},[199,1426,1427],{},"State",[199,1429,1430],{},"Trigger",[199,1432,1433],{},"Appearance (token)",[206,1435,1436,1453,1467,1484,1504,1520,1538,1556],{},[196,1437,1438,1441,1443],{},[211,1439,1440],{},"rest",[211,1442,729],{},[211,1444,1445,1446,1449,1450],{},"background ",[17,1447,1448],{},"--layerOnMicaBaseAltFillColorTransparent"," (transparent), text ",[17,1451,1452],{},"--colorNeutralForeground2",[196,1454,1455,1458,1461],{},[211,1456,1457],{},"hover",[211,1459,1460],{},"pointer over (not selected \u002F disabled)",[211,1462,1445,1463,1466],{},[17,1464,1465],{},"--layerOnMicaBaseAltFillColorSecondary","; the trailing separator hides",[196,1468,1469,1472,1475],{},[211,1470,1471],{},"pressed",[211,1473,1474],{},"pointer down (not selected \u002F disabled)",[211,1476,1445,1477,1480,1481],{},[17,1478,1479],{},"--layerOnMicaBaseAltFillColorDefault",", text ",[17,1482,1483],{},"--colorNeutralForeground3",[196,1485,1486,1488,1490],{},[211,1487,72],{},[211,1489,72],{},[211,1491,1445,1492,1495,1496,1499,1500,1503],{},[17,1493,1494],{},"--solidBackgroundFillColorTertiary",", 8 px top corners, 1 px ",[17,1497,1498],{},"--colorNeutralStrokeAlpha"," border, text ",[17,1501,1502],{},"--colorNeutralForeground1",", SemiBold",[196,1505,1506,1509,1513],{},[211,1507,1508],{},"disabled",[211,1510,1511],{},[17,1512,1508],{},[211,1514,1515,1516,1519],{},"text ",[17,1517,1518],{},"--colorNeutralForegroundDisabled",", not clickable, out of the focus ring",[196,1521,1522,1525,1528],{},[211,1523,1524],{},"focus",[211,1526,1527],{},"keyboard focus",[211,1529,1530,1531,1534,1535,223],{},"the ",[17,1532,1533],{},"useFocusVisual"," double ring (2 px outer + 1 px inner, equivalent to ",[17,1536,1537],{},"FocusVisualMargin = -3",[196,1539,1540,1543,1546],{},[211,1541,1542],{},"close button hover \u002F pressed",[211,1544,1545],{},"pointer over \u002F down on the close button",[211,1547,1445,1548,295,1551,1480,1554],{},[17,1549,1550],{},"--subtleFillColorSecondary",[17,1552,1553],{},"--subtleFillColorTertiary",[17,1555,1502],{},[196,1557,1558,1561,1564],{},[211,1559,1560],{},"add button hover \u002F pressed",[211,1562,1563],{},"pointer over \u002F down",[211,1565,1566],{},"same as above",[14,1568,1569,1572,1573,1576,1577,1580,1581,1584,1585,306],{},[26,1570,1571],{},"Every state switches instantly",": upstream's hover \u002F pressed \u002F selected \u002F disabled are plain ",[17,1574,1575],{},"VisualState.Setters"," and every ",[17,1578,1579],{},"GoToState(..., false)","; the file contains no ",[17,1582,1583],{},"EasingFunction"," at all. The component therefore writes ",[26,1586,662,1587],{},[17,1588,1589],{},"transition",[14,1591,1592,1595,1596,1599,1600,1603,1604,1611,1612,1615,1616,1618],{},[17,1593,1594],{},"closeButtonOverlayMode"," has three values: ",[17,1597,1598],{},"auto"," (default) and ",[17,1601,1602],{},"always"," take ",[26,1605,1606,1607,1610],{},"the same ",[17,1608,1609],{},"default:"," branch"," (always visible); only ",[17,1613,1614],{},"on-pointer-over"," hides the button until hover or selection. That is the literal source behaviour — do not read ",[17,1617,1598],{}," as \"smart\".",[109,1620,1622,1627],{"title":1621},"Closability, disabled state and on-pointer-over",[113,1623,1624],{"v-slot:preview":38},[1625,1626],"tab-view-states-demo",{},[113,1628,1629],{"v-slot:code":38},[33,1630,1632],{"className":35,"code":1631,"language":37,"meta":38,"style":38},"\u003CFluereTabView :close-button-overlay-mode=\"overlayMode\" :default-selected-index=\"0\" label=\"States\">\n  \u003CFluereTabViewItem header=\"Closable (selected)\">…\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"Closable (unselected)\">…\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"Not closable\" :is-closable=\"false\">…\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"Disabled\" disabled>…\u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,1633,1634,1675,1680,1685,1690,1695],{"__ignoreMap":38},[42,1635,1636,1638,1640,1642,1645,1647,1649,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1673],{"class":44,"line":45},[42,1637,49],{"class":48},[42,1639,19],{"class":52},[42,1641,1160],{"class":48},[42,1643,1644],{"class":55},"close-button-overlay-mode",[42,1646,65],{"class":48},[42,1648,69],{"class":68},[42,1650,1651],{"class":48},"overlayMode",[42,1653,69],{"class":68},[42,1655,1160],{"class":48},[42,1657,1177],{"class":55},[42,1659,65],{"class":48},[42,1661,69],{"class":68},[42,1663,1185],{"class":1184},[42,1665,69],{"class":68},[42,1667,77],{"class":55},[42,1669,65],{"class":48},[42,1671,1672],{"class":68},"\"States\"",[42,1674,85],{"class":48},[42,1676,1677],{"class":44,"line":88},[42,1678,1679],{"class":48},"  \u003CFluereTabViewItem header=\"Closable (selected)\">…\u003C\u002FFluereTabViewItem>\n",[42,1681,1682],{"class":44,"line":94},[42,1683,1684],{"class":48},"  \u003CFluereTabViewItem header=\"Closable (unselected)\">…\u003C\u002FFluereTabViewItem>\n",[42,1686,1687],{"class":44,"line":100},[42,1688,1689],{"class":48},"  \u003CFluereTabViewItem header=\"Not closable\" :is-closable=\"false\">…\u003C\u002FFluereTabViewItem>\n",[42,1691,1692],{"class":44,"line":171},[42,1693,1694],{"class":48},"  \u003CFluereTabViewItem header=\"Disabled\" disabled>…\u003C\u002FFluereTabViewItem>\n",[42,1696,1697,1699,1701],{"class":44,"line":177},[42,1698,103],{"class":48},[42,1700,19],{"class":52},[42,1702,85],{"class":48},[185,1704,1706],{"id":1705},"differences-from-winui-item-by-item","Differences from WinUI (item by item)",[1708,1709,1710,1731,1749,1765,1776,1796,1813,1819,1845],"ol",{},[841,1711,1712,887,1715,1717,1718,1720,1721,1723,1724,351,1727,1730],{},[26,1713,1714],{},"Items are data-only child components",[17,1716,23],{}," never mounts (the parent reads its props\u002Fslots during render), so it cannot emit; ",[17,1719,876],{}," is folded into the root ",[17,1722,712],{},". Item slots ",[26,1725,1726],{},"do not receive scope arguments",[17,1728,1729],{},"#header=\"{ … }\""," gets nothing).",[841,1732,1733,1738,1739,295,1742,295,1745,1748],{},[26,1734,1735,1736],{},"Items must be direct children of ",[17,1737,19],{}," (they may sit inside ",[17,1740,1741],{},"v-for",[17,1743,1744],{},"\u003Ctemplate>",[17,1746,1747],{},"v-if","). Wrapping them in an extra element or custom component makes them ignored, with a development warning.",[841,1750,1751,1761,1762,1764],{},[26,1752,1753,1754,295,1757,1760],{},"No ",[17,1755,1756],{},"TabItemsSource",[17,1758,1759],{},"TabItemTemplate"," \u002F virtualization",": use ",[17,1763,1741],{}," plus child components on the web.",[841,1766,1767,1772,1773,306],{},[26,1768,1753,1769],{},[17,1770,1771],{},"AddTabButtonCommand",": only ",[17,1774,1775],{},"addTabButtonClick",[841,1777,1778,1784,1785,1788,1789,1792,1793,1266],{},[26,1779,1780,1781],{},"The base library renders ",[17,1782,1783],{},"disabled=\"false\""," on the ",[17,1786,1787],{},"role=\"tab\""," element: browsers and AT ignore that attribute on non-form elements, so disabled semantics are carried by ",[17,1790,1791],{},"aria-disabled"," (styles always key off ",[17,1794,1795],{},"[data-disabled]",[841,1797,1798,1801,1802,1804,1805,1808,1809,1812],{},[26,1799,1800],{},"Ellipsis instead of hard clipping"," for long headers: WinUI's ",[17,1803,416],{}," sets no ",[17,1806,1807],{},"TextTrimming"," (text is clipped mid-glyph); the web side uses ",[17,1810,1811],{},"text-overflow: ellipsis",". This is the only deliberate typography difference.",[841,1814,1815,1818],{},[26,1816,1817],{},"The 4×4 concave corners of the selected background are expressed with a CSS mask",": upstream draws a runtime-generated path plus two arc patches — equivalent geometry, not pixel-identical (see \"evidence gaps\").",[841,1820,1821,1827,1828,1830,1831,1834,1835,1838,1839,1310,1842,1844],{},[26,1822,1823,1824,1826],{},"The ",[17,1825,434],{}," mapping",": in Light \u002F Default it is an alias to ",[17,1829,437],{}," (a ",[17,1832,1833],{},"Color",", not a ",[17,1836,1837],{},"Brush",") and the implicit conversion cannot be proven from source; this library treats it as the same value and ",[26,1840,1841],{},"reuses the existing mapping",[17,1843,1498],{}," (what InfoBar \u002F ContentDialog already do).",[841,1846,1847,1850,1851,295,1854,295,1857,1860,1861,1864,1865,1868],{},[26,1848,1849],{},"Not implemented",": drag reordering, tear-out, middle-click close, ",[17,1852,1853],{},"TabStripDragOver",[17,1855,1856],{},"TabStripDrop",[17,1858,1859],{},"TabDrag*"," events, ",[17,1862,1863],{},"ItemContainerTransitions"," (their durations\u002Fkeyframes are outside the control directory) and a high-contrast palette (only a ",[17,1866,1867],{},"forced-colors"," focus-ring fallback).",[185,1870,1872],{"id":1871},"api","API",[1874,1875,1877],"h3",{"id":1876},"flueretabview",[17,1878,19],{},[190,1880,1881,1897],{},[193,1882,1883],{},[196,1884,1885,1888,1891,1894],{},[199,1886,1887],{},"Prop",[199,1889,1890],{},"Type",[199,1892,1893],{},"Default",[199,1895,1896],{},"Notes",[206,1898,1899,1921,1945,1966,1992,2014,2037,2059,2084],{},[196,1900,1901,1906,1911,1915],{},[211,1902,1903],{},[17,1904,1905],{},"selectedIndex",[211,1907,1908],{},[17,1909,1910],{},"number",[211,1912,1913],{},[17,1914,729],{},[211,1916,1917,1920],{},[17,1918,1919],{},"v-model:selected-index","; passing it makes the component controlled",[196,1922,1923,1928,1932,1936],{},[211,1924,1925],{},[17,1926,1927],{},"defaultSelectedIndex",[211,1929,1930],{},[17,1931,1910],{},[211,1933,1934],{},[17,1935,1185],{},[211,1937,1938,1939,1942,1943,223],{},"uncontrolled initial index (matches WinUI's ",[17,1940,1941],{},"SelectedIndex"," default of ",[17,1944,1185],{},[196,1946,1947,1951,1956,1961],{},[211,1948,1949],{},[17,1950,1063],{},[211,1952,1953],{},[17,1954,1955],{},"'equal' | 'size-to-content' | 'compact'",[211,1957,1958],{},[17,1959,1960],{},"'equal'",[211,1962,1963],{},[17,1964,1965],{},"TabWidthMode",[196,1967,1968,1972,1977,1982],{},[211,1969,1970],{},[17,1971,1594],{},[211,1973,1974],{},[17,1975,1976],{},"'auto' | 'on-pointer-over' | 'always'",[211,1978,1979],{},[17,1980,1981],{},"'auto'",[211,1983,1984,771,1987,855,1989,1991],{},[17,1985,1986],{},"CloseButtonOverlayMode",[17,1988,1598],{},[17,1990,1602],{}," behave identically",[196,1993,1994,1999,2004,2009],{},[211,1995,1996],{},[17,1997,1998],{},"isAddTabButtonVisible",[211,2000,2001],{},[17,2002,2003],{},"boolean",[211,2005,2006],{},[17,2007,2008],{},"true",[211,2010,2011],{},[17,2012,2013],{},"IsAddTabButtonVisible",[196,2015,2016,2021,2026,2030],{},[211,2017,2018],{},[17,2019,2020],{},"label",[211,2022,2023],{},[17,2024,2025],{},"string",[211,2027,2028],{},[17,2029,729],{},[211,2031,2032,2033,2036],{},"accessible name of the tab strip (",[17,2034,2035],{},"aria-label","); upstream's peer has no name fallback, so provide it",[196,2038,2039,2044,2049,2053],{},[211,2040,2041],{},[17,2042,2043],{},"dir",[211,2045,2046],{},[17,2047,2048],{},"'ltr' | 'rtl'",[211,2050,2051],{},[17,2052,729],{},[211,2054,2055,2056,223],{},"only affects the arrow-key direction (",[17,2057,2058],{},"FlowDirection",[196,2060,2061,2066,2071,2075],{},[211,2062,2063],{},[17,2064,2065],{},"motion",[211,2067,2068],{},[17,2069,2070],{},"'auto' | 'none'",[211,2072,2073],{},[17,2074,1981],{},[211,2076,2077,2078,2080,2081],{},"only gates smooth scrolling of the scroll buttons; ",[17,2079,1598],{}," honours ",[17,2082,2083],{},"prefers-reduced-motion",[196,2085,2086,2091,2095,2099],{},[211,2087,2088],{},[17,2089,2090],{},"locale",[211,2092,2093],{},[17,2094,2025],{},[211,2096,2097],{},[17,2098,729],{},[211,2100,2101,2102],{},"built-in text locale, takes precedence over ",[17,2103,2104],{},"FluereConfigProvider",[190,2106,2107,2119],{},[193,2108,2109],{},[196,2110,2111,2114,2117],{},[199,2112,2113],{},"Event",[199,2115,2116],{},"Payload",[199,2118,1896],{},[206,2120,2121,2134,2159],{},[196,2122,2123,2127,2131],{},[211,2124,2125],{},[17,2126,902],{},[211,2128,2129],{},[17,2130,1910],{},[211,2132,2133],{},"selection changes; in controlled mode it also carries a migrated result",[196,2135,2136,2140,2145],{},[211,2137,2138],{},[17,2139,712],{},[211,2141,2142],{},[17,2143,2144],{},"{ index, header, identity, source }",[211,2146,2147,2148,2151,2152,295,2155,2158],{},"close request (",[17,2149,2150],{},"source"," is ",[17,2153,2154],{},"'close-button'",[17,2156,2157],{},"'keyboard'","); the component never mutates",[196,2160,2161,2165,2170],{},[211,2162,2163],{},[17,2164,1775],{},[211,2166,2167],{},[17,2168,2169],{},"MouseEvent",[211,2171,2172],{},"add button click; the component never adds a tab",[190,2174,2175,2184],{},[193,2176,2177],{},[196,2178,2179,2182],{},[199,2180,2181],{},"Slot",[199,2183,1896],{},[206,2185,2186,2198,2215],{},[196,2187,2188,2193],{},[211,2189,2190],{},[17,2191,2192],{},"default",[211,2194,1530,2195,2197],{},[17,2196,23],{}," list (direct children)",[196,2199,2200,2208],{},[211,2201,2202,295,2205],{},[17,2203,2204],{},"tab-strip-header",[17,2206,2207],{},"tab-strip-footer",[211,2209,2210,2211,295,2213,223],{},"custom content at either end of the strip (",[17,2212,354],{},[17,2214,370],{},[196,2216,2217,2222],{},[211,2218,2219],{},[17,2220,2221],{},"add",[211,2223,2224,2225,2228],{},"icon of the add button (defaults to the ",[17,2226,2227],{},"Add"," glyph)",[1874,2230,2232],{"id":2231},"flueretabviewitem",[17,2233,23],{},[190,2235,2236,2248],{},[193,2237,2238],{},[196,2239,2240,2242,2244,2246],{},[199,2241,1887],{},[199,2243,1890],{},[199,2245,1893],{},[199,2247,1896],{},[206,2249,2250,2275,2298,2318,2339],{},[196,2251,2252,2257,2261,2266],{},[211,2253,2254],{},[17,2255,2256],{},"header",[211,2258,2259],{},[17,2260,2025],{},[211,2262,2263],{},[17,2264,2265],{},"''",[211,2267,2268,413,2271,2274],{},[17,2269,2270],{},"Header",[17,2272,2273],{},"#header"," slot wins over it",[196,2276,2277,2282,2286,2290],{},[211,2278,2279],{},[17,2280,2281],{},"isClosable",[211,2283,2284],{},[17,2285,2003],{},[211,2287,2288],{},[17,2289,2008],{},[211,2291,2292,2294,2295,223],{},[17,2293,706],{}," (not ",[17,2296,2297],{},"IsTabClosable",[196,2299,2300,2304,2308,2313],{},[211,2301,2302],{},[17,2303,1508],{},[211,2305,2306],{},[17,2307,2003],{},[211,2309,2310],{},[17,2311,2312],{},"false",[211,2314,2315],{},[17,2316,2317],{},"Control.IsEnabled = false",[196,2319,2320,2325,2329,2333],{},[211,2321,2322],{},[17,2323,2324],{},"ariaLabel",[211,2326,2327],{},[17,2328,2025],{},[211,2330,2331],{},[17,2332,729],{},[211,2334,2335,2338],{},[17,2336,2337],{},"AutomationProperties.Name","; otherwise AT reads the header text (matching the peer)",[196,2340,2341,2345,2350,2354],{},[211,2342,2343],{},[17,2344,915],{},[211,2346,2347],{},[17,2348,2349],{},"string | number",[211,2351,2352],{},[17,2353,729],{},[211,2355,2356,2357,2359],{},"stable identity (same role as ",[17,2358,911],{},") for selection following",[190,2361,2362,2370],{},[193,2363,2364],{},[196,2365,2366,2368],{},[199,2367,2181],{},[199,2369,1896],{},[206,2371,2372,2384,2396],{},[196,2373,2374,2381],{},[211,2375,2376,351,2378,223],{},[17,2377,2192],{},[17,2379,2380],{},"content",[211,2382,2383],{},"panel content; unmounted while not selected",[196,2385,2386,2390],{},[211,2387,2388],{},[17,2389,2256],{},[211,2391,2392,2393,2395],{},"rich header (wins over the ",[17,2394,2256],{}," text)",[196,2397,2398,2403],{},[211,2399,2400],{},[17,2401,2402],{},"icon",[211,2404,2405],{},"icon (16×16 box)",[185,2407,2409],{"id":2408},"browser-measurements-reproducible","Browser measurements (reproducible)",[14,2411,2412,2413,2416,2417,2420,2421,2424],{},"Playwright with the system Chrome (1280×900 \u002F DPR 1) against this page: base geometry via ",[17,2414,2415],{},"temp\u002Fpw-tab-view.mjs"," (53 assertions), the overflow scrollbar \u002F hold-to-repeat specifics via ",[17,2418,2419],{},"temp\u002Fpw-tab-view-overflow.mjs"," (21 assertions, ",[26,2422,2423],{},"headful required"," — overlay-scrollbar environments cannot reproduce that 15 px):",[190,2426,2427,2436],{},[193,2428,2429],{},[196,2430,2431,2433],{},[199,2432,480],{},[199,2434,2435],{},"Measured",[206,2437,2438,2450,2464,2479,2510,2525,2546,2559,2591,2636,2656,2677,2688,2699],{},[196,2439,2440,2443],{},[211,2441,2442],{},"strip height \u002F tab height",[211,2444,2445,2447,2448],{},[17,2446,1320],{}," (8 px top spacing + 32 + the inline 1 px bottom line) \u002F ",[17,2449,494],{},[196,2451,2452,2455],{},[211,2453,2454],{},"tab padding \u002F header font size",[211,2456,2457,2460,2461],{},[17,2458,2459],{},"3px 4px 3px 8px"," (close button visible, see below) \u002F ",[17,2462,2463],{},"12px",[196,2465,2466,2469],{},[211,2467,2468],{},"equal tab width",[211,2470,2471,2472,2475,2476,2478],{},"row 718 − left content 2 − add button area 35 − right content 0 = 681 ⇒ ",[17,2473,2474],{},"227"," (3 tabs); with 7 tabs the available width is shared and the overflowing case falls back to the ",[17,2477,507],{}," floor",[196,2480,2481,2483],{},[211,2482,72],{},[211,2484,2485,2486,2489,2490,2493,2494,2497,2498,613,2501,613,2504,613,2507],{},"pseudo-element fill ",[17,2487,2488],{},"rgb(249, 249, 249)",", top corners ",[17,2491,2492],{},"8px",", insets ",[17,2495,2496],{},"-1px -4px 0px -4px",", weight ",[17,2499,2500],{},"600",[17,2502,2503],{},"border-width: 1px 1px 0px",[17,2505,2506],{},"margin: 0px -1px",[17,2508,2509],{},"z-index: 1",[196,2511,2512,2515],{},[211,2513,2514],{},"unselected hover",[211,2516,2517,2520,2521,2524],{},[17,2518,2519],{},"rgba(0, 0, 0, 0.04)"," (token is ",[17,2522,2523],{},"rgba(0, 0, 0, 0.039)",", Chrome serializes it to 0.04)",[196,2526,2527,2530],{},[211,2528,2529],{},"focus ring",[211,2531,2532,2533,20,2536,20,2539,2542,2543],{},"on a tab: ",[17,2534,2535],{},"outline: 2px solid rgb(0,0,0)",[17,2537,2538],{},"outline-offset: 1px",[17,2540,2541],{},"box-shadow: rgb(255,255,255) 0 0 0 1px","; the roving item is ",[17,2544,2545],{},"tabindex=0",[196,2547,2548,2552],{},[211,2549,2550],{},[17,2551,726],{},[211,2553,2554,2555,2558],{},"selection ",[17,2556,2557],{},"0 → 1"," while focus stays in the strip (selection only, no focus move)",[196,2560,2561,2564],{},[211,2562,2563],{},"overflow (480 px \u002F 10 tabs)",[211,2565,2566,2567,2569,2570,2573,2574,2577,2578,2581,2582,2584,2585,2587,2588,2590],{},"single tab ",[17,2568,507],{},"; both scroll buttons visible with ",[17,2571,2572],{},"aria-hidden=true","; the forward button adds ",[17,2575,2576],{},"+50"," to ",[17,2579,2580],{},"scrollLeft","; at the end \"forward\" is ",[17,2583,1508],{}," while \"backward\" works; holding \"forward\" repeats (one step on press, then every ",[17,2586,1250],{}," after ",[17,2589,1254],{},", stopping itself at the end)",[196,2592,2593,2596],{},[211,2594,2595],{},"no scrollbar while overflowing (headful Chromium, classic scrollbars)",[211,2597,2598,2599,613,2602,1310,2605,2610,2611,2613,2614,631,2618,2621,2622,2624,2625,855,2628,2631,2632,2635],{},"before: ",[17,2600,2601],{},"scroller.offsetHeight - clientHeight = 15",[17,2603,2604],{},".fui-tab-view__strip-row",[26,2606,2607],{},[17,2608,2609],{},"55",", tab still ",[17,2612,494],{},"; after hiding the native scrollbar the row is ",[26,2615,2616],{},[17,2617,1320],{},[17,2619,2620],{},"offsetHeight - clientHeight = 0"," and tab ",[17,2623,494],{},", while ",[17,2626,2627],{},"scrollWidth (998) > clientWidth (355)",[17,2629,2630],{},"scrollBy(50)"," \u002F Shift + wheel keep working — method: ",[17,2633,2634],{},"chromium.launch({ headless: false })"," (overlay-scrollbar environments cannot reproduce that 15 px)",[196,2637,2638,2641],{},[211,2639,2640],{},"width modes",[211,2642,2643,2645,2646,2648,2649,2652,2653,2655],{},[17,2644,1106],{}," is narrower than equal (content driven); ",[17,2647,1121],{}," gives unselected headers ",[17,2650,2651],{},"display: none"," with a ",[17,2654,541],{}," px icon box, while the selected tab keeps its text",[196,2657,2658,2661],{},[211,2659,2660],{},"closability \u002F overlay mode",[211,2662,2663,2666,2667,2669,2670,2673,2674,2676],{},[17,2664,2665],{},"isClosable=false"," renders no close button; a ",[17,2668,1508],{}," item reports ",[17,2671,2672],{},"aria-disabled=true","; with ",[17,2675,1614],{}," the button is absent until hover",[196,2678,2679,2682],{},[211,2680,2681],{},"close chain",[211,2683,2684,2685,2687],{},"selecting a tab and pressing ",[17,2686,700],{}," makes the consumer remove it (3 → 2) while a selection remains (forward-wrapping migration)",[196,2689,2690,2693],{},[211,2691,2692],{},"panels",[211,2694,2695,2696],{},"only the selected panel carries content, the rest are ",[17,2697,2698],{},"hidden",[196,2700,2701,2704],{},[211,2702,2703],{},"dark",[211,2705,2706,2707,2710,2711,2714],{},"selected fill ",[17,2708,2709],{},"rgb(40, 40, 40)",", foreground ",[17,2712,2713],{},"rgb(255, 255, 255)",", unselected transparent",[260,2716,2717],{},[14,2718,2719,2722,2723,2726,2727,2730,2731,2734,2735,2737,2738,2741,2742,2745],{},[26,2720,2721],{},"Two real bugs the browser run caught"," (all numeric assertions were green at the time):\n① kebab-case template props (",[17,2724,2725],{},":is-closable=\"false\"",") keep the key ",[17,2728,2729],{},"is-closable"," in the ",[26,2732,2733],{},"raw vnode props",", so matching only camelCase treated ",[17,2736,2312],{}," as \"not passed\" and the close button still rendered (see ",[17,2739,2740],{},"collection.ts#readProp",");\n② the selected background is a positioned pseudo-element and, by paint order, covered the in-flow icon and text, leaving the selected tab a solid block of colour (content is now lifted to the same layer, guarded by an ",[17,2743,2744],{},"elementFromPoint"," assertion).",[185,2747,2749],{"id":2748},"implementation-notes-and-evidence-gaps","Implementation notes and evidence gaps",[838,2751,2752,2773,2785,2803],{},[841,2753,2754,351,2757,2760,2761,2764,2765,2768,2769,2772],{},[26,2755,2756],{},"Items are collected during render",[17,2758,2759],{},"collection.ts","): ",[17,2762,2763],{},"provide\u002Finject"," registration only receives data after a descendant's ",[17,2766,2767],{},"setup()",", which would leave the whole strip missing from SSR output; instead the parent reads the child vnodes' props\u002Fslots while rendering (equivalent to React's ",[17,2770,2771],{},"cloneElement","), producing the full list in a single pass.",[841,2774,2775,351,2778,2781,2782,306],{},[26,2776,2777],{},"Selection resolution is a pure function",[17,2779,2780],{},"resolveSelectedIndex","): no reactive writes during render, so SSR and hydration agree; migration results are synced back or emitted from ",[17,2783,2784],{},"onUpdated",[841,2786,2787,2790,2791,2794,2795,2798,2799,2802],{},[26,2788,2789],{},"Equal widths are measured in code",": upstream's ",[17,2792,2793],{},"UpdateTabWidths"," does the same. CSS cannot express it — the scroller's width derives from its content, so ",[17,2796,2797],{},"flex: 1 1 0"," would be circular. Until a measurement exists, CSS falls back to ",[17,2800,2801],{},"inline-size: auto"," (still clamped by min \u002F max).",[841,2804,2805,2808,2809,20,2812,2815,2816,2819,2820,2823,2824,2826,2827,2829,2830,2832,2833,2836,2837,2840,2841,2843],{},[26,2806,2807],{},"Evidence gaps",": ① the selected-background path is generated at runtime with ",[17,2810,2811],{},"StringCchPrintf",[17,2813,2814],{},"XamlReader::Load",", so no literal string exists in the repo to compare against; ② the durations\u002Fkeyframes of the three ",[17,2817,2818],{},"ThemeTransition","s (",[17,2821,2822],{},"AddDeleteThemeTransition"," etc.) and the drag theme animations live outside the control directory; ③ high-contrast colours all come from the OS at runtime; ④ the ",[17,2825,1833],{}," → ",[17,2828,1837],{}," implicit conversion for ",[17,2831,434],{}," is unproven; ⑤ upstream's ",[17,2834,2835],{},"TabViewTests.KeyboardTest"," is marked ",[17,2838,2839],{},"Ignore"," (#7546), so ",[17,2842,781],{},"-class semantics are reference only.",[2845,2846,2847],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":38,"searchDepth":88,"depth":88,"links":2849},[2850,2851,2852,2853,2854,2856,2857,2858,2859,2863,2864],{"id":187,"depth":88,"text":188},{"id":309,"depth":88,"text":310},{"id":653,"depth":88,"text":654},{"id":835,"depth":88,"text":836},{"id":1059,"depth":88,"text":2855},"Width modes (tabWidthMode)",{"id":1217,"depth":88,"text":1218},{"id":1417,"depth":88,"text":1418},{"id":1705,"depth":88,"text":1706},{"id":1871,"depth":88,"text":1872,"children":2860},[2861,2862],{"id":1876,"depth":94,"text":19},{"id":2231,"depth":94,"text":23},{"id":2408,"depth":88,"text":2409},{"id":2748,"depth":88,"text":2749},"[object Object]","md",{},null,true,"\u002Fen\u002Fcomponents\u002Ftab-view",{"title":5,"description":2872},{"A tab container":2873,"nav":2874},"equal, size-to-content and compact widths, an overflow-scrolling tab strip and closable tabs, with keyboard and focus behaviour aligned to WinUI TabView.",{"title":5},"en\u002Fcomponents\u002Ftab-view","M31cwib5DcM6ZH4eezb5RuAW1rXwIMyrLbEAjdo_tBY",{"id":2878,"title":2879,"body":2880,"description":5367,"extension":2866,"meta":5368,"nav":5369,"navigation":2869,"path":5370,"seo":5371,"stem":5372,"__hash__":5373},"content\u002Fcomponents\u002Ftab-view.md","Tab View 选项卡",{"type":7,"value":2881,"toc":5350},[2882,2885,2897,2949,3016,3019,3077,3114,3117,3252,3257,3412,3416,3435,3538,3559,3569,3572,3668,3765,3771,3837,3908,3911,3953,4007,4024,4032,4081,4084,4215,4236,4260,4341,4345,4484,4486,4490,4694,4758,4809,4813,4928,4972,4976,4989,5242,5269,5272,5348],[10,2883,2879],{"id":2884},"tab-view-选项卡",[14,2886,2887,20,2889,2891,2892,2896],{},[17,2888,19],{},[17,2890,23],{}," 对位 WinUI 3 \u002F Windows App SDK 的 ",[26,2893,2894],{},[17,2895,30],{},"：一条可横向滚动的 tab 条 + 一个只显示选中项的内容区，支持关闭按钮、新建按钮、三种宽度模式，键位与焦点表现逐条抄源码。",[33,2898,2900],{"className":35,"code":2899,"language":37,"meta":38,"style":38},"\u003CFluereTabView v-model:selected-index=\"selected\" label=\"选项卡\">\n  \u003CFluereTabViewItem header=\"文档\" :is-closable=\"true\">面板内容\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"图片\">面板内容\u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,2901,2902,2931,2936,2941],{"__ignoreMap":38},[42,2903,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924,2926,2929],{"class":44,"line":45},[42,2905,49],{"class":48},[42,2907,19],{"class":52},[42,2909,56],{"class":55},[42,2911,59],{"class":48},[42,2913,62],{"class":55},[42,2915,65],{"class":48},[42,2917,69],{"class":68},[42,2919,72],{"class":48},[42,2921,69],{"class":68},[42,2923,77],{"class":55},[42,2925,65],{"class":48},[42,2927,2928],{"class":68},"\"选项卡\"",[42,2930,85],{"class":48},[42,2932,2933],{"class":44,"line":88},[42,2934,2935],{"class":48},"  \u003CFluereTabViewItem header=\"文档\" :is-closable=\"true\">面板内容\u003C\u002FFluereTabViewItem>\n",[42,2937,2938],{"class":44,"line":94},[42,2939,2940],{"class":48},"  \u003CFluereTabViewItem header=\"图片\">面板内容\u003C\u002FFluereTabViewItem>\n",[42,2942,2943,2945,2947],{"class":44,"line":100},[42,2944,103],{"class":48},[42,2946,19],{"class":52},[42,2948,85],{"class":48},[109,2950,2952,2956],{"title":2951},"基础形态：图标 + 文本 + 面板",[113,2953,2954],{"v-slot:preview":38},[116,2955],{},[113,2957,2958],{"v-slot:code":38},[33,2959,2961],{"className":35,"code":2960,"language":37,"meta":38,"style":38},"\u003CFluereTabView v-model:selected-index=\"selected\" label=\"示例选项卡\">\n  \u003CFluereTabViewItem v-for=\"tab in tabs\" :key=\"tab.title\" :header=\"tab.title\">\n    \u003Ctemplate #icon>\u003Ccomponent :is=\"tab.icon\" :size=\"16\" \u002F>\u003C\u002Ftemplate>\n    \u003Cdiv class=\"p-fluent-l\">…\u003C\u002Fdiv>\n  \u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,2962,2963,2992,2996,3000,3004,3008],{"__ignoreMap":38},[42,2964,2965,2967,2969,2971,2973,2975,2977,2979,2981,2983,2985,2987,2990],{"class":44,"line":45},[42,2966,49],{"class":48},[42,2968,19],{"class":52},[42,2970,56],{"class":55},[42,2972,59],{"class":48},[42,2974,62],{"class":55},[42,2976,65],{"class":48},[42,2978,69],{"class":68},[42,2980,72],{"class":48},[42,2982,69],{"class":68},[42,2984,77],{"class":55},[42,2986,65],{"class":48},[42,2988,2989],{"class":68},"\"示例选项卡\"",[42,2991,85],{"class":48},[42,2993,2994],{"class":44,"line":88},[42,2995,158],{"class":48},[42,2997,2998],{"class":44,"line":94},[42,2999,163],{"class":48},[42,3001,3002],{"class":44,"line":100},[42,3003,168],{"class":48},[42,3005,3006],{"class":44,"line":171},[42,3007,174],{"class":48},[42,3009,3010,3012,3014],{"class":44,"line":177},[42,3011,103],{"class":48},[42,3013,19],{"class":52},[42,3015,85],{"class":48},[185,3017,3018],{"id":3018},"版本与证据口径",[190,3020,3021,3031],{},[193,3022,3023],{},[196,3024,3025,3028],{},[199,3026,3027],{},"项",[199,3029,3030],{},"值",[206,3032,3033,3046,3059],{},[196,3034,3035,3038],{},[211,3036,3037],{},"规格源 tag",[211,3039,3040,3042,3043,3045],{},[17,3041,218],{},"（commit ",[17,3044,222],{},"）",[196,3047,3048,3051],{},[211,3049,3050],{},"关键文件",[211,3052,3053,20,3055,20,3057],{},[17,3054,233],{},[17,3056,236],{},[17,3058,239],{},[196,3060,3061,3064],{},[211,3062,3063],{},"内建文案",[211,3065,3066,3067,3070,3071,3073,3074,3076],{},"关闭 \u002F 新建 \u002F 滚动 \u002F 播报共 7 条",[26,3068,3069],{},"逐字","取自上游 ",[17,3072,254],{},"（见 ",[17,3075,258],{}," 的对照表）",[260,3078,3079,3096],{},[14,3080,3081,3086,3087,3089,3090,3092,3093,3095],{},[26,3082,3083,3085],{},[17,3084,268],{}," 不采纳","：上游存在 ",[17,3088,273],{},"（已挂进 ",[17,3091,277],{},"），本库沿用 0.5.1 ",[17,3094,281],{}," 的裁定 —— 不读、不参考、不产生对应分支。",[14,3097,3098,3103,3104,295,3106,295,3108,3110,3111,3113],{},[26,3099,3100,3101],{},"不存在 ",[17,3102,290],{},"：",[17,3105,294],{},[17,3107,298],{},[17,3109,301],{}," \u002F 两个 AutomationPeer 的公开 API 全部写在 ",[17,3112,305],{}," 里。",[185,3115,3116],{"id":3116},"模板与几何",[190,3118,3119,3129],{},[193,3120,3121],{},[196,3122,3123,3126],{},[199,3124,3125],{},"结构",[199,3127,3128],{},"内容",[206,3130,3131,3145,3172,3195,3218,3230],{},[196,3132,3133,3136],{},[211,3134,3135],{},"根",[211,3137,3138,3139,3141,3142,3144],{},"两行：",[17,3140,335],{},"（tab 条）\u002F ",[17,3143,339],{},"（内容区）",[196,3146,3147,3150],{},[211,3148,3149],{},"tab 条四列",[211,3151,3152,3154,3155,3157,3158,3160,3161,3163,3164,3166,3167,3154,3169,3171],{},[17,3153,350],{},"（",[17,3156,354],{},"）| ",[17,3159,335],{},"（tab 条）| ",[17,3162,335],{},"（新建按钮，容器 ",[17,3165,364],{},"、底部对齐）| ",[17,3168,339],{},[17,3170,370],{},"），四列下方一条 1px 底边线",[196,3173,3174,3177],{},[211,3175,3176],{},"顶部留白",[211,3178,3179,3180,3182,3183,3185,3186,3188,3189,3191,3192],{},"tab 条上方 ",[26,3181,2492],{}," 来自 ",[17,3184,382],{},"（经 ",[17,3187,386],{}," 传到 ",[17,3190,390],{},"），",[26,3193,3194],{},"不是 margin",[196,3196,3197,3200],{},[211,3198,3199],{},"tab 项三列",[211,3201,3202,406,3204,406,3206,3208,3209,3211,3212,3215,3216],{},[17,3203,405],{},[17,3205,409],{},[17,3207,412],{},"；",[17,3210,416],{}," 原文",[26,3213,3214],{},"没有 Margin","，两侧间距全部来自 ",[17,3217,424],{},[196,3219,3220,3223],{},[211,3221,3222],{},"底边线",[211,3224,3225,3154,3227,3229],{},[17,3226,434],{},[17,3228,437],{},"，1px）",[196,3231,3232,3235],{},[211,3233,3234],{},"选中指示条",[211,3236,3237,3239,3240,3243,3244,3246,3247,3249,3250],{},[17,3238,448],{},"（顶部圆角 8、左右各外扩 4px、底部两侧是半径 4 的",[26,3241,3242],{},"内凹","圆角）+ 两个 4×4 弧块（",[17,3245,456],{},"），三者都 ",[17,3248,460],{},"，选中时才 ",[17,3251,464],{},[14,3253,3254,3255,3103],{},"几何值逐条来自 ",[17,3256,471],{},[190,3258,3259,3268],{},[193,3260,3261],{},[196,3262,3263,3266],{},[199,3264,3265],{},"量",[199,3267,3030],{},[206,3269,3270,3281,3295,3308,3322,3340,3356,3373,3385,3399],{},[196,3271,3272,3275],{},[211,3273,3274],{},"tab 最小高度",[211,3276,3277,3154,3279,3045],{},[17,3278,494],{},[17,3280,497],{},[196,3282,3283,3286],{},[211,3284,3285],{},"tab 最小 \u002F 最大宽度",[211,3287,3288,295,3290,3154,3292,3045],{},[17,3289,507],{},[17,3291,510],{},[26,3293,3294],{},"只在 Equal 模式经代码生效",[196,3296,3297,3300],{},[211,3298,3299],{},"tab 内边距",[211,3301,3302,3304,3305,3307],{},[17,3303,523],{},"（关闭按钮可见）\u002F ",[17,3306,527],{},"（不可见）",[196,3309,3310,3313],{},[211,3311,3312],{},"header 字号 \u002F 图标盒",[211,3314,3315,295,3317,3319,3320,3045],{},[17,3316,538],{},[17,3318,541],{},"（图标间距 ",[17,3321,545],{},[196,3323,3324,3327],{},[211,3325,3326],{},"关闭按钮",[211,3328,3329,3331,3332,3334,3335,3337,3338],{},[17,3330,555],{},"、圆角 ",[17,3333,559],{},"、字号 ",[17,3336,538],{},"、左边距 ",[17,3339,559],{},[196,3341,3342,3345],{},[211,3343,3344],{},"新建按钮",[211,3346,3347,3331,3349,3334,3351,3353,3354],{},[17,3348,555],{},[17,3350,559],{},[17,3352,538],{},"、容器 ",[17,3355,582],{},[196,3357,3358,3361],{},[211,3359,3360],{},"滚动按钮",[211,3362,3363,3365,3366,3368,3369,295,3371],{},[17,3364,555],{},"、字形字号 ",[17,3367,595],{},"；容器 ",[17,3370,599],{},[17,3372,602],{},[196,3374,3375,3378],{},[211,3376,3377],{},"分隔线",[211,3379,3380,3382,3383],{},[17,3381,612],{},"、",[17,3384,616],{},[196,3386,3387,3390],{},[211,3388,3389],{},"边框",[211,3391,3392,3394,3395,20,3397],{},[17,3393,626],{},"；选中态 ",[17,3396,630],{},[17,3398,634],{},[196,3400,3401,3404],{},[211,3402,3403],{},"圆角",[211,3405,3406,3407,3409,3410,650],{},"选中背景顶角 ",[17,3408,645],{},"(8)、三个按钮 ",[17,3411,649],{},[185,3413,3415],{"id":3414},"键盘逐条对齐源码","键盘（逐条对齐源码）",[14,3417,3418,1310,3420,3425,3426,3428,3429,3431,3432,3434],{},[17,3419,659],{},[26,3421,3422,3423],{},"没有 ",[17,3424,665],{},"，只有三个 ",[17,3427,669],{},"（作用域 = 该 TabView，焦点在内容区里也生效）+ 新建按钮的一条 ",[17,3430,673],{},"；方向键在 ",[17,3433,294],{}," 级。",[190,3436,3437,3450],{},[193,3438,3439],{},[196,3440,3441,3444,3447],{},[199,3442,3443],{},"触发键",[199,3445,3446],{},"前置条件",[199,3448,3449],{},"效果",[206,3451,3452,3474,3487,3500,3521],{},[196,3453,3454,3458,3463],{},[211,3455,3456],{},[17,3457,700],{},[211,3459,3460,3461],{},"选中项存在且 ",[17,3462,706],{},[211,3464,3465,3466,3154,3468,3470,3471],{},"抛 ",[17,3467,712],{},[17,3469,715],{},"）；",[26,3472,3473],{},"不删除 tab",[196,3475,3476,3480,3482],{},[211,3477,3478],{},[17,3479,726],{},[211,3481,729],{},[211,3483,3484,3485],{},"向后环形换选中（跳过禁用项）：",[17,3486,735],{},[196,3488,3489,3493,3495],{},[211,3490,3491],{},[17,3492,742],{},[211,3494,729],{},[211,3496,3497,3498],{},"向前环形换选中：",[17,3499,750],{},[196,3501,3502,3509,3512],{},[211,3503,3504,295,3506,3508],{},[17,3505,757],{},[17,3507,760],{},"（焦点在 tab 条内）",[211,3510,3511],{},"不含 Alt \u002F Ctrl \u002F Meta",[211,3513,3514,3515,3208,3518],{},"在焦点环上移动焦点 —— ",[17,3516,3517],{},"tab1 → tab1 关闭按钮 → tab2 → … → 新建按钮 → 回到 tab1",[26,3519,3520],{},"不改选中",[196,3522,3523,3529,3532],{},[211,3524,3525,295,3527],{},[17,3526,781],{},[17,3528,784],{},[211,3530,3531],{},"焦点在 tab 上",[211,3533,3534,3535,3537],{},"选中该 tab（底座 ",[17,3536,793],{}," 的键位）",[14,3539,3540,3543,3544,295,3546,295,3548,295,3550,295,3552,295,3554,295,3556,3558],{},[26,3541,3542],{},"源码里没有的键","（负面证据，不要按直觉补）：",[17,3545,803],{},[17,3547,806],{},[17,3549,809],{},[17,3551,812],{},[17,3553,815],{},[17,3555,818],{},[17,3557,821],{},"。它们属宿主应用职责（WinUI Gallery \u002F Terminal 各自绑定）。",[260,3560,3561],{},[14,3562,3563,3564,295,3566,3568],{},"浏览器限制：",[17,3565,726],{},[17,3567,700],{}," 在 Chrome \u002F Edge 里是「切换 \u002F 关闭浏览器标签页」的保留快捷键，页面可能收不到 keydown；组件照实现，可用性取决于宿主环境。",[185,3570,3571],{"id":3571},"选择与关闭语义",[838,3573,3574,3590,3608,3632,3647,3656],{},[841,3575,3576,3154,3579,3581,3582,3584,3585,295,3587,3589],{},[26,3577,3578],{},"焦点移动不改选中",[17,3580,848],{},"）：方向键只挪焦点，",[17,3583,726],{}," \u002F 点击 \u002F ",[17,3586,781],{},[17,3588,784],{}," 才改选中。",[841,3591,3592,3595,3596,3598,3599,3601,3602,3604,3605,3607],{},[26,3593,3594],{},"组件绝不自行删除 tab","：关闭按钮与 ",[17,3597,700],{}," 都只抛 ",[17,3600,712],{},"（对齐 ",[17,3603,873],{},"，",[17,3606,876],{}," 合并进同一个事件）。删不删、删完选谁由消费方决定。",[841,3609,3610,3613,3614,3616,3617,3620,3621,3624,3625,3628,3629,3631],{},[26,3611,3612],{},"删掉当前选中项时自动迁移","：按 ",[17,3615,886],{}," 的规则 —— ",[17,3618,3619],{},"start = min(被移除下标, 剩余数 - 1)","，从该位置",[26,3622,3623],{},"向后环形","找第一个可用项；一圈都没有就不选中任何 tab。在",[26,3626,3627],{},"受控","模式下这个结果通过 ",[17,3630,902],{}," 抛回。",[841,3633,3634,3637,3638,3640,3641,3643,3644,3646],{},[26,3635,3636],{},"按身份跟随","：给子项 ",[17,3639,911],{},"（或 ",[17,3642,915],{},"）后，在选中项之前插入 \u002F 重排不会改变选中项（等价 WinUI 的 ",[17,3645,919],{},"）；没给稳定标识时退回下标语义。",[841,3648,3649,3652,3653,3655],{},[26,3650,3651],{},"焦点归还","：切换 tab 时若焦点原本在旧面板里（面板会被卸载），焦点会送进新面板的第一个可聚焦元素；面板里没有可聚焦元素时回落到该 tab 本身（对齐 ",[17,3654,929],{},"）。",[841,3657,3658,3661,3662,3664,3665,3667],{},[26,3659,3660],{},"新增按钮只抛事件","，并额外用 ",[17,3663,938],{}," 播报「已添加新选项卡。」（对应上游的 UIA ",[17,3666,942],{}," 通知）。",[109,3669,3671,3675],{"title":3670},"关闭与新建：数据由消费方管理",[113,3672,3673],{"v-slot:preview":38},[950,3674],{},[113,3676,3677],{"v-slot:code":38},[33,3678,3680],{"className":35,"code":3679,"language":37,"meta":38,"style":38},"\u003CFluereTabView\n  v-model:selected-index=\"selected\"\n  label=\"可关闭选项卡\"\n  @tab-close-requested=\"onCloseRequested\"\n  @add-tab-button-click=\"onAddClick\"\n>\n  \u003CFluereTabViewItem v-for=\"(id, index) in openIds\" :key=\"id\" :header=\"titleOf(id, index)\">\n    …\n  \u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,3681,3682,3688,3704,3713,3727,3741,3745,3749,3753,3757],{"__ignoreMap":38},[42,3683,3684,3686],{"class":44,"line":45},[42,3685,49],{"class":48},[42,3687,965],{"class":52},[42,3689,3690,3692,3694,3696,3698,3700,3702],{"class":44,"line":88},[42,3691,970],{"class":55},[42,3693,59],{"class":48},[42,3695,62],{"class":55},[42,3697,65],{"class":48},[42,3699,69],{"class":68},[42,3701,72],{"class":48},[42,3703,983],{"class":68},[42,3705,3706,3708,3710],{"class":44,"line":94},[42,3707,988],{"class":55},[42,3709,65],{"class":48},[42,3711,3712],{"class":68},"\"可关闭选项卡\"\n",[42,3714,3715,3717,3719,3721,3723,3725],{"class":44,"line":100},[42,3716,998],{"class":48},[42,3718,1001],{"class":55},[42,3720,65],{"class":48},[42,3722,69],{"class":68},[42,3724,1008],{"class":48},[42,3726,983],{"class":68},[42,3728,3729,3731,3733,3735,3737,3739],{"class":44,"line":171},[42,3730,998],{"class":48},[42,3732,1017],{"class":55},[42,3734,65],{"class":48},[42,3736,69],{"class":68},[42,3738,1024],{"class":48},[42,3740,983],{"class":68},[42,3742,3743],{"class":44,"line":177},[42,3744,85],{"class":48},[42,3746,3747],{"class":44,"line":1033},[42,3748,1036],{"class":48},[42,3750,3751],{"class":44,"line":1039},[42,3752,1042],{"class":48},[42,3754,3755],{"class":44,"line":1045},[42,3756,174],{"class":48},[42,3758,3759,3761,3763],{"class":44,"line":1050},[42,3760,103],{"class":48},[42,3762,19],{"class":52},[42,3764,85],{"class":48},[185,3766,3768,3769,3045],{"id":3767},"宽度模式tabwidthmode","宽度模式（",[17,3770,1063],{},[190,3772,3773,3784],{},[193,3774,3775],{},[196,3776,3777,3779,3781],{},[199,3778,3030],{},[199,3780,1074],{},[199,3782,3783],{},"语义",[206,3785,3786,3804,3817],{},[196,3787,3788,3793,3797],{},[211,3789,3790,3792],{},[17,3791,1086],{},"（缺省）",[211,3794,3795],{},[17,3796,1092],{},[211,3798,3799,3800,3803],{},"每项宽度 = ",[17,3801,3802],{},"clamp(可用宽 \u002F tab 数, 100, 240)","（代码测量，见组件注释）",[196,3805,3806,3810,3814],{},[211,3807,3808],{},[17,3809,1106],{},[211,3811,3812],{},[17,3813,1111],{},[211,3815,3816],{},"宽度由内容决定，不设 item 宽",[196,3818,3819,3823,3827],{},[211,3820,3821],{},[17,3822,1121],{},[211,3824,3825],{},[17,3826,1126],{},[211,3828,3829,3830,3832,3833,3836],{},"同 ",[17,3831,1106],{},"，但",[26,3834,3835],{},"未被选中","的 tab 折叠成只剩图标（选中项强制恢复）",[109,3838,3840,3844],{"title":3839},"三种宽度模式对照",[113,3841,3842],{"v-slot:preview":38},[1143,3843],{},[113,3845,3846],{"v-slot:code":38},[33,3847,3849],{"className":35,"code":3848,"language":37,"meta":38,"style":38},"\u003CFluereTabView :tab-width-mode=\"mode\" :default-selected-index=\"0\" label=\"宽度模式\">\n  \u003CFluereTabViewItem header=\"选项卡一\">…\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"选项卡二\">…\u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,3850,3851,3890,3895,3900],{"__ignoreMap":38},[42,3852,3853,3855,3857,3859,3861,3863,3865,3867,3869,3871,3873,3875,3877,3879,3881,3883,3885,3888],{"class":44,"line":45},[42,3854,49],{"class":48},[42,3856,19],{"class":52},[42,3858,1160],{"class":48},[42,3860,1163],{"class":55},[42,3862,65],{"class":48},[42,3864,69],{"class":68},[42,3866,1170],{"class":48},[42,3868,69],{"class":68},[42,3870,1160],{"class":48},[42,3872,1177],{"class":55},[42,3874,65],{"class":48},[42,3876,69],{"class":68},[42,3878,1185],{"class":1184},[42,3880,69],{"class":68},[42,3882,77],{"class":55},[42,3884,65],{"class":48},[42,3886,3887],{"class":68},"\"宽度模式\"",[42,3889,85],{"class":48},[42,3891,3892],{"class":44,"line":88},[42,3893,3894],{"class":48},"  \u003CFluereTabViewItem header=\"选项卡一\">…\u003C\u002FFluereTabViewItem>\n",[42,3896,3897],{"class":44,"line":94},[42,3898,3899],{"class":48},"  \u003CFluereTabViewItem header=\"选项卡二\">…\u003C\u002FFluereTabViewItem>\n",[42,3901,3902,3904,3906],{"class":44,"line":100},[42,3903,103],{"class":48},[42,3905,19],{"class":52},[42,3907,85],{"class":48},[185,3909,3910],{"id":3910},"溢出滚动",[14,3912,3913,3914,3103,3917,3919,3920,3922,3923,3925,3926,3928,3929,3932,3933,3935,3936,3939,3940,3942,3943,3945,3946,3948,3949,3604,3951,3655],{},"放不下时 ",[26,3915,3916],{},"tab 先被压到下限、再溢出",[17,3918,1086],{}," 模式（缺省）的单 tab 宽是 ",[17,3921,3802],{},"，所以空间不够时先压到 ",[17,3924,1234],{},"；一旦真的溢出（",[17,3927,1238],{},"），tab 条两侧出现滚动按钮，步长 ",[17,3930,3931],{},"50px","，贴左禁止「向后」、贴右禁止「向前」（判定阈值 ",[17,3934,1242],{},"），并且",[26,3937,3938],{},"按住即连续滚动","：按下立刻滚一次，",[17,3941,1254],{}," 后每 ",[17,3944,1250],{}," 重复一次（对齐上游 ",[17,3947,1258],{}," 的 ",[17,3950,1262],{},[17,3952,1265],{},[14,3954,3955,3958,3959,3961,3962,3964,3965,3968,3969,3971,3972,3974,3975,3154,3977,3979,3980,3982,3983,20,3985,1310,3987,3990,3991,4000,4001,4003,4004,4006],{},[26,3956,3957],{},"溢出时不画滚动条","：上游 ",[17,3960,1275],{}," 的模板（",[17,3963,1279],{},"）里",[26,3966,3967],{},"没有滚动条部件","，只有 ",[17,3970,1287],{}," 与左右两个箭头容器 —— ",[17,3973,1291],{}," 只绑给这两个容器的 ",[17,3976,1295],{},[17,3978,1298],{},"），也就是说它只决定「箭头出不出现」。本库照此实现：",[17,3981,1302],{}," 保留原生滚动（滚轮 \u002F Shift + 滚轮 \u002F 触摸 \u002F 横向滚轮增量），再用 ",[17,3984,1306],{},[17,3986,1309],{},[26,3988,3989],{},"不画原生滚动条","。于是 ",[26,3992,3993,3994,3996,3997,3999],{},"tab 高恒为 ",[17,3995,494],{},"、tab 条行高恒为 ",[17,3998,1320],{},"（8 + 32）","：经典滚动条会给行加一条 ≈ ",[17,4002,1324],{}," 的高度（有头 Chromium 实测 ",[17,4005,1328],{},"），既撑高 tab 条又挤压内容。",[14,4008,4009,4010,20,4012,4014,4015,4018,4019,20,4021,4023],{},"两个按钮 ",[17,4011,1335],{},[17,4013,1338],{}," —— ",[26,4016,4017],{},"不进 Tab 序、对读屏隐藏","，与 WinUI 的 ",[17,4020,1346],{},[17,4022,1349],{}," 一致。隐藏滚动条后鼠标侧只剩箭头与滚轮（WinUI 的 tab 条本来就没有滚动条，因此这是对齐而不是让步）。",[260,4025,4026],{},[14,4027,4028,4029,4031],{},"已知注意事项：在 ",[17,4030,1358],{}," 内部（如本文档站），竖向滚轮按「最近的可滚容器独占」规则会被外层接管 —— 指针停在 tab 条上时 Shift + 滚轮不会滚动 tab 条（横向滚轮增量 \u002F 触摸板横向滑动不受影响）。独立的页面里 Shift + 滚轮可正常横向滚动 tab 条（最小复现已验证）。这是滚动链归属的既有行为，不是滚动条隐藏引入的。",[109,4033,4035,4039],{"title":4034},"十个 tab 挤在 480px 里",[113,4036,4037],{"v-slot:preview":38},[1366,4038],{},[113,4040,4041],{"v-slot:code":38},[33,4042,4044],{"className":35,"code":4043,"language":37,"meta":38,"style":38},"\u003Cdiv class=\"w-[480px] overflow-hidden\">\n  \u003CFluereTabView :default-selected-index=\"0\" label=\"溢出的选项卡条\">\n    \u003CFluereTabViewItem v-for=\"title in titles\" :key=\"title\" :header=\"title\">…\u003C\u002FFluereTabViewItem>\n  \u003C\u002FFluereTabView>\n\u003C\u002Fdiv>\n",[17,4045,4046,4060,4065,4069,4073],{"__ignoreMap":38},[42,4047,4048,4050,4052,4054,4056,4058],{"class":44,"line":45},[42,4049,49],{"class":48},[42,4051,1381],{"class":52},[42,4053,1384],{"class":55},[42,4055,65],{"class":48},[42,4057,1389],{"class":68},[42,4059,85],{"class":48},[42,4061,4062],{"class":44,"line":88},[42,4063,4064],{"class":48},"  \u003CFluereTabView :default-selected-index=\"0\" label=\"溢出的选项卡条\">\n",[42,4066,4067],{"class":44,"line":94},[42,4068,1401],{"class":48},[42,4070,4071],{"class":44,"line":100},[42,4072,1406],{"class":48},[42,4074,4075,4077,4079],{"class":44,"line":171},[42,4076,103],{"class":48},[42,4078,1381],{"class":52},[42,4080,85],{"class":48},[185,4082,4083],{"id":4083},"状态与关闭按钮",[190,4085,4086,4099],{},[193,4087,4088],{},[196,4089,4090,4093,4096],{},[199,4091,4092],{},"状态",[199,4094,4095],{},"触发",[199,4097,4098],{},"表现（token）",[206,4100,4101,4115,4127,4141,4159,4173,4187,4204],{},[196,4102,4103,4105,4107],{},[211,4104,1440],{},[211,4106,729],{},[211,4108,4109,4110,4112,4113],{},"底 ",[17,4111,1448],{},"（透明）、字 ",[17,4114,1452],{},[196,4116,4117,4119,4122],{},[211,4118,1457],{},[211,4120,4121],{},"指针悬停（未选中 \u002F 未禁用）",[211,4123,4109,4124,4126],{},[17,4125,1465],{},"；右侧分隔线隐藏",[196,4128,4129,4131,4134],{},[211,4130,1471],{},[211,4132,4133],{},"指针按下（未选中 \u002F 未禁用）",[211,4135,4109,4136,4138,4139],{},[17,4137,1479],{},"、字 ",[17,4140,1483],{},[196,4142,4143,4145,4148],{},[211,4144,72],{},[211,4146,4147],{},"选中",[211,4149,4109,4150,4152,4153,4155,4156,4158],{},[17,4151,1494],{}," + 顶角 8 + 1px ",[17,4154,1498],{}," 描边 + 字 ",[17,4157,1502],{}," + SemiBold",[196,4160,4161,4163,4167],{},[211,4162,1508],{},[211,4164,4165],{},[17,4166,1508],{},[211,4168,4169,4170,4172],{},"字 ",[17,4171,1518],{},"、不可点、不进焦点环",[196,4174,4175,4177,4180],{},[211,4176,1524],{},[211,4178,4179],{},"键盘聚焦",[211,4181,4182,4184,4185,3045],{},[17,4183,1533],{}," 双层焦点矩形（外 2px + 内 1px，等价 ",[17,4186,1537],{},[196,4188,4189,4192,4195],{},[211,4190,4191],{},"关闭按钮 hover\u002Fpressed",[211,4193,4194],{},"指针悬停 \u002F 按下关闭按钮",[211,4196,4109,4197,295,4199,4201,4202],{},[17,4198,1550],{},[17,4200,1553],{},"，字 ",[17,4203,1502],{},[196,4205,4206,4209,4212],{},[211,4207,4208],{},"新建按钮 hover\u002Fpressed",[211,4210,4211],{},"指针悬停 \u002F 按下",[211,4213,4214],{},"同上",[14,4216,4217,4220,4221,4223,4224,4226,4227,4229,4230,4235],{},[26,4218,4219],{},"所有状态都是瞬时切换","：上游 TabViewItem 的 hover \u002F pressed \u002F selected \u002F disabled 全部是 ",[17,4222,1575],{},"，且所有 ",[17,4225,1579],{},"，文件里没有任何 ",[17,4228,1583],{},"。因此本组件",[26,4231,4232,4233],{},"不写任何 ",[17,4234,1589],{},"。",[14,4237,4238,4240,4241,4243,4244,4246,4247,4253,4254,4256,4257,4259],{},[17,4239,1594],{}," 三档：",[17,4242,1598],{},"（缺省）与 ",[17,4245,1602],{}," 走",[26,4248,4249,4250,4252],{},"同一个 ",[17,4251,1609],{}," 分支","（总是显示），只有 ",[17,4255,1614],{}," 是「悬停或选中才显示」—— 这是源码字面行为，不要按直觉把 ",[17,4258,1598],{}," 当成智能判断。",[109,4261,4263,4267],{"title":4262},"可关闭性、禁用与 on-pointer-over",[113,4264,4265],{"v-slot:preview":38},[1625,4266],{},[113,4268,4269],{"v-slot:code":38},[33,4270,4272],{"className":35,"code":4271,"language":37,"meta":38,"style":38},"\u003CFluereTabView :close-button-overlay-mode=\"overlayMode\" :default-selected-index=\"0\" label=\"状态\">\n  \u003CFluereTabViewItem header=\"可关闭（选中）\">…\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"可关闭（未选中）\">…\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"不可关闭\" :is-closable=\"false\">…\u003C\u002FFluereTabViewItem>\n  \u003CFluereTabViewItem header=\"禁用\" disabled>…\u003C\u002FFluereTabViewItem>\n\u003C\u002FFluereTabView>\n",[17,4273,4274,4313,4318,4323,4328,4333],{"__ignoreMap":38},[42,4275,4276,4278,4280,4282,4284,4286,4288,4290,4292,4294,4296,4298,4300,4302,4304,4306,4308,4311],{"class":44,"line":45},[42,4277,49],{"class":48},[42,4279,19],{"class":52},[42,4281,1160],{"class":48},[42,4283,1644],{"class":55},[42,4285,65],{"class":48},[42,4287,69],{"class":68},[42,4289,1651],{"class":48},[42,4291,69],{"class":68},[42,4293,1160],{"class":48},[42,4295,1177],{"class":55},[42,4297,65],{"class":48},[42,4299,69],{"class":68},[42,4301,1185],{"class":1184},[42,4303,69],{"class":68},[42,4305,77],{"class":55},[42,4307,65],{"class":48},[42,4309,4310],{"class":68},"\"状态\"",[42,4312,85],{"class":48},[42,4314,4315],{"class":44,"line":88},[42,4316,4317],{"class":48},"  \u003CFluereTabViewItem header=\"可关闭（选中）\">…\u003C\u002FFluereTabViewItem>\n",[42,4319,4320],{"class":44,"line":94},[42,4321,4322],{"class":48},"  \u003CFluereTabViewItem header=\"可关闭（未选中）\">…\u003C\u002FFluereTabViewItem>\n",[42,4324,4325],{"class":44,"line":100},[42,4326,4327],{"class":48},"  \u003CFluereTabViewItem header=\"不可关闭\" :is-closable=\"false\">…\u003C\u002FFluereTabViewItem>\n",[42,4329,4330],{"class":44,"line":171},[42,4331,4332],{"class":48},"  \u003CFluereTabViewItem header=\"禁用\" disabled>…\u003C\u002FFluereTabViewItem>\n",[42,4334,4335,4337,4339],{"class":44,"line":177},[42,4336,103],{"class":48},[42,4338,19],{"class":52},[42,4340,85],{"class":48},[185,4342,4344],{"id":4343},"与-winui-的差异逐条","与 WinUI 的差异（逐条）",[1708,4346,4347,4371,4387,4400,4409,4424,4439,4445,4465],{},[841,4348,4349,3103,4352,4354,4355,4358,4359,4361,4362,4364,4365,3154,4368,4370],{},[26,4350,4351],{},"子项是「数据型子组件」",[17,4353,23],{}," 不会挂载（父组件在渲染期读它的 props \u002F slots），因此它",[26,4356,4357],{},"不能"," emit；",[17,4360,876],{}," 合并进根组件的 ",[17,4363,712],{},"。子项插槽",[26,4366,4367],{},"不支持作用域参数",[17,4369,1729],{}," 拿不到值）。",[841,4372,4373,4379,4380,295,4382,295,4384,4386],{},[26,4374,4375,4376,4378],{},"子项必须是 ",[17,4377,19],{}," 的直接子元素","（可以包在 ",[17,4381,1741],{},[17,4383,1744],{},[17,4385,1747],{}," 里）。套了额外的原生元素或自定义组件时它会被忽略，并在开发期打印一条警告。",[841,4388,4389,4396,4397,4399],{},[26,4390,3422,4391,295,4393,4395],{},[17,4392,1756],{},[17,4394,1759],{}," \u002F 虚拟化","：Web 侧用 ",[17,4398,1741],{}," + 子组件即可。",[841,4401,4402,4406,4407,4235],{},[26,4403,3422,4404],{},[17,4405,1771],{},"：只抛 ",[17,4408,1775],{},[841,4410,4411,4418,4419,4421,4422,3655],{},[26,4412,4413,4415,4416],{},[17,4414,1508],{}," 属性会被底座写成 ",[17,4417,1783],{},"：浏览器与 AT 都忽略非表单元素上的该属性，禁用语义由 ",[17,4420,1791],{}," 表达（样式一律用 ",[17,4423,1795],{},[841,4425,4426,4429,4430,4432,4433,4435,4436,4438],{},[26,4427,4428],{},"header 超出时省略号","：WinUI 的 ",[17,4431,416],{}," 没设 ",[17,4434,1807],{},"（会硬裁），Web 侧用 ",[17,4437,1811],{}," 更可读 —— 这是唯一一处主动的排版差异。",[841,4440,4441,4444],{},[26,4442,4443],{},"选中背景的 4×4 内凹圆角用 CSS mask 表达","：上游是运行时生成的路径 + 两个弧块；等价几何，但不是逐像素一致（见「证据缺口」）。",[841,4446,4447,4452,4453,4455,4456,4458,4459,1310,4462,4464],{},[26,4448,4449,4451],{},[17,4450,434],{}," 的映射","：上游 Light \u002F Default 下它是指向 ",[17,4454,437],{},"（一个 ",[17,4457,1833],{},"）的别名，隐式转换路径无法从源码证实；本库按同值处理并",[26,4460,4461],{},"沿用仓库既有映射",[17,4463,1498],{},"（InfoBar \u002F ContentDialog 用的就是它）。",[841,4466,4467,4470,4471,295,4473,295,4475,4477,4478,4480,4481,4483],{},[26,4468,4469],{},"不做","：拖拽重排、tear-out 撕出、中键关闭、",[17,4472,1853],{},[17,4474,1856],{},[17,4476,1859],{}," 事件、",[17,4479,1863],{},"（其时长 \u002F 关键帧不在控件目录内）、高对比度色板（只保留 ",[17,4482,1867],{}," 焦点环兜底）。",[185,4485,1872],{"id":1871},[1874,4487,4488],{"id":1876},[17,4489,19],{},[190,4491,4492,4508],{},[193,4493,4494],{},[196,4495,4496,4499,4502,4505],{},[199,4497,4498],{},"属性（Props）",[199,4500,4501],{},"类型",[199,4503,4504],{},"默认",[199,4506,4507],{},"对应 \u002F 说明",[206,4509,4510,4529,4551,4569,4593,4611,4634,4653,4675],{},[196,4511,4512,4516,4520,4524],{},[211,4513,4514],{},[17,4515,1905],{},[211,4517,4518],{},[17,4519,1910],{},[211,4521,4522],{},[17,4523,729],{},[211,4525,4526,4528],{},[17,4527,1919],{},"；传了即受控，不传为非受控",[196,4530,4531,4535,4539,4543],{},[211,4532,4533],{},[17,4534,1927],{},[211,4536,4537],{},[17,4538,1910],{},[211,4540,4541],{},[17,4542,1185],{},[211,4544,4545,4546,4548,4549,3045],{},"非受控初始项（对齐 WinUI ",[17,4547,1941],{}," 默认 ",[17,4550,1185],{},[196,4552,4553,4557,4561,4565],{},[211,4554,4555],{},[17,4556,1063],{},[211,4558,4559],{},[17,4560,1955],{},[211,4562,4563],{},[17,4564,1960],{},[211,4566,4567],{},[17,4568,1965],{},[196,4570,4571,4575,4579,4583],{},[211,4572,4573],{},[17,4574,1594],{},[211,4576,4577],{},[17,4578,1976],{},[211,4580,4581],{},[17,4582,1981],{},[211,4584,4585,3208,4587,4589,4590,4592],{},[17,4586,1986],{},[17,4588,1598],{}," 与 ",[17,4591,1602],{}," 同行为",[196,4594,4595,4599,4603,4607],{},[211,4596,4597],{},[17,4598,1998],{},[211,4600,4601],{},[17,4602,2003],{},[211,4604,4605],{},[17,4606,2008],{},[211,4608,4609],{},[17,4610,2013],{},[196,4612,4613,4617,4621,4625],{},[211,4614,4615],{},[17,4616,2020],{},[211,4618,4619],{},[17,4620,2025],{},[211,4622,4623],{},[17,4624,729],{},[211,4626,4627,4628,4630,4631],{},"tab 条的可访问名（",[17,4629,2035],{},"）。上游 peer 无名称回退，",[26,4632,4633],{},"建议必填",[196,4635,4636,4640,4644,4648],{},[211,4637,4638],{},[17,4639,2043],{},[211,4641,4642],{},[17,4643,2048],{},[211,4645,4646],{},[17,4647,729],{},[211,4649,4650,4651,3045],{},"只影响方向键的前进方向判定（",[17,4652,2058],{},[196,4654,4655,4659,4663,4667],{},[211,4656,4657],{},[17,4658,2065],{},[211,4660,4661],{},[17,4662,2070],{},[211,4664,4665],{},[17,4666,1981],{},[211,4668,4669,4670,4672,4673],{},"只作用于滚动按钮的平滑滚动；",[17,4671,1598],{}," 尊重 ",[17,4674,2083],{},[196,4676,4677,4681,4685,4689],{},[211,4678,4679],{},[17,4680,2090],{},[211,4682,4683],{},[17,4684,2025],{},[211,4686,4687],{},[17,4688,729],{},[211,4690,4691,4692],{},"内建文案 locale，优先于 ",[17,4693,2104],{},[190,4695,4696,4709],{},[193,4697,4698],{},[196,4699,4700,4703,4706],{},[199,4701,4702],{},"事件（Emits）",[199,4704,4705],{},"载荷",[199,4707,4708],{},"说明",[206,4710,4711,4724,4745],{},[196,4712,4713,4717,4721],{},[211,4714,4715],{},[17,4716,902],{},[211,4718,4719],{},[17,4720,1910],{},[211,4722,4723],{},"选中变化；受控模式下含「迁移后的结果」",[196,4725,4726,4730,4734],{},[211,4727,4728],{},[17,4729,712],{},[211,4731,4732],{},[17,4733,2144],{},[211,4735,4736,4737,4739,4740,295,4742,4744],{},"关闭请求（",[17,4738,2150],{}," 为 ",[17,4741,2154],{},[17,4743,2157],{},"）；组件不删数据",[196,4746,4747,4751,4755],{},[211,4748,4749],{},[17,4750,1775],{},[211,4752,4753],{},[17,4754,2169],{},[211,4756,4757],{},"新建按钮点击；组件不新增 tab",[190,4759,4760,4769],{},[193,4761,4762],{},[196,4763,4764,4767],{},[199,4765,4766],{},"插槽（Slots）",[199,4768,4708],{},[206,4770,4771,4782,4797],{},[196,4772,4773,4777],{},[211,4774,4775],{},[17,4776,2192],{},[211,4778,4779,4781],{},[17,4780,23],{}," 列表（必须是直接子元素）",[196,4783,4784,4790],{},[211,4785,4786,295,4788],{},[17,4787,2204],{},[17,4789,2207],{},[211,4791,4792,4793,295,4795,3045],{},"tab 条左右两端的自定义内容（",[17,4794,354],{},[17,4796,370],{},[196,4798,4799,4803],{},[211,4800,4801],{},[17,4802,2221],{},[211,4804,4805,4806,4808],{},"新建按钮的图标（默认是 ",[17,4807,2227],{}," 字形）",[1874,4810,4811],{"id":2231},[17,4812,23],{},[190,4814,4815,4827],{},[193,4816,4817],{},[196,4818,4819,4821,4823,4825],{},[199,4820,4498],{},[199,4822,4501],{},[199,4824,4504],{},[199,4826,4507],{},[206,4828,4829,4850,4871,4889,4908],{},[196,4830,4831,4835,4839,4843],{},[211,4832,4833],{},[17,4834,2256],{},[211,4836,4837],{},[17,4838,2025],{},[211,4840,4841],{},[17,4842,2265],{},[211,4844,4845,3208,4847,4849],{},[17,4846,2270],{},[17,4848,2273],{}," 插槽优先于它",[196,4851,4852,4856,4860,4864],{},[211,4853,4854],{},[17,4855,2281],{},[211,4857,4858],{},[17,4859,2003],{},[211,4861,4862],{},[17,4863,2008],{},[211,4865,4866,4868,4869,3045],{},[17,4867,706],{},"（不是 ",[17,4870,2297],{},[196,4872,4873,4877,4881,4885],{},[211,4874,4875],{},[17,4876,1508],{},[211,4878,4879],{},[17,4880,2003],{},[211,4882,4883],{},[17,4884,2312],{},[211,4886,4887],{},[17,4888,2317],{},[196,4890,4891,4895,4899,4903],{},[211,4892,4893],{},[17,4894,2324],{},[211,4896,4897],{},[17,4898,2025],{},[211,4900,4901],{},[17,4902,729],{},[211,4904,4905,4907],{},[17,4906,2337],{},"；缺省时 AT 从 header 文本取名（对齐 peer）",[196,4909,4910,4914,4918,4922],{},[211,4911,4912],{},[17,4913,915],{},[211,4915,4916],{},[17,4917,2349],{},[211,4919,4920],{},[17,4921,729],{},[211,4923,4924,4925,4927],{},"稳定标识（等价 ",[17,4926,911],{},"），用于「按身份跟随选中」",[190,4929,4930,4938],{},[193,4931,4932],{},[196,4933,4934,4936],{},[199,4935,4766],{},[199,4937,4708],{},[206,4939,4940,4951,4963],{},[196,4941,4942,4948],{},[211,4943,4944,3154,4946,3045],{},[17,4945,2192],{},[17,4947,2380],{},[211,4949,4950],{},"面板内容；非选中时会被卸载",[196,4952,4953,4957],{},[211,4954,4955],{},[17,4956,2256],{},[211,4958,4959,4960,4962],{},"富文本标题（优先于 ",[17,4961,2256],{}," 文本）",[196,4964,4965,4969],{},[211,4966,4967],{},[17,4968,2402],{},[211,4970,4971],{},"图标（16×16 盒）",[185,4973,4975],{"id":4974},"浏览器实测可复现","浏览器实测（可复现）",[14,4977,4978,4979,4981,4982,4984,4985,4988],{},"Playwright + 系统 Chrome（1280×900 \u002F DPR 1）在文档站本页实测：基础形态用 ",[17,4980,2415],{},"（53 条断言），溢出的滚动条 \u002F 长按滚动专项用 ",[17,4983,2419],{},"（21 条断言，",[26,4986,4987],{},"必须有头"," —— 无头 \u002F overlay 滚动条环境复现不出那 15px）：",[190,4990,4991,5000],{},[193,4992,4993],{},[196,4994,4995,4997],{},[199,4996,3265],{},[199,4998,4999],{},"实测",[206,5001,5002,5014,5026,5039,5064,5077,5094,5106,5132,5170,5189,5207,5218,5228],{},[196,5003,5004,5007],{},[211,5005,5006],{},"tab 条高 \u002F 单 tab 高",[211,5008,5009,5011,5012],{},[17,5010,1320],{},"（8px 顶部留白 + 32 + 行内 1px 底边线）\u002F ",[17,5013,494],{},[196,5015,5016,5019],{},[211,5017,5018],{},"tab padding \u002F header 字号",[211,5020,5021,5023,5024],{},[17,5022,2459],{},"（关闭按钮可见，见下）\u002F ",[17,5025,2463],{},[196,5027,5028,5031],{},[211,5029,5030],{},"Equal 单 tab 宽",[211,5032,5033,5034,5036,5037],{},"行宽 718 − 左内容 2 − 新建按钮区 35 − 右内容 0 = 681 ⇒ ",[17,5035,2474],{},"（3 项）；7 项时仍按可用宽均分，溢出时落到下限 ",[17,5038,507],{},[196,5040,5041,5044],{},[211,5042,5043],{},"选中态",[211,5045,5046,5047,5049,5050,5052,5053,5055,5056,3382,5058,3382,5060,3382,5062],{},"伪元素填充 ",[17,5048,2488],{},"、顶角 ",[17,5051,2492],{},"、四边 ",[17,5054,2496],{},"、字重 ",[17,5057,2500],{},[17,5059,2503],{},[17,5061,2506],{},[17,5063,2509],{},[196,5065,5066,5069],{},[211,5067,5068],{},"未选中 hover",[211,5070,5071,5073,5074,5076],{},[17,5072,2519],{},"（令牌 ",[17,5075,2523],{},"，Chrome 序列化成 0.04）",[196,5078,5079,5082],{},[211,5080,5081],{},"焦点矩形",[211,5083,5084,5085,20,5087,20,5089,5091,5092],{},"tab 上 ",[17,5086,2535],{},[17,5088,2538],{},[17,5090,2541],{},"；roving 下聚焦项 ",[17,5093,2545],{},[196,5095,5096,5100],{},[211,5097,5098],{},[17,5099,726],{},[211,5101,5102,5103,5105],{},"选中 ",[17,5104,2557],{},"，焦点仍停在 tab 条（只改选中、不动焦点）",[196,5107,5108,5111],{},[211,5109,5110],{},"溢出（480px \u002F 10 个 tab）",[211,5112,5113,5114,5116,5117,5119,5120,5123,5124,5126,5127,3942,5129,5131],{},"单 tab ",[17,5115,507],{},"；两个滚动按钮可见且 ",[17,5118,2572],{},"；点「向前」",[17,5121,5122],{},"scrollLeft +50","；到右端后「向前」",[17,5125,1508],{},"、「向后」可用；按住「向前」会连续滚动（按下即滚一次，",[17,5128,1254],{},[17,5130,1250],{}," 一次，到右端自停）",[196,5133,5134,5137],{},[211,5135,5136],{},"溢出时不画滚动条（有头 Chromium，经典滚动条）",[211,5138,5139,5140,3382,5142,1310,5144,5148,5149,5151,5152,3382,5156,5158,5159,5161,5162,3382,5164,5166,5167,5169],{},"修前 ",[17,5141,2601],{},[17,5143,2604],{},[26,5145,5146],{},[17,5147,2609],{},"、单 tab 仍 ",[17,5150,494],{},"；隐藏原生滚动条后行高 ",[26,5153,5154],{},[17,5155,1320],{},[17,5157,2620],{},"、tab ",[17,5160,494],{},"，且 ",[17,5163,2627],{},[17,5165,2630],{}," \u002F Shift + 滚轮 仍生效 —— 测量方法：",[17,5168,2634],{},"（overlay 滚动条环境复现不出该 15px，必须用经典滚动条）",[196,5171,5172,5175],{},[211,5173,5174],{},"宽度模式",[211,5176,5177,5179,5180,5182,5183,5185,5186,5188],{},[17,5178,1106],{}," 宽度小于 Equal（按内容收紧）；",[17,5181,1121],{}," 未选中项 header ",[17,5184,2651],{},"、图标盒 ",[17,5187,541],{},"、选中项仍显示文本",[196,5190,5191,5194],{},[211,5192,5193],{},"可关闭性 \u002F 叠加模式",[211,5195,5196,5198,5199,5201,5202,3208,5204,5206],{},[17,5197,2665],{}," 无关闭按钮；",[17,5200,1508],{}," 项 ",[17,5203,2672],{},[17,5205,1614],{}," 未悬停时无按钮、悬停后出现",[196,5208,5209,5212],{},[211,5210,5211],{},"关闭链路",[211,5213,5214,5215,5217],{},"点选中项后 ",[17,5216,700],{}," ⇒ 消费方删掉该项（3 → 2），且仍有选中项（向后环形迁移）",[196,5219,5220,5223],{},[211,5221,5222],{},"面板",[211,5224,5225,5226],{},"只有选中面板有内容，其余带 ",[17,5227,2698],{},[196,5229,5230,5233],{},[211,5231,5232],{},"暗色",[211,5234,5235,5236,5238,5239,5241],{},"选中填充 ",[17,5237,2709],{},"、前景 ",[17,5240,2713],{},"、未选中透明",[260,5243,5244],{},[14,5245,5246,5249,5250,5252,5253,5256,5257,5259,5260,5262,5263,5265,5266,5268],{},[26,5247,5248],{},"实测抓到的两个真 bug","（数值断言当时全绿，只有浏览器暴露）：\n① 模板里的 kebab-case 属性（",[17,5251,2725],{},"）在",[26,5254,5255],{},"原始 vnode props"," 里的键就是 ",[17,5258,2729],{},"，只认 camelCase 会把 ",[17,5261,2312],{}," 当「没传」⇒ 关闭按钮照常渲染（见 ",[17,5264,2740],{},"）；\n② 选中背景是定位伪元素，按绘制次序会盖住常规流里的图标与文本 ⇒ 选中项整片纯色（现已把内容提升到同一层级，",[17,5267,2744],{}," 断言守住）。",[185,5270,5271],{"id":5271},"实现要点与证据缺口",[838,5273,5274,5291,5302,5316],{},[841,5275,5276,3154,5279,5281,5282,5284,5285,5287,5288,5290],{},[26,5277,5278],{},"子项收集在渲染期完成",[17,5280,2759],{},"）：",[17,5283,2763],{}," 注册式收集要等后代 ",[17,5286,2767],{},"，SSR 直出会缺整条 tab 条；这里在父组件渲染期直接读子 vnode 的 props \u002F slots（等价 React 的 ",[17,5289,2771],{},"），一次渲染得到完整列表。",[841,5292,5293,3154,5296,5298,5299,5301],{},[26,5294,5295],{},"选中解析是纯函数",[17,5297,2780],{},"）：渲染期不写响应式状态，SSR 与水合一致；迁移结果在 ",[17,5300,2784],{}," 里回填 \u002F 抛回。",[841,5303,5304,3958,5307,5309,5310,5312,5313,5315],{},[26,5305,5306],{},"Equal 宽度在代码里量",[17,5308,2793],{}," 也是这么做的（CSS 无法表达：scroller 宽度由内容决定，",[17,5311,2797],{}," 会形成循环依赖）。量到之前 CSS 退回 ",[17,5314,2801],{},"（仍受 min \u002F max 夹持）。",[841,5317,5318,5321,5322,20,5324,5326,5327,3154,5329,5331,5332,3948,5334,2826,5336,5338,5339,5341,5342,5344,5345,5347],{},[26,5319,5320],{},"证据缺口","：① 选中背景的路径真值由 ",[17,5323,2811],{},[17,5325,2814],{}," 运行时生成，仓库里没有可对照的实例字符串；② 三个 ",[17,5328,2818],{},[17,5330,2822],{}," 等）与拖拽主题动画的时长 \u002F 关键帧不在控件目录内；③ 高对比度色板全部来自系统运行时；④ ",[17,5333,434],{},[17,5335,1833],{},[17,5337,1837],{}," 隐式转换未证实；⑤ 上游键盘测试 ",[17,5340,2835],{}," 被标记 ",[17,5343,2839],{},"（#7546），",[17,5346,781],{}," 一类语义只能当参考。",[2845,5349,2847],{},{"title":38,"searchDepth":88,"depth":88,"links":5351},[5352,5353,5354,5355,5356,5358,5359,5360,5361,5365,5366],{"id":3018,"depth":88,"text":3018},{"id":3116,"depth":88,"text":3116},{"id":3414,"depth":88,"text":3415},{"id":3571,"depth":88,"text":3571},{"id":3767,"depth":88,"text":5357},"宽度模式（tabWidthMode）",{"id":3910,"depth":88,"text":3910},{"id":4083,"depth":88,"text":4083},{"id":4343,"depth":88,"text":4344},{"id":1871,"depth":88,"text":1872,"children":5362},[5363,5364],{"id":1876,"depth":94,"text":19},{"id":2231,"depth":94,"text":23},{"id":4974,"depth":88,"text":4975},{"id":5271,"depth":88,"text":5271},"选项卡容器：等宽 \u002F 按内容 \u002F 折叠三种宽度模式，tab 条可溢出滚动、每项可关闭，键位与焦点表现对齐 WinUI TabView。",{},{"title":2879},"\u002Fcomponents\u002Ftab-view",{"title":2879,"description":5367},"components\u002Ftab-view","F39lahqzOlzpWxe0M2oqN625rXVwF6sU_q5mUeZidTE",1792150932502]