TypeScript styling.mergeStyles函数代码示例

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

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

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

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

示例1: getStyles

export function getStyles(theme: ITheme = getTheme()): IColorPageStyles {
  return {
    swatch: mergeStyles({
      display: 'inline-block',
      verticalAlign: 'middle',
      width: 20,
      height: 20,
      borderRadius: '50%',
      marginRight: '8px'
    }),
    cell: mergeStyles(
      theme.fonts.small,
      {
        display: 'inline-block',
        verticalAlign: 'middle',
      }),
    cellWithBorder: mergeStyles({
      borderWidth: '1px',
      borderStyle: 'solid'
    }),
    swatchText: mergeStyles({
      display: 'inline-block',
      verticalAlign: 'middle',
    }),

    example: mergeStyles(theme.fonts.mediumPlus)
  };
}

开发者ID:antonlabunets，项目名称:office-ui-fabric-react，代码行数:28，代码来源:ColorPage.styles.ts

示例2: getStyles

export function getStyles(theme: ITheme = getTheme()): IIconTileStyles {
  return {
    iconTile: mergeStyles(
      theme.fonts.small,
      {
        flexShrink: 0,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        margin: '5px',
        width: 150,
        height: 80,
        opacity: .6,
        cursor: 'default',
        outline: 'none',
        position: 'relative',

        ':focus:after': {
          content: '""',
          position: 'absolute',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          border: '1px solid ' + theme.palette.themePrimary,
        },

        ':focus': {
          ...AnimationStyles.fadeIn500,
          color: theme.palette.themePrimary,
          opacity: 1,
          background: theme.palette.themeLighterAlt
        },
        ':hover': {
          opacity: 1,
          background: theme.palette.themeLighterAlt
        },
        ':focus:hover': {
          background: theme.palette.themeLight
        }
      }),

    icon: mergeStyles(
      theme.fonts.icon,
      {
        fontSize: '36px',
        paddingBottom: '8px'
      })
  };
}

开发者ID:antonlabunets，项目名称:office-ui-fabric-react，代码行数:51，代码来源:IconTile.styles.ts

示例3: getStyles

export function getStyles(theme: ITheme = getTheme()): IFontPageRules {
  return {
    row: mergeStyles({
      paddingBottom: '10px',
      borderBottom: '1px solid ' + theme.palette.themeLighterAlt,
      userSelect: 'none'
    }),
    cell: mergeStyles(
      theme.fonts.small,
      {
        paddingRight: '20px'
      })
  };
}

开发者ID:antonlabunets，项目名称:office-ui-fabric-react，代码行数:14，代码来源:FontPage.styles.ts

示例4: getStyles

export function getStyles(theme: ITheme = getTheme()): IIconPageStyles {
  return {
    container: mergeStyles({
      display: 'flex',
      justifyContent: 'center',
      flexWrap: 'wrap'
    })
  };
}

开发者ID:antonlabunets，项目名称:office-ui-fabric-react，代码行数:9，代码来源:IconPage.styles.ts

示例5: getStyles

export function getStyles(theme: ITheme = getTheme()): IPageHeaderStyles {
  return {
    root: mergeStyles(
      theme.fonts.xLarge,
      {
        paddingBottom: '20px'
      }
    )
  };
}

开发者ID:antonlabunets，项目名称:office-ui-fabric-react，代码行数:10，代码来源:PageHeader.styles.ts

示例6: getStyles

export function getStyles(theme: ITheme = getTheme()): IPageStyles {
  return {
    root: mergeStyles(
      theme.fonts.medium,
      {
        padding: '20px'
      }
    )
  };
}

开发者ID:antonlabunets，项目名称:office-ui-fabric-react，代码行数:10，代码来源:Page.styles.ts

示例7: getStyles

export function getStyles(theme: ITheme = getTheme()): IAnimationPageStyles {
  return {
    grid: mergeStyles({
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'stretch',
      margin: '-8px'
    }),

    blue: mergeStyles({
      background: theme.palette.themeSecondary
    }),

    tile: mergeStyles({
      flexGrow: 1,
      minWidth: '200px',
      maxWidth: '400px',
      padding: '8px'
    })
  };
}

开发者ID:antonlabunets，项目名称:office-ui-fabric-react，代码行数:21，代码来源:AnimationPage.styles.ts

示例8: getStyles

export function getStyles(theme: ITheme = getTheme()): IAnimationTileStyles {
  return {

    root: mergeStyles({
      marginBottom: '20px'
    }),

    title: mergeStyles({
      ...theme.fonts.medium,
      marginBottom: '8px'
    }),

    container: mergeStyles({
      overflow: 'hidden',
      position: 'relative',
      maxWidth: '400px',
      height: '100px',
      border: '1px solid black',
      backgroundImage:
      'url("data:image/svg+xml;base64,' + 'PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc' +
      '+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwx' +
      'IGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J' +
      '2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg==")',
      backgroundRepeat: 'repeat',
    }),

    animationBox: mergeStyles({
      position: 'absolute',

      background: theme.palette.themePrimary,
      width: '25%',
      height: '100%'
    }),

    isLeft: mergeStyles({
      left: 0,
      top: 0,
      width: '25%',
      height: '100%'
    }),

    isRight: mergeStyles({
      right: 0,
      top: 0,
      width: '25%',
      height: '100%'
    }),

    isTop: mergeStyles({
      left: 0,
      top: 0,
      width: '100%',
      height: '50%'
    }),

    isBottom: mergeStyles({
      left: 0,
      bottom: 0,
      width: '100%',
      height: '50%'
    }),

    isIn: mergeStyles({
      opacity: 0
    })
  };
}

开发者ID:cmalonzo，项目名称:office-ui-fabric-react，代码行数:67，代码来源:AnimationTile.styles.ts

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