當前位置: 首頁>>代碼示例>>TypeScript>>正文


TypeScript elaborate.em函數代碼示例

本文整理匯總了TypeScript中@growcss/elaborate.em函數的典型用法代碼示例。如果您正苦於以下問題:TypeScript em函數的具體用法?TypeScript em怎麽用?TypeScript em使用的例子?那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。


在下文中一共展示了em函數的3個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

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

示例2: em

 font-size: ${props => em(props.theme.fontSize)};
開發者ID:growcss,項目名稱:growcss,代碼行數:1,代碼來源:typography.ts

示例3: em

 font-size: ${props => em(props.theme.typography.fontSize)};
開發者ID:growcss,項目名稱:growcss,代碼行數:1,代碼來源:index.ts


注:本文中的@growcss/elaborate.em函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台,相關代碼片段篩選自各路編程大神貢獻的開源項目,源碼版權歸原作者所有,傳播和使用請參考對應項目的License;未經允許,請勿轉載。