当前位置: 首页>>代码示例>>TypeScript>>正文


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

本文整理汇总了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;未经允许,请勿转载。