TypeScript cycle-snabbdom.div函数代码示例

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

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

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

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

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

开发者ID:eldarlabs，项目名称:cycle-ui-typescript-webpack，代码行数:16，代码来源:Main.ts

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

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:34，代码来源:RadioButton.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.cardText, props.className);
    console.log(children);
    return (
      div( { props: { className } },
        typeof children === 'string' ? p(children) : children
      )
    );
  });

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

示例6: 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

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

  });

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

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

开发者ID:eldarlabs，项目名称:cycle-ui，代码行数:15，代码来源:RadioGroup.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: div

 DOM: count$.map(count =>
     div([
       Button(sources, { className: 'decrement', label: 'Decrement' }).DOM,
       Button(sources, { className: 'increment', label: 'Increment' }).DOM,
       p('Counter: ' + count)
     ])

开发者ID:eldarlabs，项目名称:cycle-ui-typescript-webpack，代码行数:6，代码来源:index.ts

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