TypeScript typestyle.style函数代码示例

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

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

本文整理汇总了TypeScript中typestyle.style函数的典型用法代码示例。如果您正苦于以下问题：TypeScript style函数的具体用法？TypeScript style怎么用？TypeScript style使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了style函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: styleCreator

    function styleCreator(...objects: Array<NestedCSSProperties | string | symbol>): string {
        if (objects.length === 0) {
            return style();
        }

        let debugName = componentName;
        let shouldLogDebug = false;
        let styleObjs: Array<NestedCSSProperties | undefined> = objects as any;
        if (objects[0] === DEBUG_STYLES) {
            styleObjs.shift();
            shouldLogDebug = true;
        }
        if (typeof objects[0] === "string") {
            const [subcomponentName, ...restObjects] = styleObjs;
            debugName += `-${subcomponentName}`;
            styleObjs = restObjects;
        }

        if (shouldLogDebug) {
            logWarning(`Debugging component ${debugName}`);
            log(styleObjs);
        }

        return style({ $debugName: debugName }, ...styleObjs);
    }

开发者ID:vanilla，项目名称:vanilla，代码行数:25，代码来源:styleUtils.ts

示例2: useThemeCache

export const drawerClasses = useThemeCache(() => {
    const vars = drawerVariables();
    const debug = debugHelper("drawer");

    const root = style({
        display: "block",
        position: "relative",
        ...debug.name(),
    });

    const contents = style({
        position: "relative",
        width: percent(100),
        ...debug.name("contents"),
    });

    const toggle = style({
        fontWeight: vars.fonts.weight,
        padding: `${unit(vars.spacing.button.padding)} 0`,
        width: percent(100),
        textAlign: "left",
        ...debug.name("toggle"),
    });
    const icon = style({
        display: "inline-flex",
        minWidth: unit(vars.sizing.icon),
        fontSize: unit(vars.fonts.size),
        ...debug.name("icon"),
    });

    return { root, contents, toggle, icon };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:32，代码来源:drawerStyles.ts

示例3: useThemeCache

export const userDropDownClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = userDropDownVariables();
    const debug = debugHelper("userDropDown");

    const userCardPhotoLink = style({
        display: "block",
        ...debug.name("userCardPhotoLink"),
    });

    const userCardPhoto = style({
        border: `solid 1px ${globalVars.mixBgAndFg(0.3)}`,
        marginTop: unit(vars.userCard.topMargin),
        marginLeft: "auto",
        marginRight: "auto",
        ...debug.name("userCardPhoto"),
    });

    const userCardName = style({
        display: "block",
        color: "inherit",
        fontWeight: vars.userName.fontWeight,
        fontSize: unit(vars.userName.fontSize),
        lineHeight: vars.userName.lineHeight,
        textAlign: "center",
        marginTop: unit(vars.userName.topMargin),
        marginRight: "auto",
        marginBottom: unit(vars.userName.bottomMargin),
        marginLeft: "auto",
        paddingRight: unit(vars.userName.paddingRight),
        paddingLeft: unit(vars.userName.paddingLeft),
        ...debug.name("userCardName"),
    });

    const contents = style({
        width: unit(vars.contents.width),
        ...debug.name("contents"),
    });

    return { userCardPhotoLink, userCardPhoto, userCardName, contents };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:41，代码来源:userDropDownStyles.ts

示例4: style

    export const overview = (active:boolean = false) =>{
        if (active){
            return style({
                backgroundColor: "white",
                transition: "opacity 0.2s linear, transform 0.2s",
                willChange: "opacity, transform",
                //transform: "translate3d(0px,0px,0px)",
                transform:"perspective(500px) translate3d(0px, 0px, -50px);",
                opacity: 0.7
            });
        } else {
            return style({
                backgroundColor: "white",
                transition: "opacity 0.2s linear, transform 0.2s",
                willChange: "opacity, transform",
                transform: "translate3d(0px,0px,0px)",
                opacity: 1
            });
        }

    };

开发者ID:joergwasmeier，项目名称:lingua，代码行数:21，代码来源:ShopStyle.ts

示例5: amountToWidthClass

export function amountToWidthClass(amount : number, slack : number = 0) : string {
  const classKey : string = `${amount}-${slack}`

  let result = classMap[classKey]

  if (result !== undefined) {
    return result
  }

  classMap[classKey] = result = style({width: `${(99 - slack) / amount}%`})

  return result
}

开发者ID:klarna，项目名称:the-konferense，代码行数:13，代码来源:helpers.ts

示例6: inverseWidthClass

export function inverseWidthClass(amount : number) : string {
  const classKey : string = `inv${amount}`

  let result = classMap[classKey]

  if (result !== undefined) {
    return result
  }

  classMap[classKey] = result = style({width: `${Math.min(100, 40 * amount)}%`})

  return result
}

开发者ID:klarna，项目名称:the-konferense，代码行数:13，代码来源:helpers.ts

示例7: useThemeCache

export const userPhotoClasses = useThemeCache(() => {
    const vars = userPhotoVariables();
    const debug = debugHelper("userPhoto");

    const root = style({
        ...debug.name(),
        position: "relative",
        borderRadius: vars.border.radius,
        overflow: "hidden",
    });

    const photo = style({
        ...objectFitWithFallback(),
        ...debug.name("photo"),
    });

    const small = style({
        width: unit(vars.sizing.small),
        height: unit(vars.sizing.small),
        ...debug.name("small"),
    });

    const medium = style({
        width: unit(vars.sizing.medium),
        height: unit(vars.sizing.medium),
        ...debug.name("medium"),
    });

    const large = style({
        width: unit(vars.sizing.large),
        height: unit(vars.sizing.large),
        ...debug.name("large"),
    });

    return { root, small, medium, large, photo };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:36，代码来源:userPhotoStyles.ts

示例8: useThemeCache

export const searchClasses = useThemeCache(() => {
    const vars = searchVariables();
    const debug = debugHelper("search");

    const root = style({
        ...debug.name(),
        $nest: {
            ".inputText": {
                borderColor: vars.input.border.color.toString(),
            },
            ".searchBar-valueContainer": {
                ...debug.name("valueContainer"),
                cursor: "text",
            },
            ".searchBar__control": {
                ...debug.name("control"),
                cursor: "text",
            },
        },
    });

    return { root };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:23，代码来源:searchStyles.ts

示例9: useThemeCache

export const simplePagerClasses = useThemeCache(() => {
    const vars = simplePagerVariables();
    const debug = debugHelper("simplePager");

    const root = style({
        alignItems: "center",
        display: "flex",
        justifyContent: "center",
        margin: `${unit(vars.spacing.outerMargin)} 0`,
        ...debug.name(),
    });

    const button = {
        margin: unit(vars.spacing.innerMargin),
        $nest: {
            "&.isSingle": {
                minWidth: unit(vars.sizing.minWidth),
            },
        },
        ...debug.name("button"),
    };

    return { root, button };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:24，代码来源:simplePagerStyles.ts

示例10: style

export const wrap = style(
  {
    marginTop: rem(2.333),
    marginBottom: rem(2.333),
    marginLeft: rem(0.333),
  },
  media(
    { minWidth: size.sm },
    {
      margin: '4.333rem auto 0',
      maxWidth: percent(81),
    }
  ),
  media(
    { maxWidth: size.sm },
    {
      marginRight: px(35)
    }
  ),
  media(
    { minWidth: size.md },
    {
      margin: '6.333rem auto 0',
      maxWidth: percent(79)
    }
  ),
  media(
    { minWidth: size.lg },
    {
      margin: '8.3333rem auto 0',
      maxWidth: percent(77)
    }
  ),
  media(
    { minWidth: size.xl },
    {
      margin: '8.3333rem auto 0',
      maxWidth: percent(75)
    }
  )
)

开发者ID:katallaxie，项目名称:katallaxie.github.com，代码行数:41，代码来源:style.ts

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