TypeScript styled-tools.ifProp函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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
  );

开发者ID:IgorCRD，项目名称:reakit，代码行数:13，代码来源:Group.ts

示例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,
    {

开发者ID:IgorCRD，项目名称:reakit，代码行数:31，代码来源:styledProps.ts

示例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;
  }

开发者ID:IgorCRD，项目名称:reakit，代码行数:31，代码来源:index.ts

示例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;
      `
    )};
  }

开发者ID:IgorCRD，项目名称:reakit，代码行数:30，代码来源:Group.ts

示例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
};

开发者ID:IgorCRD，项目名称:reakit，代码行数:31，代码来源:Divider.ts

注：本文中的styled-tools.ifProp函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。