TypeScript bobril.styleDef函数代码示例

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

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

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

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

示例1:

].map((d, i) =>
    b.styleDef({ boxShadow: () => `0 ${d[0]}px ${d[1]}px ${withTransparency(strShadowColor, d[2])},0 ${d[3]}px ${d[4]}px ${withTransparency(strShadowColor, d[5])}` }, null, "zDepth" + (i + 1))

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

示例2:

export interface IBadgeData {
  children?: b.IBobrilChildren;
  badgeContent: b.IBobrilChildren;
  primary?: boolean;
  secondary?: boolean;
}

interface IBadgeCtx extends b.IBobrilCtx {
  data: IBadgeData;
}

const radius = 12;
const radius2x = Math.floor(2 * radius);

const rootStyle = b.styleDef([c.positionRelative, {
  display: 'inline-block',
  padding: [radius2x + 'px', radius2x + 'px', radius + 'px', radius + 'px'].join(' '),
}]);

const badgeStyle = b.styleDef([c.positionAbsolute, c.circle, {
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  top: 0,
  right: 0,
  fontWeight: "medium",
  fontSize: radius,
  width: radius2x,
  height: radius2x,

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

示例3: initG

import * as b from 'bobril';
import { t, initGlobalization as initG } from 'bobril-g11n';

initG({
    defaultLocale: 'cs-CZ',
	pathToTranslation: (locale: string) => { return locale+'.js'; }
});

const bobrilLogo = b.styleDef([{ display: 'inline-block' }, b.sprite('logo.png')]);

interface IHeaderData {
	fontSize: number;
    children?: b.IBobrilChildren;
}

interface IHeaderCtx extends b.IBobrilCtx {
	data: IHeaderData;
}

const header = b.createComponent({
	render(ctx: IHeaderCtx, me: b.IBobrilNode) {
		me.children = [ b.styledDiv('', bobrilLogo), ' ', ctx.data.children ];
		b.style(me, { fontSize: ctx.data.fontSize });
	}
});

interface IWarnHeaderData extends IHeaderData {
	isWarning?: boolean;
}

interface IWarnHeaderCtx extends b.IBobrilCtx {

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

示例4: rgba

                bobrilPromoStyle
            ),
            LCenter.create({
                children: [
                    CoreFeaturesPromo.create(),
                    Divider.create(),
                    GetStartedSection.create()
                ],
                maxWidth: styles.maxPageWidth,
            })
        ]
    }
});

const imageContainerPadding = 24;
const bobrilPromoStyle = b.styleDef({
    textAlign: 'center',
    background: m.grey300,
    marginTop: -imageContainerPadding,
    marginLeft: -imageContainerPadding,
    marginRight: -imageContainerPadding,
    paddingTop: imageContainerPadding,
    paddingLeft: imageContainerPadding,
    paddingRight: imageContainerPadding,
    boxShadow: '0 1px 6px rgba(0,0,0,0.120), 0 1px 4px rgba(0,0,0,0.120)',
});

export default home;

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

示例5: render

import * as b from 'bobril';

const buttonStyle = b.styleDef({
    border: "1px solid black",
    padding: "10px 5px",
    userSelect: "none"
});

interface IButtonData {
    children?: b.IBobrilChildren;
    action: () => void;
}

class ButtonCtx extends b.BobrilCtx<IButtonData> {
}

let gLog: string[] = [];

