TypeScript bobril.init函数代码示例

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

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

本文整理汇总了TypeScript中bobril.init函数的典型用法代码示例。如果您正苦于以下问题：TypeScript init函数的具体用法？TypeScript init怎么用？TypeScript init使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了init函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: init

 function init(childs: b.IBobrilChildren) {
     b.init(() => childs);
     tick();
 }

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

示例2: 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

示例3: createNavigationItem

        createNavigationItem('List', getListPreview),
        createNavigationItem('Menu', getMenuPreview),
        createNavigationItem('Paper', getPaperPreview),
        createNavigationItem('Radio Button', getRadioButtonPreview),
        createNavigationItem('Slider', getSliderPreview),
        createNavigationItem('Text Field', getTextFieldPreview),
    ]));
}

function createHeaderContent(): b.IBobrilNode {
    return m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
        m.Button({ type: m.ButtonType.Raised, action: () => m.lightTheme() }, 'Light Theme'),
        spacer,
        m.Button({ type: m.ButtonType.Raised, action: () => m.darkTheme() }, 'Dark Theme'),
    ]);
}

b.init(() => {
    return [
        b.styledDiv([
            createHeaderContent(),
            getPageContent()
        ], {
                paddingTop: 1,
                paddingLeft: navigationWidth,
                paddingBottom: 1
            }),
        createNavigation()
    ];
});

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

示例4:

import * as b from 'bobril';
import * as icons from 'bobril-m-icons';

b.init(() => {
    return icons.toggleCheckBox();
});

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

示例5:

import * as b from 'bobril';
import { ColorPicker } from './src/colorPicker';

b.init(() => {
    return b.styledDiv([
        b.styledDiv(ColorPicker({
            color: '#ff00ff',
            width: 300,
            onClose: () => { },
            onColorSelect: (color) => { }
        }), { padding: 30, flex: 1 }),
        b.styledDiv(ColorPicker({
            width: 300,
            onClose: () => { },
            onColorSelect: (color) => { }
        }), { padding: 30, flex: 1 }),
        b.styledDiv(ColorPicker({
            color: '#00ff00',
            hidePreviewLabels: true,
            hideTextfields: true,
            width: 300,
            onClose: () => { },
            onColorSelect: (color) => { }
        }), { padding: 30, flex: 1 })
    ], { display: 'flex' });
});

开发者ID:jirgl，项目名称:color-picker，代码行数:26，代码来源:index.ts

示例6: setInterval

import * as b from 'bobril';
import * as mobx from 'mobx';

const counter = mobx.observable(0);

const reaction = new mobx.Reaction("test", () => {
    b.invalidate();
})

setInterval(() => {
    counter.set(counter.get() + 1);
}, 2000);

b.init(() => {
    var res: b.IBobrilChildren;
    reaction.track(() => {
        res = counter.get();
    });
    return res;
});

开发者ID:Bobris，项目名称:Bobril，代码行数:20，代码来源:app.ts

示例7: Header

ďťżimport * as b from 'bobril';
import { Header } from './components/header';
import { GameController } from './gameController';

let startLiveCell = [
    [-12, -6], [-12, -5],
    [-11, -6], [-11, -5],
    [-3, -6], [-3, -5], [-3, -4],
    [-2, -7],
    [-1, -8],
    [0, -8],
    [-2, -3],
    [-1, -2],
    [0, -2]
];

b.init(() => {
    b.invalidate();
    return [
        Header({ content: 'Game of life' }),
        GameController({
            runing: true,            
            startLiveCell: startLiveCell
        })
    ];
});

开发者ID:Bobris，项目名称:Bobril，代码行数:26，代码来源:app.ts

示例8: createFlexLayout

