• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript elaborate.stripUnit函数代码示例

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

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



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

示例1: stripUnit

const cssBuilder = (
  gutter: string | number,
  negative: boolean,
  gutterType: string,
  gutterPosition: string[],
): string => {
  let negativeBoolean = negative;
  let operator = negativeBoolean ? '-' : '';
  let isString = false;
  let gutterSize = gutter;

  if (typeof gutterSize === 'string') {
    isString = true;
    gutterSize = stripUnit(gutterSize);
  }

  const remValue = rem(+gutterSize / 2);

  // If the value is already negative, remove the operator and set negative to true.
  if (!isString && gutterSize < 0) {
    negativeBoolean = true;
    operator = '';
  }

  // If we have declared negative gutters, force type to `margin.
  const gType = negativeBoolean ? 'margin' : gutterType;

  let css = '';

  for (const gutterPositionItem of gutterPosition) {
    css += `${gType}-${gutterPositionItem}: ${operator}${remValue};`;
  }

  return css;
};
开发者ID:growcss,项目名称:growcss,代码行数:35,代码来源:gutters.ts


示例2: if

export const CellOffset = (
  size: number | string,
  breakpoint: string,
  gutterType: string = 'margin',
  vertical: boolean = false,
  rtl: boolean = false,
  gutters: GuttersProps = DefaultGutters,
  mediaQueryOptions: MediaQueryOptionsProps = MediaQueryOptions,
): string => {
  let direction;

  if (vertical) {
    direction = 'top';
  } else if (rtl) {
    direction = 'right';
  } else {
    direction = 'left';
  }

  let lastBreakpointName = 'small';

  if (gutters[breakpoint] === undefined) {
    for (const breakpointName in mediaQueryOptions.breakpoints) {
      if (typeof breakpointName === 'string' && gutters[breakpointName] !== undefined) {
        lastBreakpointName = breakpointName;
      }
    }
  } else {
    lastBreakpointName = breakpoint;
  }

  let lastBreakpoint: number;

  if (typeof gutters[lastBreakpointName] === 'string') {
    lastBreakpoint = +stripUnit(`${gutters[lastBreakpointName]}`);
  } else {
    lastBreakpoint = +gutters[lastBreakpointName];
  }

  const gutter = rem(lastBreakpoint / 2);
  const gutterSize =
    gutterType === 'margin' ? `calc(${CellSize(size)} + ${gutter})` : CellSize(size);
  const css = `margin-${direction}: ${gutterSize};`;

  return mediaquery(breakpoint, mediaQueryOptions)`${css}`;
};
开发者ID:growcss,项目名称:growcss,代码行数:46,代码来源:cell-offset.ts


示例3: Error

const calcHeading = (
  heading: number,
  fontSize: string,
  lineHeight: number,
  breakpoints: {},
  mediaQuery: MediaQueryOptionsProps,
): FlattenSimpleInterpolation => {
  if (Object.entries(breakpoints).length === 0) {
    throw new Error('Cant be empty @todo error message');
  }

  const size = stripUnit(em(fontSize));
  const lineHeightSpacing = (factor = 1): number => {
    return size * lineHeight * factor;
  };
  const spacingValue = lineHeightSpacing();
  const mediaqueries: string[] = [];

  for (const key in breakpoints) {
    if (Array.isArray(breakpoints[key])) {
      const calcSize = size * breakpoints[key][heading];
      let calcLineHeight = 0;
      let multiplier = 1;

      if (calcSize <= spacingValue) {
        calcLineHeight = spacingValue / calcSize;
      } else {
        while (lineHeightSpacing(multiplier) < calcSize) {
          multiplier += 0.5;
        }

        calcLineHeight = lineHeightSpacing(multiplier) / calcSize;
      }

      mediaqueries.push(mediaquery(key, mediaQuery)`
        font-size: ${em(calcSize, size)};
        line-height: ${calcLineHeight};
        font-weight: 700;
      `);
    }
  }

  return css`
    ${mediaqueries}
  `;
};
开发者ID:growcss,项目名称:growcss,代码行数:46,代码来源:typography.ts



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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript boom.unauthorized函数代码示例发布时间:2022-05-28
下一篇:
TypeScript elaborate.rem函数代码示例发布时间:2022-05-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap