office-ui-fabric-react package

Classes

ActionButton
ActivityItem
AnnouncedBase
Autofill
BaseAutoFill
BaseButton
BaseExtendedPeoplePicker
BaseExtendedPicker
BaseFloatingPeoplePicker
BaseFloatingPicker
BasePeoplePicker
BasePeopleSelectedItemsList
BasePicker
BasePickerListBelow
BaseSelectedItemsList
BreadcrumbBase
Button

This class is deprecated. Use the individual *Button components instead.

Calendar
Callout
CheckboxBase
ChoiceGroupBase
CoachmarkBase
ColorPickerBase
ColorPickerGridCellBase
ComboBox
CommandBarBase
CommandBarButton
CompactPeoplePickerBase

Compact layout. It uses personas without secondary text when displaying search results.

CompoundButton
ContextualMenuBase
ContextualMenuItemBase
DatePickerBase
DefaultButton
DetailsColumnBase

Component for rendering columns in a DetailsList.

DetailsHeaderBase
DetailsListBase
DetailsRowBase
DialogBase
DialogContentBase
DialogFooterBase
DropdownBase
ExpandingCardBase
ExtendedPeoplePicker
ExtendedSelectedItem
FabricBase
FacepileBase

FacePile with no default styles. [Use the styles API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling)

FloatingPeoplePicker
FocusTrapZone
FocusZone
GridCell
GroupedListBase
HoverCardBase
IconBase
IconButton
ImageBase
Keytip

A callout corresponding to another Fabric component to describe a key sequence that will activate that component

KeytipData

A small element to help the target component correctly read out its aria-describedby for its Keytip

KeytipLayerBase

A layer that holds all keytip items

LabelBase
LayerBase
LayerHost
LinkBase
List

The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback if provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if provided by the caller, or by cached measurements if available, or by a running average, or a default fallback.

The algorithm for rendering pages works like this:

  1. Predict visible pages based on "current measure data" (page heights, surface position, visible window) 2. If changes are necessary, apply changes (add/remove pages) 3. For pages that are added, measure the page heights if we need to using getBoundingClientRect 4. If measurements don't match predictions, update measure data and goto step 1 asynchronously

Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that we can avoid re-measuring during operations that should not alter heights, like scrolling.

To optimize glass rendering performance, onShouldVirtualize can be set. When onShouldVirtualize return false, List will run in fast mode (not virtualized) to render all items without any measurements to improve page load time. And we start doing measurements and rendering in virtualized mode when items grows larger than this threshold.

However, certain operations can make measure data stale. For example, resizing the list, or passing in new props, or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion number, which we associate with cached measurements and use to determine if a remeasure should occur.

ListPeoplePickerBase

MemberList layout. The selected people show up below the search box.

MaskedTextField
MemberListPeoplePicker
MessageBarBase
MessageBarButton
ModalBase
NavBase
NormalPeoplePickerBase

Standard People Picker.

OverflowSetBase
OverlayBase
PersonaBase

Persona with no default styles. [Use the styles API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling)

PersonaCoinBase

PersonaCoin with no default styles. [Use the getStyles API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling)

PivotBase

Usage:

PivotItem
PlainCardBase
Popup

This adds accessibility to Dialog and Panel controls

PositioningContainer
PrimaryButton
ProgressIndicatorBase

ProgressIndicator with no default styles. [Use the styles API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling)

RatingBase
ResizeGroupBase
ScrollablePaneBase
SearchBoxBase
SelectedPeopleList

Standard People Picker.

SelectionZone
ShimmerBase
ShimmeredDetailsListBase
SliderBase
SpinButton
SpinnerBase
Sticky
Suggestions
SuggestionsControl

Class when used with SuggestionsStore, renders a suggestions control with customizable headers and footers

SuggestionsController
SuggestionsCore

Class when used with SuggestionsStore, renders a basic suggestions control

SuggestionsHeaderFooterItem
SuggestionsItem
SuggestionsStore
SwatchColorPickerBase
TagPickerBase
TeachingBubbleBase
TeachingBubbleContentBase
TextFieldBase
ThemeGenerator
ToggleBase
TooltipBase
TooltipHostBase
VirtualizedComboBox

Interfaces

IActivityItemProps
IActivityItemStyles
IAnnouncedProps
IAnnouncedStyles
IAutofill
IAutofillProps
IAutofillState
IBaseAutoFill

Deprecated, do not use.

