本文整理汇总了TypeScript中bobril.createVirtualComponent函数的典型用法代码示例。如果您正苦于以下问题：TypeScript createVirtualComponent函数的具体用法？TypeScript createVirtualComponent怎么用？TypeScript createVirtualComponent使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了createVirtualComponent函数的7个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: setInterval
import * as c from 'bobril-build-override-const-lib-sample';
let color = "#123456";
const icon = b.sprite("light.png", c.cstr);
const iconDynamicColor = b.sprite("light.png", () => color);
setInterval(() => {
color = "#" + color.substr(2, 5) + color[1];
b.invalidateStyles();
}, 1000);
let page = b.createVirtualComponent({
render(ctx: any, me: b.IBobrilNode, oldMe?: b.IBobrilCacheNode): void {
me.children = [
b.style({
tag: 'div'
}, icon),
b.style({
tag: 'div'
}, iconDynamicColor),
{
tag: 'p',
children: "cstr: " + c.cstr + " dyn color: " + color
}
];
}
});
b.init(() => page({}));
示例2: render
import * as b from 'bobril';
export interface IData {
children?: b.IBobrilChildren;
onAction?: () => void;
style?: b.IBobrilStyle;
}
interface ICtx extends b.IBobrilCtx {
data: IData;
}
export default b.createVirtualComponent<IData>({
render(ctx: ICtx, me: b.IBobrilNode) {
me.tag = 'button';
me.children = ctx.data.children;
b.style(me, ctx.data.style);
},
onClick(ctx: ICtx): boolean {
let a = ctx.data.onAction;
if (a) {
a();
return true;
}
return false;
}
});
示例3: render
export interface IData {
children?: b.IBobrilChildren;
onAction?: () => void;
style?: b.IBobrilStyle;
disabled?: boolean;
}
interface ICtx extends b.IBobrilCtx {
data: IData;
}
export const IncrementButton = b.createVirtualComponent<IData>({
render(ctx: ICtx, me: b.IBobrilNode) {
me.children = Button({
type: ButtonType.Raised,
feature: Feature.Secondary,
disabled: ctx.data.disabled,
children: ctx.data.children
})
},
onClick(ctx: ICtx): boolean {
let fct = ctx.data.onAction;
if (fct) {
fct();
return true;
}
return false;
}
});
示例4: init
export const RadioButton = b.createVirtualComponent<IRadioButtonData>({
init(ctx: IRadioButtonCtx) {
ctx.action = () => {
ctx.group.forceFocus = true;
b.emitChange(ctx.group.data, ctx.data.value);
}
},
render(ctx: IRadioButtonCtx, me: b.IBobrilNode) {
let data = ctx.data;
const group: IRadioButtonGroupCtx = (ctx.cfg || {})[radioButtonCfgName];
if (group == null) throw new Error("RadioButton must be wrapped in RadioButtonGroup");
ctx.group = group;
let list = group.list;
let idx = -1;
for (let i = 0; i < list.length; i++) {
if (list[i] === ctx) { idx = i; break; }
}
if (idx === -1) {
idx = list.length;
list.push(ctx);
}
ctx.idx = idx;
let checked = false;
if (b.getValue(group.data.value) === data.value) {
if (group.selIdx !== -2) throw new Error("Duplicate value in RadioButton");
group.selIdx = idx;
checked = true;
}
const disabled = data.disabled;
let tabindex = group.data.tabindex || 0;
if (group.firstEnabled === -1 && !disabled) {
group.firstEnabled = idx;
if (!checked) tabindex = null;
} else {
if (group.selIdx === -1 || !checked) tabindex = null;
}
me.children = checkbox.Checkbox({
checked,
tabindex: tabindex,
disabled,
action: ctx.action,
icons: radioButtonIcons,
children: data.children
});
},
onKeyDown(ctx: IRadioButtonCtx, ev: b.IKeyDownUpEvent): boolean {
if (ev.which === 37 || ev.which === 38) {
let i = ctx.idx;
while (i-- > 0) {
const ii = ctx.group.list[i];
if (!ii.data.disabled) {
ii.action();
return true;
}
}
}
if (ev.which === 39 || ev.which === 40) {
let i = ctx.idx;
while (++i < ctx.group.list.length) {
const ii = ctx.group.list[i];
if (!ii.data.disabled) {
ii.action();
return true;
}
}
}
return false;
},
});示例5: init
export const Clicker = b.createVirtualComponent({
init(ctx: ICtx) {
ctx.counter = ctx.data.time;
ctx.disabled = false;
const interval = setInterval(() => {
ctx.counter--;
if (ctx.counter <= 0) {
clearInterval(interval);
ctx.disabled = true;
}
b.invalidate();
}, 1000);
},
render(ctx: ICtx, me: b.IBobrilNode) {
console.log(ctx.counter);
me.tag = 'div';
me.children = [
{
tag: 'h2',
children: ctx.counter + 'seconds remaining ! Click on it !'
},
IncrementButton({
children: increment,
disabled: ctx.disabled,
onAction: () => {
increment++;
b.invalidate();
}
})
];
}
});示例6: render
import * as b from 'bobril';
export const mainPage = b.createVirtualComponent({
render(_ctx: b.IBobrilCtx, me: b.IBobrilNode): void {
me.children = [
{ tag: 'h1', children: 'Hello World!' },
{
tag: 'p',
children: [
'See examples on ',
{
tag: 'a',
attrs: { href: 'https://github.com/Bobris/Bobril' },
children: 'Bobril GitHub pages.'
}
]
}
];
}
});
示例7: init
}
});
export interface IClickAwayListenerData {
onClick: () => void;
}
interface IClickAwayListenerCtx extends b.IBobrilCtx {
id: string;
data: IClickAwayListenerData;
}
export const ClickAwayListener = b.createVirtualComponent<IClickAwayListenerData>({
init(ctx: IClickAwayListenerCtx) {
ctx.id = "" + lastId++;
onClicks[ctx.id] = ctx.data.onClick;
count++;
if (count === 1) {
layerId = b.addRoot(() => clickAwayListenerLayer());
}
},
destroy(ctx: IClickAwayListenerCtx) {
delete onClicks[ctx.id];
count--;
if (count === 0) {
b.removeRoot(layerId!);
layerId = undefined;
}
},
});