TypeScript bobril.createComponent函数代码示例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

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

开发者ID:TuanTrong，项目名称:bobflux，代码行数:12，代码来源:dataComponent.ts

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

开发者ID:TuanTrong，项目名称:bobflux，代码行数:13，代码来源:component.ts

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

开发者ID:TuanTrong，项目名称:bobflux，代码行数:17，代码来源:routeComponent.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

开发者ID:JakubJecminek，项目名称:bobril-m，代码行数:37，代码来源:iconButton.ts

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