本文整理汇总了TypeScript中cycle-snabbdom.p函数的典型用法代码示例。如果您正苦于以下问题：TypeScript p函数的具体用法？TypeScript p怎么用？TypeScript p使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了p函数的7个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: view
function view(isDrawerActive: boolean) {
const drawer = (
Drawer(sources, { isolate: false, className: 'drawer', active: isDrawerActive, type: 'left' }, [
h5('This is a left drawer'),
p('A drawer can have multiple children controls'),
Input(sources, { label: 'Input in a Drawer' }).DOM,
])
);
// (<any>drawer).closeEvent$.subscribe( (x: any) => {
// console.log('close obs event: ' + x);
// });
return (
Card(sources, { isolate: false, className: 'demoDrawers' }, [
CardTitle(sources, { isolate: false, title: 'Drawers (Work in progress)' }, [
CardText(sources, { isolate: true }, [
Button(sources, { isolate: false, className: 'showDrawer', label: 'Show Drawer',
raised: true }).DOM,
p('is active: ' + isDrawerActive),
drawer.DOM,
]).DOM
]).DOM
]).DOM
);
}示例2: view
function view(isDialogActive: boolean) {
return (
DemoCardView(sources, 'Dialogs (Work in progress)', [
CardText(sources, [
Button(sources, { className: 'showDialog', label: 'Show Modal Dialog',
raised: true }).DOM,
p('is active: ' + isDialogActive),
Dialog({ title: 'Test Dialog', active: isDialogActive,
actions: [cancelButton.DOM, saveButton] }, [
p('This is a dialog'),
p('A dialog can have multiple children controls')
]
).DOM
]).DOM
])
);
}示例3: classNames
const vtree$ = props$.map( (props) => {
const className = classNames(style.cardText, props.className);
console.log(children);
return (
div( { props: { className } },
typeof children === 'string' ? p(children) : children
)
);
});示例4: FooterView
export function FooterView() {
return (
footer(`.${style.footer}`, [
p([
'Š ',
a({
'props': {
'href': 'https://eldarlabs.com'
}
}, `Eldar Labs`),
' 2016'])
])
);
}示例5: classNames
const vtree$ = props$.map( (props) => {
//TODO: do Avatars at some point
//let avatarComponent;
// if (typeof avatar === 'string') {
// avatarComponent = <Avatar image={avatar} />;
// } else {
// avatarComponent = avatar;
// }
const className = classNames(style.cardTitle, {
// [style.small]: props.avatar,
// [style.large]: !props.avatar
}, props.className);
const titleDOM = props.title &&
h5(`.${style.title}`, props.title);
const childrenAsStringDOM = children && typeof children === 'string' &&
h5(`.${style.title}`,
children
);
const subtitleDOM = props.subtitle &&
p(`.${style.subtitle}`, props.subtitle);
const childrenAsArray = children && typeof children !== 'string' &&
children;
return (
div( { props: { className } }, [
div(concat([],
titleDOM,
childrenAsStringDOM,
subtitleDOM,
childrenAsArray
)),
]
// [
// //TODO: Avatars
// // {avatarComponent && (
// // <div className={style.avatar}>
// // {avatarComponent}
// // </div>
// // )}
// ]
)
);
});示例6: SpielView
export function SpielView() {
return (
h2('Kitchen Sink'),
p([
'Demo site for ',
a({
'props': {
'href': 'https://github.com/eldarlabs/cycle-ui'
}
}, 'Cycle-UI'),
' using ',
a({
'props': {
'href': 'https://github.com/eldarlabs/cycle-ui-typescript-webpack'
}
}, 'cycle-ui-typescript-webpack'),
' starter project.'
])
);
}示例7: div
DOM: count$.map(count =>
div([
Button(sources, { className: 'decrement', label: 'Decrement' }).DOM,
Button(sources, { className: 'increment', label: 'Increment' }).DOM,
p('Counter: ' + count)
])