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

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

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

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

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

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

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

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

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

示例4: FooterView

export function FooterView() {
  return (
    footer(`.${style.footer}`, [
      p([
        'ÂŠ ',
        a({
          'props': {
            'href': 'https://eldarlabs.com'
          }
        }, `Eldar Labs`),
        ' 2016'])
    ])
  );
}

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

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

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

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

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

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