TypeScript csx.percent函数代码示例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

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

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

示例1: globalVariables

export const buttonLoaderClasses = (buttonType: ButtonTypes) => {
    const globalVars = globalVariables();
    const flexUtils = flexHelper();
    const style = styleFactory("buttonLoader");
    const buttonVars = buttonVariables();
    let typeVars;

    switch (buttonType) {
        case ButtonTypes.PRIMARY:
            typeVars = buttonVars.primary;
            break;
        default:
            typeVars = buttonVars.standard;
            break;
    }

    const root = style({
        ...flexUtils.middle(),
        padding: unit(4),
        height: percent(100),
        width: percent(100),
        $nest: {
            "&:after": spinnerLoader({
                color: typeVars.spinnerColor || (globalVars.mainColors.primary as any),
                dimensions: 20,
            }),
        },
    });
    return { root };
};

开发者ID:vanilla，项目名称:vanilla，代码行数:30，代码来源:buttonStyles.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 loaderClasses = useThemeCache(() => {
    const vars = loaderVariables();
    const flex = flexHelper();
    const style = styleFactory("loader");
    const fullPageLoader = style("fullPageLoader", {
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        margin: "auto",
        height: unit(vars.fullPage.size),
        width: unit(vars.fullPage.size),
        $nest: {
            "&:after": {
                ...spinnerLoader(vars.fullPage),
            },
        },
    });
    const mediumLoader = style("mediumLoader", {
        ...absolutePosition.fullSizeOfParent(),
        ...flex.middle(),
        height: percent(100),
        width: percent(100),
        $nest: {
            "&:after": {
                ...spinnerLoader(vars.medium),
            },
        },
    });
    const smallLoader = style("smallLoader", {
        ...flex.middle(),
        height: percent(46),
        width: percent(46),
        margin: "auto",
        $nest: {
            "&:after": {
                ...spinnerLoader(vars.small),
            },
        },
    });

    const loaderContainer = (size: TLength) => {
        return style({
            position: "relative",
            display: "block",
            margin: "auto",
            height: unit(size),
            width: unit(size),
        });
    };

    return {
        fullPageLoader,
        mediumLoader,
        smallLoader,
        loaderContainer,
    };
});

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

示例4: px

 fullSizeOfParent: () => {
     return {
         display: "block",
         position: "absolute" as PositionProperty,
         top: px(0),
         left: px(0),
         width: percent(100),
         height: percent(100),
     };
 },

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

示例5: fullSizeOfParent

export function fullSizeOfParent(): NestedCSSProperties {
    return {
        position: "absolute",
        display: "block",
        top: px(0),
        left: px(0),
        width: percent(100),
        height: percent(100),
    };
}

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

示例6: percent

 middleOfParent: () => {
     return {
         position: "absolute" as PositionProperty,
         display: "block",
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
         maxHeight: percent(100),
         maxWidth: percent(100),
         margin: "auto",
     };
 },

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

示例7: gradient

export const addGradientsToHintOverflow = (width: number | string, color: ColorHelper) => {
    const gradient = (direction: "right" | "left") => {
        return `linear-gradient(to ${direction}, ${colorOut(color.fade(0))} 0%, ${colorOut(
            color.fade(0.3),
        )} 20%, ${colorOut(color)} 90%)`;
    };
    return {
        $nest: {
            "&:after": {
                ...absolutePosition.topRight(),
                background: gradient("right"),
            },
            "&:before": {
                ...absolutePosition.topLeft(),
                background: gradient("left"),
            },
            "&:before, &:after": {
                ...pointerEvents(),
                content: quote(``),
                height: percent(100),
                width: unit(width),
                zIndex: 1,
            },
        },
    };
};

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

示例8: debugHelper

export const spinnerLoader = (props: ISpinnerProps) => {
    const debug = debugHelper("spinnerLoader");
    const globalVars = globalVariables();
    const spinnerVars = {
        color: props.color || globalVars.mainColors.primary,
        size: props.size || 18,
        thickness: props.thickness || 3,
        speed: "0.7s",
        ...props,
    };
    return {
        ...debug.name("spinner"),
        position: "relative" as PositionProperty,
        content: quote("") as ContentProperty,
        ...defaultTransition("opacity"),
        display: "block" as DisplayProperty,
        width: unit(spinnerVars.size),
        height: unit(spinnerVars.size),
        borderRadius: percent(50),
        borderTop: `${unit(spinnerVars.thickness)} solid ${spinnerVars.color.toString()}`,
        borderRight: `${unit(spinnerVars.thickness)} solid ${spinnerVars.color.fade(0.3).toString()}`,
        borderBottom: `${unit(spinnerVars.thickness)} solid ${spinnerVars.color.fade(0.3).toString()}`,
        borderLeft: `${unit(spinnerVars.thickness)} solid ${spinnerVars.color.fade(0.3).toString()}`,
        transform: "translateZ(0)",
        animation: `spillerLoader ${spinnerVars.speed} infinite ease-in-out`,
        animationName: spinnerLoaderAnimation,
        animationDuration: spinnerVars.speed,
        animationIterationCount: "infinite",
        animationTimingFunction: "ease-in-out",
    };
};

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

示例9: useThemeCache

export const insertLinkClasses = useThemeCache(() => {
    const vars = richEditorVariables();
    const style = styleFactory("insertLink");

    const root = style({
        position: "relative",
        display: "flex",
        flexWrap: "nowrap",
        alignItems: "center",
        maxWidth: unit(vars.insertLink.width),
        width: percent(100),
        paddingLeft: 0,
    });

    const input = style("input", {
        zIndex: 2,
        $nest: {
            "&, &.InputBox": {
                border: important("0"),
                marginBottom: important("0"),
                flexGrow: 1,
                maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
            },
        },
    });

    return { root, input };
});

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

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