TypeScript widgets.DockPanel类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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(); });
}

开发者ID:groutr，项目名称:jupyterlab，代码行数:20，代码来源:index.ts

示例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();
}

开发者ID:charnpreetsingh185，项目名称:jupyterlab，代码行数:24，代码来源:index.ts

示例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);
}

开发者ID:afshin，项目名称:phosphor，代码行数:101，代码来源:index.ts

示例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);
}

开发者ID:rlugojr，项目名称:phosphor，代码行数:101，代码来源:index.ts

示例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);
		};

开发者ID:ermalism，项目名称:phosphorjs-react-jsx-example，代码行数:101，代码来源:index.ts

注：本文中的@phosphor/widgets.DockPanel类示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。