本文整理匯總了TypeScript中@phosphor/virtualdom.h.div方法的典型用法代碼示例。如果您正苦於以下問題:TypeScript h.div方法的具體用法?TypeScript h.div怎麽用?TypeScript h.div使用的例子?那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@phosphor/virtualdom.h
的用法示例。
在下文中一共展示了h.div方法的6個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: it
it('should update the text of a text node', () => {
let host = document.createElement('div');
VirtualDOM.render(h.div('foo'), host);
let div = host.children[0];
expect(div.textContent).to.equal('foo');
VirtualDOM.render(h.div('bar'), host);
expect(host.children[0]).to.equal(div);
expect(div.textContent).to.equal('bar');
});
示例2: showDialog
execute: () => {
// Create the header of the about dialog
let headerLogo = h.div({className: 'jp-About-header-logo'});
let headerWordmark = h.div({className: 'jp-About-header-wordmark'});
let release = 'Beta Release Series';
let versionNumber = `Version ${info.version}`;
let versionInfo = h.span({className: 'jp-About-version-info'},
h.span({className: 'jp-About-release'}, release),
h.span({className: 'jp-About-version'}, versionNumber)
);
let title = h.span({className: 'jp-About-header'},
headerLogo,
h.div({className: 'jp-About-header-info'},
headerWordmark,
versionInfo
)
);
// Create the body of the about dialog
let jupyterURL = 'https://jupyter.org/about.html';
let contributorsURL = 'https://github.com/jupyterlab/jupyterlab/graphs/contributors';
let externalLinks = h.span({className: 'jp-About-externalLinks'},
h.a({
href: contributorsURL,
target: '_blank',
className: 'jp-Button-flat'
}, 'CONTRIBUTOR LIST'),
h.a({
href: jupyterURL,
target: '_blank',
className: 'jp-Button-flat'
}, 'ABOUT PROJECT JUPYTER')
);
let copyright = h.span({
className: 'jp-About-copyright'
}, 'Š 2018 Project Jupyter');
let body = h.div({ className: 'jp-About-body' },
externalLinks,
copyright
);
showDialog({
title,
body,
buttons: [
Dialog.createButton({
label: 'DISMISS',
className: 'jp-About-button jp-mod-reject jp-mod-styled'
})
]
});
}
示例3: it
it('should connect a node to a command', () => {
let called = false;
const command = 'commandlinker:connect-node';
const commands = new CommandRegistry();
const linker = new CommandLinker({ commands });
let node: HTMLElement;
let vnode: VirtualNode;
const disposable = commands.addCommand(command, {
execute: () => {
called = true;
}
});
vnode = h.div({ dataset: linker.populateVNodeDataset(command, null) });
node = VirtualDOM.realize(vnode);
document.body.appendChild(node);
expect(called).to.equal(false);
simulate(node, 'click');
expect(called).to.equal(true);
document.body.removeChild(node);
linker.dispose();
disposable.dispose();
});
示例4: render
/**
* Render the landing plugin to virtual DOM nodes.
*/
protected render(): VirtualNode {
let activitiesList: VirtualNode[] = [];
let activites = this.model.activities;
for (let activityName of activites) {
let imgName = activityName[0].replace(' ', '');
let column =
h.div({className: LANDING_COLUMN_CLASS},
h.span({className: LANDING_ICON_CLASS + ` jp-Image${imgName}` ,
onclick: () => {
this._app.commands.execute(activityName[1], void 0);
}}
),
h.span({className: LANDING_TEXT_CLASS}, activityName[0])
);
activitiesList.push(column);
}
let logo = h.span({className: JUPYTERLAB_ICON_CLASS + ' ' + LANDING_LOGO_CLASS});
let subtitle =
h.span({className: LANDING_SUBTITLE_CLASS},
this.model.previewMessage
);
let tour =
h.span({className: TOUR_ICON_CLASS,
onclick: () => {
this._app.commands.execute(AboutCommandIDs.open, void 0);
}}
);
let header = h.span({
className: LANDING_HEADER_CLASS
}, this.model.headerText);
let body = h.div({className: LANDING_BODY_CLASS}, activitiesList);
let dialog = h.div({className: LANDING_DIALOG_CLASS},
logo,
subtitle,
tour,
header,
body,
h.div({className: LANDING_CWD_CLASS},
h.span({className: FOLDER_ICON_CLASS + ' ' + FOLDER_CLASS}),
h.span({className: LANDING_PATH_CLASS}, this.model.path
)
)
);
return h.div({ className: LANDING_WRAPPER_CLASS }, dialog);
}
示例5: render
/**
* Render the landing plugin to virtual DOM nodes.
*/
protected render(): VirtualNode {
let activitiesList: VirtualNode[] = [];
let activites = this.model.activities;
for (let activityName of activites) {
let name = activityName[0];
let command = activityName[1];
let args = activityName[2];
let imgName = name.replace(' ', '');
let column = h.div({ className: LANDING_COLUMN_CLASS },
h.span({
className: LANDING_ICON_CLASS + ` jp-Image${imgName}` ,
dataset: this._linker.populateVNodeDataset(command, args)
}),
h.span({ className: LANDING_TEXT_CLASS }, name)
);
activitiesList.push(column);
}
let logo = h.span({
className: `${JUPYTERLAB_ICON_CLASS} ${LANDING_LOGO_CLASS}`
});
let subtitle = h.span(
{className: LANDING_SUBTITLE_CLASS},
this.model.previewMessage
);
let tour = h.span({
className: TOUR_ICON_CLASS,
dataset: this._linker.populateVNodeDataset('about-jupyterlab:open', {})
});
let header = h.span({
className: LANDING_HEADER_CLASS
}, this.model.headerText);
let body = h.div({ className: LANDING_BODY_CLASS }, activitiesList);
let dialog = h.div({ className: LANDING_DIALOG_CLASS },
logo,
subtitle,
tour,
header,
body
);
return h.div({ className: LANDING_WRAPPER_CLASS }, dialog);
}
示例6: doBuild
builder.getStatus().then(response => {
if (response.status === 'building') {
return doBuild();
}
if (response.status !== 'needed') {
return;
}
let body = h.div(
h.p(
'JupyterLab build is suggested:',
h.br(),
h.pre(response.message)
)
);
showDialog({
title: 'Build Recommended',
body,
buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'BUILD' })]
}).then(result => {
if (result.button.accept) {
return doBuild();
}
});
});