当前位置: 首页>>代码示例>>TypeScript>>正文

TypeScript jb.component方法代码示例

本文整理汇总了TypeScript中jb-core.jb.component方法的典型用法代码示例。如果您正苦于以下问题：TypeScript jb.component方法的具体用法？TypeScript jb.component怎么用？TypeScript jb.component使用的例子？那么, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类jb-core.jb的用法示例。


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

示例1: 

import {jb} from 'jb-core';

jb.component('md-test.md-button', {
  type: 'test',
  impl : {$: 'ng2-ui-test',  
    control :{$: 'button', title: 'ccc', 
        style :{$: 'button.md-raised' }
    },
    expectedHtmlResult: { $: 'contains', text: 'cc' }
  }
})

jb.component('md-test.md-card-title', {
  type: 'test',
  impl :{$: 'ng2-ui-test',  
    control :{$: 'label', title: 'ccc', 
        style :{$: 'label.md-card-title' }
    },
    expectedHtmlResult: { $: 'contains', text: 'cc' }
  },
})

jb.component('md-test.md-input', {
  type: 'test',
  impl :{$: 'ng2-ui-test',  disableChangeDetection: false,
    control :{ $: 'editable-text', 
      title: 'name', 
      databind: '%$person/name%', 
      style :{$: 'editable-text.md-input'} 
    },
    expectedHtmlResult: {$and: [{ $: 'contains', text: 'name' },{ $: 'contains', text: 'Homer' }] }
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:31，代码来源:md-tests.ts

示例2: rgba

import {jb} from 'jb-core';
import * as jb_ui from 'jb-ui';

import {MdSlideToggleModule} from '@angular/material';


jb.component('editable-boolean.md-slide-toggle', {
  type: 'editable-boolean.style',
  impl :{$: 'customStyle', 
      features :{$: 'field.databind' },
      template: `<div><md-slide-toggle [ngModel]="jbModel()" (change)="jbModel($event.target.value)">{{text()}}</md-slide-toggle></div>`,
      imports: MdSlideToggleModule
  }
})

jb.component('editable-boolean.md-slide-toggle-fixed', {
  type: 'editable-boolean.style',
  impl :{$: 'customStyle', 
      features :{$: 'field.databind' },
      template: `<div><md-slide-toggle color="primary" class="fix-slide-toggle" [ngModel]="jbModel()" (change)="jbModel($event.target.value)">{{text()}}</md-slide-toggle></div>`,
      css: `
  .fix-slide-toggle.md-primary.md-checked .md-slide-toggle-thumb {
    background-color: #1f1f1f !important}
  .fix-slide-toggle.md-primary.md-checked .md-slide-toggle-bar {
    background-color: #858585 !important; opacity: 0.5 }
  .fix-slide-toggle.md-primary.md-slide-toggle-focused .md-ink-ripple {
    opacity: 1; background-color: #858585 !important; 
    background-color-old: rgba(0, 150, 136, 0.26); }
      `,
      imports: MdSlideToggleModule
  }
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:31，代码来源:editable-boolean-md.ts

示例3: 

jb.component('dialog.dialog-ok-cancel', {
	type: 'dialog.style',
	params: [
		{ id: 'okLabel', as: 'string', defaultValue: 'OK' },
		{ id: 'cancelLabel', as: 'string', defaultValue: 'Cancel' },
	],
	impl :{$: 'customStyle',
		template: `
				<div class="jb-dialog jb-default-dialog">
				      <div class="dialog-title">{{title}}</div>
				      <button class="dialog-close" (click)="dialogClose()">&#215;</button>
				      <div *jbComp="contentComp"></div>
					  <div class="dialog-buttons">
							<button md-button="" type="button" (click)="dialogClose({OK:false})">
							  	<span class="md-button-wrapper">
								      <span>%$cancelLabel%</span>
    							</span>
    						</button>
							<button class="md-primary" md-button="" (click)="dialogClose({OK:true})" type="button">
									<span class="md-button-wrapper">
							      		<span>%$okLabel%</span>
							    	</span>
							</button>
						</div>
				</div>		
		`,
	  css: `.dialog-buttons { display: flex; justify-content: flex-end; margin: 5px }`,
      imports: MdButtonModule,
	}
})
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:30，代码来源:dialog-md.ts

示例4: profileRefFromPathWithNotification

				res += '~0~' + prop;
				debugger;
			}
			else
				res += '~' + prop;
			return obj[prop]
		},first);
		return res;
	})
}

// ******* components ***************

jb.component('studio.ref',{
	params: [ {id: 'path', as: 'string' } ],
	impl: (context,path) => 
		profileRefFromPathWithNotification(path,context)
});

jb.component('studio.fix-to-closest-path', {
	params: [ {id: 'path', as: 'ref' } ],
	impl: (ctx,pathRef) => {
		var path = jb.val(pathRef);
		var closest_path = closest(path);

		if (path && path != closest_path) {
			jb.writeValue(pathRef,closest_path);
//			jb_ui.apply(ctx);
		}
	}
})
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:31，代码来源:studio-path.ts

