本文整理汇总了TypeScript中styled-tools.ifProp函数的典型用法代码示例。如果您正苦于以下问题：TypeScript ifProp函数的具体用法？TypeScript ifProp怎么用？TypeScript ifProp使用的例子？那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了ifProp函数的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: ifProp
const verticalAt = (pass: any, fail?: any) =>
ifProp(
"verticalAt",
css`
@media (min-width: ${withProp("verticalAt", x => x + 1)}px) {
${fail};
}
@media (max-width: ${prop("verticalAt")}px) {
${pass};
}
`,
fail
);示例2: ifProp
z?: string | number
) => `translate3d(${numberToPx(x)}, ${numberToPx(y)}, ${numberToPx(z)})`;
export const origin = (
x: string | number = "center",
y: string | number = "center"
) => `${numberToPx(x)} ${numberToPx(y)}`;
export const calc = (a?: string | number, b?: string | number) =>
`calc(${numberToPx(a)} + ${numberToPx(b)})`;
export const minus = (v?: string | number) => `-${numberToPx(v)}`;
export const expand = ifProp(
{ expand: true },
prop("defaultExpand", "center"),
prop("expand")
);
export const slide = ifProp(
{ slide: true },
prop("defaultSlide", "right"),
prop("slide")
);
export const scaleWithProps = ifProp("expand", "scale(0.01)");
export const originWithProps = withProp(["originX", "originY"], (x, y) =>
switchProp(
expand,
{示例3: rgba
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.35);
}
&[disabled] {
pointer-events: none;
&:after {
display: block;
}
}
`;
export const Code = css`
font-family: monospace;
white-space: pre-wrap;
word-wrap: break-word;
padding: ${ifProp("block", "0", "0.25em 0.35em")};
border-radius: 0.25em;
code {
display: block;
padding: 1em;
}
`;
export const Field = css`
display: flex;
flex-direction: column;
flex: 1;
label {
padding-bottom: 0.5em;
}示例4: styled
}
@media (max-width: ${prop("verticalAt")}px) {
${pass};
}
`,
fail
);
export interface GroupProps {
vertical: boolean;
verticalAt: number;
}
const Group = styled(Box)<GroupProps>`
display: flex;
flex-direction: ${ifProp("vertical", "column", "row")};
${verticalAt("flex-direction: column")};
> *:not(:first-child):not(:last-child),
> *:not(:first-child):not(:last-child) ${groupItemSelector} {
border-radius: 0;
${verticalAt(
css`
border-top-width: 0;
`,
css`
border-${ifProp("vertical", "top", "left")}-width: 0;
`
)};
}
示例5: styled
export interface DividerProps {
vertical?: boolean;
}
const Divider = styled(Box)<DividerProps>`
border-color: currentColor;
border-style: solid;
opacity: 0.2;
${ifProp(
"vertical",
css`
margin: 0 1em;
min-height: 100%;
width: 0;
border-width: 0 0 0 1px;
`,
css`
margin: 1em 0;
height: 0;
border-width: 1px 0 0 0;
`
)};
${theme("Divider")};
`;
// @ts-ignore
Divider.propTypes = {
vertical: PropTypes.bool
};