IBaseAutoFillProps

Deprecated, do not use.

IBaseButtonProps
IBaseButtonState
IBaseExtendedPicker
IBaseExtendedPickerProps
IBaseExtendedPickerState
IBaseFloatingPicker
IBaseFloatingPickerProps
IBaseFloatingPickerState
IBasePicker

BasePicker component.

IBasePickerProps

Type T is the type of the item that is displayed and searched for by the picker. For example, if the picker is displaying persona's then type T could either be of Persona or IPersona props

IBasePickerState
IBasePickerStyles

Represents the stylable areas of the control.

IBasePickerSuggestionsProps

Subset of picker options that may be legally passed through a picker to its internal Suggestions component.

IBaseSelectedItemsList
IBaseSelectedItemsListProps
IBaseSelectedItemsListState
IBreadcrumb
IBreadcrumbData
IBreadcrumbItem
IBreadcrumbProps
IBreadcrumbStyleProps
IBreadcrumbStyles
IButton
IButtonProps
IButtonStyles
ICalendar
ICalendarFormatDateCallbacks
ICalendarIconStrings
ICalendarProps
ICalendarState
ICalendarStrings
ICalloutContentStyleProps
ICalloutContentStyles
ICalloutProps
ICellStyleProps
ICheckbox

Checkbox class interface.

ICheckboxProps

Checkbox properties.

ICheckboxState
ICheckboxStyleProps
ICheckboxStyles
ICheckProps
ICheckStyles
IChoiceGroup
IChoiceGroupOption
IChoiceGroupOptionProps
IChoiceGroupOptionStyleProps

Defines props needed to construct styles. This represents the simplified set of immutable things which control the class names.

IChoiceGroupOptionStyles
IChoiceGroupProps
IChoiceGroupState
IChoiceGroupStyleProps
IChoiceGroupStyles
ICircle

Circle element interface

ICoachmark
ICoachmarkProps

Coachmark component props

ICoachmarkState
ICoachmarkStyleProps

The props needed to construct styles.

ICoachmarkStyles

Represents the stylable areas of the control.

IColor
IColorCellProps
IColorPicker
IColorPickerGridCellProps
IColorPickerGridCellStyleProps

Properties required to build the styles for the color picker component.

IColorPickerGridCellStyles

Styles for the Color Picker Component.

IColorPickerProps
IColorPickerState
IColorPickerStyleProps
IColorPickerStyles
IColorRectangle
IColorRectangleProps
IColorRectangleStyleProps
IColorRectangleStyles
IColorSlider
IColorSliderProps
IColorSliderStyleProps
IColorSliderStyles
IColumn
IColumnDragDropDetails
IColumnReorderHeaderProps
IColumnReorderOptions
IColumnResizeDetails
IComboBox
IComboBoxOption
IComboBoxOptionStyles
IComboBoxProps
IComboBoxState
IComboBoxStyles
ICommandBar
ICommandBarData
ICommandBarItemProps

ICommandBarItemProps extends IContextualMenuItem and adds a few CommandBar specific props

ICommandBarProps
ICommandBarStyleProps
ICommandBarStyles
IContextualMenu
IContextualMenuItem
IContextualMenuItemProps
IContextualMenuItemStyleProps
IContextualMenuItemStyles
IContextualMenuListProps
IContextualMenuProps
IContextualMenuRenderItem
IContextualMenuSection
IContextualMenuState
IContextualMenuStyleProps
IContextualMenuStyles
IContextualMenuSubComponentStyles
IDatePicker
IDatePickerProps
IDatePickerState
IDatePickerStrings
IDatePickerStyleProps
IDatePickerStyles
IDetailsCheckboxProps
IDetailsColumnProps
IDetailsColumnStyles
IDetailsFooterBaseProps
IDetailsFooterProps
IDetailsGroupDividerProps
IDetailsGroupRenderProps
IDetailsHeader
IDetailsHeaderBaseProps
IDetailsHeaderProps
IDetailsHeaderState
IDetailsHeaderStyles
IDetailsItemProps
IDetailsList
IDetailsListCheckboxProps
IDetailsListProps
IDetailsListState
IDetailsListStyles
IDetailsRow
IDetailsRowBaseProps
IDetailsRowCheckProps
IDetailsRowCheckStyles
IDetailsRowFieldsProps

Props interface for the DetailsRowFields component.