示例5: 

import {jb} from 'jb-core';
import { NgModule }      from '@angular/core';
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

jb.component('aot-test.main', {
  type: 'control', 
  impl :{$: 'group', 
    controls: [
      {$: 'label', title: 'aot title' }, 
      {$: 'label',
        title: 'aot test', 
        style :{$: 'label.aot-test' } // "label.aot-test"
      }
    ]
  }
})


jb.component('label.aot-test', {
    type: 'label.style',
    impl :{$: 'customStyle', 
        template: '<span>{{title}}</span>',
        features :{$: 'label.bind-title' }
    }
})
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:26，代码来源:aot-test.ts

示例6: 

import {jb} from 'jb-core';
import * as jb_ui from 'jb-ui';
import {model,TgpModel} from './studio-tgp-model';
import {pathChangesEm} from './studio-utils';


jb.component('studio.open-control-tree', {
  type: 'action', 
  impl :{$: 'openDialog', 
    style :{$: 'dialog.studio-floating', id: 'studio-outline', width: '350' }, 
    content :{$: 'studio.control-tree' }, 
    menu :{$: 'button', 
      title: ' ', 
      action :{$: 'studio.open-tree-menu', path: '%$globals/profile_path%' }, 
      style :{$: 'button.mdl-icon', icon: 'menu' }, 
      features :{$: 'css', css: 'button { background: none }' }
    }, 
    title: 'Outline'
  }
})

jb.component('studio.open-tree-menu', {
  type: 'action', 
  params: [
    { id: 'path', as: 'string' }
  ], 
  impl :{$: 'menu.open-context-menu', menu :{$: 'studio.tree-menu', path: '%$path%'} }
})

