@uifabric/styling

Variables

• AnimationClassNames
• ColorClassNames
• EdgeChromiumHighContrastSelector
• FontClassNames
• hiddenContentStyle
• HighContrastSelector
• HighContrastSelectorBlack
• HighContrastSelectorWhite
• normalize
• noWrap
• PulsingBeaconAnimationStyles
• ScreenWidthMaxLarge
• ScreenWidthMaxMedium
• ScreenWidthMaxSmall
• ScreenWidthMaxXLarge
• ScreenWidthMaxXXLarge
• ScreenWidthMinLarge
• ScreenWidthMinMedium
• ScreenWidthMinSmall
• ScreenWidthMinUhfMobile
• ScreenWidthMinXLarge
• ScreenWidthMinXXLarge
• ScreenWidthMinXXXLarge
• ThemeSettingName

Functions

• buildClassMap()
• focusClear()
• getEdgeChromiumNoHighContrastAdjustSelector()
• getFadedOverflowStyle()
• getFocusOutlineStyle()
• getFocusStyle()
• getGlobalClassNames()
• getHighContrastNoAdjustStyle()
• getIcon()
• getIconClassName()
• getInputFocusStyle()
• getPlaceholderStyles()
• getScreenSelector()
• getTheme()
• loadTheme()
• registerIconAlias()
• registerIcons()
• registerOnThemeChangeCallback()
• removeOnThemeChangeCallback()
• setIconOptions()
• unregisterIcons()

Interfaces

• IGetFocusStylesOptions

  • borderColor
  • highContrastStyle
  • inset
  • isFocusedOnly
  • outlineColor
  • position
  • width
• IIconOptions

  • disableWarnings
  • warnOnMissingIcons
• IIconRecord

  • code
  • subset
• IIconSubset

  • fontFace
  • icons
  • mergeImageProps
  • style
• IIconSubsetRecord

  • className
  • isRegistered

Type Aliases

• GlobalClassNames

Namespaces

• ZIndexes

  • Coachmark
  • FocusStyle
  • KeytipLayer
  • Layer
  • Nav
  • ScrollablePane

variable AnimationClassNames

const AnimationClassNames: { [x: string]: string };

variable ColorClassNames

const ColorClassNames: IColorClassNames;

variable EdgeChromiumHighContrastSelector

const EdgeChromiumHighContrastSelector: string;

• Deprecated

  Use HighContrastSelector

variable FontClassNames

const FontClassNames: { [x: string]: string };

variable hiddenContentStyle

const hiddenContentStyle: IRawStyle;

variable HighContrastSelector

const HighContrastSelector: string;

variable HighContrastSelectorBlack

const HighContrastSelectorBlack: string;

variable HighContrastSelectorWhite

const HighContrastSelectorWhite: string;

variable normalize

const normalize: IRawStyle;

variable noWrap

const noWrap: IRawStyle;

variable PulsingBeaconAnimationStyles

const PulsingBeaconAnimationStyles: {
    continuousPulseAnimationDouble: typeof _continuousPulseAnimationDouble;
    continuousPulseAnimationSingle: typeof _continuousPulseAnimationSingle;
    createDefaultAnimation: typeof _createDefaultAnimation;
};

variable ScreenWidthMaxLarge

const ScreenWidthMaxLarge: number;

variable ScreenWidthMaxMedium

const ScreenWidthMaxMedium: number;

variable ScreenWidthMaxSmall

const ScreenWidthMaxSmall: number;

variable ScreenWidthMaxXLarge

const ScreenWidthMaxXLarge: number;

variable ScreenWidthMaxXXLarge

const ScreenWidthMaxXXLarge: number;

variable ScreenWidthMinLarge

const ScreenWidthMinLarge: number;

variable ScreenWidthMinMedium

const ScreenWidthMinMedium: number;

variable ScreenWidthMinSmall

const ScreenWidthMinSmall: number;

variable ScreenWidthMinUhfMobile

const ScreenWidthMinUhfMobile: number;