IDetailsRowProps
IDetailsRowSelectionState
IDetailsRowState
IDetailsRowStyles
IDialog
IDialogContent
IDialogContentProps
IDialogContentStyleProps
IDialogContentStyles
IDialogFooter
IDialogFooterProps
IDialogFooterStyleProps
IDialogFooterStyles
IDialogProps
IDialogState
IDialogStyleProps
IDialogStyles
IDividerAsProps
IDocumentCard
IDocumentCardActions
IDocumentCardActionsProps
IDocumentCardActionsStyleProps
IDocumentCardActionsStyles
IDocumentCardActivity
IDocumentCardActivityPerson
IDocumentCardActivityProps
IDocumentCardActivityStyleProps
IDocumentCardActivityStyles
IDocumentCardDetails
IDocumentCardDetailsProps
IDocumentCardDetailsStyleProps
IDocumentCardDetailsStyles
IDocumentCardImage
IDocumentCardImageProps
IDocumentCardImageStyleProps
IDocumentCardImageStyles
IDocumentCardLocation
IDocumentCardLocationProps
IDocumentCardLocationStyleProps
IDocumentCardLocationStyles
IDocumentCardLogo
IDocumentCardLogoProps
IDocumentCardLogoStyleProps
IDocumentCardLogoStyles
IDocumentCardPreview
IDocumentCardPreviewImage
IDocumentCardPreviewProps
IDocumentCardPreviewStyleProps
IDocumentCardPreviewStyles
IDocumentCardProps
IDocumentCardStatus
IDocumentCardStatusProps
IDocumentCardStatusStyleProps
IDocumentCardStatusStyles
IDocumentCardStyleProps
IDocumentCardStyles
IDocumentCardTitle
IDocumentCardTitleProps
IDocumentCardTitleStyleProps
IDocumentCardTitleStyles
IDragDropContext

Drag & drop event contextual information.

IDragDropEvents

Drag & drop event callback interface.

IDragDropHelper

Helper for subscribing and unsubscribing to drag and drop events on an HTMLElement.

IDragDropOptions

The drag and drop event listener configuration.

IDragOptions
IDropdown
IDropdownInternalProps

Internal only props interface to support mixing in responsive mode

IDropdownOption
IDropdownProps
IDropdownState
IDropdownStyles

Represents the stylable areas of the control.

IDropdownSubComponentStyles
IDropHintDetails
IEntityRect

An interface for the cached dimensions of entity inner host.

IExpandingCard
IExpandingCardProps

ExpandingCard component props.

IExpandingCardState
IExpandingCardStyleProps
IExpandingCardStyles
IExtendedPeoplePickerProps
IExtendedPersonaProps
IFabricProps
IFabricStyleProps
IFabricStyles
IFacepile
IFacepilePersona
IFacepileProps
IFacepileStyleProps
IFacepileStyles
IFocusTrapCalloutProps
IFocusTrapZone
IFocusTrapZoneProps
IFocusZone

FocusZone component class interface.

IFocusZoneProps

FocusZone component props.

IFontIconProps

Props for a basic icon component which only supports font glyphs and can't be targeted by customizations.

IGap

Gap element interface

IGenericItem
IGrid
IGridCellProps
IGridProps
IGridStyleProps

Properties required to build the styles for the grid component.

IGridStyles

Styles for the Grid Component.

IGroup
IGroupDividerProps
IGroupedList
IGroupedListProps
IGroupedListState
IGroupedListStyles
IGroupFooterProps
IGroupFooterStyles
IGroupHeaderProps
IGroupHeaderStyles
IGroupRenderProps
IGroupShowAllProps
IGroupShowAllStyles
IGroupSpacerProps
IGroupSpacerStyles
IHoverCard
IHoverCardProps

HoverCard component props.

IHoverCardState
IHoverCardStyleProps
IHoverCardStyles
IHSL
IHSV
IIconProps
IIconState
IIconStyleProps
IIconStyles
IImage
IImageIconProps

Props for a basic image icon component which doesn't directly provide image load error handling and can't be targeted by customizations.

IImageProps
IImageState
IImageStyleProps
IImageStyles
IInputProps

Pickers' input props interface

IKeytipLayer
IKeytipLayerProps
IKeytipLayerState
IKeytipLayerStyleProps
IKeytipLayerStyles
IKeytipProps
IKeytipStyleProps

Props to style Keytip component

IKeytipStyles
ILabel
ILabelProps
ILabelStyleProps
ILabelStyles
ILayer
ILayerProps
ILayerStyleProps
ILayerStyles
ILine

