rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-15 12:55:44 +00:00
Code Issues Packages Projects Releases Wiki Activity
gh-pages
dockview/docs/core/groups/popoutGroups/index.html
mathuo cbfd4c9785 Deploying to gh-pages from @ ab965ca726 🚀
2025-02-12 21:37:26 +00:00

46 lines
39 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-core/groups/popoutGroups" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.1.1">
<title data-rh="true">Popout Windows | Dockview</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://dockview.dev/docs/core/groups/popoutGroups"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="react ,components ,typescript ,drag-and-drop ,reactjs ,layout ,drag ,drop ,tabs ,dock ,docking ,splitter ,docking-library ,layout-manager ,docking-layout"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Popout Windows | Dockview"><meta data-rh="true" name="description" content="This section describes have to create popout windows."><meta data-rh="true" property="og:description" content="This section describes have to create popout windows."><link data-rh="true" rel="icon" href="/img/dockview_logo.ico"><link data-rh="true" rel="canonical" href="https://dockview.dev/docs/core/groups/popoutGroups"><link data-rh="true" rel="alternate" href="https://dockview.dev/docs/core/groups/popoutGroups" hreflang="en"><link data-rh="true" rel="alternate" href="https://dockview.dev/docs/core/groups/popoutGroups" hreflang="x-default"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Dockview RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Dockview Atom Feed">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KXGC1C9ZHC"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-KXGC1C9ZHC",{})</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&amp;display=swap&quot; rel=&quot;stylesheet&quot;"><link rel="stylesheet" href="/assets/css/styles.93be0345.css">
<script src="/assets/js/runtime~main.e100e46a.js" defer="defer"></script>
<script src="/assets/js/main.7c67790d.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_G6ar" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_ncOr" role="banner"><div class="announcementBarPlaceholder_ajMw"></div><div class="content_L1uV announcementBarContent__57G">⭐️ If you like Dockview, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/mathuo/dockview">GitHub</a></div><button type="button" aria-label="Close" class="clean-btn close closeButton_rfix announcementBarClose_c9u4"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/dockview_logo.svg" alt="My Site Logo" class="themedComponent_DHUr themedComponent--light_DIHH"><img src="/img/dockview_logo.svg" alt="My Site Logo" class="themedComponent_DHUr themedComponent--dark_Bv2M"></div><b class="navbar__title text--truncate">Dockview</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/overview/getStarted/installation">Docs</a><a class="navbar__item navbar__link" href="/docs/api/dockview/options">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="/templates" class="navbar__item navbar__link" target="_blank">Examples</a><a class="navbar__item navbar__link" href="/demo">Demo</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/mathuo/dockview" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="toggle_OLSw colorModeToggle_Hg9V"><button class="clean-btn toggleButton_wYmb toggleButtonDisabled_vaDU" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_Sxwe"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_Yem1"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_bmvg"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_UyTV"><div class="docsWrapper_XLvK"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_z1FD" type="button"></button><div class="docRoot_HciC"><aside class="theme-doc-sidebar-container docSidebarContainer_e5ai"><div class="sidebarViewport_N8x0"><div class="sidebar_vJCc"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_qiME menuWithAnnouncementBar_hRfJ"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link">Overview</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" tabindex="0" href="/docs/overview/getStarted/installation">Get Started</a></div></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item sidebar-section-header"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--active">Core Features</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/overview">Overview</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" tabindex="0" href="/docs/core/panels/register">Panels</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" tabindex="0" href="/docs/core/dnd/overview">Drag &amp; Drop</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" aria-expanded="true" tabindex="0" href="/docs/core/groups/move">Groups</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/groups/move">Move Group</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/groups/constraints">Constraints</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/groups/controls">Group Controls</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/groups/floatingGroups">Floating Groups</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/groups/hiddenHeader">Hidden Header</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/groups/locked">Locked Groups</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/groups/maxmizedGroups">Maximized Groups</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/core/groups/popoutGroups">Popout Windows</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/groups/resizing">Resizing</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" tabindex="0" href="/docs/core/state/load">State</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/locked">Locked</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/scrollbars">Scrolling</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/core/watermark">Watermark</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item sidebar-section-header"><div class="menu__list-item-collapsible"><a class="menu__link">Auxilliary Components</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" tabindex="0" href="/docs/other/splitview/overview">Splitview</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" tabindex="0" href="/docs/other/gridview/overview">Gridview</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" tabindex="0" href="/docs/other/paneview/overview">Paneview</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/other/tabview">Tabview</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item sidebar-section-header"><div class="menu__list-item-collapsible"><a class="menu__link">Advanced Features</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/advanced/">Window-like mananger with tabs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/advanced/iframe">iframes</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/advanced/keyboard">Keyboard</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/advanced/nested">Nested Instances</a></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_namt"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_z5aJ"><div class="docItemContainer_c0TR"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_zCmv" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_JFrk"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Core Features</span><meta itemprop="position" content="1"></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Groups</span><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Popout Windows</span><meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_O_Qc theme-doc-toc-mobile tocMobile_tjDr"><button type="button" class="clean-btn tocCollapsibleButton_htYj">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1><div style="display:flex;justify-content:space-between"><div>Popout Windows</div></div></h1></header><p>This section describes have to create popout windows.</p>
<div class="theme-admonition theme-admonition-info admonition_Gfwi alert alert--info"><div class="admonitionHeading_f1Ed"><span class="admonitionIcon_kpSf"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span></div><div class="admonitionContent_UjKb"><p>Popout groups <strong>cannot</strong> be maximized. Calling maximize function on groups in these states will have no effect.</p></div></div>
<table class="doc-ref-table"><tbody><tr><th style="width:40%;display:flex"><div style="display:flex;flex-direction:column;align-items:start"><h6 style="font-family:monospace;font-size:1.2em">addPopoutGroup</h6><div style="display:flex;flex-direction:column;align-items:start"></div></div></th><th style="width:60%"><div><div><div><div class="doc-text"><span>Add a popout group in a new Window</span></div><div></div></div></div><div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_qZBB"><pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#403f53"><span class="token function" style="color:rgb(153, 76, 195);font-style:italic">addPopoutGroup</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">item</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token maybe-class-name">DockviewGroupPanel</span><span class="token plain"> </span><span class="token operator" style="color:rgb(12, 150, 155)">|</span><span class="token plain"> </span><span class="token maybe-class-name">IDockviewPanel</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> options</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> onDidOpen</span><span class="token operator" style="color:rgb(12, 150, 155)">?</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">event</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> id</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(72, 118, 214)">string</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token dom variable" style="color:rgb(201, 103, 101)">window</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token maybe-class-name">Window</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">void</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> onWillClose</span><span class="token operator" style="color:rgb(12, 150, 155)">?</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">event</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> id</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(72, 118, 214)">string</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token dom variable" style="color:rgb(201, 103, 101)">window</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token maybe-class-name">Window</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(12, 150, 155)">void</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> popoutUrl</span><span class="token operator" style="color:rgb(12, 150, 155)">?</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(72, 118, 214)">string</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> position</span><span class="token operator" style="color:rgb(12, 150, 155)">?</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token maybe-class-name">Box</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(17, 17, 17)">Promise</span><span class="token operator" style="color:rgb(12, 150, 155)">&lt;</span><span class="token builtin" style="color:rgb(72, 118, 214)">boolean</span><span class="token operator" style="color:rgb(12, 150, 155)">&gt;</span><br></span></code></pre><div class="buttonGroup_TNwR"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_MVhB" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_yxgH"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_QJLJ"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></th></tr></tbody></table>
<p>Dockview has built-in support for opening groups in new Windows.
Each popout window can contain a single group with many panels and you can have as many popout
windows as needed. You cannot dock multiple groups together in the same window.</p>
<p>Popout windows require your website to have a blank <code>.html</code> page that can be used, by default this is set to <code>/popout.html</code> but
can be configured to match requirements.</p>
<div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_qZBB"><pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#403f53"><span class="token plain">api</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">addPopoutGroup</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> group</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token comment" style="color:rgb(152, 159, 177);font-style:italic">// the second arguments (options) is optional</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> popoutUrl</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token string" style="color:rgb(72, 118, 214)">&quot;/popout.html&quot;</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> box</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"> left</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">0</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> top</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">0</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">200</span><span class="token punctuation" style="color:rgb(153, 76, 195)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(170, 9, 130)">300</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><br></span></code></pre><div class="buttonGroup_TNwR"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_MVhB" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_yxgH"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_QJLJ"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>If you do not provide <code>options.popoutUrl</code> a default of <code>/popout.html</code> is used and if <code>options.box</code> is not provided
the view will be places according to it&#x27;s currently position.</p>
</blockquote>
<p>From within a panel you may say</p>
<div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_qZBB"><pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#403f53"><span class="token plain">props</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">containerApi</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">addPopoutGroup</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token plain">props</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">api</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">group</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><br></span></code></pre><div class="buttonGroup_TNwR"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_MVhB" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_yxgH"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_QJLJ"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="closing-the-popout-group">Closing the Popout Group<a href="#closing-the-popout-group" class="hash-link" aria-label="Direct link to Closing the Popout Group" title="Direct link to Closing the Popout Group">​</a></h2>
<p>To programatically move the popout group back into the main grid you can use the <code>moveTo</code> method in many ways, one of the following would suffice</p>
<div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_qZBB"><pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:#403f53"><span class="token comment" style="color:rgb(152, 159, 177);font-style:italic">// option 1: add absolutely to the right-side of the grid</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain">props</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">group</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">api</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">moveTo</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"> position</span><span class="token operator" style="color:rgb(12, 150, 155)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(72, 118, 214)">&#x27;right&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token comment" style="color:rgb(152, 159, 177);font-style:italic">// option 2: create a new group and move the contents of the popout group to it</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain"></span><span class="token keyword" style="color:rgb(12, 150, 155)">const</span><span class="token plain"> group </span><span class="token operator" style="color:rgb(12, 150, 155)">=</span><span class="token plain"> props</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">containerApi</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">addGroup</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#403f53"><span class="token plain">props</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">group</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token property-access">api</span><span class="token punctuation" style="color:rgb(153, 76, 195)">.</span><span class="token method function property-access" style="color:rgb(153, 76, 195);font-style:italic">moveTo</span><span class="token punctuation" style="color:rgb(153, 76, 195)">(</span><span class="token punctuation" style="color:rgb(153, 76, 195)">{</span><span class="token plain"> group </span><span class="token punctuation" style="color:rgb(153, 76, 195)">}</span><span class="token punctuation" style="color:rgb(153, 76, 195)">)</span><span class="token punctuation" style="color:rgb(153, 76, 195)">;</span><br></span></code></pre><div class="buttonGroup_TNwR"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_MVhB" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_yxgH"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_QJLJ"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Alternatively, if the user closes the Window the group the dock will make a best attempt to place it back
in it&#x27;s original location within the grid. If the dock cannot determine the original location it will
choose a new location.</p>
</div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/core/groups/maxmizedGroups"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Maximized Groups</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/core/groups/resizing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Resizing</div></a></nav></div></div><div class="toc-display col col--3"><div class="tableOfContents_TN1Q thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#closing-the-popout-group" class="table-of-contents__link toc-highlight">Closing the Popout Group</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Learn</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/demo">Demo</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/dockview" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_awgD"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://github.com/mathuo/dockview" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_awgD"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 Dockview, Inc. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink