TypeScript widgets.BoxPanel類代碼示例

本文整理匯總了TypeScript中@phosphor/widgets.BoxPanel類的典型用法代碼示例。如果您正苦於以下問題：TypeScript BoxPanel類的具體用法？TypeScript BoxPanel怎麽用？TypeScript BoxPanel使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。

在下文中一共展示了BoxPanel類的6個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: it

 it('should remove the child class from a child removed from the panel', () => {
   let panel = new BoxPanel();
   let widget = new Widget();
   panel.addWidget(widget);
   widget.parent = null;
   expect(widget.hasClass('p-BoxPanel-child')).to.equal(false);
 });

開發者ID:afshin，項目名稱:phosphor，代碼行數:7，代碼來源:boxpanel.spec.ts

示例2: main

function main(): void {
  const manager = new SessionManager();
  const session = new ClientSession({ manager, name: 'Example' });
  const mimeService = new CodeMirrorMimeTypeService();

  // Initialize the command registry with the bindings.
  const commands = new CommandRegistry();
  const useCapture = true;

  // Setup the keydown listener for the document.
  document.addEventListener(
    'keydown',
    event => {
      commands.processKeydownEvent(event);
    },
    useCapture
  );

  // Create the cell widget with a default rendermime instance.
  const rendermime = new RenderMimeRegistry({ initialFactories });

  const cellWidget = new CodeCell({
    rendermime,
    model: new CodeCellModel({})
  }).initializeState();

  // Handle the mimeType for the current kernel.
  session.kernelChanged.connect(() => {
    void session.kernel.ready.then(() => {
      const lang = session.kernel.info.language_info;
      const mimeType = mimeService.getMimeTypeByLanguage(lang);
      cellWidget.model.mimeType = mimeType;
    });
  });

  // Start the default kernel.
  session.kernelPreference = { autoStartDefault: true };
  void session.initialize();

  // Set up a completer.
  const editor = cellWidget.editor;
  const model = new CompleterModel();
  const completer = new Completer({ editor, model });
  const connector = new KernelConnector({ session });
  const handler = new CompletionHandler({ completer, connector });

  // Set the handler's editor.
  handler.editor = editor;

  // Hide the widget when it first loads.
  completer.hide();

  // Create a toolbar for the cell.
  const toolbar = new Toolbar();
  toolbar.addItem('spacer', Toolbar.createSpacerItem());
  toolbar.addItem('interrupt', Toolbar.createInterruptButton(session));
  toolbar.addItem('restart', Toolbar.createRestartButton(session));
  toolbar.addItem('name', Toolbar.createKernelNameItem(session));
  toolbar.addItem('status', Toolbar.createKernelStatusItem(session));

  // Lay out the widgets.
  const panel = new BoxPanel();
  panel.id = 'main';
  panel.direction = 'top-to-bottom';
  panel.spacing = 0;
  panel.addWidget(completer);
  panel.addWidget(toolbar);
  panel.addWidget(cellWidget);
  BoxPanel.setStretch(toolbar, 0);
  BoxPanel.setStretch(cellWidget, 1);

  // Attach the panel to the DOM.
  Widget.attach(panel, document.body);

  // Handle widget state.
  window.addEventListener('resize', () => {
    panel.update();
  });
  cellWidget.activate();

  // Add the commands.
  commands.addCommand('invoke:completer', {
    execute: () => {
      handler.invoke();
    }
  });
  commands.addCommand('run:cell', {
    execute: () => CodeCell.execute(cellWidget, session)
  });

  commands.addKeyBinding({
    selector: '.jp-InputArea-editor.jp-mod-completer-enabled',
    keys: ['Tab'],
    command: 'invoke:completer'
  });
  commands.addKeyBinding({
    selector: '.jp-InputArea-editor',
    keys: ['Shift Enter'],
    command: 'run:cell'
  });
//.........這裏部分代碼省略.........

開發者ID:afshin，項目名稱:jupyterlab，代碼行數:101，代碼來源: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

示例6:

			window.onresize = () => {
				main.update();
			};

開發者ID:ermalism，項目名稱:phosphorjs-react-jsx-example，代碼行數:3，代碼來源:index.ts

注：本文中的@phosphor/widgets.BoxPanel類示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。