Line element interface

ILink
ILinkHTMLAttributes
ILinkProps
ILinkStyleProps
ILinkStyles
IList
IListProps
IListState
IMarqueeSelection
IMarqueeSelectionProps
IMarqueeSelectionStyleProps
IMarqueeSelectionStyles
IMaskedTextFieldState

State for the MaskedTextField component.

IMenuItemStyles
IMessageBar
IMessageBarProps
IMessageBarState
IMessageBarStyleProps
IMessageBarStyles
IModal
IModalProps
IModalStyles
INav
INavLink
INavLinkGroup
INavProps
INavState
INavStyleProps
INavStyles
IOverflowSet
IOverflowSetItemProps
IOverflowSetProps
IOverflowSetStyles
IOverlay
IOverlayProps
IOverlayStyleProps
IOverlayStyles
IPage
IPageProps
IPageSpecification
IPanel
IPanelHeaderRenderer

Renderer function which takes an additional parameter, the ID to use for the element containing the panel's title. This allows the aria-labelledby for the panel popup to work correctly. Note that if headerTextId is provided, it **must** be used on an element, or screen readers will be confused by the reference to a nonexistent ID.

IPanelProps
IPanelStyleProps
IPanelStyles
IPeopleFloatingPickerProps
IPeoplePickerItemProps
IPeoplePickerItemSelectedProps

PeoplePickerItemSelected props interface. Refers to the PeoplePicker items that have been picked already.

IPeoplePickerItemSelectedStyles

Represents the stylable areas of the PeoplePickerItemSelected.

IPeoplePickerItemSelectedSubComponentStyles

Styles interface of the SubComponents rendered within PeoplePickerItemSelected.

IPeoplePickerItemSharedProps

Common props in between IPeoplePickerItemSelectedProps, IPeoplePickerItemWithMenuProps and IPeoplePickerItemSuggestionProps.

IPeoplePickerItemState
IPeoplePickerItemSuggestionProps

PeoplePickerItemSuggestion props interface. Refers to the PeoplePicker items that are suggested for picking.

IPeoplePickerItemSuggestionStyles

Represents the stylable areas of the PeoplePickerItemSuggestion.

IPeoplePickerItemWithMenuProps

PeoplePickerItemWithMenu props interface.

IPeoplePickerProps

PeoplePicker props interface which renders Personas as items.

IPersona
IPersonaCoinProps
IPersonaCoinStyleProps
IPersonaCoinStyles
IPersonaPresenceProps
IPersonaPresenceStyles
IPersonaProps
IPersonaSharedProps
IPersonaState
IPersonaStyleProps
IPersonaStyles
IPersonaWithMenu

Extended interface from IPersonaProps to add menuItems property PeoplePickerItemWithMenu items.

IPickerItem

PickerItem component.

IPickerItemProps

PickerItem props common for any type of items.

IPivot
IPivotItemProps
IPivotProps
IPivotState
IPivotStyles
IPlainCard
IPlainCardProps

PlainCard component props.

IPlainCardStyleProps
IPlainCardStyles
IPopupProps
IPopupState
IPositioningContainer
IPositioningContainerProps
IPositioningContainerState
IProgressIndicatorProps
IProgressIndicatorStyleProps
IProgressIndicatorStyles
IRating
IRatingProps

Rating component props.

IRatingState
IRatingStyleProps
IRatingStyles
IResizeGroup
IResizeGroupProps
IResizeGroupState
IResizeGroupStyleProps
IResizeGroupStyles
IRGB

RGB color with optional alpha value.

IScrollablePane
IScrollablePaneContext
IScrollablePaneProps
IScrollablePaneState
IScrollablePaneStyleProps
IScrollablePaneStyles
ISearchBox
ISearchBoxProps
ISearchBoxState
ISearchBoxStyleProps
ISearchBoxStyles
ISelectableDroppableTextProps

TComponent - Component used for reference properties, such as componentRef TListenerElement - Listener element associated with HTML event callbacks. Optional. If not provided, TComponent is assumed.

ISelectableOption
ISelectedItemProps
ISelectedPeopleItemProps
ISelectedPeopleProps
ISelectionZone
ISelectionZoneProps
ISeparator
ISeparatorProps
ISeparatorStyles
IShimmer
IShimmerCircle
IShimmerCircleProps

ShimmerCircle component props.

IShimmerCircleStyles

