TypeScript bobril.style函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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()}
        );
    }
});

开发者ID:LongerP，项目名称:bobril.github.io，代码行数:31，代码来源:lib.ts

示例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);
    }
});

开发者ID:jirgl，项目名称:bobril-m，代码行数:29，代码来源:paper.ts

示例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,

开发者ID:LongerP，项目名称:bobril.github.io，代码行数:30，代码来源:button.ts

示例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"
 };

开发者ID:jirgl，项目名称:bobril-m，代码行数:31，代码来源:toggle.ts

示例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;
    }
});

开发者ID:Bobris，项目名称:bobril-build，代码行数:27，代码来源:index.ts

示例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({}));

开发者ID:Bobris，项目名称:bobril-build，代码行数:30，代码来源:app.ts

示例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;
    }
});

开发者ID:LongerP，项目名称:bobril.github.io，代码行数:31，代码来源:lib.ts

示例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",

开发者ID:karelsteinmetz，项目名称:bobril-m，代码行数:31，代码来源:checkbox.ts

示例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 {

开发者ID:jirgl，项目名称:bobril-m，代码行数:31，代码来源:clickAwayListener.ts

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