本文整理匯總了TypeScript中classnames類的典型用法代碼示例。如果您正苦於以下問題：TypeScript classnames類的具體用法？TypeScript classnames怎麽用？TypeScript classnames使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了classnames類的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: data
data().map((row, rowIndex) => {
return m(
'tr',
{
class: classnames(
selectedRow() === rowIndex &&
'row-selected'
),
},
row.map((value, index) => {
return m(
'td',
{
class:
'col-' +
rowIndex +
'-' +
index,
style:
'width: ' +
columnWidth(index) +
'px',
tabindex: 0,
onkeydown: onCellKeydown,
onfocus: () => {
selectedRow(rowIndex)
selectedCol(index)
},
},
valueToString(value)
)
})
)
})示例2: 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
),
]),
]),
])
);
});示例3: classNames
export const validationClassName = (validation: IValidationProps) => {
validation = validation || {};
return classNames({
'ng-dirty': !!validation.touched,
'ng-invalid': validation.validationStatus === 'error',
'ng-warning': validation.validationStatus === 'warning',
});
};示例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.cardActions, props.className);
return (
div( { props: { className } },
children
)
);
});示例6: 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
)
);
});示例7: render
render() {
// as a style tag (using webpack's css-loader)
const tpl = `<div style="${styles.toString()}"></div>`;
// or as scoped unique classes, also latest typescript versions allow prop access using dot like styles.darkUI instead of styles['darkUI']
return `
<div class="${classNames((this.theme === 'dark') ?
styles.darkUI :
styles.lightUI.toString())}">
</div>
`;
}示例8: 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>
// // )}
// ]
)
);
});示例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: 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
)
);
});