variable ScreenWidthMinXLarge

const ScreenWidthMinXLarge: number;

variable ScreenWidthMinXXLarge

const ScreenWidthMinXXLarge: number;

variable ScreenWidthMinXXXLarge

const ScreenWidthMinXXXLarge: number;

variable ThemeSettingName

const ThemeSettingName: string;

function buildClassMap

buildClassMap: <T extends Object>(styles: T) => { [key in keyof T]?: string };

• Builds a class names object from a given map.

  Parameter styles

  Map of unprocessed styles.

  Returns

  Map of property name to class name.

function focusClear

focusClear: () => IRawStyle;

• Generates style to clear browser specific focus styles.

function getEdgeChromiumNoHighContrastAdjustSelector

getEdgeChromiumNoHighContrastAdjustSelector: () => {
    [EdgeChromiumHighContrastSelector]: IRawStyle;
};

• The style which turns off high contrast adjustment in (only) Edge Chromium browser.

  Deprecated

  Use getHighContrastNoAdjustStyle

function getFadedOverflowStyle

getFadedOverflowStyle: (
    theme: ITheme,
    color?: keyof ISemanticColors | keyof IPalette,
    direction?: 'horizontal' | 'vertical',
    width?: string | number,
    height?: string | number
) => IRawStyle;

• - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element. - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover, selected, focus). - Requires the target to have position set to relative and overflow set to hidden.

  Parameter theme

  The theme object to use.

  Parameter color

  The background color to fade out to. Accepts only keys of ISemanticColors or IPalette. Defaults to 'bodyBackground'.

  Parameter direction

  The direction of the overflow. Defaults to horizontal.

  Parameter width

  The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.

  Parameter height

  The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.

  Returns

  The style object.

  Example 1

  // Assuming the following DOM structure and the different background colors coming from
  // the parent holding the content.
  <div className={classNames.parent}>
    <span className={classNames.content}>Overflown Content</span>
  </div>

  // This is how the style set would look in Component.styles.ts
  const { bodyBackground } = theme.semanticColors;
  const { neutralLighter } = theme.palette;
  
  // The second argument of getFadedOverflowStyle function is a string representing a key of
  // ISemanticColors or IPalette.
  
  const styles = {
    parent: [
      backgroundColor: bodyBackground,
      selectors: {
        '&:hover: {
          backgroundColor: neutralLighter
        },
        '$content:after': {
          ...getFadedOverflowStyle(theme, 'bodyBackground')
        },
        '&:hover $content:after': {
          ...getFadedOverflowStyle(theme, 'neutralLighter')
        }
      }
    ],
    content: [
      width: '100%',
      display: 'inline-block',
      position: 'relative',
      overflow: 'hidden'
    ]
  }

function getFocusOutlineStyle

getFocusOutlineStyle: (
    theme: ITheme,
    inset?: number,
    width?: number,
    color?: string
) => IRawStyle;

• Generates a style which can be used to set a border on focus.

  Parameter theme

  The theme object to use.

  Parameter inset

  The number of pixels to inset the border (default 0)

  Parameter width

  The border width in pixels (default 1)

  Parameter color

  Color of the outline (default theme.palette.neutralSecondary)

  Returns

  The style object.

function getFocusStyle

