本文整理汇总了TypeScript中jb-core/jb.jb.component方法的典型用法代码示例。如果您正苦于以下问题：TypeScript jb.component方法的具体用法？TypeScript jb.component怎么用？TypeScript jb.component使用的例子？那么, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类jb-core/jb.jb的用法示例。
在下文中一共展示了jb.component方法的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: Slider
jb.component('editable-number.slider', {
type: 'editable-number.style',
params: [
{ id: 'width', as: 'number', defaultValue: '200' },
],
impl :{$:'customStyle',
template: `<div class="jb-slider">
<div class="slider_scale">
<div class="slider_text"></div>
<div class="slider_thumb"></div>
<input class="slider_input">
</div>
</div>`,
css: `{ height: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 12px; }
.slider_scale { position:relative; float: left; background-color:#aaa; width: %$width%px;
height: 1px; border-radius: 3px; margin-top: 13px; margin-right: 6px;
margin-bottom: 13px; margin-left: 6px;
border-bottom: 1px solid #efefef; }
.slider_thumb { cursor: pointer; position: absolute; color:black;
background-color:#efefef; width: 6px; height: 13px;
border-radius: 2px; border: 1px solid #adadad;
box-shadow: inset 0 0 3px 0px gray; top: -7px; left: 0px; }
.slider_thumb:hover { background-color:#eee; border-color: #777; }
.slider_scale:hover .aa_slider_text { color:black; }
.slider_thumb:focus { background-color:#383838; }
.slider_text { color:#aaa; font-size: 10px; margin-top: -12px; margin-right: 0px; margin-bottom: 0px; margin-left: -19px; }
.slider_scale.empty_value { opacity: 0.5; transition: opacity, 0.5s; }
.slider_text:hover { cursor: pointer; text-decoration:underline; }
.slider_input { position:absolute; width: 98px; height: 20px; border-radius: 6px;
padding-top: 4px; padding-right: 4px; padding-bottom: 4px;
padding-left: 18px; margin-top: -13px; margin-left: 24px;
border: 1px solid #D1D1D1; box-shadow: 2px 2px 6px 1px gray;
}
.slider_thumb.aa_disabled { opacity: 0.5 }
.slider_text.aa_disabled { opacity: 0.5 }
.slider_scale.aa_disabled { opacity: 0.5 }
`,
methods: {
init: ctx => cmp => {
cmp.slider = new Slider(ctx,cmp,$(cmp.elementRef.nativeElement));
},
afterViewInit: ctx => cmp => {
cmp.slider.initSizes();
cmp.slider.adjustScale();
cmp.slider.setThumbPosition();
}
},
observable: () => {} // to create jbEmitter
}
})示例2: editableNumber
import * as jb_ui from 'jb-ui/jb-ui';
jb.type('editable-number.style');
jb.component('editable-number', {
type: 'control', category: 'input:30',
params: [
{ id: 'databind', as: 'ref'},
{ id: 'title', as: 'string' , dynamic: true },
{ id: 'style', type: 'editable-number.style', defaultValue: { $: 'editable-number.input' }, dynamic: true },
{ id: 'symbol', as: 'string', description: 'leave empty to parse symbol from value' },
{ id: 'min', as: 'number' },
{ id: 'max', as: 'number' },
{ id: 'displayString', as: 'string', dynamic: true, defaultValue: '%$Value%%$Symbol%' },
{ id: 'dataString', as: 'string', dynamic: true, defaultValue: '%$Value%%$Symbol%' },
{ id: 'step', as: 'number', defaultValue: 1, description: 'used by slider' },
{ id: 'initialPixelsPerUnit', as: 'number', description: 'used by slider' },
{ id: 'features', type: 'feature[]', dynamic: true },
],
impl: (context,databind,title,style,symbol,min,max,displayString,dataString,step,initialPixelsPerUnit) => {
var ctx = context.setVars({
editableNumber: new editableNumber(symbol,min,max,displayString,dataString,step||1,initialPixelsPerUnit)
});
return jb_ui.ctrl(ctx)
}
})
jb.component('editable-number.input',{
type: 'editable-number.style',
impl :{$: 'customStyle',