Represents the stylable areas of the control.

IShimmerColors

Interface describing the possible color customizations of Shimmer.

IShimmeredDetailsListProps

ShimmeredDetailsList props interface

IShimmeredDetailsListStyles

Represents the stylable areas of the control.

IShimmerElement

Shimmer Elements Interface representing all common properties between Gap, Circle and Line.

IShimmerElementsGroup
IShimmerElementsGroupProps

ShimmerElementsGroup component props.

IShimmerElementsGroupStyleProps

Props needed to construct styles.

IShimmerElementsGroupStyles

Represents the stylable areas of the control.

IShimmerGap
IShimmerGapProps

ShimmerGap component props.

IShimmerGapStyles

Represents the stylable areas of the control.

IShimmerLine
IShimmerLineProps

ShimmerLine component props.

IShimmerLineStyles

Represents the stylable areas of the control.

IShimmerProps

Shimmer component props.

IShimmerState
IShimmerStyleProps

Defines props needed to construct styles. This represents the simplified set of immutable things which control the class names.

IShimmerStyles

Represents the stylable areas of the control.

ISlider
ISliderProps
ISliderState
ISliderStyles
ISpinButton
ISpinButtonProps
ISpinButtonState
ISpinButtonStyles
ISpinner
ISpinnerProps

Spinner component props.

ISpinnerStyleProps

The props needed to construct styles. This represents the simplified set of immutable things which control the class names.

ISpinnerStyles

Represents the stylable areas of the control.

IStackItemProps
IStackItemSlots
IStackItemTokens
IStackProps
IStackSlots
IStackTokens
IStickyContext
IStickyProps
IStickyState
ISuggestionItemProps

Suggestion item props. Refers to the each individual suggested items rendered within Suggestions callout. Type T is the type of the item that is displayed.

ISuggestionModel

SuggestionModel interface. Type T is the type of the item that is suggested (Persona, Tag or any other custom picker).

ISuggestions

Suggestions component.

ISuggestionsControlProps
ISuggestionsControlState
ISuggestionsCoreProps
ISuggestionsHeaderFooterItemProps
ISuggestionsHeaderFooterProps
ISuggestionsItem

SuggestionItem component.

ISuggestionsItemStyles

Represents the stylable areas of the SuggestionItem.

ISuggestionsProps

Suggestions props interface. Refers to the entire container holding all the suggestions. Type T is the type of the items that are displayed.

ISuggestionsState
ISuggestionsStyles

Represents the stylable areas of the Suggestions.

ISuggestionsSubComponentStyles

Styles interface of the SubComponents rendered within PeoplePickerItemSelected.

ISwatchColorPickerProps
ISwatchColorPickerState
ISwatchColorPickerStyleProps

Properties required to build the styles for the color picker component.

ISwatchColorPickerStyles

Styles for the Color Picker Component.

ITag

TagPickerItem item interface.

ITagItemProps

TagItem component props

ITagItemStyles

Represents the stylable areas of the TagItem.

ITagItemSuggestionProps

TagItemSuggestion component props

ITagItemSuggestionStyles

Represents the stylable areas of the TagItemSuggestion

ITagPickerProps

TagPicker component props

ITeachingBubble
ITeachingBubbleProps

TeachingBubble component props.

ITeachingBubbleState
ITeachingBubbleStyles
ITeachingBubbleSubComponentStyles
ITextField
ITextFieldProps

TextField component props.

ITextFieldStyles
ITextFieldSubComponentStyles
ITextProps

Inputs to the component

ITextSlots
ITextTokens
IThemeRules
IThemeSlotRule
IToggle
IToggleProps

Toggle component props.

IToggleState
IToggleStyleProps

Properties required to build the styles for the Toggle component.

IToggleStyles

Styles for the Toggle component.

ITooltip
ITooltipHost
ITooltipHostProps

Tooltip component props.

ITooltipHostState
ITooltipHostStyleProps
ITooltipHostStyles
ITooltipProps

Tooltip component props.

ITooltipStyleProps
ITooltipStyles
IVerticalDividerClassNames
IVerticalDividerProps

Props for the Vertical Divider

IVerticalDividerStyles

Style interface that defines the different areas that styles can be customized on the Vertical Divider

IViewport

Viewport rectangle dimensions.

IWithViewportProps

Props interface for the withViewport component.

Enums

BaseSlots
ButtonType
CheckboxVisibility
CollapseAllVisibility
ColumnActionsMode

Enum to describe how a particular column header behaves.... This enum is used to to specify the property IColumn:columnActionsMode. If IColumn:columnActionsMode is undefined, then it's equivalent to ColumnActionsMode.clickable

ColumnDragEndLocation

Enum to describe where the column has been dropped, after starting the drag

ConstrainMode
ContextualMenuItemType
DateRangeType

The supported date range types

DayOfWeek

The days of the week

DetailsListLayoutMode
DialogType
DocumentCardType
ElementType
ExpandingCardMode
FabricSlots
FirstWeekOfYear

First week of the year settings types

FocusZoneDirection
HoverCardType
IconType
ImageCoverStyle

The cover style to be used on the image

ImageFit

The possible methods that can be used to fit the image.

ImageLoadState
KeyboardSpinDirection
MessageBarType
OpenCardMode
OverflowButtonType
PanelType
PersonaInitialsColor
PersonaPresence
PersonaSize
PivotLinkFormat
PivotLinkSize
RatingSize
ResizeGroupDirection
ResponsiveMode
SelectableOptionMenuItemType
SelectAllVisibility
SemanticColorSlots
Shade

Shades of a given color, from softest to strongest.

ShimmerElementsDefaultHeights

Describes the default heights for shimmer elements when omitted in implementation.

ShimmerElementType

Describes the possible types for shimmer elements used.

SpinnerSize

Possible variations of the spinner circle size.

SpinnerType

Deprecated at v2.0.0, use SpinnerSize instead.

StickyPositionType
SuggestionActionType

Enum to help identify which suggestions action button is selected.

SuggestionItemType
TooltipDelay
TooltipOverflowMode
ValidationState

Validation state of the user's input.

Functions

buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline)
canAnyMenuItemsCheck(items)

Returns true if a list of menu items can contain a checkbox

clamp(value, max, min)

Clamp a value to ensure it falls within a given range.

correctHex(hex)

Corrects a hex color to have length 3 or 6. Defaults to white if too short. Does NOT check anything besides the length (such as valid characters) and does NOT handle hex values starting with # sign.

correctHSV(color)

Corrects an HSV color to fall within the valid range.

correctRGB(color)

Corrects an RGB color to fall within the valid range.

createGenericItem(name, currentValidationState)
createItem(name, isValid)
cssColor(color)

Converts a valid CSS color string to an RGB color. Note that hex colors *must* be prefixed with # to be considered valid. Alpha in returned color defaults to 100. Four and eight digit hex values (with alpha) are supported if the current browser supports them.

getAllSelectedOptions(options, selectedIndices)
getBackgroundShade(color, shade, isInverted)
getColorFromHSV(hsv, a)

Converts an HSV color (and optional alpha value) to a color object. If a is not given, a default of 100 is used. Hex in the returned value will *not* be prefixed with #. If a is unspecified or 100, the result's str property will contain a hex value (*not* prefixed with #)

getColorFromRGBA(rgba)

Converts an RGBA color to a color object (alpha defaults to 100).

getColorFromString(inputColor)

Converts a CSS color string to a color object. Note that hex colors *must* be prefixed with # to be considered valid.

inputColor will be used unmodified as the str property of the returned object. Alpha defaults to 100 if not specified in inputColor. Returns undefined if the color string is invalid/not recognized.

getContrastRatio(color1, color2)
getFullColorString(color)