getFocusStyle: {
    (theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle;
    (
        theme: ITheme,
        inset?: number,
        position?: 'relative' | 'absolute',
        highContrastStyle?: any,
        borderColor?: string,
        outlineColor?: string,
        isFocusedOnly?: boolean
    ): IRawStyle;
};

• Generates a focus style which can be used to define an :after focus border.

  Parameter theme

  The theme object to use.

  Parameter options

  Options to customize the focus border.

  Returns

  The style object.

• Generates a focus style which can be used to define an :after focus border.

  Parameter theme

  The theme object to use.

  Parameter inset

  The number of pixels to inset the border.

  Parameter position

  The positioning applied to the container. Must be 'relative' or 'absolute' so that the focus border can live around it.

  Parameter highContrastStyle

  Style for high contrast mode.

  Parameter borderColor

  Color of the border.

  Parameter outlineColor

  Color of the outline.

  Parameter isFocusedOnly

  If the styles should apply on focus or not.

  Returns

  The style object.

  Deprecated

  Use the object parameter version instead.

function getGlobalClassNames

getGlobalClassNames: <T>(
    classNames: GlobalClassNames<T>,
    theme: ITheme,
    disableGlobalClassNames?: boolean
) => GlobalClassNames<T>;

• Checks for the disableGlobalClassNames property on the theme to determine if it should return classNames Note that calls to this function are memoized.

  Parameter classNames

  The collection of global class names that apply when the flag is false. Make sure to pass in the same instance on each call to benefit from memoization.

  Parameter theme

  The theme to check the flag on

  Parameter disableGlobalClassNames

  Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.

function getHighContrastNoAdjustStyle

getHighContrastNoAdjustStyle: () => IRawStyle;

• The style which turns off high contrast adjustment in browsers.

function getIcon

getIcon: (name?: string) => IIconRecord | undefined;

• Gets an icon definition. If an icon is requested but the subset has yet to be registered, it will get registered immediately.

  Parameter name

  Name of icon.

  Modifiers

  • @public

function getIconClassName

getIconClassName: (name: string) => string;

• Gets an icon classname. You should be able to add this classname to an I tag with no additional classnames, and render the icon.

  Modifiers

  • @public

function getInputFocusStyle

getInputFocusStyle: (
    borderColor: string,
    borderRadius: string | number,
    borderType?: 'border' | 'borderBottom',
    borderPosition?: number
) => IRawStyle;

• Generates text input border styles on focus.

  Parameter borderColor

  Color of the border.

  Parameter borderRadius

  Radius of the border.

  Parameter borderType

  Type of the border.

  Parameter borderPosition

  Position of the border relative to the input element (default to -1 as it's the most common border width of the input element)

  Returns

  The style object.

function getPlaceholderStyles

getPlaceholderStyles: (styles: IStyle) => IStyle;

• Generates placeholder style for each of the browsers supported by office-ui-fabric-react.

  Parameter styles

  The style to use.

  Returns

  The placeholder style object for each browser depending on the placeholder directive it uses.

function getScreenSelector

getScreenSelector: (min: number | undefined, max: number | undefined) => string;

function getTheme

getTheme: (depComments?: boolean) => ITheme;

• Gets the theme object

  Parameter depComments

  Whether to include deprecated tags as comments for deprecated slots.

function loadTheme

loadTheme: (theme: IPartialTheme, depComments?: boolean) => ITheme;

• Applies the theme, while filling in missing slots.

  Parameter theme

  Partial theme object.

  Parameter depComments

  Whether to include deprecated tags as comments for deprecated slots.

function registerIconAlias

registerIconAlias: (iconName: string, mappedToName: string) => void;

• Remaps one icon name to another.

function registerIcons

registerIcons: (
    iconSubset: IIconSubset,
    options?: Partial<IIconOptions>
) => void;

• Registers a given subset of icons.

  Parameter iconSubset

  the icon subset definition.

function registerOnThemeChangeCallback

registerOnThemeChangeCallback: (callback: (theme: ITheme) => void) => void;

• Registers a callback that gets called whenever the theme changes. This should only be used when the component cannot automatically get theme changes through its state. This will not register duplicate callbacks.

function removeOnThemeChangeCallback

removeOnThemeChangeCallback: (callback: (theme: ITheme) => void) => void;

• See registerOnThemeChangeCallback(). Removes previously registered callbacks.

function setIconOptions

setIconOptions: (options: Partial<IIconOptions>) => void;

• Sets the icon options.

  Modifiers

  • @public

function unregisterIcons

unregisterIcons: (iconNames: string[]) => void;

• Unregisters icons by name.

  Parameter iconNames

  List of icons to unregister.

type GlobalClassNames

type GlobalClassNames<IStyles> = Record<keyof IStyles, string>;