本文整理汇总了TypeScript中bobril.styledDiv函数的典型用法代码示例。如果您正苦于以下问题：TypeScript styledDiv函数的具体用法？TypeScript styledDiv怎么用？TypeScript styledDiv使用的例子？那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了styledDiv函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
d.leftChildren.map((button) => {
return b.styledDiv(
button,
styles.button,
);
}),示例2:
export const Subheader = (data: ISubheaderData, children?: b.IBobrilCacheChildren) => {
if (data == null) data = {};
return b.styledDiv(data.children || children, subheaderStyle, { paddingLeft: data.inset ? 72 : 16 });
}示例3: render
interface IContext extends b.IBobrilCtx {
data: IData;
}
const home = b.createComponent<IData>({
render(ctx: IContext, me: b.IBobrilNode) {
me.children = [
b.styledDiv(
LCenter.create({
children: Splitter.create({
children: [
FeatureListSection.create(),
BobrilLogoSection.create({
onGetStartedClick: () => {
}
}),
FurrySection.create(),
]
}),
maxWidth: styles.maxPageWidth
}),
bobrilPromoStyle
),
LCenter.create({
children: [
CoreFeaturesPromo.create(),
Divider.create(),
GetStartedSection.create()
],
maxWidth: styles.maxPageWidth,示例4: container
export function container(children: b.IBobrilChildren): b.IBobrilChildren {
return b.styledDiv(children, containerStyle);
}示例5:
return b.styledDiv(children.map((child) => {
return b.styledDiv(child, { flex: 1 });
}), { display: 'flex' });示例6:
const d = ctx.data;
me.children = b.styledDiv(
[
Image.create({
asset: assets.bobrilLogo,
width: 300,
height: 284,
style: {
margin: 'auto'
}
}),
// TODO
// b.styledDiv(
// m.Button({
// children: 'GET STARTED',
// type: m.ButtonType.Raised,
// action: () => {
// d.onGetStartedClick();
// }
// }),
// {
// marginBottom: 8
// }
// )
],
{
marginTop: -24
}
)
}
});示例7: render
return position >= riderSize && position <= ctx.width - riderSize;
}
export const ColorBar = b.createComponent<IColorBarData>({
render(ctx: IColorBarCtx, me: b.IBobrilNode) {
const rgb = graphics.hsvToRgb({ h: ctx.data.hue, s: 1, v: 1 });
me.children = b.styledDiv([
b.styledDiv(ColorRider({
height: riderSize * 2,
x: getPosition(ctx),
y: riderSize,
innerColor: rgb,
outerColor: { r: rgb.r, g: rgb.g, b: rgb.b, a: 0.3 }
}), { width: '100%', position: 'absolute', top: -12 }),
b.styledDiv(null, {
background: 'linear-gradient(to right, ' +
'rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, ' +
'rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
height: 5,
marginTop: 10,
marginBottom: 10,
marginLeft: riderSize,
marginRight: riderSize
})
], { position: 'relative' });
},
postInitDom(ctx: IColorBarCtx, me: b.IBobrilCacheNode, element: HTMLElement) {
ctx.width = element.offsetWidth;
},
postUpdateDom(ctx: IColorBarCtx, me: b.IBobrilCacheNode, element: HTMLElement) {
ctx.width = element.offsetWidth;示例8: getSuiteDetail
function getSuiteDetail(a: SuiteOrTest): b.IBobrilChildren {
return [
b.styledDiv(a.name, suiteDivStyle),
b.styledDiv(getSuitesDetail(a.nested), suiteChildrenIndentStyle)
];
}示例9: render
footer?: b.IBobrilChildren;
backgroundColor?: string;
}
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.header && m.Paper({
zDepth: zDepthHeader,
children: b.styledDiv(d.header, styles.header)
}),
d.content && b.styledDiv(
d.content,
styles.content,
),
d.footer && b.styledDiv(d.footer, styles.footer)
];
b.style(
me,
styles.basicLayout,
d.backgroundColor && {background: d.backgroundColor}
);
}
});