本文整理汇总了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)
];示例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);
};
示例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,
});
示例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 });
};