TypeScript bobril.styleDefEx函数代码示例

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

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

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

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

示例1: render

  flexWrap: 'wrap',
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  top: 0,
  right: 0,
  fontWeight: "medium",
  fontSize: radius,
  width: radius2x,
  height: radius2x,
  backgroundColor: styles.alternateTextColor,
  color: styles.textColor,
}]);

const primaryStyle = b.styleDefEx(badgeStyle, {
  backgroundColor: styles.accent1Color,
  color: styles.alternateTextColor
});

const secondaryStyle = b.styleDefEx(badgeStyle, {
  backgroundColor: styles.primary1Color,
  color: styles.alternateTextColor
});

export const Badge = b.createComponent<IBadgeData>({
  render(ctx: IBadgeCtx, me: b.IBobrilNode) {
    const d = ctx.data;
    b.style(me, rootStyle);
    me.children = [
      d.children,
      b.styledDiv(d.badgeContent, badgeStyle, d.primary && primaryStyle, d.secondary && secondaryStyle)
    ];

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

示例2:

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

export interface ITextFieldHint {
    children?: b.IBobrilChildren;
    show?: boolean;
}

const rootStyle = b.styleDef([c.positionAbsolute, {
    color: styles.disabledColor,
    transition: transitions.easeOut(),
    opacity: 0,
    bottom: 12
}]);

const showStyle = b.styleDefEx(rootStyle, {
    opacity: 1
});

export const TextFieldHint = (data: ITextFieldHint) => {
    return b.styledDiv(data.children, rootStyle, data.show !== false && showStyle);
};

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

示例3:

let thumbStyle = b.styleDef([c.positionAbsolute, c.noTapHighlight, styles.zDepthShadows[0], c.circle, {
    transition: transitions.easeOut(),
    top: 1,
    left: 0,
    width: toggleSize,
    height: toggleSize,
    lineHeight: '24px',
    backgroundColor: styles.accent2Color,
}]);

let rippleStyle = b.styleDef([c.positionAbsolute, c.noTapHighlight, c.circle, {
    backgroundColor: "#000",
}]);

let trackToggledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: () => colorUtils.withTransparency(styles.strPrimary1Color, 0.5)
});

let thumbToggledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.primary1Color,
    left: toggleTrackWidth,
});

let trackDisabledStyle = b.styleDefEx(trackStyle, {
    backgroundColor: styles.primary3Color
});

let thumbDisabledStyle = b.styleDefEx(thumbStyle, {
    backgroundColor: styles.borderColor,
});

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

示例4: translate3d

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，代码行数:29，代码来源:textFieldLabel.ts

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