本文整理汇总了TypeScript中bobril.createComponent函数的典型用法代码示例。如果您正苦于以下问题：TypeScript createComponent函数的具体用法？TypeScript createComponent怎么用？TypeScript createComponent使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了createComponent函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: return
return (c: f.ICursor<TState>) =>
b.createDerivedComponent<TData>(
b.createComponent<TData>({
init(ctx: IDataComponentContext<TState, TData>) {
ctx.cursor = c;
ctx.state = f.getState(ctx.cursor);
},
render(ctx: IDataComponentContext<TState, TData>) {
ctx.state = f.getState(ctx.cursor);
}
}),
component);示例2: return
return (c: f.ICursor<TState>) => (children?: b.IBobrilChildren) => b.createDerivedComponent(
b.createComponent({
init(ctx: IContext<TState>) {
ctx.cursor = c;
ctx.state = f.getState(ctx.cursor);
},
shouldChange(ctx: IContext<TState>, me: b.IBobrilNode, oldMe: b.IBobrilCacheNode): boolean {
let previousState = ctx.state;
ctx.state = f.getState(ctx.cursor);
return ctx.forceShouldChange || ctx.state !== previousState;
}
}),
component)(null, children);示例3: return
return (c: f.ICursor<TState>) =>
b.createDerivedComponent<TData>(
b.createComponent<TData>({
init(ctx: IRouteComponentContext<TState, TData>) {
ctx.cursor = c;
ctx.state = f.getState(ctx.cursor);
ctx.lastData = ctx.data;
},
shouldChange(ctx: IRouteComponentContext<TState, TData>, me: b.IBobrilNode, oldMe: b.IBobrilCacheNode): boolean {
let previousState = ctx.state;
let previousData = ctx.lastData;
ctx.state = f.getState(ctx.cursor);
ctx.lastData = ctx.data;
return ctx.forceShouldChange || !(ctx.data === previousData && ctx.state === previousState);
}
}),
component);示例4: render
const documentation = b.createComponent<IData>({
render(ctx: IContext, me: b.IBobrilNode) {
me.children = [
LCenter.create({
children: [
Label.create({
label: 'Documentation under construction.',
size: Label.LabelSize.Title,
style: {
textAlign: 'center'
}
}),
b.styledDiv(
'We know, that it is not easy to develop application without any documentation. ' +
'We hope, that these materials will help you to start.',
{
marginTop: 24,
marginBottom: 24
}
),
getMotivationSection(),
getHowToStartSection(),
getExamplesSection()
],
maxWidth: styles.maxPageWidth,
}
)
];
}
});
示例5: render
}
interface IContext extends b.IBobrilCtx {
data: IData;
}
export const create = b.createComponent<IData>({
render(ctx: IContext, me: b.IBobrilNode){
const d = ctx.data;
me.children = [
d.label
];
b.style(
me,
buttonStyle,
d.isActive && {color: m.white}
);
},
onPointerDown(ctx: IContext): boolean {
ctx.data.action();
return true;
}
});
export const buttonStyle = b.styleDef({
cursor: 'pointer',
height: 64,
lineHeight: '64px',
paddingLeft: 8,示例6: render
interface IPaperCtx extends b.IBobrilCtx {
data: IPaperData;
}
export let paperStyle = b.styleDef([c.noTapHighlight, {
backgroundColor: styles.canvasColor,
boxSizing: 'border-box',
fontFamily: styles.fontFamily,
}]);
export let circleStyle = b.styleDef(c.circle);
export let roundStyle = b.styleDef({ borderRadius: 2 });
export const Paper = b.createComponent<IPaperData>({
render(ctx: IPaperCtx, me: b.IBobrilNode) {
const d = ctx.data;
me.children = d.children;
b.style(me, paperStyle);
let zDepth = d.zDepth;
if (zDepth == null) zDepth = 1;
if (zDepth > 0) b.style(me, styles.zDepthShadows[zDepth - 1]);
if (d.circle) {
b.style(me, circleStyle);
} else if (d.round !== false) {
b.style(me, roundStyle);
}
b.style(me, d.style);
}
});
示例7: onChange
import * as b from 'bobril';
const iconShine = b.sprite("light.png", "#80ff80");
const iconOff = b.sprite("light.png", "#e03030");
export interface IData {
value: boolean;
onChange(value: boolean);
}
interface ICtx extends b.IBobrilCtx {
data: IData;
}
export default b.createComponent<IData>({
render(ctx: ICtx, me: b.IBobrilNode) {
b.style(me, ctx.data.value ? iconShine : iconOff);
},
onClick(ctx: ICtx): boolean {
ctx.data.onChange(!ctx.data.value);
return true;
}
});
示例8: render
import * as b from 'bobril';
import * as Label from '../../../components/label/lib';
interface IData {
}
interface IContext extends b.IBobrilCtx {
data: IData;
}
export const create = b.createComponent<IData>({
render(ctx: IContext, me: b.IBobrilNode){
const d = ctx.data;
me.children = [
// TODO
// Label.create({
// label: 'Get Started',
// size: Label.LabelSize.Title
// }),
];
}
});示例9: render
import * as b from 'bobril';
import * as styles from './styles';
interface IData {
content: b.IBobrilChildren;
}
interface IContext extends b.IBobrilCtx {
data: IData;
media: b.IBobrilMedia;
}
export const create = b.createComponent<IData>({
render(ctx: IContext, me: b.IBobrilNode) {
ctx.media = b.getMedia();
const data = ctx.data;
const media = ctx.media;
me.children = data.content;
b.style(
me,
styles.contentPc
);
},
});示例10: init
export const IconButton = b.createComponent<IIconButtonData>({
init(ctx: IIconButtonCtx) {
ctx.focusFromKeyboard = false;
},
render(ctx: IIconButtonCtx, me: b.IBobrilNode) {
let d = ctx.data;
me.attrs = {
role: 'button',
'aria-disabled': d.disabled ? 'true' : 'false',
tabindex: d.disabled ? undefined : (d.tabindex || 0)
};
b.style(me, d.disabled ? disabledStyle : enabledStyle);
me.children = ripple.Ripple({
pulse: ctx.focusFromKeyboard && !d.disabled,
pointerDown: () => { if (d.action) d.action(); },
disabled: d.disabled,
style: [rootStyle, iconStyle, { backgroundColor: ctx.focusFromKeyboard ? styles.hoverColor : undefined }]
}, d.children);
},
onKeyDown(ctx: IIconButtonCtx, ev: b.IKeyDownUpEvent): boolean {
if ((ev.which === 13 || ev.which === 32) && !ctx.data.disabled && ctx.focusFromKeyboard) {
if (ctx.data.action) ctx.data.action();
return true;
}
return false;
},
onFocus(ctx: IIconButtonCtx) {
ctx.focusFromKeyboard = true;
ctx.data.onFocus();
b.invalidate(ctx);
},
onBlur(ctx: IIconButtonCtx) {
ctx.focusFromKeyboard = false;
ctx.data.onBlur();
b.invalidate(ctx);
}
});