本文整理匯總了TypeScript中typestyle.style函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript style函數的具體用法？TypeScript style怎麽用？TypeScript style使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了style函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: styleCreator
function styleCreator(...objects: Array<NestedCSSProperties | string | symbol>): string {
if (objects.length === 0) {
return style();
}
let debugName = componentName;
let shouldLogDebug = false;
let styleObjs: Array<NestedCSSProperties | undefined> = objects as any;
if (objects[0] === DEBUG_STYLES) {
styleObjs.shift();
shouldLogDebug = true;
}
if (typeof objects[0] === "string") {
const [subcomponentName, ...restObjects] = styleObjs;
debugName += `-${subcomponentName}`;
styleObjs = restObjects;
}
if (shouldLogDebug) {
logWarning(`Debugging component ${debugName}`);
log(styleObjs);
}
return style({ $debugName: debugName }, ...styleObjs);
}示例2: useThemeCache
export const drawerClasses = useThemeCache(() => {
const vars = drawerVariables();
const debug = debugHelper("drawer");
const root = style({
display: "block",
position: "relative",
...debug.name(),
});
const contents = style({
position: "relative",
width: percent(100),
...debug.name("contents"),
});
const toggle = style({
fontWeight: vars.fonts.weight,
padding: `${unit(vars.spacing.button.padding)} 0`,
width: percent(100),
textAlign: "left",
...debug.name("toggle"),
});
const icon = style({
display: "inline-flex",
minWidth: unit(vars.sizing.icon),
fontSize: unit(vars.fonts.size),
...debug.name("icon"),
});
return { root, contents, toggle, icon };
});示例3: useThemeCache
export const userDropDownClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = userDropDownVariables();
const debug = debugHelper("userDropDown");
const userCardPhotoLink = style({
display: "block",
...debug.name("userCardPhotoLink"),
});
const userCardPhoto = style({
border: `solid 1px ${globalVars.mixBgAndFg(0.3)}`,
marginTop: unit(vars.userCard.topMargin),
marginLeft: "auto",
marginRight: "auto",
...debug.name("userCardPhoto"),
});
const userCardName = style({
display: "block",
color: "inherit",
fontWeight: vars.userName.fontWeight,
fontSize: unit(vars.userName.fontSize),
lineHeight: vars.userName.lineHeight,
textAlign: "center",
marginTop: unit(vars.userName.topMargin),
marginRight: "auto",
marginBottom: unit(vars.userName.bottomMargin),
marginLeft: "auto",
paddingRight: unit(vars.userName.paddingRight),
paddingLeft: unit(vars.userName.paddingLeft),
...debug.name("userCardName"),
});
const contents = style({
width: unit(vars.contents.width),
...debug.name("contents"),
});
return { userCardPhotoLink, userCardPhoto, userCardName, contents };
});示例4: style
export const overview = (active:boolean = false) =>{
if (active){
return style({
backgroundColor: "white",
transition: "opacity 0.2s linear, transform 0.2s",
willChange: "opacity, transform",
//transform: "translate3d(0px,0px,0px)",
transform:"perspective(500px) translate3d(0px, 0px, -50px);",
opacity: 0.7
});
} else {
return style({
backgroundColor: "white",
transition: "opacity 0.2s linear, transform 0.2s",
willChange: "opacity, transform",
transform: "translate3d(0px,0px,0px)",
opacity: 1
});
}
};示例5: amountToWidthClass
export function amountToWidthClass(amount : number, slack : number = 0) : string {
const classKey : string = `${amount}-${slack}`
let result = classMap[classKey]
if (result !== undefined) {
return result
}
classMap[classKey] = result = style({width: `${(99 - slack) / amount}%`})
return result
}示例6: inverseWidthClass
export function inverseWidthClass(amount : number) : string {
const classKey : string = `inv${amount}`
let result = classMap[classKey]
if (result !== undefined) {
return result
}
classMap[classKey] = result = style({width: `${Math.min(100, 40 * amount)}%`})
return result
}示例7: useThemeCache
export const userPhotoClasses = useThemeCache(() => {
const vars = userPhotoVariables();
const debug = debugHelper("userPhoto");
const root = style({
...debug.name(),
position: "relative",
borderRadius: vars.border.radius,
overflow: "hidden",
});
const photo = style({
...objectFitWithFallback(),
...debug.name("photo"),
});
const small = style({
width: unit(vars.sizing.small),
height: unit(vars.sizing.small),
...debug.name("small"),
});
const medium = style({
width: unit(vars.sizing.medium),
height: unit(vars.sizing.medium),
...debug.name("medium"),
});
const large = style({
width: unit(vars.sizing.large),
height: unit(vars.sizing.large),
...debug.name("large"),
});
return { root, small, medium, large, photo };
});示例8: useThemeCache
export const searchClasses = useThemeCache(() => {
const vars = searchVariables();
const debug = debugHelper("search");
const root = style({
...debug.name(),
$nest: {
".inputText": {
borderColor: vars.input.border.color.toString(),
},
".searchBar-valueContainer": {
...debug.name("valueContainer"),
cursor: "text",
},
".searchBar__control": {
...debug.name("control"),
cursor: "text",
},
},
});
return { root };
});示例9: useThemeCache
export const simplePagerClasses = useThemeCache(() => {
const vars = simplePagerVariables();
const debug = debugHelper("simplePager");
const root = style({
alignItems: "center",
display: "flex",
justifyContent: "center",
margin: `${unit(vars.spacing.outerMargin)} 0`,
...debug.name(),
});
const button = {
margin: unit(vars.spacing.innerMargin),
$nest: {
"&.isSingle": {
minWidth: unit(vars.sizing.minWidth),
},
},
...debug.name("button"),
};
return { root, button };
});示例10: style
export const wrap = style(
{
marginTop: rem(2.333),
marginBottom: rem(2.333),
marginLeft: rem(0.333),
},
media(
{ minWidth: size.sm },
{
margin: '4.333rem auto 0',
maxWidth: percent(81),
}
),
media(
{ maxWidth: size.sm },
{
marginRight: px(35)
}
),
media(
{ minWidth: size.md },
{
margin: '6.333rem auto 0',
maxWidth: percent(79)
}
),
media(
{ minWidth: size.lg },
{
margin: '8.3333rem auto 0',
maxWidth: percent(77)
}
),
media(
{ minWidth: size.xl },
{
margin: '8.3333rem auto 0',
maxWidth: percent(75)
}
)
)