TypeScript classnames类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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)
             )
         })
     )
 })

开发者ID:jakobrun，项目名称:gandalf，代码行数:34，代码来源:result.ts

示例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
            ),
          ]),
        ]),
      ])
    );
  });

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:34，代码来源:RadioButton.ts

示例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',
  });
};

开发者ID:emjburns，项目名称:deck，代码行数:8，代码来源:utils.ts

示例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' } } )
    );
  });

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:8，代码来源:Radio.ts

示例5: classNames

  const vtree$ = props$.map( (props) => {

    const className = classNames(style.cardActions, props.className);

    return (
      div( { props: { className } },
        children
      )
    );
  });

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:10，代码来源:CardActions.ts

示例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
      )
    );
  });

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:10，代码来源:CardText.ts

示例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>
     `;
 }

开发者ID:AlexGalays，项目名称:DefinitelyTyped，代码行数:11，代码来源:css-modules-tests.ts

示例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>
      //   // )}
      // ]
      )
    );
  });

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:50，代码来源:CardTitle.ts

示例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
      )
    );
  });

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:15，代码来源:Card.ts

示例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
      )
    );
  });

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:15，代码来源:RadioGroup.ts

注：本文中的classnames类示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。