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

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

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

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

开发者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:

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`

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

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

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

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