本文整理汇总了TypeScript中styled-tools.prop函数的典型用法代码示例。如果您正苦于以下问题：TypeScript prop函数的具体用法？TypeScript prop怎么用？TypeScript prop使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了prop函数的4个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的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:
export const Paragraph = css`
&:not(:last-child) {
margin-bottom: 1rem;
}
`;
export const Popover = css`
padding: 1em;
border-radius: 0.25em;
box-shadow: 0 0 0 1px ${p("shadow", -2)}, 0 2px 4px ${p("shadow", -1)},
0 8px 24px ${p("shadow", -1)};
&[aria-hidden="false"] {
transition-timing-function: ${prop(
"timing",
"cubic-bezier(0.25, 0.1, 0.25, 1.5)"
)};
}
`;
export const PopoverArrow = css`
& .stroke {
fill: ${p("shadow", -2)};
}
`;
export const Sidebar = css`
border-radius: 0;
`;
export const Table = css`示例4: styled
import * as PropTypes from "prop-types";
import { prop, theme } from "styled-tools";
import styled from "../styled";
import as from "../as";
import Box from "../Box";
export interface ToolbarContentProps {
align?: "start" | "center" | "end";
}
const ToolbarContent = styled(Box)<ToolbarContentProps>`
display: grid;
grid-auto-flow: column;
grid-auto-columns: min-content;
grid-gap: inherit;
grid-area: ${prop("align")};
justify-content: ${prop("align")};
align-items: center;
[aria-orientation="vertical"] > & {
grid-auto-flow: row;
grid-auto-rows: min-content;
justify-content: initial;
align-content: ${prop("align")};
}
${theme("ToolbarContent")};
`;
// @ts-ignore
ToolbarContent.propTypes = {