Converts a color hue to an HTML color string (with # prefix). This implementation ignores all components of color except hue.

getPersonaInitialsColor(props)

Gets the hex color string (prefixed with #) for the given persona props. This is the logic used internally by the Persona control.

getShade(color, shade, isInverted)

Given a color and a shade specification, generates the requested shade of the color. Logic: if white darken via tables defined above if black lighten if light strongen if dark soften else default soften or strongen depending on shade#

getSubmenuItems(item)
hsl2hsv(h, s, l)

Converts HSL components to an HSV color.

hsl2rgb(h, s, l)

Converts HSL components to an RGB color. Does not set the alpha value.

hsv2hex(h, s, v)

Converts HSV components to a hex color string (without # prefix).

hsv2hsl(h, s, v)

Converts HSV components to an HSL color.

hsv2rgb(h, s, v)

Converts HSV components to an RGB color. Does not set the alpha value.

isDark(color)
isRelativeUrl(url)
isValidShade(shade)

Returns true if the argument is a valid Shade value

rgb2hex(r, g, b)

Converts RGB components to a hex color string (without # prefix).

rgb2hsv(r, g, b)

Converts RGB components to an HSV color.

themeRulesStandardCreator()
updateA(color, a)

Gets a color with the given alpha value and the same other components as color. Does not modify the original color.

updateH(color, h)

Gets a color with the same saturation and value as color and the other components updated to match the given hue.

Does not modify the original color and does not supply a default alpha value.

updateRGB(color, component, value)

Gets a color with a single RGBA component updated to a new value. Does not modify the original color. Alpha defaults to 100 if not set.

updateSV(color, s, v)

Gets a color with the same hue as color and other components updated to match the given saturation and value.

Does not modify the original color and does not supply a default alpha value.

Function Details

buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline)

export declare function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean): IColumn[];

Parameters

items
any[]
canResizeColumns
boolean
onColumnClick
(ev: React.MouseEvent<HTMLElement>, column: IColumn) => void
sortedColumnKey
string
isSortedDescending
boolean
groupedColumnKey
string
isMultiline
boolean

Returns

IColumn[]

canAnyMenuItemsCheck(items)

Returns true if a list of menu items can contain a checkbox

export declare function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean;

Parameters

items
IContextualMenuItem[]

Returns

boolean

clamp(value, max, min)

Clamp a value to ensure it falls within a given range.

export declare function clamp(value: number, max: number, min?: number): number;

Parameters

value
number
max
number
min
number

Returns

number

correctHex(hex)

Corrects a hex color to have length 3 or 6. Defaults to white if too short. Does NOT check anything besides the length (such as valid characters) and does NOT handle hex values starting with # sign.

export declare function correctHex(hex: string): string;

Parameters

hex
string

Returns

string

correctHSV(color)

Corrects an HSV color to fall within the valid range.

export declare function correctHSV(color: IHSV): IHSV;

Parameters

color
IHSV

Returns

correctRGB(color)

Corrects an RGB color to fall within the valid range.

export declare function correctRGB(color: IRGB): IRGB;

Parameters

color
IRGB

Returns

createGenericItem(name, currentValidationState)

export declare function createGenericItem(name: string, currentValidationState: ValidationState): IGenericItem & {
    key: React.Key;
};

Parameters

name
string
currentValidationState
ValidationState

Returns

IGenericItem & { key: React.Key; }

createItem(name, isValid)

export declare function createItem(name: string, isValid: boolean): ISuggestionModel<IPersonaProps>;

Parameters

name
string
isValid
boolean

Returns

ISuggestionModel<IPersonaProps>

cssColor(color)

Converts a valid CSS color string to an RGB color. Note that hex colors *must* be prefixed with # to be considered valid. Alpha in returned color defaults to 100. Four and eight digit hex values (with alpha) are supported if the current browser supports them.

export declare function cssColor(color?: string): IRGB | undefined;

Parameters

color
string

Returns

IRGB | undefined

getAllSelectedOptions(options, selectedIndices)

export declare function getAllSelectedOptions(options: ISelectableOption[], selectedIndices: number[]): ISelectableOption[];

Parameters

options
ISelectableOption[]
selectedIndices
number[]

Returns

ISelectableOption[]

getBackgroundShade(color, shade, isInverted)

export declare function getBackgroundShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null;

Parameters

color
IColor
shade
Shade
isInverted
boolean

Returns

IColor | null

getColorFromHSV(hsv, a)

Converts an HSV color (and optional alpha value) to a color object. If a is not given, a default of 100 is used. Hex in the returned value will *not* be prefixed with #. If a is unspecified or 100, the result's str property will contain a hex value (*not* prefixed with #)

export declare function getColorFromHSV(hsv: IHSV, a?: number): IColor;

Parameters

hsv
IHSV
a
number

Returns

getColorFromRGBA(rgba)

Converts an RGBA color to a color object (alpha defaults to 100).

export declare function getColorFromRGBA(rgba: IRGB): IColor;

Parameters

rgba
IRGB

Returns

getColorFromString(inputColor)

Converts a CSS color string to a color object. Note that hex colors *must* be prefixed with # to be considered valid.

inputColor will be used unmodified as the str property of the returned object. Alpha defaults to 100 if not specified in inputColor. Returns undefined if the color string is invalid/not recognized.

export declare function getColorFromString(inputColor: string): IColor | undefined;

Parameters

inputColor
string

Returns

IColor | undefined

getContrastRatio(color1, color2)

export declare function getContrastRatio(color1: IColor, color2: IColor): number;

Parameters

color1
IColor
color2
IColor

Returns

number

getFullColorString(color)

Converts a color hue to an HTML color string (with # prefix). This implementation ignores all components of color except hue.

export declare function getFullColorString(color: IColor): string;

Parameters

color
IColor

Returns

string

getPersonaInitialsColor(props)

Gets the hex color string (prefixed with #) for the given persona props. This is the logic used internally by the Persona control.

export declare function getPersonaInitialsColor(props: Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>): string;

Parameters

props
Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>

Current persona props

Returns

string

Hex color string prefixed with #

getShade(color, shade, isInverted)

Given a color and a shade specification, generates the requested shade of the color. Logic: if white darken via tables defined above if black lighten if light strongen if dark soften else default soften or strongen depending on shade#

export declare function getShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null;

Parameters

color
IColor

The base color whose shade is to be computed

shade
Shade

The shade of the base color to compute

isInverted
boolean

Default false. Whether the given theme is inverted (reverse strongen/soften logic)

Returns

IColor | null

getSubmenuItems(item)

export declare function getSubmenuItems(item: IContextualMenuItem): IContextualMenuItem[] | undefined;

Parameters

Returns

IContextualMenuItem | undefined[]

hsl2hsv(h, s, l)

Converts HSL components to an HSV color.

export declare function hsl2hsv(h: number, s: number, l: number): IHSV;

Parameters

h
number
s
number
l
number

Returns

hsl2rgb(h, s, l)

Converts HSL components to an RGB color. Does not set the alpha value.

export declare function hsl2rgb(h: number, s: number, l: number): IRGB;

Parameters

h
number
s
number
l
number

Returns

hsv2hex(h, s, v)

Converts HSV components to a hex color string (without # prefix).

export declare function hsv2hex(h: number, s: number, v: number): string;

Parameters

h
number
s
number
v
number

Returns

string

hsv2hsl(h, s, v)

Converts HSV components to an HSL color.

export declare function hsv2hsl(h: number, s: number, v: number): IHSL;

Parameters

h
number
s
number
v
number

Returns

hsv2rgb(h, s, v)

Converts HSV components to an RGB color. Does not set the alpha value.

export declare function hsv2rgb(h: number, s: number, v: number): IRGB;

Parameters

h
number
s
number
v
number

Returns

isDark(color)

export declare function isDark(color: IColor): boolean;

Parameters

color
IColor

Returns

boolean

isRelativeUrl(url)

export declare function isRelativeUrl(url: string): boolean;

Parameters

url
string

Returns

boolean

isValidShade(shade)

Returns true if the argument is a valid Shade value

export declare function isValidShade(shade?: Shade): boolean;

Parameters

shade
Shade

The Shade value to validate.

Returns

boolean

rgb2hex(r, g, b)

Converts RGB components to a hex color string (without # prefix).

export declare function rgb2hex(r: number, g: number, b: number): string;

Parameters

r
number
g
number
b
number

Returns

string

rgb2hsv(r, g, b)

Converts RGB components to an HSV color.

export declare function rgb2hsv(r: number, g: number, b: number): IHSV;

Parameters

r
number
g
number
b
number

Returns

themeRulesStandardCreator()

export declare function themeRulesStandardCreator(): IThemeRules;

Returns

updateA(color, a)

Gets a color with the given alpha value and the same other components as color. Does not modify the original color.

export declare function updateA(color: IColor, a: number): IColor;

Parameters

color
IColor
a
number

Returns

updateH(color, h)

Gets a color with the same saturation and value as color and the other components updated to match the given hue.

Does not modify the original color and does not supply a default alpha value.

export declare function updateH(color: IColor, h: number): IColor;

Parameters

color
IColor
h
number

Returns

updateRGB(color, component, value)

Gets a color with a single RGBA component updated to a new value. Does not modify the original color. Alpha defaults to 100 if not set.

export declare function updateRGB(color: IColor, component: keyof IRGB, value: number): IColor;

Parameters

color
IColor
component
keyof IRGB
value
number

Returns

updateSV(color, s, v)

Gets a color with the same hue as color and other components updated to match the given saturation and value.

Does not modify the original color and does not supply a default alpha value.

export declare function updateSV(color: IColor, s: number, v: number): IColor;

Parameters

color
IColor
s
number
v
number

Returns