mirror of
https://github.com/mathuo/dockview
synced 2025-08-26 03:56:44 +00:00
25 lines
33 KiB
HTML
25 lines
33 KiB
HTML
<!doctype html>
|
|
<html lang="en" dir="ltr" class="plugin-pages plugin-id-default" data-has-hydrated="false">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="generator" content="Docusaurus v3.1.1">
|
|
<title data-rh="true">A zero dependency layout manager supporting ReactJS and Vanilla TypeScript | 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/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><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" property="og:title" content="A zero dependency layout manager supporting ReactJS and Vanilla TypeScript | Dockview"><link data-rh="true" rel="icon" href="/img/dockview_logo.ico"><link data-rh="true" rel="canonical" href="https://dockview.dev/"><link data-rh="true" rel="alternate" href="https://dockview.dev/" hreflang="en"><link data-rh="true" rel="alternate" href="https://dockview.dev/" hreflang="x-default"><script data-rh="true">function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container";n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,o="/"===s.substr(-1)?s:s+"/";e.innerHTML=o}document.addEventListener("DOMContentLoaded",(function(){void 0===window.docusaurus&&insertBanner()}))</script><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&display=swap" rel="stylesheet""><link rel="stylesheet" href="/assets/css/styles.b944e3c7.css">
|
|
<script src="/assets/js/runtime~main.33290a91.js" defer="defer"></script>
|
|
<script src="/assets/js/main.0ff8e868.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 class="navbar__item navbar__link" 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="home-page"><main><div class="container"><div class="splashscreen"><div class="splashscreen-title"><h1>Fully Featured Docking Layout Manager</h1><h2>Zero dependency layout management and docking controls</h2></div><div class="splashscreen-video"><img src="/img/Animation.gif"><a href="/demo"><button>Go To Live Demo</button></a></div></div></div><div style="background-color:#020c18;padding:20px 0px"><div class="container"></div></div><div class="container"><section class="features_t9lD"><div class="container"><div class="row"><div style="display:flex;flex-wrap:wrap;margin:auto;justify-content:center" class="dockview-feature"><svg xmlns="http://www.w3.org/2000/svg" width="312" height="200" fill="none" viewBox="0 0 312 200" class="featureSvg_GfXr" role="img"><rect width="311.504" height="200" fill="#fff" rx="5"></rect><path fill="#DCDCDC" d="M0 5a5 5 0 0 1 5-5h302a5 5 0 0 1 5 5v6H0V5Z"></path><path fill="#BABABA" d="M0 10h312v1H0z"></path><path fill="#A8A8A8" d="M0 11h156v189H0z"></path><path fill="#000C18" d="M156 11h156v91H156zM234 102h78v98h-78zM156 102h78v98h-78zM0 24h156v176H0z"></path><path fill="#2B2B4A" d="M157 102h155v1H157zM157 11h-1v189h1zM234 103h-1v97h1v-97Z"></path><path fill="#1C1C2A" d="M0 11h156v14H0z"></path><path fill="#10192C" d="M0 11h30v14H0zM31 11h30v14H31z"></path><path fill="#000C18" d="M62 11h30v14H62z"></path><path fill="#2B2B4A" d="M30 11h1v14h-1zM61 11h1v14h-1zM92 11h1v14h-1z"></path><path fill="#1C1C2A" d="M157 11h155v14H157z"></path><path fill="#10192C" d="M157 11h30v14h-30z"></path><path fill="#000C18" d="M188 11h30v14h-30z"></path><path fill="#2B2B4A" d="M187 11h1v14h-1zM218 11h1v14h-1z"></path><path fill="#1C1C2A" d="M234 103h78v14h-78z"></path><path fill="#10192C" d="M234 103h24v14h-24z"></path><path fill="#000C18" d="M258 103h24v14h-24z"></path><path fill="#2B2B4A" d="M258 103h.503v14H258zM282 103h.503v14H282z"></path><rect width="7" height="4" x="66" y="16" fill="#fff" rx="2"></rect><rect width="12" height="4" x="76" y="16" fill="#fff" rx="2"></rect><rect width="12" height="4" x="191" y="16" fill="#777" rx="2"></rect><rect width="7" height="4" x="260" y="108" fill="#777" rx="2"></rect><rect width="11" height="4" x="268" y="108" fill="#777" rx="2"></rect><rect width="4" height="4" x="206" y="16" fill="#777" rx="2"></rect><rect width="5" height="4" x="160" y="16" fill="#282828" rx="2"></rect><rect width="16" height="4" x="166" y="16" fill="#282828" rx="2"></rect><rect width="16" height="4" x="237" y="108" fill="#282828" rx="2"></rect><rect width="15" height="4" x="33" y="16" fill="#777" rx="2"></rect><rect width="4" height="4" x="4" y="3" fill="#FD605E" rx="2"></rect><rect width="4" height="4" x="10" y="3" fill="#FBBC3F" rx="2"></rect><rect width="4" height="4" x="16" y="3" fill="#34C942" rx="2"></rect><rect width="6" height="4" x="2" y="16" fill="#777" rx="2"></rect><rect width="18" height="4" x="10" y="16" fill="#777" rx="2"></rect><path fill="#E1E1E1" fill-opacity="0.25" d="M297 11h15v189h-15z"></path><path fill="#000C18" stroke="#2B2B4A" d="M90.5 18.5h48v13h-48z"></path><path fill="#fff" fill-rule="evenodd" d="M140.344 22.265a.295.295 0 0 0-.017-.495l-4.147-2.48a.295.295 0 0 0-.441.31l.912 4.744c.04.21.284.309.459.186l.662-.463a.296.296 0 0 0 .12-.298l-.29-1.508a.296.296 0 0 1 .442-.309l1.318.788c.1.06.226.055.321-.011l.661-.464Z" clip-rule="evenodd"></path><path stroke="#fff" stroke-dasharray=".25 .25" d="M139.5 23.5h4v2h-4z"></path><path fill="#fff" d="M97.33 23.09h.421l.989 2.416h.034l.989-2.415h.42V26h-.33v-2.21h-.028L98.916 26h-.318l-.91-2.21h-.028V26h-.33v-2.91Zm4.889 2.018v-1.29h.335V26h-.335v-.37h-.023a.713.713 0 0 1-.238.283.692.692 0 0 1-.41.115.727.727 0 0 1-.363-.09.623.623 0 0 1-.25-.272 1.03 1.03 0 0 1-.091-.462v-1.386h.335v1.364c0 .159.045.286.134.38.09.095.204.142.343.142a.571.571 0 0 0 .563-.596Zm1.284-2.017V26h-.335v-2.91h.335Zm1.563.727v.284h-1.13v-.284h1.13Zm-.801-.523h.335v2.08c0 .095.014.166.042.213a.212.212 0 0 0 .107.094.438.438 0 0 0 .141.023.598.598 0 0 0 .091-.006l.057-.012.068.302a.7.7 0 0 1-.528-.021.556.556 0 0 1-.225-.187.532.532 0 0 1-.088-.315v-2.17ZM105.57 26v-2.182h.336V26h-.336Zm.171-2.546a.238.238 0 0 1-.169-.066.216.216 0 0 1-.07-.16c0-.063.024-.117.07-.161a.238.238 0 0 1 .169-.067c.065 0 .121.022.168.067a.214.214 0 0 1 .071.16.214.214 0 0 1-.071.16.236.236 0 0 1-.168.067Zm.779 3.364v-3h.324v.347h.039c.025-.038.059-.086.103-.145a.596.596 0 0 1 .19-.16.683.683 0 0 1 .338-.07c.184 0 .346.046.486.138a.92.92 0 0 1 .328.39c.079.169.118.368.118.597 0 .23-.039.431-.118.6a.935.935 0 0 1-.327.393.852.852 0 0 1-.481.137.7.7 0 0 1-.337-.07.636.636 0 0 1-.195-.16c-.045-.06-.08-.11-.105-.15h-.028v1.153h-.335Zm.329-1.909c0 .165.024.31.073.436a.661.661 0 0 0 .211.294.55.55 0 0 0 .341.105.55.55 0 0 0 .351-.11.672.672 0 0 0 .213-.302c.048-.127.073-.268.073-.423 0-.153-.024-.292-.071-.415a.644.644 0 0 0-.212-.294.56.56 0 0 0-.354-.11.556.556 0 0 0-.343.105.627.627 0 0 0-.211.287 1.187 1.187 0 0 0-.071.427Zm2.443-1.818V26h-.335v-2.91h.335Zm1.529 2.954c-.21 0-.391-.046-.544-.139a.942.942 0 0 1-.351-.392 1.343 1.343 0 0 1-.122-.588c0-.223.041-.42.122-.59a.967.967 0 0 1 .344-.401.924.924 0 0 1 .517-.145c.114 0 .226.019.337.057.111.037.211.099.302.184a.884.884 0 0 1 .218.335c.054.14.081.311.081.515v.142h-1.682v-.29h1.341a.718.718 0 0 0-.074-.33.556.556 0 0 0-.523-.312.6.6 0 0 0-.346.1.65.65 0 0 0-.223.255.74.74 0 0 0-.079.338v.193c0 .165.029.305.086.42.057.113.137.2.24.26a.701.701 0 0 0 .356.087.728.728 0 0 0 .239-.037.511.511 0 0 0 .186-.113.526.526 0 0 0 .121-.19l.324.09a.734.734 0 0 1-.172.29.84.84 0 0 1-.299.193 1.104 1.104 0 0 1-.399.069Zm2.539.773v-3h.323v.347h.04a3.76 3.76 0 0 1 .102-.145.6.6 0 0 1 .191-.16.683.683 0 0 1 .338-.07c.184 0 .346.046.486.138a.92.92 0 0 1 .328.39c.078.169.118.368.118.597 0 .23-.04.431-.118.6a.935.935 0 0 1-.327.393.854.854 0 0 1-.481.137.697.697 0 0 1-.337-.07.636.636 0 0 1-.195-.16c-.045-.06-.08-.11-.105-.15h-.028v1.153h-.335Zm.329-1.909c0 .165.024.31.073.436a.653.653 0 0 0 .211.294.55.55 0 0 0 .341.105.55.55 0 0 0 .351-.11.672.672 0 0 0 .213-.302c.048-.127.072-.268.072-.423 0-.153-.023-.292-.071-.415a.642.642 0 0 0-.211-.294.56.56 0 0 0-.354-.11.561.561 0 0 0-.344.105.625.625 0 0 0-.21.287 1.187 1.187 0 0 0-.071.427Zm2.75 1.142a.883.883 0 0 1-.376-.078.643.643 0 0 1-.269-.229.647.647 0 0 1-.099-.363c0-.125.024-.227.074-.304a.522.522 0 0 1 .197-.185c.082-.044.173-.078.273-.1.1-.022.201-.04.302-.053.133-.017.24-.03.323-.039a.5.5 0 0 0 .182-.047c.038-.021.058-.06.058-.113v-.012a.444.444 0 0 0-.115-.326c-.076-.078-.191-.117-.345-.117a.605.605 0 0 0-.377.105.622.622 0 0 0-.192.225l-.318-.114a.764.764 0 0 1 .228-.31.843.843 0 0 1 .312-.156c.114-.03.225-.045.335-.045.07 0 .151.008.242.025.092.016.18.05.265.101a.59.59 0 0 1 .215.232.86.86 0 0 1 .085.415V26h-.335v-.296h-.017a.653.653 0 0 1-.325.29.82.82 0 0 1-.323.057Zm.051-.301a.66.66 0 0 0 .335-.078.537.537 0 0 0 .279-.462v-.307c-.014.018-.046.033-.094.047a1.55 1.55 0 0 1-.165.036 6.889 6.889 0 0 1-.321.042c-.087.012-.168.03-.244.056a.424.424 0 0 0-.182.112.288.288 0 0 0-.068.202.3.3 0 0 0 .129.264.581.581 0 0 0 .331.088Zm1.896-1.063V26h-.335v-2.182h.324v.341h.028c.051-.11.129-.2.233-.267a.726.726 0 0 1 .404-.102c.147 0 .277.03.387.09.111.06.197.151.259.273.061.122.092.275.092.46V26h-.335v-1.364c0-.171-.045-.305-.134-.4a.473.473 0 0 0-.366-.145.585.585 0 0 0-.287.07.497.497 0 0 0-.197.203.663.663 0 0 0-.073.323Zm2.92 1.358c-.211 0-.392-.046-.544-.139a.929.929 0 0 1-.351-.392 1.33 1.33 0 0 1-.122-.588c0-.223.04-.42.122-.59a.964.964 0 0 1 .343-.401.926.926 0 0 1 .517-.145c.114 0 .226.019.337.057a.835.835 0 0 1 .52.52c.054.139.081.31.081.514v.142h-1.682v-.29h1.341a.718.718 0 0 0-.074-.33.554.554 0 0 0-.523-.312.6.6 0 0 0-.346.1.65.65 0 0 0-.223.255.752.752 0 0 0-.078.338v.193c0 .165.028.305.085.42.058.113.138.2.24.26a.702.702 0 0 0 .357.087.722.722 0 0 0 .238-.037.511.511 0 0 0 .186-.113.513.513 0 0 0 .121-.19l.324.09a.711.711 0 0 1-.172.29.835.835 0 0 1-.298.193 1.112 1.112 0 0 1-.399.069Zm1.748-2.954V26h-.335v-2.91h.335Zm2.16 1.216-.302.085a.53.53 0 0 0-.083-.146.413.413 0 0 0-.148-.12.54.54 0 0 0-.24-.047.572.572 0 0 0-.334.093c-.088.06-.132.138-.132.231 0 .084.03.15.091.198.06.048.155.088.284.12l.324.08c.195.048.34.12.436.218a.507.507 0 0 1 .143.373.554.554 0 0 1-.108.335.713.713 0 0 1-.298.233 1.089 1.089 0 0 1-.446.085.978.978 0 0 1-.552-.144.639.639 0 0 1-.277-.424l.318-.08c.03.118.087.206.172.265a.575.575 0 0 0 .333.088.625.625 0 0 0 .373-.1c.092-.067.139-.147.139-.24a.254.254 0 0 0-.08-.191.505.505 0 0 0-.244-.117l-.364-.085c-.2-.047-.346-.12-.44-.22a.532.532 0 0 1-.139-.377.54.54 0 0 1 .103-.326.716.716 0 0 1 .286-.223c.121-.054.258-.081.412-.081.216 0 .385.047.508.142.124.095.213.22.265.375Zm1.788.239c0-.358.047-.688.14-.988.093-.3.227-.578.4-.83h.296a1.75 1.75 0 0 0-.192.346 4.068 4.068 0 0 0-.26.956 3.627 3.627 0 0 0 .028 1.201c.044.232.103.448.176.647.074.199.157.36.248.486h-.296a3.068 3.068 0 0 1-.4-.83 3.337 3.337 0 0 1-.14-.988Zm2.307 1.494c-.187 0-.354-.032-.501-.097a.857.857 0 0 1-.348-.268.719.719 0 0 1-.139-.402h.358c.007.093.04.174.096.243.057.067.132.119.223.156a.815.815 0 0 0 .306.055.796.796 0 0 0 .332-.065.536.536 0 0 0 .227-.182.455.455 0 0 0 .083-.27.507.507 0 0 0-.313-.476.903.903 0 0 0-.375-.07h-.233v-.312h.233c.116 0 .217-.02.304-.062a.474.474 0 0 0 .282-.443.488.488 0 0 0-.066-.258.446.446 0 0 0-.184-.17.602.602 0 0 0-.279-.061c-.1 0-.195.018-.284.055a.53.53 0 0 0-.216.158.412.412 0 0 0-.091.247h-.341a.696.696 0 0 1 .138-.4.868.868 0 0 1 .338-.27c.14-.065.294-.097.462-.097.18 0 .334.037.463.11a.748.748 0 0 1 .4.669.653.653 0 0 1-.477.66v.021c.184.03.327.109.431.235.103.125.154.28.154.464 0 .158-.043.3-.129.426a.88.88 0 0 1-.349.296 1.139 1.139 0 0 1-.505.108Zm2.286-1.494c0 .357-.047.687-.141.988-.092.3-.225.577-.399.83h-.295a1.8 1.8 0 0 0 .19-.347c.06-.136.112-.286.156-.449a4.123 4.123 0 0 0 .142-1.023c0-.225-.021-.454-.065-.686a3.876 3.876 0 0 0-.176-.646 2.031 2.031 0 0 0-.247-.486h.295c.174.253.307.53.399.831.094.3.141.63.141.988Z"></path><path fill="#000C18" stroke="#2B2B4A" d="M279.5 46.5h29v13h-29z"></path><rect width="7" height="4" x="283" y="51" fill="#fff" rx="2"></rect><rect width="12" height="4" x="294" y="51" fill="#fff" rx="2"></rect><path fill="#fff" fill-rule="evenodd" d="M305.344 61.265a.295.295 0 0 0-.017-.495l-4.147-2.48a.295.295 0 0 0-.441.31l.912 4.744c.04.21.284.309.459.186l.662-.463a.296.296 0 0 0 .12-.298l-.29-1.508a.296.296 0 0 1 .442-.309l1.318.788c.1.06.226.055.321-.011l.661-.464Z" clip-rule="evenodd"></path><path stroke="#fff" stroke-dasharray=".25 .25" d="M304.5 62.5h4v2h-4z"></path><path fill="#E1E1E1" fill-opacity="0.25" d="M157 153h76v47h-76z"></path><path fill="#000C18" stroke="#2B2B4A" d="M180.5 163.5h29v13h-29z"></path><rect width="7" height="4" x="184" y="168" fill="#fff" rx="2"></rect><rect width="12" height="4" x="195" y="168" fill="#fff" rx="2"></rect><path fill="#fff" fill-rule="evenodd" d="M194.344 176.265a.295.295 0 0 0-.017-.495l-4.147-2.48a.295.295 0 0 0-.441.31l.912 4.744c.04.21.284.309.459.186l.662-.463a.296.296 0 0 0 .12-.298l-.29-1.508a.296.296 0 0 1 .442-.309l1.318.788c.1.06.226.055.321-.011l.661-.464Z" clip-rule="evenodd"></path><path stroke="#fff" stroke-dasharray=".25 .25" d="M193.5 177.5h4v2h-4z"></path></svg><div style="max-width:400px;padding:0px 20px"><h3></h3><div class="feature-banner"><h3 class="feature-banner-header">Serializable Layouts</h3><p class="feature-banner-content">Add and remove panels using the provided api or use the serialziation methods to persist layouts.</p></div><div class="feature-banner"><h3 class="feature-banner-header">Customizable Theme</h3><p class="feature-banner-content">Adjust a number of provided CSS Properties for a simple change or target specific classes for a more customized approach.</p></div><div class="feature-banner"><h3 class="feature-banner-header">Choose Your Control</h3><p class="feature-banner-content">Choose from a simple splitview, gridview, collapsable panes or a full docking solution. Combine multiple for complex layouts.</p></div></div></div><div style="display:flex;flex-wrap:wrap;margin:auto;justify-content:center" class="dockview-feature"><svg xmlns="http://www.w3.org/2000/svg" width="312" height="200" fill="none" viewBox="0 0 312 200" class="featureSvg_GfXr" role="img"><rect width="311.504" height="200" fill="#fff" rx="5"></rect><path fill="#DCDCDC" d="M0 5a5 5 0 0 1 5-5h302a5 5 0 0 1 5 5v6H0V5Z"></path><path fill="#BABABA" d="M0 10h312v1H0z"></path><path fill="#A8A8A8" d="M0 11h156v189H0z"></path><path fill="#000C18" d="M188 11h124v91H188zM188 102h124v98H188zM0 24h187v176H0z"></path><path fill="#2B2B4A" d="M188 102h124v1H188zM188 11h-1v189h1z"></path><path fill="#1C1C2A" d="M0 11h187v14H0z"></path><path fill="#10192C" d="M0 11h35.962v14H0zM37.16 11h35.962v14H37.16z"></path><path fill="#000C18" d="M74.32 11h35.962v14H74.32z"></path><path fill="#2B2B4A" d="M35.962 11h1.199v14h-1.199zM73.122 11h1.199v14h-1.199zM110.282 11h1.199v14h-1.199z"></path><path fill="#1C1C2A" d="M188 11h124v14H188z"></path><path fill="#10192C" d="M188 11h30v14h-30z"></path><path fill="#000C18" d="M219 11h30v14h-30z"></path><path fill="#2B2B4A" d="M218 11h1v14h-1zM249 11h1v14h-1z"></path><path fill="#1C1C2A" d="M188 103h124v14H188z"></path><path fill="#10192C" d="M188 103h24v14h-24z"></path><path fill="#000C18" d="M212 103h24v14h-24z"></path><path fill="#2B2B4A" d="M212 103h.503v14H212zM236 103h.503v14H236z"></path><path fill="#fff" d="M76 18a2 2 0 0 1 2-2h3a2 2 0 1 1 0 4h-3a2 2 0 0 1-2-2Z"></path><rect width="12" height="4" x="85" y="16" fill="#fff" rx="2"></rect><rect width="12" height="4" x="222" y="16" fill="#777" rx="2"></rect><rect width="7" height="4" x="214" y="108" fill="#777" rx="2"></rect><rect width="11" height="4" x="222" y="108" fill="#777" rx="2"></rect><rect width="4" height="4" x="237" y="16" fill="#777" rx="2"></rect><rect width="5" height="4" x="191" y="16" fill="#282828" rx="2"></rect><rect width="16" height="4" x="197" y="16" fill="#282828" rx="2"></rect><rect width="16" height="4" x="191" y="108" fill="#282828" rx="2"></rect><path fill="#777" d="M39 18a2 2 0 0 1 2-2h11a2 2 0 1 1 0 4H41a2 2 0 0 1-2-2Z"></path><rect width="4" height="4" x="4" y="3" fill="#FD605E" rx="2"></rect><rect width="4" height="4" x="10" y="3" fill="#FBBC3F" rx="2"></rect><rect width="4" height="4" x="16" y="3" fill="#34C942" rx="2"></rect><rect width="6" height="4" x="2" y="16" fill="#777" rx="2"></rect><rect width="18" height="4" x="10" y="16" fill="#777" rx="2"></rect><path fill="#10192C" d="M173 11h14v14h-14z"></path><circle cx="176" cy="18" r="1" fill="#fff" transform="rotate(-90 176 18)"></circle><circle cx="184" cy="18" r="1" fill="#fff" transform="rotate(-90 184 18)"></circle><circle cx="180" cy="18" r="1" fill="#fff" transform="rotate(-90 180 18)"></circle><path fill="#10192C" d="M298 11h14v14h-14z"></path><circle cx="301" cy="18" r="1" fill="#fff" transform="rotate(-90 301 18)"></circle><circle cx="309" cy="18" r="1" fill="#fff" transform="rotate(-90 309 18)"></circle><circle cx="305" cy="18" r="1" fill="#fff" transform="rotate(-90 305 18)"></circle><path fill="#10192C" d="M111 11h14v14h-14z"></path><rect width="1.333" height="8" x="117.333" y="14" fill="#fff" rx="0.667"></rect><rect width="1.333" height="8" x="114" y="18.666" fill="#fff" rx="0.667" transform="rotate(-90 114 18.666)"></rect><path fill="#10192C" d="M298 103h14v14h-14z"></path><circle cx="301" cy="110" r="1" fill="#fff" transform="rotate(-90 301 110)"></circle><circle cx="309" cy="110" r="1" fill="#fff" transform="rotate(-90 309 110)"></circle><circle cx="305" cy="110" r="1" fill="#fff" transform="rotate(-90 305 110)"></circle><path fill="#10192C" d="M285 103h14v14h-14z"></path><rect width="7" height="7" x="288.5" y="106.5" stroke="#fff" rx="1.5"></rect><path fill="#fff" d="M288 109h8v2h-8z"></path><g opacity="0.35"><path fill="#000C18" d="M40 45h128.769v91H40z"></path><path fill="#2B2B4A" d="M40 136h128.769v1H40z"></path><path fill="#1C1C2A" d="M40 45h128.769v14H40z"></path><path fill="#10192C" d="M40 45h31.154v14H40z"></path><path fill="#000C18" d="M72.192 45h31.154v14H72.192z"></path><path fill="#2B2B4A" d="M71.154 45h1.038v14h-1.038zM40 45h1v92h-1zM168 45h1v92h-1zM103.346 45h1.038v14h-1.038z"></path><rect width="12.461" height="4" x="75.308" y="50" fill="#777" rx="2"></rect><rect width="4.154" height="4" x="90.885" y="50" fill="#777" rx="2"></rect><rect width="5.192" height="4" x="43.115" y="50" fill="#282828" rx="2"></rect><rect width="16.615" height="4" x="49.346" y="50" fill="#282828" rx="2"></rect><path fill="#2B2B4A" d="M40 45h128.769v1H40z"></path></g><path fill="#000C18" d="M29 54h128.769v91H29z"></path><path fill="#2B2B4A" d="M29 145h128.769v1H29z"></path><path fill="#1C1C2A" d="M29 54h128.769v14H29z"></path><path fill="#10192C" d="M29 54h31.154v14H29z"></path><path fill="#000C18" d="M61.192 54h31.154v14H61.192z"></path><path fill="#2B2B4A" d="M60.154 54h1.038v14h-1.038zM29 54h1v92h-1zM157 54h1v92h-1zM92.346 54h1.038v14h-1.038z"></path><rect width="12.461" height="4" x="64.308" y="59" fill="#777" rx="2"></rect><rect width="4.154" height="4" x="79.885" y="59" fill="#777" rx="2"></rect><rect width="5.192" height="4" x="32.115" y="59" fill="#282828" rx="2"></rect><rect width="16.615" height="4" x="38.346" y="59" fill="#282828" rx="2"></rect><path fill="#2B2B4A" d="M29 54h128.769v1H29z"></path><path fill="#fff" fill-rule="evenodd" d="M128.344 61.265a.295.295 0 0 0-.017-.495l-4.147-2.48a.295.295 0 0 0-.441.31l.912 4.744c.04.21.284.309.459.186l.662-.463a.296.296 0 0 0 .12-.298l-.29-1.508a.296.296 0 0 1 .442-.309l1.318.788c.1.06.226.055.321-.011l.661-.464Z" clip-rule="evenodd"></path><path stroke="#fff" stroke-dasharray=".25 .25" d="M127.5 62.5h4v2h-4z"></path></svg><div style="max-width:400px;padding:0px 20px"><h3></h3><div class="feature-banner"><h3 class="feature-banner-header">Rich Feature Control</h3><p class="feature-banner-content">Customize header features to add additional icons and more as well as custom tab rendering.</p></div><div class="feature-banner"><h3 class="feature-banner-header">Floating and Popout Groups</h3><p class="feature-banner-content">Built-in support for floating groups and groups in new windows with a supporting api for progmatic control.</p></div><div class="feature-banner"><h3 class="feature-banner-header">Drag And Drop</h3><p class="feature-banner-content">Drag and Drop tab to position your layout as well as interacting with external drag events.</p></div></div></div><div style="display:flex;flex-wrap:wrap;margin:auto;justify-content:center" class="dockview-feature"><svg xmlns="http://www.w3.org/2000/svg" width="312" height="200" fill="none" viewBox="0 0 312 200" class="featureSvg_GfXr" role="img"><path fill="#DCDCDC" d="M0 5a5 5 0 0 1 5-5h302a5 5 0 0 1 5 5v6H0V5Z"></path><path fill="#BABABA" d="M0 10h312v1H0z"></path><rect width="4" height="4" x="4" y="3" fill="#FD605E" rx="2"></rect><rect width="4" height="4" x="10" y="3" fill="#FBBC3F" rx="2"></rect><rect width="4" height="4" x="16" y="3" fill="#34C942" rx="2"></rect><path fill="#D9D9D9" d="M0 11h312v189H0z"></path><path fill="#000C18" d="M0 11h166v189H0zM167 11h145v189H167z"></path><path fill="#2B2B4A" d="M166 11h1v189h-1zM167 56h145v1H167zM167 112h145v1H167z"></path><path fill="#1C1C2A" d="M0 11h166v10H0zM0 22h166v10H0zM0 94h166v10H0zM0 190h166v10H0z"></path><path fill="#2B2B4A" d="M0 21h166v1H0z"></path><rect width="21" height="4" x="11" y="14" fill="#fff" rx="2"></rect><rect width="11" height="4" x="34" y="14" fill="#fff" rx="2"></rect><rect width="6" height="4" x="11" y="25" fill="#fff" rx="2"></rect><rect width="11" height="4" x="19" y="25" fill="#fff" rx="2"></rect><rect width="16" height="4" x="11" y="97" fill="#fff" rx="2"></rect><rect width="5" height="4" x="29" y="97" fill="#fff" rx="2"></rect><rect width="14" height="4" x="11" y="193" fill="#fff" rx="2"></rect><path fill="#fff" d="m5 29-3-3.392.538-.608L5 27.799l2.463-2.785.537.608L5 29ZM5 101l-3-3.392.538-.608L5 99.799l2.463-2.785.537.608L5 101ZM6 16l-3.392 3L2 18.462 4.799 16l-2.785-2.463.608-.537L6 16ZM6 195l-3.392 3-.608-.537L4.799 195l-2.785-2.462.608-.538L6 195Z"></path><path fill="#fff" fill-rule="evenodd" d="M212.674 111c.236 0 .394-.221.297-.416l-2.174-4.409c-.115-.233-.479-.233-.594 0l-2.174 4.409c-.097.195.061.416.297.416h.889a.327.327 0 0 0 .297-.175l.691-1.401c.115-.233.479-.233.594 0l.691 1.401a.327.327 0 0 0 .297.175h.889ZM208.326 114c-.236 0-.394.221-.297.416l2.174 4.409c.115.233.479.233.594 0l2.174-4.409c.097-.195-.061-.416-.297-.416h-.889a.327.327 0 0 0-.297.175l-.691 1.401c-.115.233-.479.233-.594 0l-.691-1.401a.327.327 0 0 0-.297-.175h-.889Z" clip-rule="evenodd"></path><path stroke="#fff" d="M210.5 116v-7"></path><rect width="20" height="19" x="175" y="18" fill="#777" rx="2"></rect><rect width="5" height="5" x="198" y="18" fill="#777" rx="2"></rect><rect width="26" height="5" x="206" y="18" fill="#777" rx="2"></rect><rect width="44" height="5" x="203" y="71" fill="#777" rx="2"></rect><rect width="44" height="14" x="228" y="78" fill="#777" rx="2"></rect><rect width="22" height="5" x="250" y="71" fill="#777" rx="2"></rect><rect width="33" height="5" x="239" y="95" fill="#777" rx="2"></rect><rect width="33" height="5" x="272" y="117" fill="#777" rx="2"></rect><rect width="7" height="5" x="259" y="117" fill="#777" rx="2"></rect><rect width="23" height="5" x="213" y="95" fill="#777" rx="2"></rect><rect width="8" height="5" x="203" y="95" fill="#777" rx="2"></rect><rect width="15" height="5" x="198" y="25" fill="#777" rx="2"></rect><rect width="18" height="5" x="215" y="25" fill="#777" rx="2"></rect></svg><div style="max-width:400px;padding:0px 20px"><h3></h3><div class="feature-banner"><h3 class="feature-banner-header">Zero Dependencies</h3><p class="feature-banner-content">Zero dependencies, that's all.</p></div><div class="feature-banner"><h3 class="feature-banner-header">Code Quality and Transparency</h3><p class="feature-banner-content">All of the code is run through Sonarcloud Code Analysis, which along with the source code and high test coverage can be viewed from the Github page.</p></div><div class="feature-banner"><h3 class="feature-banner-header">React or Vanilla TypeScript</h3><p class="feature-banner-content">Exposes native support for both ReactJS components and Vanilla TypeScript.</p></div></div></div></div></div></section><div id="live-demo" style="height:30px;display:flex;align-items:center;font-size:1.5em;font-weight:bold"><img src="/img/dockview_logo.svg" height="30"><span style="padding-left:8px">Dockview Live Demos</span></div><div style="padding:20px"><div style="height:30px;border-bottom:1px solid #BABABA;background-color:#DCDCDC;border-top-left-radius:15px;border-top-right-radius:15px;padding:0px 15px;display:flex;align-items:center"><div style="height:14px;width:14px;border-radius:100%;background-color:#FD605E;margin-right:7px"></div><div style="height:14px;width:14px;border-radius:100%;background-color:#FBBC3F;margin-right:7px"></div><div style="height:14px;width:14px;border-radius:100%;background-color:#34C942;margin-right:7px"></div></div></div></div></main></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> |