const Button = b.createComponent({
    ctxClass: ButtonCtx,
    render(ctx: ButtonCtx, me: b.IBobrilNode) {
        b.style(me, buttonStyle);
        me.children = ctx.data.children;
    },
    onClick(ctx: ButtonCtx, ev: b.IBobrilMouseEvent): boolean {
        gLog.push("Button Clicked Count:" + ev.count);
        if (ev.count == 1) ctx.data.action();
        return true;
    },

    onDoubleClick(ctx: ButtonCtx): boolean {

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

示例6:

import * as b from "bobril";
import * as styles from "./styles";

export interface IDividerData {
    inset?: boolean;
}

export let dividerStyle = b.styleDef({
    backgroundColor: styles.borderColor,
    marginTop: -1,
    height: 1
});

export let dividerInsetStyle = b.styleDef({
    marginLeft: 72
});

export const Divider = (data?: IDividerData) => b.style({ tag: "div" }, dividerStyle, data && data.inset && dividerInsetStyle);

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

示例7: render

import * as b from 'bobril';

export interface IBoxData {
    style?: b.IBobrilStyles;
    children?: b.IBobrilChildren;
}

interface IBoxCtx extends b.IBobrilCtx {
    data: IBoxData;
}

export const Box = b.createComponent<IBoxData>({
    render(ctx: IBoxCtx, me: b.IBobrilNode) {
        b.style(me, [baseStyle, ctx.data.style && ctx.data.style]);
        me.children = ctx.data.children;
    }
});

export const baseStyle = b.styleDef({
    backgroundColor: "#007fff",
    padding: 10,
    margin: 5,
    textAlign: "center"
});

开发者ID:karelsteinmetz，项目名称:bobril-flexbox-grid，代码行数:24，代码来源:box.ts

示例8: translate3d

import * as transitions from "./transitions";
import * as c from "./styleConsts";

export interface ITextFieldLabel {
    children?: b.IBobrilChildren;
    disabled?: boolean;
    shrink?: boolean;
    htmlFor?: string;
    color?: string;
}

const rootStyle = b.styleDef([c.userSelectNone, c.positionAbsolute, {
    lineHeight: '22px',
    top: 38,
    transition: transitions.easeOut(),
    zIndex: 1, // Needed to display label above Chrome's autocomplete field background
    cursor: "text",
    transform: 'scale(1) translate3d(0, 0, 0)',
    transformOrigin: 'left top'
}]);

const disabledStyle = b.styleDefEx(rootStyle, {
    cursor: "default"
});

const shrinkStyle = b.styleDefEx(rootStyle, [c.pointerEventsNone, {
    transform: "perspective(1px) scale(0.75) translate3d(2px, -28px, 0)"
}]);

export const TextFieldLabel = (data: ITextFieldLabel) => {
    return b.style({ tag: "label", attrs: { htmlFor: data.htmlFor }, children: data.children }, rootStyle, data.disabled && disabledStyle, data.shrink && shrinkStyle, { color: data.color });

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

示例9:

import * as b from "bobril";
import * as styles from "./styles";
import * as transitions from "./transitions";
import * as c from "./styleConsts";

export interface ITextFieldUnderline {
    disabled?: boolean;
    error?: boolean;
    focus?: boolean;
}

const rootStyle = b.styleDef([c.positionAbsolute, {
    border: 'none',
    borderBottom: 'solid 1px',
    borderColor: styles.borderColor,
    bottom: 8,
    boxSizing: 'content-box',
    margin: 0,
    width: '100%'
}]);

const disabledStyle = b.styleDef({
    borderBottom: 'dotted 2px',
    borderColor: styles.disabledColor
});

const focusStyle = b.styleDef({
    borderBottom: 'solid 2px',
    borderColor: styles.primary1Color,
    transform: 'scaleX(0)',
    transition: transitions.easeOut()

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

示例10:

import * as b from 'bobril';

export const spanUserAgent = b.styleDef({ 
    display: "inline-block", 
    width: "30%" 
});

export const spanInfo = b.styleDef({ 
    marginLeft: 10, 
    display: "inline-block" 
});

export const selectedStyle = b.styleDef({ 
    background: "#ccddee" 
});

export const stackStyle = b.styleDef({
    marginLeft: 20
});

export const suiteDivStyle = b.styleDef({
    fontSize: "18px"
});

export const suiteChildrenIndentStyle = b.styleDef({
    marginLeft: 20
});

export const failedStyle = b.styleDef({
    color: "red"
});

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

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