jb.component('studio.tree-menu', {
  type: 'menu.option',
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:31，代码来源:studio-tree.ts

示例7: 

import {jb} from 'jb-core';
import * as jb_ui from 'jb-ui';
import {MdCardModule} from '@angular/material';

jb.component('group.md-card', {
  type: 'group.style',
  impl :{$: 'customStyle',
    template: `<div><md-card>
        <div *ngFor="let ctrl of ctrls"><div *jbComp="ctrl"></div></div>
      </md-card></div>`,
    features :{$: 'group.init-group'},
    imports: MdCardModule
  }
})

jb.component('group.md-card-actions', {
  type: 'group.style',
  impl :{$: 'customStyle',
    template: `<div><md-card-actions>
        <div *ngFor="let ctrl of ctrls"><div *jbComp="ctrl"></div></div>
      </md-card-actions></div>`,
    features :{$: 'group.init-group'},
    imports: MdCardModule
  }
})

jb.component('group.md-card-content', {
  type: 'group.style',
  impl :{$: 'customStyle',
    template: `<div><md-card-content>
        <div *ngFor="let ctrl of ctrls"><div *jbComp="ctrl"></div></div>
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:31，代码来源:card-md.ts

示例8: jb_val

      })
      if (found)
        found.counter++;
      else 
        this.probe[path].push({in: input, out: jb_val(out), counter: 0});
      return out;
  }
}

jb.component('studio.probe', {
  type:'data',
  params: [ { id: 'path', as: 'string', dynamic: true } ],
  impl: (ctx,path) => {
      var context = ctx.exp('%$globals/last_pick_selection%');
      if (!context) {
        var _jbart = jbart_base();
        var _win = jbart.previewWindow || window;
        var circuit = ctx.exp('%$circuit%') || ctx.exp('%$globals/project%.%$globals/page%');
        context = _win.jb_ctx(_jbart.initialCtx,{ profile: {$: circuit}, comp: circuit, path: '', data: null} );
      }
      return new Probe(context).runCircuit(path());
    }
})

// watch & fix path changes
pathChangesEm.subscribe(fixer => {
  var ctx = jbart.initialCtx && jbart.initialCtx.exp('%$globals/last_pick_selection%');
  if (ctx && ctx.path)
      ctx.path = fixer.fix(ctx.path)
})
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:30，代码来源:studio-probe.ts

示例9: 

jb.component('studio.property-primitive', {
  type: 'control', 
  params: [{ id: 'path', as: 'string' }], 
  impl :{$: 'group', 
    title :{$: 'studio.prop-name', path: '%$path%' }, 
    controls: [
      {$: 'editable-text', 
        title: '%', 
        databind :{$: 'studio.ref', path: '%$path%' }, 
        style :{$: 'editable-text.studio-primitive-text' }, 
        features: [
          {$: 'studio.undo-support', path: '%$path%' }, 
          {$: 'studio.property-toolbar-feature', path: '%$path%' }, 
          {$: 'field.debounce-databind', debounceTime: '500' },
        ]
      }, 
      {$: 'itemlist', 
        items: '%$suggestionCtx/options%', 
        controls :{$: 'group', 
          style :{$: 'layout.flex', align: 'space-between', direction: 'row' }, 
          controls: [
            {$: 'label', 
              title: '%text%', 
              features :{$: 'css.padding', top: '', left: '3', bottom: '' }
            }, 
            {$: 'button', 
              title: 'select and close', 
              style :{$: 'button.mdl-icon-12', icon: 'done' },
              action :{$: 'studio.paste-suggestion', close: true}, 
            }
          ]
        }, 
        watchItems: true, 
        features: [
          {$: 'itemlist.studio-suggestions-options' }, 
          {$: 'itemlist.selection', 
            databind: '%$suggestionCtx/selected%', 
            onDoubleClick :{$: 'studio.paste-suggestion'}, 
            autoSelectFirst: true
          }, 
          {$: 'hidden', showCondition: '%$suggestionCtx/show%' }, 
          {$: 'css.height', height: '500', overflow: 'auto', minMax: 'max' }, 
          {$: 'css.width', width: '300', overflow: 'auto' }, 
          {$: 'css', 
            css: '{ position: absolute; z-index:1000; background: white }'
          }, 
          {$: 'css.border', width: '1', color: '#cdcdcd' }, 
          {$: 'css.padding', top: '2', left: '3', selector: 'li' }
        ]
      }
    ], 
    features: [
      {$: 'group.studio-suggestions', path: '%$path%', expressionOnly: true }, 
      {$: 'studio.property-toolbar-feature', path: '%$path%' },
    ]
  }
})
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:57，代码来源:studio-suggestions.ts

示例10: edit

jb.component('jbart-site.main', {
  type: 'control', 
  impl :{$: 'group', 
    title: 'main', 
    style :{$: 'layout.vertical', spacing: '' }, 
    controls: [
      {$: 'group', 
        title: 'site header', 
        style :{$: 'layout.flex', direction: 'row' }, 
        controls: [
          {$: 'image', 
            url: '/projects/studio/css/logo90-green.png', 
            imageHeight: '74', 
            units: 'px', 
            style :{$: 'image.default' }
          }, 
          {$: 'divider', 
            style :{$: 'divider.flex-auto-grow' }, 
            title: 'divider'
          }, 
          {$: 'button', 
            title: 'preview in github', 
            action :{$: 'goto-url', url: 'https://github.com/ArtwareSoft/jbart5-ng' }, 
            style :{$: 'button.md-raised' }, 
            features: [
              {$: 'flex-item.align-self', align: 'center' }, 
              {$: 'css', css: '{ margin-right: 15px }' }, 
              {$: 'responsive.not-for-phone' }
            ]
          }, 
          {$: 'button', 
            title: 'install from npm', 
            action :{$: 'goto-url', url: 'https://www.npmjs.com/package/jbart5-ng2' }, 
            style :{$: 'button.md-raised' }, 
            features: [
              {$: 'flex-item.align-self', align: 'center' }, 
              {$: 'css', css: '{ margin-right: 15px }' }, 
              {$: 'responsive.not-for-phone' }
            ]
          }
        ], 
        features :{$: 'css', css: '{ background-color: #009688}' }
      }, 
      {$: 'group', 
        title: 'content', 
        style :{$: 'layout.flex', align: 'center' }, 
        controls: [
          {$: 'rich-text', 
            text: `<ul>
              <li>pick &amp; edit (like in Chrome debugger)</li>
              <li>work by example data</li>
              <li>smart data/code guidance in context</li>
              <li>preserve the full power of angular2 &amp; javascript</li>
              </ul>
              `, 
            title: 'Visual Development Concepts', 
            style :{$: 'customStyle', 
              template: `<section>
                <div class="title">%$title%</div>
                %$text%
                </section>`, 
              css: `.title { color: #37474F;
                font-size: 28px;
                font-weight: 500;
                line-height: 32px;
                margin-top: 10px;
                margin: 0 0 16px 0;
                opacity: .87;
                }
                { font-size: 16px;
                line-height: 30px;
                opacity: .87;
                padding-top: 20px;
                padding-left: 20px;
                width: 920px;
                }`
            }
          }
        ]
      }, 
      {$: 'group', 
        title: 'jbart header', 
        style :{$: 'layout.flex', align: 'center', direction: undefined, wrap: true }, 
        controls: [
          {$: 'image', 
            url: 'https://storage.googleapis.com/jbartcommunity/jbart5-material.png', 
            imageWidth: '330', 
            imageHeight: '', 
            units: 'px', 
            style :{$: 'customStyle', 
              template: `<div [style.width]="width" [style.height]="height">
                <img [style.width]="imageWidth" [style.height]="imageHeight" src="{{url}}"/>
                </div>`, 
              css: '{ padding: 20px } '
            }, 
            features :{$: 'css.box-shadow', 
              blurRadius: '21', 
              spreadRadius: '7', 
              shadowColor: '#000000', 
              opacity: '0.34', 
//.........这里部分代码省略.........
开发者ID:ArtwareSoft，项目名称:jbart5-ng，代码行数:101，代码来源:jbart-site.ts


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