TypeScript cycle-ui.Button函数代码示例

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

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

本文整理汇总了TypeScript中@eldarlabs/cycle-ui.Button函数的典型用法代码示例。如果您正苦于以下问题：TypeScript Button函数的具体用法？TypeScript Button怎么用？TypeScript Button使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了Button函数的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: Counter3

export function Counter3(sources: any) {
  const { DOM } = sources;

  const decrement: any = Button(sources,
    { isolate: true, className: 'decrement', label: 'Decrement' });
  const increment = Button(sources,
    { isolate: true, className: 'increment', label: 'Increment' });

  const action$ = $.merge(
    DOM.select('.counter').select('.decrement').events('click').map( (ev: any) => -1),
    DOM.select('.counter').select('.increment').events('click').map( (ev: any) => +1)
  );

  //const action$ = decrement.click$.merge(increment.click$);
  const count$ = action$.startWith(0).scan((x: any, y: any) => x + y);

  const view$ = count$.combineLatest(decrement.DOM, increment.DOM,
    (count: any, dec: any, inc: any) => div('.counter', {}, [
      dec,
      inc,
      p({}, `Counter: ${count}`)
    ])
  );

  return {
    DOM: view$
  };
}

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

示例2: Dialogs

export function Dialogs(sources: any) {
  const DOM = sources.DOM;

  const cancelClick$ = DOM.select('.cancel').events('click').
    map( (ev: Event) => 'cancel');
  const saveClick$ = DOM.select('.save').events('click').
    map( (ev: Event) => 'save').
    do((x: any) => console.log('save: ' + x));

  const showDialogClick$ = DOM.select('.showDialog').events('click').
    map( (ev: Event) => 'show').
    do((x: any) => console.log('show: ' + x));

  const isDialogActive$: $<boolean> = $.merge<boolean>(
    cancelClick$.map(false),
    saveClick$.map(false),
    showDialogClick$.map(true)
  ).startWith(false);

  const cancelButton = Button(sources, { className: 'cancel', label: 'Cancel' } );
  const saveButton = Button(sources, { className: 'save', label: 'Save' } );

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

  const vtree$ = (
    isDialogActive$.map( (isDialogActive) => {
      return view(isDialogActive);
    })
  );

  return {
    DOM: vtree$,
  };
}

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

示例3: ButtonsView

export function ButtonsView(sources: any) {
  return (
    DemoCardView(sources, 'Buttons', [
      CardActions(sources, null, [
        Button(sources, {
          label: 'Button',
        }).DOM,
        Button(sources, {
          label: 'Button Raised',
          raised: true,
        }).DOM,
      ]).DOM
    ])
  );
}

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

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

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

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

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