本文整理汇总了TypeScript中bobril.style函数的典型用法代码示例。如果您正苦于以下问题：TypeScript style函数的具体用法？TypeScript style怎么用？TypeScript style使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了style函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
button,
styles.button,
);
}),
styles.buttonsContainer
),
d.rightChildren && b.styledDiv(
d.rightChildren.map((button) => {
return b.styledDiv(
button,
styles.rightButton,
);
}),
styles.rightButtonsContainer
)
],
d.contentWidth && {
minWidth: 852,
maxWidth: d.contentWidth,
margin: 'auto'
}
)
];
b.style(
me,
styles.appBar,
{background: m.primary2Color()}
);
}
});示例2: 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);
}
});
示例3: 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,示例4:
let r: number = 0;
if (hasRipple) {
t = (b.now() - ctx.rippleStart) * 0.004;
if (t > 2) {
hasRipple = false;
ctx.rippleStart = 0;
}
r = Math.min(t * toggleSize, toggleSize);
b.invalidate(ctx);
}
if (focusFromKeyboard) {
hasRipple = true;
r = toggleSize;
t = 1;
}
b.style(me, rootStyle, disabled ? disabledStyle : enabledStyle);
me.children = [
b.styledDiv(null, trackStyle, checked && trackToggledStyle, disabled && trackDisabledStyle),
b.styledDiv(hasRipple && b.styledDiv(null, rippleStyle, {
left: toggleSize * 0.5 - r,
top: toggleSize * 0.5 - r,
width: 2 * r,
height: 2 * r,
opacity: 0.16 - 0.08 * t
}), thumbStyle, checked && thumbToggledStyle, disabled && thumbDisabledStyle)
];
me.attrs = {
role: "checkbox",
"aria-checked": checked ? "true" : "false",
"aria-disabled": disabled ? "true" : "false"
};示例5: 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;
}
});
示例6: 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({}));
示例7: render
}
export const create = b.createComponent<IData>({
render(ctx: IContext, me: b.IBobrilNode){
const d = ctx.data;
me.tag = 'a';
me.attrs = {
href: d.href || '#',
target: d.newWindow === true ? '_blank' : '_self'
};
me.children = d.label;
b.style(me, {
whiteSpace: 'nowrap',
display: 'inline',
textDecoration: 'underline',
color: m.primary1Color()
});
},
onClick(ctx: IContext): boolean {
const d = ctx.data;
return d.action && d.action();
},
shouldStopBubble(ctx: IContext): boolean {
return true;
}
});示例8:
ro = 0.3 + 0.1 * (2 - t);
} else {
rr = 24;
ro = 0.4 * (2 - t);
}
}
b.invalidate(ctx);
}
} else {
if (focusFromKeyboard) showFocus = true;
}
if (showFocus) {
rr = 12;
ro = 0.2;
}
b.style(me, disabled ? disabledStyle : enabledStyle);
let checkDiv: b.IBobrilNode = d.children != null ? { tag: "div" } : me;
b.style(checkDiv, rootSwitchStyle);
checkDiv.children = [
rr != 0 && b.withKey(b.styledDiv("", showFocus ? focusFromKeyStyle : rippleStyle, { left: 12 - rr, top: 12 - rr, width: 2 * rr, height: 2 * rr, opacity: ro, background: checked ? styles.primary1Color : styles.checkboxOffColor }), "r"),
b.styledDiv(ics.off({ color: "inherit" }), disabled ? ((checked || indeterminate) ? hiddenStyle : checkDisabled) : (checked ? boxWhenSwitchedStyle : boxStyle)),
indeterminate != null && b.withKey(b.styledDiv(ics.indeterminate({ color: "inherit" }), disabled ? (indeterminate ? checkDisabled : hiddenStyle) : (indeterminate ? checkWhenSwitchedStyle : checkStyle)), "i"),
b.styledDiv(ics.on({ color: "inherit" }), disabled ? (checked ? checkDisabled : hiddenStyle) : (checked ? checkWhenSwitchedStyle : checkStyle))
];
if (checkDiv !== me) {
me.children = [checkDiv, b.styledDiv(d.children, textStyle, disabled && disabledTextStyle)];
b.style(me, wrapStyle);
}
me.attrs = {
role: ctx.radio ? "radio" : "checkbox",
"aria-checked": indeterminate ? "mixed" : checked ? "true" : "false",示例9: render
let onClicks: { [id: string]: () => void } = {};
let lastId = 0;
let count = 0;
interface IClickAwayListenerLayerCtx extends b.IBobrilCtx {
data: IClickAwayListenerData;
}
const layerStyle = b.styleDef([c.widthHeight100p, {
position: 'fixed',
top: 0
}]);
const clickAwayListenerLayer = b.createComponent<never>({
render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
b.style(me, layerStyle);
},
onPointerUp(_ctx: IClickAwayListenerLayerCtx, _event: b.IBobrilPointerEvent): boolean {
console.log("Clicked listener");
for (var id in onClicks)
onClicks[id]();
return true;
}
});
export interface IClickAwayListenerData {
onClick: () => void;
}
interface IClickAwayListenerCtx extends b.IBobrilCtx {