1"use strict";(globalThis.webpackChunkdockview_docs=globalThis.webpackChunkdockview_docs||[]).push([[2431],{2982(e,o,r){r.r(o),r.d(o,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>a,toc:()=>c});const a=JSON.parse('{"id":"core/panels/multiRowTabs","title":"Multi-row tabs","description":"The multi-row (wrapping) tabs mode, where a group\'s tab strip wraps onto additional rows so every tab stays visible at once.","source":"@site/docs/core/panels/multiRowTabs.mdx","sourceDirName":"core/panels","slug":"/core/panels/multiRowTabs","permalink":"/docs/core/panels/multiRowTabs","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":10,"frontMatter":{"title":"Multi-row tabs","description":"The multi-row (wrapping) tabs mode, where a group\'s tab strip wraps onto additional rows so every tab stays visible at once.","sidebar_position":10,"enterprise":true,"sidebar_custom_props":{"enterprise":true}},"sidebar":"tutorialSidebar","previous":{"title":"Advanced overflow","permalink":"/docs/core/panels/advancedOverflow"},"next":{"title":"Pinned tabs","permalink":"/docs/core/panels/pinnedTabs"}}');var n=r(9500),s=r(8063),t=r(3198);const i={title:"Multi-row tabs",description:"The multi-row (wrapping) tabs mode, where a group's tab strip wraps onto additional rows so every tab stays visible at once.",sidebar_position:10,enterprise:!0,sidebar_custom_props:{enterprise:!0}},d=void 0,l={},c=[{value:"Multi-row (wrapping) tabs",id:"multi-row-wrapping-tabs",level:2},{value:"<code>maxRows</code>",id:"maxrows",level:3},{value:"Reordering across rows",id:"reordering-across-rows",level:3},{value:"Vertical (column) wrapping",id:"vertical-column-wrapping",level:3},{value:"Advanced overflow",id:"advanced-overflow",level:2},{value:"See also",id:"see-also",level:2}];function p(e){const o={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components},{CodeRunner:r,FrameworkSpecific:a}=o;return r||w("CodeRunner",!0),a||w("FrameworkSpecific",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o.p,{children:["When a group accumulates more tabs than fit across the width of its header, the\ndefault behaviour is to collapse the surplus behind an overflow dropdown. Multi-row\ntabs offer an alternative: the strip wraps onto additional rows and the header grows\nto fit, so every tab stays visible at once. The default single-row dropdown behaviour\nis covered in ",(0,n.jsx)(o.a,{href:"/docs/core/panels/tabOverflow",children:"Tab Overflow"}),"."]}),"\n",(0,n.jsx)(r,{id:"dockview/tab-overflow"}),"\n",(0,n.jsx)(o.h2,{id:"multi-row-wrapping-tabs",children:"Multi-row (wrapping) tabs"}),"\n",(0,n.jsxs)(o.p,{children:["Set ",(0,n.jsx)(o.code,{children:"overflow.mode: 'wrap'"})," and, instead of clipping the surplus tabs into the\ndropdown, the tab strip wraps onto additional rows and the header grows to fit, a\nJetBrains-style layout where every tab stays visible at once. As tabs are added or\nremoved, the header grows and shrinks by whole rows, and the panel content area\nresizes to match."]}),"\n",(0,n.jsx)(a,{framework:"React",children:(0,n.jsx)(t.KJ,{declaration:"IDockviewReactProps",methods:["overflow"]})}),"\n",(0,n.jsx)(a,{framework:"Vue",children:(0,n.jsx)(t.KJ,{declaration:"IDockviewVueProps",methods:["overflow"]})}),"\n",(0,n.jsx)(a,{framework:"JavaScript",children:(0,n.jsx)(t.KJ,{declaration:"DockviewComponentOptions",methods:["overflow"]})}),"\n",(0,n.jsx)(a,{framework:"Angular",children:(0,n.jsx)(t.KJ,{declaration:"DockviewAngularOptions",methods:["overflow"]})}),"\n",(0,n.jsx)(t.KJ,{declaration:"DockviewOverflowOptions"}),"\n",(0,n.jsx)(a,{framework:"React",children:(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-tsx",children:"return <DockviewReact overflow={{ mode: 'wrap' }} {...rest} />;\n"})})}),"\n",(0,n.jsx)(a,{framework:"Vue",children:(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-html",children:"<dockview-vue :overflow=\"{ mode: 'wrap' }\" />\n"})})}),"\n",(0,n.jsx)(a,{framework:"Angular",children:(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-html",children:"<dv-dockview [overflow]=\"{ mode: 'wrap' }\"></dv-dockview>\n"})})}),"\n",(0,n.jsx)(a,{framework:"JavaScript",children:(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-ts",children:"const api = createDockview(parentElement, {\n overflow: { mode: 'wrap' },\n});\n\n// or toggle at runtime\napi.updateOptions({ overflow: { mode: 'wrap' } });\n\n"})})}),"\n",(0,n.jsx)(o.admonition,{type:"info",children:(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"overflow.mode: 'wrap'"})," is an enterprise feature. With ",(0,n.jsx)(o.code,{children:"dockview-enterprise"}),"\nimported it is enabled for every Dockview instance; without it, ",(0,n.jsx)(o.code,{children:"mode: 'wrap'"})," is\nignored and the standard single-row strip with the dropdown is used instead; no\nerror, no regression."]})}),"\n",(0,n.jsx)(o.h3,{id:"maxrows",children:(0,n.jsx)(o.code,{children:"maxRows"})}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"overflow.maxRows"})," caps how many rows the header may grow to. The strip wraps up to\n",(0,n.jsx)(o.code,{children:"maxRows"})," rows; any tab that would land on a row beyond the cap spills into the\nchevron overflow dropdown instead, so wrapping and the dropdown compose rather than\nconflict. Left unset, wrapping is unbounded and the header grows to fit every tab."]}),"\n",(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-tsx",children:"const api = createDockview(element, {\n overflow: { mode: 'wrap', maxRows: 2 },\n});\n\n// raise or lower the cap at runtime and the strip reflows\napi.updateOptions({ overflow: { mode: 'wrap', maxRows: 3 } });\n"})}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"maxRows"})," is part of the same enterprise multi-row tabs feature as ",(0,n.jsx)(o.code,{children:"mode: 'wrap'"}),", so\nit is only honoured in wrap mode; it has no effect on the single-row dropdown."]}),"\n",(0,n.jsx)(o.h3,{id:"reordering-across-rows",children:"Reordering across rows"}),"\n",(0,n.jsx)(o.p,{children:"Tabs can be dragged to reorder them just as in the single-row strip, and in wrap mode\nthe reorder is two-dimensional: you can drag a tab from one row onto another and drop\nit at any position, with a drop indicator showing where it will land. Dragging a tab\nout of the header to detach or float it works exactly as before."}),"\n",(0,n.jsx)(o.h3,{id:"vertical-column-wrapping",children:"Vertical (column) wrapping"}),"\n",(0,n.jsxs)(o.p,{children:["Wrapping applies to vertical headers too. When a group's header sits on the left or\nright (for example an edge group), the tabs wrap into additional ",(0,n.jsx)(o.strong,{children:"columns"})," and the\nheader grows in width rather than height, and ",(0,n.jsx)(o.code,{children:"maxRows"})," becomes a maximum column cap.\nA change of header direction at runtime is handled automatically, so a group that\nflips between a horizontal and a vertical header re-wraps to match."]}),"\n",(0,n.jsx)(o.h2,{id:"advanced-overflow",children:"Advanced overflow"}),"\n",(0,n.jsxs)(o.p,{children:["The ",(0,n.jsx)(o.code,{children:"overflow"})," block also carries ",(0,n.jsx)(o.code,{children:"search"})," and ",(0,n.jsx)(o.code,{children:"mru"})," fields that turn\nthe dropdown into a searchable, most-recently-used tab switcher. Both are part of\nthe enterprise advanced overflow feature. These
1compose with wrap mode: tabs that\nspill past ",(0,n.jsx)(o.code,{children:"maxRows"})," land in the same enhanced dropdown. See\n",(0,n.jsx)(o.a,{href:"/docs/core/panels/advancedOverflow",children:"Advanced overflow"}),"."]}),"\n",(0,n.jsx)(o.h2,{id:"see-also",children:"See also"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.a,{href:"/docs/core/panels/tabOverflow",children:"Tab overflow"}),": the default single-row dropdown this mode replaces."]}),"\n",(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.a,{href:"/docs/core/panels/advancedOverflow",children:"Advanced overflow"}),": search and most-recently-used ordering for the dropdown."]}),"\n",(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.a,{href:"/docs/core/panels/pinnedTabs",children:"Pinned tabs"}),": another way to keep important tabs visible."]}),"\n",(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.a,{href:"/docs/core/panels/headerPosition",children:"Tab header position"}),": wrapping applies to horizontal and vertical headers, filling extra rows or columns respectively."]}),"\n"]}),"\n",(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{})})]})}function h(e={}){const{wrapper:o}={...(0,s.R)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function w(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]); 2//# sourceMappingURL=4d1cae11.5f90c19d.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.