TypeScript styling.getFocusStyle函数代码示例

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

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

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

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

示例1: getFocusStyle

export const getStyles = (props: ICalendarMonthStyleProps): ICalendarMonthStyles => {
  const { className, theme, hasHeaderClickCallback, highlightCurrentMonth, highlightSelectedMonth } = props;
  const { palette } = theme;

  const disabledStyle = {
    selectors: {
      '&, &:disabled, & button': {
        color: palette.neutralTertiaryAlt,
        pointerEvents: 'none'
      }
    }
  };

  return {
    root: [
      normalize,
      {
        width: 196,
        padding: 12,
        boxSizing: 'content-box'
      },
      className
    ],
    headerContainer: {
      display: 'flex'
    },
    currentYearButton: [
      getFocusStyle(theme, -1, 'relative'),
      {
        fontSize: FontSizes.medium,
        fontWeight: FontWeights.semibold,
        textAlign: 'left',
        backgroundColor: 'transparent',
        flexGrow: 1,
        padding: '0 4px 0 10px',
        border: 'none'
      },
      hasHeaderClickCallback && {
        selectors: {
          '&:hover, &:active': {
            cursor: !hasHeaderClickCallback ? 'default' : 'pointer',
            color: palette.neutralDark,
            outline: '1px solid transparent',
            backgroundColor: palette.neutralLight
          }
        }
      }
    ],
    yearNavigationButtonsContainer: {
      display: 'flex',
      alignItems: 'center'
    },
    yearNavigationButton: [
      getFocusStyle(theme, -1, 'relative'),
      {
        width: 28,
        minWidth: 28,
        height: 28,
        minHeight: 28,
        display: 'block',
        textAlign: 'center',
        lineHeight: 28,
        fontSize: FontSizes.small,
        color: palette.neutralPrimary,
        borderRadius: 2,
        position: 'relative',
        backgroundColor: 'transparent',
        border: 'none',
        padding: 0,
        selectors: {
          '&:hover': {
            color: palette.neutralDark,
            cursor: 'pointer',
            outline: '1px solid transparent',
            backgroundColor: palette.neutralLight
          }
        }
      }
    ],
    monthGridContainer: {
      marginTop: 4
    },
    monthButton: [
      getFocusStyle(theme, -1, 'relative'),
      {
        width: 40,
        height: 40,
        minWidth: 40,
        minHeight: 40,
        lineHeight: 40,
        fontSize: FontSizes.small,
        margin: '0 12px 16px 0',
        color: palette.neutralPrimary,
        backgroundColor: 'transparent',
        border: 'none',
        borderRadius: 2,
        selectors: {
          '&:nth-child(4n + 4)': {
            marginRight: 0
          },
//.........这里部分代码省略.........

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

示例2: getFocusStyle

export const styles = (props: ICalendarStyleProps): ICalendarStyles => {
  const { className, theme, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;
  const { palette } = theme;

  let totalWidth = isDayPickerVisible && isMonthPickerVisible ? 440 : 220;
  if (showWeekNumbers) {
    totalWidth += 30;
  }

  return {
    root: [
      normalize,
      {
        display: 'flex',
        width: totalWidth
      },
      !isMonthPickerVisible && {
        flexDirection: 'column'
      },
      className
    ],
    divider: {
      top: 0,
      borderRight: '1px solid',
      borderColor: palette.neutralLight
    },
    monthPickerWrapper: [
      {
        display: 'flex',
        flexDirection: 'column'
      }
    ],
    goTodayButton: [
      getFocusStyle(theme, -1, 'relative'),
      {
        bottom: 0,
        color: palette.neutralPrimary,
        height: 30,
        lineHeight: 30,
        backgroundColor: 'transparent',
        border: 'none',
        boxSizing: 'content-box',
        padding: '0 4px',
        alignSelf: 'flex-end',
        marginRight: 16,
        fontSize: FontSizes.small,
        selectors: {
          '& div': {
            fontSize: FontSizes.small
          },
          '&:hover': {
            color: palette.themePrimary,
            backgroundColor: 'transparent',
            cursor: 'pointer'
          },
          '&:active': {
            color: palette.themeDark
          },
          '&:disabled': {
            color: palette.neutralTertiaryAlt,
            pointerEvents: 'none'
          }
        }
      }
    ]
  };
};

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

示例3: getGlobalClassNames

export const styles = (props: ICalendarDayStyleProps): ICalendarDayStyles => {
  const { className, theme, headerIsClickable, dateRangeType, showWeekNumbers } = props;
  const { palette } = theme;

  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  const disabledStyle = {
    selectors: {
      '&, &:disabled, & button': {
        color: palette.neutralTertiaryAlt,
        pointerEvents: 'none'
      }
    }
  };

  return {
    root: [
      normalize,
      {
        width: 196,
        padding: 12,
        boxSizing: 'content-box'
      },
      showWeekNumbers && {
        width: 226
      },
      className
    ],
    header: {
      position: 'relative',
      display: 'inline-flex',
      height: 28,
      lineHeight: 44,
      width: '100%'
    },
    monthAndYear: [
      getFocusStyle(theme, -1, 'relative'),
      {
        alignItems: 'center',
        fontSize: FontSizes.medium,
        color: palette.neutralPrimary,
        display: 'inline-flex',
        flexGrow: 1,
        fontWeight: FontWeights.semibold,
        padding: '0 4px 0 10px',
        border: 'none',
        backgroundColor: 'transparent',
        borderRadius: 2
      },
      headerIsClickable && {
        selectors: {
          '&:hover': {
            cursor: 'pointer',
            background: palette.neutralLight,
            color: palette.black
          }
        }
      }
    ],
    table: [
      {
        textAlign: 'center',
        borderCollapse: 'collapse',
        borderSpacing: '0',
        tableLayout: 'fixed',
        fontSize: 'inherit',
        marginTop: 4,
        width: 197
      },
      showWeekNumbers && {
        width: 226
      }
    ],
    monthComponents: {
      display: 'inline-flex',
      alignSelf: 'flex-end'
    },
    headerIconButton: [
      getFocusStyle(theme, -1, 'relative'),
      {
        width: 28,
        height: 28,
        display: 'block',
        textAlign: 'center',
        lineHeight: 28,
        fontSize: FontSizes.small,
        color: palette.neutralPrimary,
        borderRadius: 2,
        position: 'relative',
        backgroundColor: 'transparent',
        border: 'none',
        padding: 0,
        selectors: {
          '&:hover': {
            color: palette.neutralDark,
            backgroundColor: palette.neutralLight,
            cursor: 'pointer',
            outline: '1px solid transparent'
          }
        }
//.........这里部分代码省略.........

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

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