b.init(() => {
    return [
        m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
            m.Toggle({ checked: ch1, action: () => { ch1 = !ch1; b.invalidate() } }),
            spacer,
            m.Toggle({ checked: ch1, disabled: true }),
            spacer,
            spacer,
            m.Button({ type: m.ButtonType.Raised, action: () => m.lightTheme() }, "Light Theme"),
            spacer,
            m.Button({ type: m.ButtonType.Raised, action: () => m.darkTheme() }, "Dark Theme"),
        ]),
        m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
            m.Badge({ badgeContent: "0" }, "Normal Badge"),
            m.Badge({ badgeContent: "1", primary: true }, "Primary"),
            m.Badge({ badgeContent: "99+", secondary: true }, "Secondary")
        ]),
        m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
            m.TextField({ value: str1, labelText: "First Name" }),
            m.TextField({ value: str2, labelText: "Last Name", errorText: str2() == "" ? "This field is required" : null }),
            m.TextField({ value: str5, labelText: "Password", inputType: "password" }),
            m.TextField({ value: str3, hintText: "Hint text and no label" }),
            m.TextField({ value: str3, labelText: "Disabled with label", disabled: true }),
            m.TextField({ value: str4, rows: 2, rowsMax: 4, hintText: "Multiline 2-4 rows, Hint text and no label" }),
            m.TextField({ value: str4, rows: 2, rowsMax: 4, labelText: "Multiline 2-4 rows, Disabled with label", disabled: true }),
        ]),
        m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
            m.Slider({ value: slider1 }),
            m.Slider({ value: slider1, disabled: true }),
            m.Slider({ value: slider2, min: 5, max: 15, step: 1 }),
            m.Slider({ value: slider2, min: 5, max: 15, step: 1, disabled: true }),
        ]),
        m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
            m.Paper({ zDepth: 1, style: examplePaper }, "1"),
            m.Paper({ zDepth: 2, style: examplePaper }, "2"),
            m.Paper({ zDepth: 3, style: examplePaper }, "3"),
            m.Paper({ zDepth: 4, style: examplePaper }, "4"),
            m.Paper({ zDepth: 5, style: examplePaper }, "5"),
        ]),
        m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
            m.Paper({ zDepth: 1, round: false, style: examplePaper }, "1"),
            m.Paper({ zDepth: 2, round: false, style: examplePaper }, "2"),
            m.Paper({ zDepth: 3, round: false, style: examplePaper }, "3"),
            m.Paper({ zDepth: 4, round: false, style: examplePaper }, "4"),
            m.Paper({ zDepth: 5, round: false, style: examplePaper }, "5"),
        ]),
        m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
            m.Paper({ zDepth: 1, circle: true, style: examplePaper }, "1"),
            m.Paper({ zDepth: 2, circle: true, style: examplePaper }, "2"),
            m.Paper({ zDepth: 3, circle: true, style: examplePaper }, "3"),
            m.Paper({ zDepth: 4, circle: true, style: examplePaper }, "4"),
            m.Paper({ zDepth: 5, circle: true, style: examplePaper }, "5"),
        ]),
        m.Paper({ style: { margin: 16, padding: 8 } }, [
            m.Button({}, "Default"), spacer,
            m.Button({ feature: m.Feature.Primary }, "Primary"), spacer,
            m.Button({ feature: m.Feature.Secondary }, "Secondary"), spacer,
            m.Button({ disabled: true }, "Disabled")
        ]),
        m.Paper({ style: { margin: 16, padding: 8 } }, [
            m.Button({ type: m.ButtonType.Raised }, "Default"), spacer,
            m.Button({ type: m.ButtonType.Raised, feature: m.Feature.Primary }, "Primary"), spacer,
            m.Button({ type: m.ButtonType.Raised, feature: m.Feature.Secondary }, "Secondary"), spacer,
            m.Button({ type: m.ButtonType.Raised, disabled: true }, "Disabled")
        ]),
        m.Paper({ style: { margin: 16, padding: 8 } }, [
            m.Button({ type: m.ButtonType.Floating, icon: icons.contentAdd }), spacer,
            m.Button({ type: m.ButtonType.Floating, feature: m.Feature.Secondary, icon: icons.toggleStar }), spacer,
            m.Button({ type: m.ButtonType.Floating, disabled: true, icon: icons.toggleStarHalf })
        ]),
        m.Paper({ style: { margin: 16, padding: 8 } }, [
            m.Checkbox({ checked: ch1, action: () => { ch1 = !ch1; b.invalidate(); } }, "Two state Checkbox"),
            m.Checkbox({ checked: ch1, disabled: true }, "Disabled two state"),
            m.Divider(),
            m.Checkbox({ checked: ch3 == 1, indeterminate: ch3 == 2, action: () => { ch3 = (ch3 + 1) % 3; b.invalidate(); } }, "Three state Checkbox"),
            m.Checkbox({ checked: ch3 == 1, indeterminate: ch3 == 2, disabled: true }, "Disabled three state")
        ]),
        m.Paper({ style: { margin: 16, padding: 8 } }, [
            m.RadioButtonGroup({ value: rb1, unselectedValue: -1 }, [
                m.RadioButton({ value: 0 }, "Option A"),
                m.RadioButton({ value: 1 }, "Option B"),
                m.RadioButton({ value: 2 }, "Option C"),
                m.RadioButton({ value: 3, disabled: true }, "Disabled Option")
            ])
        ]),
        createFlexLayout([
            m.Paper({ style: { margin: 16 } }, [
                m.List({}, [
                    m.Subheader({}, "Simple list"),
                    m.ListItem({ leftIcon: icons.contentInbox, primaryText: "Inbox" }),
                    m.ListItem({ leftIcon: icons.actionGrade, primaryText: "Starred" }),
                    m.ListItem({ leftIcon: icons.contentSend, primaryText: "Send mail" })
                ]),
                m.Divider(),
                m.List({}, [
                    m.Subheader({}, "Simple list"),
                    m.ListItem({ rightIcon: icons.actionInfo, primaryText: "All mail", secondaryText: "All mail", secondaryTextLines: m.SecondaryTextLines.Single }),
                    m.ListItem({ rightIcon: icons.actionInfo, primaryText: "Trash", secondaryText: "Trash", secondaryTextLines: m.SecondaryTextLines.Single }),
                    m.ListItem({ rightIcon: icons.actionInfo, primaryText: "Spam" })
                ])
//.........这里部分代码省略.........

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

示例9: reconnect

            iframe = document.createElement("iframe");
            document.body.appendChild(iframe);
            iframe.src = testUrl;
            break;
        }
        default: {
            console.log("Unknown message: " + message, data);
            break;
        }
    }
};

reconnect();

b.init(() => {
    if (disconnected) {
        return [{ tag: "h2", children: "Disconnected" }, { tag: "p", children: "reload to try to connect again" }];
    }
    if (!connected) {
        return [{ tag: "h2", children: "Connecting" }, { tag: "p", children: "wait ..." }];
    }
    if (wait) {
        return [{ tag: "h2", children: "Waiting" }, { tag: "p", children: "ready to receive commands" }];
    }
    if (testing) {
        return [{ tag: "h2", children: "Testing" }, { tag: "p", children: testUrl }];
    }
});

window["bbTest"] = (message: string, data: any) => c.send(message, data);

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

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