製品版のみの機能
Dock Manager - Dock Manager
Ignite UI Dock Manager コンポーネントは、ペインでアプリケーションのレイアウトを管理する方法を提供します。エンド ユーザーはペインをピン固定、サイズ変更、移動、非表示にすることでカスタマイズできます。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
Dock Manager コンポーネントの使用方法の詳細については、
このトピックを参照してください。
コード ビュー
クリップボードへコピー
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" /> <script type="module" > import { defineCustomElements } from 'http://cdn-na.infragistics.com/igniteui/2024.1/latest/dockmanager/loader/index.mjs'; defineCustomElements(); window.moduleLoaded = true; </script> <style> .dockManagerContent { padding: 0.5rem; } </style> </head> <body style="height: 600px;"> <igc-dockmanager id="dockManager"> <div slot="content1" class="dockManagerContent">Content 1</div> <div slot="content2" class="dockManagerContent">Content 2</div> <div slot="content3" class="dockManagerContent">Content 3</div> <div slot="content4" class="dockManagerContent">Content 4</div> <div slot="content5" class="dockManagerContent">Content 5</div> <div slot="content6" class="dockManagerContent">Content 6</div> <div slot="content7" class="dockManagerContent">Content 7</div> <div slot="content8" class="dockManagerContent">Content 8</div> <div slot="content9" class="dockManagerContent">Content 9</div> </igc-dockmanager> <div class="ui-html5-non-html5 ui-widget ui-igplayer" id="error" style="width: 100%; height:320px;"> <div class="ui-html5-non-html5-supported-message ui-helper-clearfix" style="OVERFLOW: auto" data-not-supported-browser="true"> <div class="ui-html5-non-html5-text">The current browser does not support ES6. <br>Try upgrading to any of the following versions:</div> <ul class="ui-html5-browsers-list"> <li class="ui-corner-all"><a class="ui-html5-chrome-icon" href="http://www.google.com/chrome" target="_blank">Google Chrome V 51+</a></li> <li class="ui-corner-all"><a class="ui-html5-firefox-icon" href="http://www.mozilla.com/" target="_blank">Mozilla Firefox V 54+</a></li> <li class="ui-corner-all"><a class="ui-html5-Opera-icon" href="http://www.opera.com/download/" target="_blank">Opera V 38+</a></li> <li class="ui-corner-all"><a class="ui-html5-safari-icon" href="http://www.apple.com/safari/download/" target="_blank">Apple Safari V 10+</a></li> <li class="ui-corner-all"><a class="ui-html5-ie-icon" href="https://www.microsoft.com/en-us/edge" target="_blank">Microsoft Edge V 14+</a></li> </ul> </div> </div> <script> $(function () { if (!window.moduleLoaded) { $("#dockManager").hide(); $("#error").show(); } else { $("#error").hide(); document.getElementById('dockManager').layout = { rootPane: { type: "splitPane", orientation: "horizontal", panes: [ { type: "splitPane", orientation: "vertical", panes: [ { type: "contentPane", contentId: "content1", header: "Content Pane 1" }, { type: "contentPane", contentId: "content2", header: "Unpinned Pane 1", isPinned: false } ] }, { type: "splitPane", orientation: "vertical", size: 200, panes: [ { type: "documentHost", size: 200, rootPane: { type: "splitPane", orientation: "horizontal", panes: [ { type: "tabGroupPane", panes: [ { type: "contentPane", header: "Document 1", contentId: "content3" }, { type: "contentPane", header: "Document 2", contentId: "content4" } ] } ] } }, { type: "contentPane", contentId: "content5", header: "Unpinned Pane 2", isPinned: false } ] }, { type: "splitPane", orientation: "vertical", panes: [ { type: "tabGroupPane", size: 200, panes: [ { type: "contentPane", contentId: "content6", header: "Tab 1" }, { type: "contentPane", contentId: "content7", header: "Tab 2" } ] }, { type: "contentPane", contentId: "content8", header: "Content Pane 2" } ] } ] }, floatingPanes: [ { type: "splitPane", orientation: "horizontal", floatingHeight: 150, floatingWidth: 250, floatingLocation: { x: 300, y: 200 }, panes: [ { type: "contentPane", contentId: "content9", header: "Floating Pane" } ] } ] }; } }); </script> </body> </html>