製品版のみの機能
Dock Manager - 概要
Ignite UI Dock Manager コンポーネントは、ペインでアプリケーションのレイアウトを管理する方法を提供します。エンド ユーザーはペインをピン固定、サイズ変更、移動、非表示にすることでカスタマイズできます。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
Dock Manager コンポーネントの使用方法の詳細については、
このトピックを参照してください。
コード ビュー
クリップボードへコピー
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"
}
]
}
]
};
}
<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>
.dockManagerContent {
padding: 0.5rem;
}
<!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>