TypeScript elaborate.rem函数代码示例

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

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

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

在下文中一共展示了rem函数的4个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的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: CellSize

export const CellProperties = (
  size: string | number,
  marginGutter: string | number,
  vertical: boolean,
): string => {
  const direction: string = vertical ? 'height' : 'width';

  if (size === 'full') {
    const val = marginGutter === 0 ? '100%' : `calc(100% - ${rem(marginGutter)})`;

    return `${direction}: ${val};`;
  }

  if (size === 'auto' || size === 'shrink') {
    return `${direction}: auto;`;
  }

  const val =
    marginGutter === 0
      ? CellSize(size)
      : `calc(${CellSize(size)} - ${rem(marginGutter)})`;

  return `${direction}: ${val};`;
};

开发者ID:PrisisForks，项目名称:growcss，代码行数:24，代码来源:cell-properties.ts

示例3: 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

示例4: rem

import { rem } from '@growcss/elaborate';
import { getGutterSize } from '../utils/get-gutter-size';

const gutters = {
  small: `${getGutterSize(2)}px`,
  medium: `${getGutterSize(3)}px`,
};

export default {
  //  Global width of your site. Used by the grid to determine row width.
  maxWidth: rem(1200),
  gutterBreakpoint: 'small',
  marginGutters: gutters,
  paddingGutters: gutters,
  columns: 12,
};

开发者ID:growcss，项目名称:growcss，代码行数:16，代码来源:grid.ts

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