本文整理匯總了TypeScript中@phosphor/widgets.TabBar類的典型用法代碼示例。如果您正苦於以下問題：TypeScript TabBar類的具體用法？TypeScript TabBar怎麽用？TypeScript TabBar使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了TabBar類的2個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: each
activate: (app: JupyterLab, restorer: ILayoutRestorer): void => {
const { shell } = app;
const tabs = new TabBar<Widget>({ orientation: 'vertical' });
const header = document.createElement('header');
restorer.add(tabs, 'tab-manager');
tabs.id = 'tab-manager';
tabs.title.label = 'Tabs';
header.textContent = 'Open Tabs';
tabs.node.insertBefore(header, tabs.contentNode);
shell.addToLeftArea(tabs, { rank: 600 });
app.restored.then(() => {
const populate = () => {
tabs.clearTabs();
each(shell.widgets('main'), widget => { tabs.addTab(widget.title); });
};
// Connect signal handlers.
shell.layoutModified.connect(() => { populate(); });
tabs.tabActivateRequested.connect((sender, tab) => {
shell.activateById(tab.title.owner.id);
});
tabs.tabCloseRequested.connect((sender, tab) => {
tab.title.owner.close();
});
// Populate the tab manager.
populate();
});
},示例2: each
activate: (
app: JupyterFrontEnd,
labShell: ILabShell | null,
restorer: ILayoutRestorer | null
): void => {
const { shell } = app;
const tabs = new TabBar<Widget>({ orientation: 'vertical' });
const header = document.createElement('header');
if (restorer) {
restorer.add(tabs, 'tab-manager');
}
tabs.id = 'tab-manager';
tabs.title.iconClass = 'jp-TabIcon jp-SideBar-tabIcon';
tabs.title.caption = 'Open Tabs';
header.textContent = 'Open Tabs';
tabs.node.insertBefore(header, tabs.contentNode);
shell.add(tabs, 'left', { rank: 600 });
void app.restored.then(() => {
const populate = () => {
tabs.clearTabs();
each(shell.widgets('main'), widget => {
tabs.addTab(widget.title);
});
};
// Connect signal handlers.
tabs.tabActivateRequested.connect((sender, tab) => {
shell.activateById(tab.title.owner.id);
});
tabs.tabCloseRequested.connect((sender, tab) => {
tab.title.owner.close();
populate();
});
// If available, connect to the shell's layout modified signal.
if (labShell) {
labShell.layoutModified.connect(() => {
populate();
});
}
// Populate the tab manager.
populate();
});
},