本文整理匯總了TypeScript中cycle-snabbdom.div函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript div函數的具體用法？TypeScript div怎麽用？TypeScript div使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了div函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: 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>
// // )}
// ]
)
);
});示例2: div
export function MainView$(sources: any) {
//sources.isolate = isolate;
return $.just(
div([
div([
//isolate(Counter)(sources).DOM
//isolate(Counter3)(sources).DOM
HeaderView(),
article([
KitchenSinkView(sources),
]),
FooterView(),
])
])
);
}示例3: classNames
return state$.map( ({props, checked} ) => {
const className = classNames('radioButton', style[props.disabled ? 'disabled' : 'field'],
props.className);
const inputClassName = classNames('radioInput', style.input);
//TODO: split input into a new function
return (
div([
label( { props: { className }, attrs: { 'data-cycle-ui': 'radio-button' } }, [
input( { props: {
className: inputClassName,
//TODO: which version?
// attributes: {
// readonly: props.readonly,
// },
readonly: props.readonly,
type: 'radio'
},
attrs: {
}}),
Radio(sources, {
checked: checked,
disabled: props.disabled,
}).DOM,
props.label && label([
span( { props: { className: style.text } },
props.label
),
]),
]),
])
);
});示例4: classNames
const vtree$ = props$.map( (props) => {
const className = classNames(style[props.checked ? 'radio-checked' : 'radio'], props.className);
return (
div( { props: { className }, attrs: { 'data-cycle-ui': 'radio' } } )
);
});示例5: 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
)
);
});示例6: classNames
const vtree$ = props$.map( (props) => {
const className = classNames(style.cardActions, props.className);
return (
div( { props: { className } },
children
)
);
});示例7: classNames
const vtree$ = props$.map( (props) => {
const className = classNames(style.root, {
[style.active]: props.active,
[style.invisible]: props.invisible
}, props.className);
return div( { props: { className } }, [
div( { props: { className: style.overlay } },
children
)
]);
// return (
// h('dialog', {hook: {insert}, props: { className } }, [
// div( { props: { className } }, [
// div( { props: { className: style.overlay } },
// children
// )
// ]);
});示例8: classNames
const vtree$ = props$.map( (props) => {
const $radioGroupSelectedValue = Observable.combineLatest(childrenValues, (...values) => {
return { itemMouseClick$ };
}).startWith(props.value)
.do(x => console.log('radioGroupSelectedValue ' + x));
const className = classNames('radioGroup', props.className);
return (
div( { props: { className }, attrs: { 'data-cycle-ui': 'radio-group' } },
childrenDOMs
)
);
});示例9: classNames
const vtree$ = props$.map( (props) => {
const className = classNames(style.card, {
[style.raised]: props.raised
}, props.className);
return (
div({
props: { className },
attrs: { 'data-cycle-ui': 'card' }
},
children
)
);
});示例10: div
DOM: count$.map(count =>
div([
Button(sources, { className: 'decrement', label: 'Decrement' }).DOM,
Button(sources, { className: 'increment', label: 'Increment' }).DOM,
p('Counter: ' + count)
])