本文整理匯總了TypeScript中@phosphor/widgets.DockPanel類的典型用法代碼示例。如果您正苦於以下問題:TypeScript DockPanel類的具體用法?TypeScript DockPanel怎麽用?TypeScript DockPanel使用的例子?那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了DockPanel類的5個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: main
function main(): void {
let term1 = new Terminal({ theme: 'light' });
let term2 = new Terminal({ theme: 'dark' });
TerminalSession.startNew().then(session => { term1.session = session; });
TerminalSession.startNew().then(session => { term2.session = session; });
term1.title.closable = true;
term2.title.closable = true;
let dock = new DockPanel();
dock.addWidget(term1);
dock.addWidget(term2, { mode: 'tab-before' });
dock.id = 'main';
// Attach the widget to the dom.
Widget.attach(dock, document.body);
// Handle resize events.
window.addEventListener('resize', () => { dock.fit(); });
}
示例2: main
function main(): void {
let term1 = new Terminal({
background: 'black',
color: 'white'
});
let term2 = new Terminal({
background: 'white',
color: 'black'
});
TerminalSession.startNew().then(session => { term1.session = session; });
TerminalSession.startNew().then(session => { term2.session = session; });
term1.title.closable = true;
term2.title.closable = true;
let dock = new DockPanel();
dock.addWidget(term1);
dock.addWidget(term2, { mode: 'tab-before' });
Widget.attach(dock, document.body);
dock.id = 'main';
window.onresize = () => dock.fit();
}
示例3: main
//.........這裏部分代碼省略.........
palette.addItem({ command: 'example:new-tab', category: 'File' });
palette.addItem({ command: 'example:close-tab', category: 'File' });
palette.addItem({ command: 'example:save-on-exit', category: 'File' });
palette.addItem({ command: 'example:open-task-manager', category: 'File' });
palette.addItem({ command: 'example:close', category: 'File' });
palette.addItem({ command: 'example:clear-cell', category: 'Notebook Cell Operations' });
palette.addItem({ command: 'example:cut-cells', category: 'Notebook Cell Operations' });
palette.addItem({ command: 'example:run-cell', category: 'Notebook Cell Operations' });
palette.addItem({ command: 'example:cell-test', category: 'Console' });
palette.addItem({ command: 'notebook:new', category: 'Notebook' });
palette.id = 'palette';
let contextMenu = new ContextMenu({ commands });
document.addEventListener('contextmenu', (event: MouseEvent) => {
if (contextMenu.open(event)) {
event.preventDefault();
}
});
contextMenu.addItem({ command: 'example:cut', selector: '.content' });
contextMenu.addItem({ command: 'example:copy', selector: '.content' });
contextMenu.addItem({ command: 'example:paste', selector: '.content' });
contextMenu.addItem({ command: 'example:one', selector: '.p-CommandPalette' });
contextMenu.addItem({ command: 'example:two', selector: '.p-CommandPalette' });
contextMenu.addItem({ command: 'example:three', selector: '.p-CommandPalette' });
contextMenu.addItem({ command: 'example:four', selector: '.p-CommandPalette' });
contextMenu.addItem({ command: 'example:black', selector: '.p-CommandPalette' });
contextMenu.addItem({ command: 'notebook:new', selector: '.p-CommandPalette-input' });
contextMenu.addItem({ command: 'example:save-on-exit', selector: '.p-CommandPalette-input' });
contextMenu.addItem({ command: 'example:open-task-manager', selector: '.p-CommandPalette-input' });
contextMenu.addItem({ type: 'separator', selector: '.p-CommandPalette-input' });
document.addEventListener('keydown', (event: KeyboardEvent) => {
commands.processKeydownEvent(event);
});
let r1 = new ContentWidget('Red');
let b1 = new ContentWidget('Blue');
let g1 = new ContentWidget('Green');
let y1 = new ContentWidget('Yellow');
let r2 = new ContentWidget('Red');
let b2 = new ContentWidget('Blue');
// let g2 = new ContentWidget('Green');
// let y2 = new ContentWidget('Yellow');
let dock = new DockPanel();
dock.addWidget(r1);
dock.addWidget(b1, { mode: 'split-right', ref: r1 });
dock.addWidget(y1, { mode: 'split-bottom', ref: b1 });
dock.addWidget(g1, { mode: 'split-left', ref: y1 });
dock.addWidget(r2, { ref: b1 });
dock.addWidget(b2, { mode: 'split-right', ref: y1 });
dock.id = 'dock';
let savedLayouts: DockPanel.ILayoutConfig[] = [];
commands.addCommand('save-dock-layout', {
label: 'Save Layout',
caption: 'Save the current dock layout',
execute: () => {
savedLayouts.push(dock.saveLayout());
palette.addItem({
command: 'restore-dock-layout',
category: 'Dock Layout',
args: { index: savedLayouts.length - 1 }
});
}
});
commands.addCommand('restore-dock-layout', {
label: args => {
return `Restore Layout ${args.index as number}`;
},
execute: args => {
dock.restoreLayout(savedLayouts[args.index as number]);
}
});
palette.addItem({
command: 'save-dock-layout',
category: 'Dock Layout',
rank: 0
});
BoxPanel.setStretch(dock, 1);
let main = new BoxPanel({ direction: 'left-to-right', spacing: 0 });
main.id = 'main';
main.addWidget(palette);
main.addWidget(dock);
window.onresize = () => { main.update(); };
Widget.attach(bar, document.body);
Widget.attach(main, document.body);
}
示例4: main
//.........這裏部分代碼省略.........
});
commands.addKeyBinding({
keys: ['Accel J', 'Accel J'],
selector: 'body',
command: 'example:new-tab'
});
commands.addKeyBinding({
keys: ['Accel M'],
selector: 'body',
command: 'example:open-task-manager'
});
let menu1 = createMenu();
menu1.title.label = 'File';
menu1.title.mnemonic = 0;
let menu2 = createMenu();
menu2.title.label = 'Edit';
menu2.title.mnemonic = 0;
let menu3 = createMenu();
menu3.title.label = 'View';
menu3.title.mnemonic = 0;
let ctxt = createMenu();
let bar = new MenuBar();
bar.addMenu(menu1);
bar.addMenu(menu2);
bar.addMenu(menu3);
bar.id = 'menuBar';
let palette = new CommandPalette({ commands });
palette.addItem({ command: 'example:cut', category: 'Edit' });
palette.addItem({ command: 'example:copy', category: 'Edit' });
palette.addItem({ command: 'example:paste', category: 'Edit' });
palette.addItem({ command: 'example:one', category: 'Number' });
palette.addItem({ command: 'example:two', category: 'Number' });
palette.addItem({ command: 'example:three', category: 'Number' });
palette.addItem({ command: 'example:four', category: 'Number' });
palette.addItem({ command: 'example:black', category: 'Number' });
palette.addItem({ command: 'example:new-tab', category: 'File' });
palette.addItem({ command: 'example:close-tab', category: 'File' });
palette.addItem({ command: 'example:save-on-exit', category: 'File' });
palette.addItem({ command: 'example:open-task-manager', category: 'File' });
palette.addItem({ command: 'example:close', category: 'File' });
palette.addItem({ command: 'notebook:new', category: 'Notebook' });
palette.id = 'palette';
document.addEventListener('contextmenu', (event: MouseEvent) => {
event.preventDefault();
ctxt.open(event.clientX, event.clientY);
console.log('ctxt menu');
});
document.addEventListener('keydown', (event: KeyboardEvent) => {
// if (!event.ctrlKey && !event.shiftKey && !event.metaKey && event.keyCode === 18) {
// event.preventDefault();
// event.stopPropagation();
// bar.activeIndex = 0;
// bar.activate();
// } else {
// keymap.processKeydownEvent(event);
// }
commands.processKeydownEvent(event);
});
let r1 = new ContentWidget('Red');
let b1 = new ContentWidget('Blue');
let g1 = new ContentWidget('Green');
let y1 = new ContentWidget('Yellow');
let r2 = new ContentWidget('Red');
let b2 = new ContentWidget('Blue');
// let g2 = new ContentWidget('Green');
// let y2 = new ContentWidget('Yellow');
let dock = new DockPanel();
dock.addWidget(r1);
dock.addWidget(b1, { mode: 'split-right', ref: r1 });
dock.addWidget(y1, { mode: 'split-bottom', ref: b1 });
dock.addWidget(g1, { mode: 'split-left', ref: y1 });
dock.addWidget(r2, { ref: b1 });
dock.addWidget(b2, { mode: 'split-right', ref: y1 });
dock.id = 'dock';
BoxPanel.setStretch(dock, 1);
let main = new BoxPanel({ direction: 'left-to-right', spacing: 0 });
main.id = 'main';
main.addWidget(palette);
main.addWidget(dock);
window.onresize = () => { main.update(); };
Widget.attach(bar, document.body);
Widget.attach(main, document.body);
}
示例5: return
//.........這裏部分代碼省略.........
}
});
commands.addCommand("close", {
label: "Close",
mnemonic: 0,
icon: "fa fa-close",
execute: () => {
console.log("Close");
}
});
commands.addCommand("default-theme", {
label: "Default theme",
mnemonic: 0,
icon: "fa fa-paint-brush",
execute: () => {
console.log("Default theme");
}
});
commands.addCommand("clean-theme", {
label: "Clean theme",
mnemonic: 0,
icon: "fa fa-tint",
execute: () => {
console.log("Clean theme");
}
});
commands.addCommand("dark-toggle", {
label: "Toggle",
mnemonic: 0,
icon: "fa fa-plus",
execute: () => {
document.body.classList.toggle("--dark");
}
});
let menu1 = new Menu({commands});
menu1.title.label = "File";
menu1.title.mnemonic = 0;
menu1.addItem({command: "new-tab"});
menu1.addItem({type: "separator"});
menu1.addItem({command: "close"});
let menu2 = new Menu({commands});
menu2.title.label = "Theme";
menu2.title.mnemonic = 0;
menu2.addItem({command: "default-theme"});
menu2.addItem({command: "clean-theme"});
let ctxt = new Menu({commands});
ctxt.addItem({command: "copy"});
ctxt.addItem({command: "cut"});
ctxt.addItem({command: "paste"});
let bar = new MenuBar();
bar.addMenu(menu1);
bar.addMenu(menu2);
bar.id = "menuBar";
let toggle = new Toggle({onLabel: "Dark", offLabel: "Light", command: "dark-toggle", commands: commands});
toggle.id = "daylightToggle";
bar.node.appendChild(toggle.node);
let sidebar = new Sidebar();
sidebar.id = "sidebar";
let button = new Button({label: "New Tab", command: "new-tab", commands: commands});
sidebar.addWidget(button);
document.addEventListener("contextmenu", (event: MouseEvent) => {
event.preventDefault();
ctxt.open(event.clientX, event.clientY);
console.log("ctxt menu");
});
let r1 = new Content("Tab 1");
let b1 = new Content("Tab 2");
let dock = new DockPanel();
dock.addWidget(r1);
dock.addWidget(b1);
dock.id = "dock";
BoxPanel.setStretch(dock, 1);
let main = new BoxPanel({direction: "left-to-right", spacing: 0});
main.id = "main";
main.addWidget(sidebar);
main.addWidget(dock);
window.onresize = () => {
main.update();
};
Widget.attach(bar, document.body);
Widget.attach(main, document.body);
};