本文整理汇总了TypeScript中@phosphor/widgets.Panel类的典型用法代码示例。如果您正苦于以下问题:TypeScript Panel类的具体用法?TypeScript Panel怎么用?TypeScript Panel使用的例子?那么, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了Panel类的8个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: constructor
/**
* Create a dialog panel instance.
*
* @param options - The dialog setup options.
*/
constructor(options: Dialog.IOptions={}) {
super();
this.addClass('jp-Dialog');
options = Private.handleOptions(options);
let renderer = options.renderer;
this._host = options.host;
this._defaultButton = options.defaultButton;
this._buttons = options.buttons;
this._buttonNodes = toArray(map(this._buttons, button => {
return renderer.createButtonNode(button);
}));
this._primary = (
options.primaryElement || this._buttonNodes[this._defaultButton]
);
let layout = this.layout = new PanelLayout();
let content = new Panel();
content.addClass('jp-Dialog-content');
layout.addWidget(content);
let header = renderer.createHeader(options.title);
let body = renderer.createBody(options.body);
let footer = renderer.createFooter(this._buttonNodes);
content.addWidget(header);
content.addWidget(body);
content.addWidget(footer);
}
示例2: showDiff
/**
* Show the diff as represented by the base notebook and a list of diff entries
*/
function showDiff(data: {base: nbformat.INotebookContent, diff: IDiffEntry[]}): Promise<void> {
let rendermime = new RenderMimeRegistry({
initialFactories: rendererFactories,
sanitizer: defaultSanitizer,
});
let nbdModel = new NotebookDiffModel(data.base, data.diff);
let nbdWidget = new NotebookDiffWidget(nbdModel, rendermime);
let root = document.getElementById('nbdime-root');
if (!root) {
throw new Error('Missing root element "nbidme-root"');
}
root.innerHTML = '';
let panel = new Panel();
panel.id = 'main';
Widget.attach(panel, root);
panel.addWidget(nbdWidget);
let work = nbdWidget.init();
work.then(() => {
window.onresize = () => { panel.update(); };
});
diffWidget = nbdWidget;
return work;
}
示例3: it
it('should insert a widget at the specified index', () => {
let panel = new Panel();
let widget = new Widget();
panel.addWidget(new Widget());
panel.insertWidget(0, widget);
expect(panel.widgets[0]).to.equal(widget);
});
示例4: constructor
constructor(inner: Widget, headerTitle?: string, collapsed?: boolean) {
super();
this.addClass(COLLAPSIBLE_CLASS);
this.inner = inner;
let constructor = this.constructor as typeof CollapsiblePanel;
let header = constructor.createHeader(headerTitle);
this.header = header;
this.button = header.node.getElementsByClassName(
COLLAPSIBLE_HEADER_ICON)[0] as HTMLElement;
header.node.onclick = this.toggleCollapsed.bind(this);
this.addWidget(header);
this.container = new Panel();
this.container.addClass(COLLAPSIBLE_CONTAINER);
this.slider = new Panel();
this.slider.addClass(COLLAPSIBLE_SLIDER);
this.slider.addWidget(inner);
this.container.addWidget(this.slider);
this.addWidget(this.container);
this.slider.addClass(
collapsed === true ?
COLLAPSIBLE_CLOSED :
COLLAPSIBLE_OPEN);
this.button.classList.add(
collapsed === true ?
COLLAPSIBLE_HEADER_ICON_CLOSED :
COLLAPSIBLE_HEADER_ICON_OPEN);
}
示例5: CellDiffWidget
return new Promise<void>(resolve => {
if (chunk.length === 1 && !(chunk[0].added || chunk[0].deleted)) {
this.addWidget(new CellDiffWidget(
chunk[0], rendermime, model.mimetype));
} else {
let chunkPanel = new Panel();
chunkPanel.addClass(CHUNK_PANEL_CLASS);
let addedPanel = new Panel();
addedPanel.addClass(ADDED_CHUNK_PANEL_CLASS);
let removedPanel = new Panel();
removedPanel.addClass(REMOVED_CHUNK_PANEL_CLASS);
for (let cell of chunk) {
let target = cell.deleted ? removedPanel : addedPanel;
target.addWidget(new CellDiffWidget(cell, rendermime, model.mimetype));
}
chunkPanel.addWidget(addedPanel);
chunkPanel.addWidget(removedPanel);
this.addWidget(chunkPanel);
}
// This limits us to drawing 60 cells per second, which shouldn't
// be a problem...
requestAnimationFrame(() => {
resolve();
});
});
示例6: createHeader
static createHeader(headerTitle?: string): Panel {
let header = new Panel();
header.addClass(COLLAPSIBLE_HEADER);
if (headerTitle) {
// let title = document.createElement('span');
header.node.innerText = headerTitle;
// header.appendChild(title);
}
let button = document.createElement('button');
button.className = COLLAPSIBLE_HEADER_ICON;
header.node.appendChild(button);
return header;
}
示例7: dispose
dispose() {
super.dispose();
this.content.dispose();
this.labelContent.dispose();
this.label.dispose();
this.previewContainer && this.previewContainer.dispose();
}
示例8: render
render() {
const manager = this.model.widget_manager
const rendermime = manager.renderMime;
this._outputView = new OutputArea({
rendermime: rendermime,
model: this.model.outputs
})
this.pWidget.insertWidget(0, this._outputView);
this.pWidget.addClass('jupyter-widgets');
this.pWidget.addClass('widget-output');
this.update();
}