office-ui-fabric-react
- Version 7.204.0
- Published
- 37.7 MB
- 15 dependencies
- MIT license
Install
npm i office-ui-fabric-react
yarn add office-ui-fabric-react
pnpm add office-ui-fabric-react
Overview
Reusable React components for building experiences for Microsoft 365.
Index
Variables
- Announced
- Breadcrumb
- ButtonGrid
- CalloutContent
- Check
- CheckBase
- Checkbox
- ChoiceGroup
- ChoiceGroupOption
- Coachmark
- COACHMARK_ATTRIBUTE_NAME
- ColorPicker
- ColorPickerGridCell
- CommandBar
- CommandButton
- CompactPeoplePicker
- ContextualMenu
- ContextualMenuItem
- DATAKTP_ARIA_TARGET
- DATAKTP_EXECUTE_TARGET
- DATAKTP_TARGET
- DatePicker
- DEFAULT_CELL_STYLE_PROPS
- DEFAULT_MASK_CHAR
- DEFAULT_ROW_HEIGHTS
- DetailsColumn
- DetailsHeader
- DetailsList
- DetailsRow
- DetailsRowCheck
- DetailsRowFields
- DetailsRowGlobalClassNames
- Dialog
- DialogContent
- DialogFooter
- DirectionalHint
- DocumentCard
- DocumentCardActions
- DocumentCardActivity
- DocumentCardDetails
- DocumentCardImage
- DocumentCardLocation
- DocumentCardLogo
- DocumentCardPreview
- DocumentCardStatus
- DocumentCardTitle
- Dropdown
- ExpandingCard
- Fabric
- Facepile
- FocusTrapCallout
- FontIcon
- Grid
- GridCell
- GroupedList
- GroupedListV2_unstable
- GroupedListV2FC
- GroupFooter
- GroupHeader
- GroupShowAll
- GroupSpacer
- HEX_REGEX
- HoverCard
- Icon
- Image
- ImageIcon
- KeytipData
- KeytipLayer
- KTP_ARIA_SEPARATOR
- KTP_FULL_PREFIX
- KTP_LAYER_ID
- KTP_PREFIX
- KTP_SEPARATOR
- Label
- Layer
- Link
- ListPeoplePicker
- MarqueeSelection
- MAX_COLOR_ALPHA
- MAX_COLOR_HUE
- MAX_COLOR_RGB
- MAX_COLOR_RGBA
- MAX_COLOR_SATURATION
- MAX_COLOR_VALUE
- MAX_HEX_LENGTH
- MAX_RGBA_LENGTH
- MeasuredContext
- MessageBar
- MIN_HEX_LENGTH
- MIN_RGBA_LENGTH
- Modal
- Nav
- NormalPeoplePicker
- ONKEYDOWN_TIMEOUT_DURATION
- OverflowSet
- Overlay
- Panel
- PeoplePickerItem
- PeoplePickerItemSuggestion
- Persona
- PersonaCoin
- Pivot
- PlainCard
- ProgressIndicator
- Rating
- ResizeGroup
- RGBA_REGEX
- ScrollablePane
- ScrollablePaneContext
- ScrollbarVisibility
- ScrollToMode
- SearchBox
- Separator
- SeparatorBase
- Shimmer
- ShimmerCircle
- ShimmerCircleBase
- ShimmeredDetailsList
- ShimmerElementsGroup
- ShimmerElementsGroupBase
- ShimmerGap
- ShimmerGapBase
- ShimmerLine
- ShimmerLineBase
- sizeToPixels
- Slider
- Spinner
- Stack
- StackItem
- SwatchColorPicker
- TagItem
- TagItemSuggestion
- TagPicker
- TeachingBubble
- TeachingBubbleContent
- Text
- TextField
- TextStyles
- TextView
- Toggle
- Tooltip
- TooltipHost
- VerticalDivider
Functions
- buildColumns()
- buildKeytipConfigMap()
- canAnyMenuItemsCheck()
- clamp()
- constructKeytip()
- correctHex()
- correctHSV()
- correctRGB()
- createGenericItem()
- createItem()
- cssColor()
- getActivityItemClassNames()
- getActivityItemStyles()
- getAllSelectedOptions()
- getAriaDescribedBy()
- getBackgroundShade()
- getBasePickerStyles()
- getBoundsFromTargetWindow()
- getColorFromHSV()
- getColorFromRGBA()
- getColorFromString()
- getCommandBarStyles()
- getCommandButtonStyles()
- getContextualMenuItemStyles()
- getContrastRatio()
- getDetailsColumnStyles()
- getDetailsHeaderStyles()
- getDetailsListStyles()
- getDetailsRowCheckStyles()
- getDetailsRowStyles()
- getFontIcon()
- getFullColorString()
- GetGroupCount()
- getIconContent()
- getInitialResponsiveMode()
- getLayerCount()
- getLayerHost()
- getLayerHostSelector()
- getLayerStyles()
- getMaxHeight()
- getMeasurementCache()
- getMenuItemStyles()
- getNextResizeGroupStateProvider()
- getOppositeEdge()
- getPeoplePickerItemStyles()
- getPeoplePickerItemSuggestionStyles()
- getPersonaInitialsColor()
- getResponsiveMode()
- getShade()
- getShimmeredDetailsListStyles()
- getSplitButtonClassNames()
- getSubmenuItems()
- getSuggestionsItemStyles()
- getSuggestionsStyles()
- getTagItemStyles()
- getTagItemSuggestionStyles()
- getTextFieldStyles()
- hsl2hsv()
- hsl2rgb()
- hsv2hex()
- hsv2hsl()
- hsv2rgb()
- initializeResponsiveMode()
- isDark()
- isRelativeUrl()
- isValidShade()
- ktpTargetFromId()
- ktpTargetFromSequences()
- mergeOverflows()
- notifyHostChanged()
- PeoplePickerItemBase()
- PeoplePickerItemSuggestionBase()
- positionCallout()
- positionCard()
- positionElement()
- presenceBoolean()
- registerLayer()
- registerLayerHost()
- rgb2hex()
- rgb2hsv()
- sequencesToID()
- setLayerHostSelector()
- setResponsiveMode()
- sizeBoolean()
- TagItemBase()
- TagItemSuggestionBase()
- themeRulesStandardCreator()
- transitionKeysAreEqual()
- transitionKeysContain()
- unregisterLayer()
- unregisterLayerHost()
- updateA()
- updateH()
- updateRGB()
- updateSV()
- updateT()
- useKeytipRef()
- useResponsiveMode()
- withResponsiveMode()
- withViewport()
Classes
BaseExtendedPicker
- canAddItems()
- clearInput()
- componentDidMount()
- floatingPicker
- floatingPickerProps
- focus()
- highlightedItems
- input
- inputElement
- items
- onBackspace
- onCopy
- onInputChange
- onInputClick
- onInputFocus
- onPaste
- onSelectionChange
- render()
- renderFloatingPicker()
- renderSelectedItemsList()
- root
- selectedItemsList
- selectedItemsListProps
- selection
- UNSAFE_componentWillReceiveProps()
BaseFloatingPicker
- completeSuggestion
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
- currentPromise
- currentSelectedSuggestionIndex
- forceResolveSuggestion()
- hidePicker
- inputText
- isComponentMounted
- isSuggestionsShown
- onChange()
- onKeyDown
- onQueryStringChanged
- onSelectionChange()
- onSuggestionClick
- onSuggestionRemove
- render()
- renderSuggestions()
- root
- selection
- showPicker
- suggestions
- suggestionsControl
- SuggestionsControlOfProperType
- suggestionStore
- UNSAFE_componentWillReceiveProps()
- updateSuggestions()
- updateSuggestionsList()
- updateSuggestionWithZeroState()
- updateValue()
BasePicker
- addItem
- addItemByIndex
- canAddItems()
- completeSelection
- completeSuggestion()
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
- currentPromise
- dismissSuggestions
- focus()
- focusInput()
- focusZone
- getActiveDescendant()
- getDerivedStateFromProps()
- getSuggestionsAlert()
- input
- items
- onBackspace()
- onBlur
- onChange()
- onClick
- onEmptyInputFocus()
- onGetMoreResults
- onInputBlur
- onInputChange
- onInputFocus
- onItemChange
- onKeyDown
- onSelectionChange()
- onSuggestionClick
- onSuggestionRemove
- onSuggestionSelect()
- refocusSuggestions
- removeItem
- removeItems
- render()
- renderItems()
- renderSuggestions()
- resetFocus()
- resolveNewValue()
- root
- selection
- suggestionElement
- SuggestionOfProperType
- suggestionStore
- updateSuggestions()
- updateSuggestionsList()
- updateValue()
BaseSelectedItemsList
- addItems
- componentDidMount()
- copyItems()
- hasSelectedItems()
- highlightedItems()
- items
- onChange()
- onCopy
- onItemChange
- onSelectionChanged
- removeItem
- removeItemAt
- removeItems
- removeSelectedItems()
- render()
- renderItems
- replaceItem
- root
- selection
- UNSAFE_componentWillReceiveProps()
- UNSAFE_componentWillUpdate()
- unselectAll()
- updateItems()
ScrollablePaneBase
- addSticky
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
- contentContainer
- forceLayoutUpdate()
- getScrollPosition
- notifySubscribers
- removeSticky
- render()
- root
- setStickiesDistanceFromTop()
- shouldComponentUpdate()
- sortSticky
- stickyAbove
- stickyBelow
- subscribe
- syncScrollSticky
- unsubscribe
- updateStickyRefHeights
SuggestionsControl
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
- currentSuggestion
- currentSuggestionIndex
- executeSelectedAction()
- handleKeyDown()
- hasSelection()
- hasSuggestionSelected()
- removeSuggestion()
- render()
- renderFooterItems()
- renderHeaderItems()
- resetSelectedItem()
- scrollSelected()
- selectedElement
- selectFirstItem()
- selectLastItem()
- selectNextItem()
- selectPreviousItem()
- UNSAFE_componentWillReceiveProps()
Interfaces
IBaseExtendedPickerProps
- className
- componentRef
- currentRenderedQueryString
- defaultSelectedItems
- disabled
- floatingPickerProps
- focusZoneProps
- headerComponent
- inputProps
- itemLimit
- onBlur
- onChange
- onFocus
- onItemAdded
- onItemSelected
- onItemsRemoved
- onPaste
- onRenderFloatingPicker
- onRenderSelectedItems
- selectedItems
- selectedItemsListProps
- suggestionItems
IBaseFloatingPickerProps
- calloutWidth
- className
- componentRef
- createGenericItem
- getTextFromItem
- inputElement
- onChange
- onInputChanged
- onRemoveSuggestion
- onRenderSuggestionsItem
- onResolveSuggestions
- onSuggestionsHidden
- onSuggestionsShown
- onValidateInput
- onZeroQuerySuggestion
- pickerCalloutProps
- pickerSuggestionsProps
- resolveDelay
- searchingText
- selectedItems
- showForceResolve
- suggestionItems
- suggestionsStore
IBasePickerProps
- ['aria-label']
- className
- componentRef
- createGenericItem
- defaultSelectedItems
- disabled
- enableSelectedSuggestionAlert
- getTextFromItem
- inputProps
- itemLimit
- onBlur
- onChange
- onDismiss
- onEmptyInputFocus
- onEmptyResolveSuggestions
- onFocus
- onGetMoreResults
- onInputChange
- onItemSelected
- onRemoveSuggestion
- onRenderItem
- onRenderSuggestionsItem
- onResolveSuggestions
- onValidateInput
- pickerCalloutProps
- pickerSuggestionsProps
- removeButtonAriaLabel
- resolveDelay
- searchingText
- selectedItems
- styles
- theme
IButtonProps
- allowDisabledFocus
- ariaDescription
- ariaHidden
- ariaLabel
- buttonType
- checked
- className
- componentRef
- data
- defaultRender
- description
- disabled
- elementRef
- getClassNames
- getSplitButtonClassNames
- href
- iconProps
- keytipProps
- menuAs
- menuIconProps
- menuProps
- menuTriggerKeyCode
- onAfterMenuDismiss
- onMenuClick
- onRenderAriaDescription
- onRenderChildren
- onRenderDescription
- onRenderIcon
- onRenderMenu
- onRenderMenuIcon
- onRenderText
- persistMenu
- primary
- primaryActionButtonProps
- primaryDisabled
- renderPersistedMenuHiddenOnMount
- rootProps
- secondaryText
- split
- splitButtonAriaLabel
- splitButtonMenuProps
- styles
- text
- theme
- toggle
- toggled
- uniqueId
IButtonStyles
- description
- descriptionChecked
- descriptionDisabled
- descriptionHovered
- descriptionPressed
- flexContainer
- icon
- iconChecked
- iconDisabled
- iconExpanded
- iconExpandedHovered
- iconHovered
- iconPressed
- label
- labelChecked
- labelDisabled
- labelHovered
- menuIcon
- menuIconChecked
- menuIconDisabled
- menuIconExpanded
- menuIconExpandedHovered
- menuIconHovered
- menuIconPressed
- root
- rootChecked
- rootCheckedDisabled
- rootCheckedHovered
- rootCheckedPressed
- rootDisabled
- rootExpanded
- rootExpandedHovered
- rootFocused
- rootHasMenu
- rootHovered
- rootPressed
- screenReaderText
- secondaryText
- splitButtonContainer
- splitButtonContainerChecked
- splitButtonContainerCheckedHovered
- splitButtonContainerDisabled
- splitButtonContainerFocused
- splitButtonContainerHovered
- splitButtonDivider
- splitButtonDividerDisabled
- splitButtonFlexContainer
- splitButtonMenuButton
- splitButtonMenuButtonChecked
- splitButtonMenuButtonDisabled
- splitButtonMenuButtonExpanded
- splitButtonMenuFocused
- splitButtonMenuIcon
- splitButtonMenuIconDisabled
- textContainer
ICalendarProps
- allFocusable
- autoNavigateOnSelection
- className
- componentRef
- dateRangeType
- dateTimeFormatter
- firstDayOfWeek
- firstWeekOfYear
- highlightCurrentMonth
- highlightSelectedMonth
- isDayPickerVisible
- isMonthPickerVisible
- maxDate
- minDate
- navigationIcons
- onDismiss
- onSelectDate
- restrictedDates
- selectDateOnClick
- shouldFocusOnMount
- showCloseButton
- showGoToToday
- showMonthPickerAsOverlay
- showSixWeeksByDefault
- showWeekNumbers
- strings
- today
- value
- workWeekDays
- yearPickerHidden
ICalloutProps
- alignTargetEdge
- ariaDescribedBy
- ariaLabel
- ariaLabelledBy
- backgroundColor
- beakWidth
- bounds
- calloutMaxHeight
- calloutMaxWidth
- calloutMinWidth
- calloutWidth
- className
- coverTarget
- directionalHint
- directionalHintFixed
- directionalHintForRTL
- dismissOnTargetClick
- doNotLayer
- finalHeight
- gapSpace
- hidden
- hideOverflow
- isBeakVisible
- layerProps
- minPagePadding
- onDismiss
- onLayerMounted
- onPositioned
- onRestoreFocus
- onScroll
- popupProps
- preventDismissOnEvent
- preventDismissOnLostFocus
- preventDismissOnResize
- preventDismissOnScroll
- role
- setInitialFocus
- shouldDismissOnWindowFocus
- shouldRestoreFocus
- shouldUpdateWhenHidden
- style
- styles
- target
- theme
ICoachmarkProps
- ariaAlertText
- ariaDescribedBy
- ariaDescribedByText
- ariaLabelledBy
- ariaLabelledByText
- beaconColorOne
- beaconColorTwo
- beakHeight
- beakWidth
- className
- collapsed
- color
- componentRef
- delayBeforeCoachmarkAnimation
- delayBeforeMouseOpen
- height
- isCollapsed
- isPositionForced
- mouseProximityOffset
- onAnimationOpenEnd
- onAnimationOpenStart
- onDismiss
- onMouseMove
- persistentBeak
- positioningContainerProps
- preventDismissOnLostFocus
- preventFocusOnMount
- styles
- target
- teachingBubbleRef
- theme
- width
IColumn
- ariaLabel
- calculatedWidth
- className
- columnActionsMode
- currentWidth
- data
- fieldName
- filterAriaLabel
- flexGrow
- getValueKey
- groupAriaLabel
- headerClassName
- iconClassName
- iconName
- isCollapsable
- isCollapsible
- isFiltered
- isGrouped
- isIconOnly
- isMenuOpen
- isMultiline
- isPadded
- isResizable
- isRowHeader
- isSorted
- isSortedDescending
- key
- maxWidth
- minWidth
- name
- onColumnClick
- onColumnContextMenu
- onColumnResize
- onRender
- onRenderDivider
- onRenderFilterIcon
- onRenderHeader
- sortAscendingAriaLabel
- sortDescendingAriaLabel
- styles
- targetWidthProportion
IComboBoxProps
- allowFreeform
- ariaDescribedBy
- autoComplete
- autofill
- buttonIconProps
- caretDownButtonStyles
- comboBoxOptionStyles
- componentRef
- dropdownMaxWidth
- dropdownWidth
- getClassNames
- iconButtonProps
- isButtonAriaHidden
- keytipProps
- multiSelectDelimiter
- onChange
- onInputValueChange
- onItemClick
- onMenuDismiss
- onMenuDismissed
- onMenuOpen
- onPendingValueChanged
- onRenderLabel
- onRenderLowerContent
- onRenderUpperContent
- onResolveOptions
- onScrollToItem
- options
- persistMenu
- scrollSelectedToTop
- shouldRestoreFocus
- styles
- text
- theme
- useComboBoxAsMenuWidth
IContextualMenuItem
- ariaDescription
- ariaLabel
- canCheck
- checked
- className
- componentRef
- customOnRenderListLength
- data
- disabled
- getItemClassNames
- getSplitButtonVerticalDividerClassNames
- href
- iconProps
- inactive
- itemProps
- items
- itemType
- key
- keytipProps
- name
- onClick
- onMouseDown
- onRender
- onRenderContent
- onRenderIcon
- preferMenuTargetAsEventTarget
- primaryDisabled
- rel
- role
- secondaryText
- sectionProps
- shortCut
- split
- style
- submenuIconProps
- subMenuProps
- target
- text
- title
IContextualMenuProps
- alignTargetEdge
- ariaLabel
- beakWidth
- bounds
- calloutProps
- className
- componentRef
- contextualMenuItemAs
- coverTarget
- delayUpdateFocusOnHover
- directionalHint
- directionalHintFixed
- directionalHintForRTL
- doNotLayer
- focusZoneProps
- gapSpace
- getMenuClassNames
- hidden
- id
- isBeakVisible
- isSubMenu
- items
- labelElementId
- onDismiss
- onItemClick
- onMenuDismissed
- onMenuOpened
- onRenderMenuList
- onRenderSubMenu
- onRestoreFocus
- shouldFocusOnContainer
- shouldFocusOnMount
- shouldUpdateWhenHidden
- styles
- subMenuHoverDelay
- target
- theme
- title
- useTargetAsMinWidth
- useTargetWidth
IDatePickerProps
- allFocusable
- allowTextInput
- ariaLabel
- borderless
- calendarAs
- calendarProps
- calloutProps
- className
- componentRef
- dateTimeFormatter
- disableAutoFocus
- disabled
- firstDayOfWeek
- firstWeekOfYear
- formatDate
- highlightCurrentMonth
- highlightSelectedMonth
- initialPickerDate
- isMonthPickerVisible
- isRequired
- label
- maxDate
- minDate
- onAfterMenuDismiss
- onSelectDate
- parseDateFromString
- pickerAriaLabel
- placeholder
- showCloseButton
- showGoToToday
- showMonthPickerAsOverlay
- showWeekNumbers
- strings
- styles
- tabIndex
- textField
- theme
- today
- underlined
- value
IDetailsHeaderBaseProps
- ariaLabel
- ariaLabelForSelectAllCheckbox
- ariaLabelForSelectionColumn
- ariaLabelForToggleAllGroupsButton
- className
- collapseAllVisibility
- columnReorderOptions
- columnReorderProps
- componentRef
- isAllCollapsed
- layoutMode
- minimumPixelsForDrag
- onColumnAutoResized
- onColumnClick
- onColumnContextMenu
- onColumnIsSizingChanged
- onColumnResized
- onRenderColumnHeaderTooltip
- onRenderDetailsCheckbox
- onToggleCollapseAll
- selectAllVisibility
- styles
- theme
- useFastIcons
IDetailsListProps
- ariaLabel
- ariaLabelForGrid
- ariaLabelForListHeader
- ariaLabelForSelectAllCheckbox
- ariaLabelForSelectionColumn
- cellStyleProps
- checkboxCellClassName
- checkboxVisibility
- checkButtonAriaLabel
- checkButtonGroupAriaLabel
- className
- columnReorderOptions
- columns
- compact
- componentRef
- constrainMode
- disableSelectionZone
- dragDropEvents
- enableUpdateAnimations
- enterModalSelectionOnTouch
- flexMargin
- getCellValueKey
- getGroupHeight
- getKey
- getRowAriaDescribedBy
- getRowAriaLabel
- groupProps
- groups
- indentWidth
- initialFocusedIndex
- isHeaderVisible
- isPlaceholderData
- isSelectedOnFocus
- items
- layoutMode
- listProps
- minimumPixelsForDrag
- onActiveItemChanged
- onColumnHeaderClick
- onColumnHeaderContextMenu
- onColumnResize
- onDidUpdate
- onItemContextMenu
- onItemInvoked
- onRenderCheckbox
- onRenderDetailsFooter
- onRenderDetailsHeader
- onRenderItemColumn
- onRenderMissingItem
- onRenderRow
- onRowDidMount
- onRowWillUnmount
- onShouldVirtualize
- role
- rowElementEventMap
- selection
- selectionMode
- selectionPreservedOnEmptyClick
- selectionZoneProps
- setKey
- shouldApplyApplicationRole
- styles
- theme
- useFastIcons
- usePageCache
- useReducedRowRenderer
- viewport
IDetailsRowBaseProps
- cellsByColumn
- checkboxCellClassName
- checkButtonAriaLabel
- className
- collapseAllVisibility
- compact
- componentRef
- disabled
- dragDropEvents
- dragDropHelper
- enableUpdateAnimations
- eventsToRegister
- flatIndexOffset
- getRowAriaDescribedBy
- getRowAriaDescription
- getRowAriaLabel
- group
- id
- item
- itemIndex
- onDidMount
- onRenderCheck
- onRenderDetailsCheckbox
- onWillUnmount
- role
- rowFieldsAs
- styles
- theme
- useFastIcons
- useReducedRowRenderer
IGroupDividerProps
- ariaColSpan
- ariaPosInSet
- ariaRowCount
- ariaRowIndex
- ariaSetSize
- className
- compact
- componentRef
- expandButtonProps
- footerText
- group
- groupIndex
- groupLevel
- groups
- indentWidth
- isCollapsedGroupSelectVisible
- isGroupLoading
- isSelected
- loadingText
- onGroupHeaderClick
- onGroupHeaderKeyUp
- onRenderName
- onRenderTitle
- onToggleCollapse
- onToggleSelectGroup
- onToggleSummarize
- selected
- selectionMode
- showAllLinkText
- theme
- viewport
IGroupedListSectionProps
- compact
- componentRef
- dragDropEvents
- dragDropHelper
- eventsToRegister
- footerProps
- getGroupItemLimit
- group
- groupedListClassNames
- groupIndex
- groupNestingDepth
- groupProps
- groups
- headerProps
- items
- listProps
- onRenderCell
- onRenderGroupFooter
- onRenderGroupHeader
- onRenderGroupShowAll
- onShouldVirtualize
- selection
- selectionMode
- showAllProps
- viewport
IListProps
- className
- componentRef
- getItemCountForPage
- getKey
- getPageHeight
- getPageSpecification
- getPageStyle
- ignoreScrollingState
- items
- onPageAdded
- onPageRemoved
- onPagesUpdated
- onRenderCell
- onRenderCellConditional
- onRenderPage
- onRenderRoot
- onRenderSurface
- onShouldVirtualize
- renderCount
- renderedWindowsAhead
- renderedWindowsBehind
- role
- startIndex
- usePageCache
- version
IPanelProps
- allowTouchBodyScroll
- className
- closeButtonAriaLabel
- componentId
- componentRef
- customWidth
- elementToFocusOnDismiss
- firstFocusableSelector
- focusTrapZoneProps
- forceFocusInsideTrap
- hasCloseButton
- headerClassName
- headerText
- headerTextProps
- ignoreExternalFocusing
- isBlocking
- isFooterAtBottom
- isHiddenOnDismiss
- isLightDismiss
- isOpen
- layerProps
- onDismiss
- onDismissed
- onLightDismissClick
- onOpen
- onOpened
- onOuterClick
- onRenderBody
- onRenderFooter
- onRenderFooterContent
- onRenderHeader
- onRenderNavigation
- onRenderNavigationContent
- overlayProps
- popupProps
- styles
- theme
- type
IPersonaSharedProps
- allowPhoneInitials
- coinProps
- coinSize
- hidePersonaDetails
- imageAlt
- imageInitials
- imageShouldFadeIn
- imageShouldStartVisible
- imageUrl
- initialsColor
- initialsTextColor
- isOutOfOffice
- onPhotoLoadingStateChange
- onRenderCoin
- onRenderInitials
- onRenderPersonaCoin
- optionalText
- presence
- presenceColors
- presenceTitle
- primaryText
- secondaryText
- showInitialsUntilImageLoads
- showOverflowTooltip
- showSecondaryText
- showUnknownPersonaCoin
- size
- tertiaryText
- text
- theme
IPositioningContainerProps
- ariaDescribedBy
- ariaLabel
- ariaLabelledBy
- backgroundColor
- bounds
- className
- componentRef
- coverTarget
- directionalHint
- directionalHintFixed
- directionalHintForRTL
- doNotLayer
- finalHeight
- minPagePadding
- offsetFromTarget
- onDismiss
- onLayerMounted
- onPositioned
- positioningContainerMaxHeight
- positioningContainerWidth
- preventDismissOnScroll
- role
- setInitialFocus
- target
- targetPoint
- useTargetPoint
ISpinButtonProps
- ariaDescribedBy
- ariaLabel
- ariaPositionInSet
- ariaSetSize
- ariaValueNow
- ariaValueText
- className
- componentRef
- decrementButtonAriaLabel
- decrementButtonIcon
- defaultValue
- disabled
- downArrowButtonStyles
- getClassNames
- iconButtonProps
- iconProps
- incrementButtonAriaLabel
- incrementButtonIcon
- inputProps
- keytipProps
- label
- labelPosition
- max
- min
- onBlur
- onDecrement
- onFocus
- onIncrement
- onValidate
- precision
- step
- styles
- theme
- title
- upArrowButtonStyles
- value
ISpinButtonStyles
- arrowButtonsContainer
- arrowButtonsContainerDisabled
- icon
- iconDisabled
- input
- inputDisabled
- inputTextSelected
- label
- labelDisabled
- labelWrapper
- labelWrapperBottom
- labelWrapperEnd
- labelWrapperStart
- labelWrapperTop
- root
- spinButtonWrapper
- spinButtonWrapperDisabled
- spinButtonWrapperFocused
- spinButtonWrapperHovered
- spinButtonWrapperTopBottom
ISuggestionsProps
- className
- componentRef
- createGenericItem
- forceResolveText
- isLoading
- isMostRecentlyUsedVisible
- isResultsFooterVisible
- isSearching
- loadingText
- moreSuggestionsAvailable
- mostRecentlyUsedHeaderText
- noResultsFoundText
- onGetMoreResults
- onRenderNoResultFound
- onRenderSuggestion
- onSuggestionClick
- onSuggestionRemove
- refocusSuggestions
- removeSuggestionAriaLabel
- resultsFooter
- resultsFooterFull
- resultsMaximumNumber
- searchErrorText
- searchForMoreIcon
- searchForMoreText
- searchingText
- showForceResolve
- showRemoveButtons
- styles
- suggestions
- suggestionsAvailableAlertText
- suggestionsClassName
- suggestionsContainerAriaLabel
- suggestionsHeaderText
- suggestionsItemClassName
- suggestionsListId
- theme
ISwatchColorPickerProps
- ariaPosInSet
- ariaSetSize
- cellBorderWidth
- cellHeight
- cellMargin
- cellShape
- cellWidth
- className
- colorCells
- columnCount
- disabled
- doNotContainWithinFocusZone
- focusOnHover
- getColorGridCellStyles
- id
- isControlled
- mouseLeaveParentSelector
- onCellFocused
- onCellHovered
- onColorChanged
- onRenderColorCell
- positionInSet
- selectedId
- setSize
- shouldFocusCircularNavigate
- styles
- theme
ITextFieldProps
- ariaLabel
- autoAdjustHeight
- autoComplete
- borderless
- canRevealPassword
- className
- componentRef
- defaultValue
- deferredValidationTime
- description
- disabled
- errorMessage
- iconProps
- inputClassName
- label
- mask
- maskChar
- maskFormat
- multiline
- onChange
- onGetErrorMessage
- onNotifyValidationResult
- onRenderDescription
- onRenderInput
- onRenderLabel
- onRenderPrefix
- onRenderSuffix
- prefix
- readOnly
- resizable
- styles
- suffix
- theme
- underlined
- validateOnFocusIn
- validateOnFocusOut
- validateOnLoad
- value
Enums
Type Aliases
- Alignment
- DefaultProps
- DirectionalHint
- IAnnouncedStyleProps
- IBaseFloatingPickerSuggestionProps
- IBasePickerStyleProps
- IBreadCrumbData
- ICheckStyleProps
- ICoachmarkTypes
- IColorPickerStyleProps
- IColorSliderStyleProps
- IDetailsColumnStyleProps
- IDetailsHeaderStyleProps
- IDetailsListStyleProps
- IDetailsRowCheckStyleProps
- IDetailsRowStyleProps
- IDropdownStyleProps
- IGroupedListStyleProps
- IGroupFooterStyleProps
- IGroupHeaderStyleProps
- IGroupShowAllStyleProps
- IGroupSpacerStyleProps
- ILayerBaseState
- IModalStyleProps
- IOverflowSetStyleProps
- IOverrideColumnRenderProps
- IPeoplePickerItemSelectedStyleProps
- IPeoplePickerItemSuggestionStyleProps
- IPersonaPresenceStyleProps
- IPickerAriaIds
- IPivotStyleProps
- IPositioningContainerTypes
- ISeparatorStyleProps
- IShimmerCircleStyleProps
- IShimmeredDetailsListStyleProps
- IShimmerGapStyleProps
- IShimmerLineStyleProps
- ISliderStyleProps
- IStackComponent
- IStackItemComponent
- IStackItemSlot
- IStackItemStyles
- IStackItemStylesReturnType
- IStackItemTokenReturnType
- IStackSlot
- IStackStyles
- IStackStylesReturnType
- IStackTokenReturnType
- ISuggestionsItemStyleProps
- ISuggestionsStyleProps
- ITagItemStyleProps
- ITagItemSuggestionStyleProps
- ITeachingBubbleStyleProps
- ITextComponent
- ITextFieldStyleProps
- ITextSlot
- ITextStyles
- ITextStylesReturnType
- ITextTokenReturnType
- IVerticalDividerPropsStyles
- KeytipDataOptions
- KeytipTransitionModifier
- OnChangeCallback
- OnFocusCallback
- PivotLinkFormatType
- PivotLinkSizeType
- ScrollbarVisibility
- ScrollToMode
- SpinnerLabelPosition
- SuggestionsStoreOptions
Namespaces
Variables
variable Announced
const Announced: React.FunctionComponent<IAnnouncedProps>;
variable Breadcrumb
const Breadcrumb: React.FunctionComponent<IBreadcrumbProps>;
variable ButtonGrid
const ButtonGrid: React.FunctionComponent<IButtonGridProps>;
variable CalloutContent
const CalloutContent: React.FunctionComponent<ICalloutProps>;
variable Check
const Check: React.FunctionComponent<ICheckProps>;
variable CheckBase
const CheckBase: React.FunctionComponent<ICheckProps>;
variable Checkbox
const Checkbox: React.FunctionComponent<ICheckboxProps>;
variable ChoiceGroup
const ChoiceGroup: React.FunctionComponent<IChoiceGroupProps>;
variable ChoiceGroupOption
const ChoiceGroupOption: React.FunctionComponent<IChoiceGroupOptionProps>;
variable Coachmark
const Coachmark: React.FunctionComponent<ICoachmarkProps>;
variable COACHMARK_ATTRIBUTE_NAME
const COACHMARK_ATTRIBUTE_NAME: string;
variable ColorPicker
const ColorPicker: React.FunctionComponent<IColorPickerProps>;
variable ColorPickerGridCell
const ColorPickerGridCell: React.FunctionComponent<IColorPickerGridCellProps>;
variable CommandBar
const CommandBar: React.FunctionComponent<ICommandBarProps>;
variable CommandButton
const CommandButton: typeof ActionButton;
variable CompactPeoplePicker
const CompactPeoplePicker: React.FunctionComponent<IPeoplePickerProps>;
variable ContextualMenu
const ContextualMenu: React.FunctionComponent<IContextualMenuProps>;
ContextualMenu description
variable ContextualMenuItem
const ContextualMenuItem: React.FunctionComponent<IContextualMenuItemProps>;
ContextualMenuItem description
variable DATAKTP_ARIA_TARGET
const DATAKTP_ARIA_TARGET: string;
variable DATAKTP_EXECUTE_TARGET
const DATAKTP_EXECUTE_TARGET: string;
variable DATAKTP_TARGET
const DATAKTP_TARGET: string;
variable DatePicker
const DatePicker: React.FunctionComponent<IDatePickerProps>;
DatePicker description
variable DEFAULT_CELL_STYLE_PROPS
const DEFAULT_CELL_STYLE_PROPS: ICellStyleProps;
variable DEFAULT_MASK_CHAR
const DEFAULT_MASK_CHAR: string;
variable DEFAULT_ROW_HEIGHTS
const DEFAULT_ROW_HEIGHTS: { rowHeight: number; compactRowHeight: number };
variable DetailsColumn
const DetailsColumn: React.FunctionComponent<IDetailsColumnProps>;
variable DetailsHeader
const DetailsHeader: React.FunctionComponent<IDetailsHeaderBaseProps>;
variable DetailsList
const DetailsList: React.FunctionComponent<IDetailsListProps>;
variable DetailsRow
const DetailsRow: React.FunctionComponent<IDetailsRowBaseProps>;
variable DetailsRowCheck
const DetailsRowCheck: React.FunctionComponent<IDetailsRowCheckProps>;
variable DetailsRowFields
const DetailsRowFields: React.FunctionComponent<IDetailsRowFieldsProps>;
Component for rendering a row's cells in a
DetailsList
.
variable DetailsRowGlobalClassNames
const DetailsRowGlobalClassNames: { root: string; compact: string; cell: string; cellAnimation: string; cellCheck: string; check: string; cellMeasurer: string; listCellFirstChild: string; isContentUnselectable: string; isSelected: string; isCheckVisible: string; isRowHeader: string; fields: string;};
variable Dialog
const Dialog: React.FunctionComponent<IDialogProps>;
variable DialogContent
const DialogContent: React.FunctionComponent<IDialogContentProps>;
variable DialogFooter
const DialogFooter: React.FunctionComponent<IDialogFooterProps>;
variable DirectionalHint
const DirectionalHint: { topLeftEdge: 0; topCenter: 1; topRightEdge: 2; topAutoEdge: 3; bottomLeftEdge: 4; bottomCenter: 5; bottomRightEdge: 6; bottomAutoEdge: 7; leftTopEdge: 8; leftCenter: 9; leftBottomEdge: 10; rightTopEdge: 11; rightCenter: 12; rightBottomEdge: 13;};
variable DocumentCard
const DocumentCard: React.FunctionComponent<IDocumentCardProps>;
variable DocumentCardActions
const DocumentCardActions: React.FunctionComponent<IDocumentCardActionsProps>;
variable DocumentCardActivity
const DocumentCardActivity: React.FunctionComponent<IDocumentCardActivityProps>;
variable DocumentCardDetails
const DocumentCardDetails: React.FunctionComponent<IDocumentCardDetailsProps>;
variable DocumentCardImage
const DocumentCardImage: React.FunctionComponent<IDocumentCardImageProps>;
variable DocumentCardLocation
const DocumentCardLocation: React.FunctionComponent<IDocumentCardLocationProps>;
variable DocumentCardLogo
const DocumentCardLogo: React.FunctionComponent<IDocumentCardLogoProps>;
variable DocumentCardPreview
const DocumentCardPreview: React.FunctionComponent<IDocumentCardPreviewProps>;
variable DocumentCardStatus
const DocumentCardStatus: React.FunctionComponent<IDocumentCardStatusProps>;
variable DocumentCardTitle
const DocumentCardTitle: React.FunctionComponent<IDocumentCardTitleProps>;
variable Dropdown
const Dropdown: React.FunctionComponent<IDropdownProps>;
variable ExpandingCard
const ExpandingCard: React.FunctionComponent<IExpandingCardProps>;
variable Fabric
const Fabric: any;
variable Facepile
const Facepile: React.FunctionComponent<IFacepileProps>;
The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.
variable FocusTrapCallout
const FocusTrapCallout: React.FunctionComponent<IFocusTrapCalloutProps>;
A special Callout that uses FocusTrapZone to trap focus
Parameter props
Props for the component
variable FontIcon
const FontIcon: React.FunctionComponent<IFontIconProps>;
Fast icon component which only supports font glyphs (not images) and can't be targeted by customizations. To style the icon, use
className
or referencems-Icon
in CSS.
variable Grid
const Grid: React.FunctionComponent<IButtonGridProps>;
Deprecated
- use ButtonGrid instead
variable GridCell
const GridCell: typeof ButtonGridCell;
Deprecated
- use ButtonGridCell instead
variable GroupedList
const GroupedList: React.FunctionComponent<IGroupedListProps>;
variable GroupedListV2_unstable
const GroupedListV2_unstable: React.FunctionComponent<IGroupedListV2Props>;
NOTE: GroupedListV2 is "unstable" and meant for preview use. It passes the same test suite as GroupedList but it is an entirely new implementation so it may have bugs and implementation details may change without notice.
GroupedListV2 is an API-compatible replacement for GroupedList with a new implementation that addresses issues GroupedList has with virtualizing nested lists under certain conditions.
variable GroupedListV2FC
const GroupedListV2FC: React.FC<IGroupedListV2Props>;
variable GroupFooter
const GroupFooter: React.FunctionComponent<IGroupFooterProps>;
variable GroupHeader
const GroupHeader: React.FunctionComponent<IGroupHeaderProps>;
variable GroupShowAll
const GroupShowAll: React.FunctionComponent<IGroupShowAllProps>;
variable GroupSpacer
const GroupSpacer: React.FunctionComponent<IGroupSpacerProps>;
variable HEX_REGEX
const HEX_REGEX: RegExp;
Regular expression matching only valid hexadecimal chars
variable HoverCard
const HoverCard: React.FunctionComponent<IHoverCardProps>;
variable Icon
const Icon: React.FunctionComponent<IIconProps>;
Legacy Icon component which can be targeted by customization. It's recommended to use
FontIcon
orImageIcon
instead, especially in scenarios where rendering performance is important.
variable Image
const Image: React.FunctionComponent<IImageProps>;
variable ImageIcon
const ImageIcon: React.FunctionComponent<IImageIconProps>;
Fast icon component which only supports images (not font glyphs) and can't be targeted by customizations. To style the icon, use
className
or referencems-Icon
in CSS.
variable KeytipData
const KeytipData: React.FunctionComponent<any>;
A small element to help the target component correctly read out its aria-describedby for its Keytip
variable KeytipLayer
const KeytipLayer: React.FunctionComponent<IKeytipLayerProps>;
variable KTP_ARIA_SEPARATOR
const KTP_ARIA_SEPARATOR: string;
variable KTP_FULL_PREFIX
const KTP_FULL_PREFIX: string;
variable KTP_LAYER_ID
const KTP_LAYER_ID: string;
variable KTP_PREFIX
const KTP_PREFIX: string;
variable KTP_SEPARATOR
const KTP_SEPARATOR: string;
variable Label
const Label: React.FunctionComponent<ILabelProps>;
variable Layer
const Layer: React.FunctionComponent<ILayerProps>;
variable Link
const Link: React.FunctionComponent<ILinkProps>;
variable ListPeoplePicker
const ListPeoplePicker: React.FunctionComponent<IPeoplePickerProps>;
variable MarqueeSelection
const MarqueeSelection: React.FunctionComponent<IMarqueeSelectionProps>;
variable MAX_COLOR_ALPHA
const MAX_COLOR_ALPHA: number;
variable MAX_COLOR_HUE
const MAX_COLOR_HUE: number;
variable MAX_COLOR_RGB
const MAX_COLOR_RGB: number;
variable MAX_COLOR_RGBA
const MAX_COLOR_RGBA: number;
Deprecated
Use MAX_COLOR_RGB (255) or MAX_COLOR_ALPHA (100)
variable MAX_COLOR_SATURATION
const MAX_COLOR_SATURATION: number;
variable MAX_COLOR_VALUE
const MAX_COLOR_VALUE: number;
variable MAX_HEX_LENGTH
const MAX_HEX_LENGTH: number;
Maximum length for a hexadecimal color string (not including the #)
variable MAX_RGBA_LENGTH
const MAX_RGBA_LENGTH: number;
Maximum length for a string of an RGBA color component
variable MeasuredContext
const MeasuredContext: React.Context<{ isMeasured: boolean }>;
variable MessageBar
const MessageBar: React.FunctionComponent<IMessageBarProps>;
variable MIN_HEX_LENGTH
const MIN_HEX_LENGTH: number;
Minimum length for a hexadecimal color string (not including the #)
variable MIN_RGBA_LENGTH
const MIN_RGBA_LENGTH: number;
Minimum length for a string of an RGBA color component
variable Modal
const Modal: React.FunctionComponent<IModalProps>;
variable Nav
const Nav: React.FunctionComponent<INavProps>;
variable NormalPeoplePicker
const NormalPeoplePicker: React.FunctionComponent<IPeoplePickerProps>;
variable ONKEYDOWN_TIMEOUT_DURATION
const ONKEYDOWN_TIMEOUT_DURATION: number;
variable OverflowSet
const OverflowSet: React.FunctionComponent<IOverflowSetProps>;
variable Overlay
const Overlay: React.FunctionComponent<IOverlayProps>;
variable Panel
const Panel: React.FunctionComponent<IPanelProps>;
Panel description
variable PeoplePickerItem
const PeoplePickerItem: React.FunctionComponent<IPeoplePickerItemSelectedProps>;
variable PeoplePickerItemSuggestion
const PeoplePickerItemSuggestion: React.FunctionComponent<IPeoplePickerItemSuggestionProps>;
variable Persona
const Persona: React.FunctionComponent<IPersonaProps>;
Personas are used for rendering an individual's avatar, presence and details. They are used within the PeoplePicker components.
variable PersonaCoin
const PersonaCoin: React.FunctionComponent<IPersonaCoinProps>;
PersonaCoin is used to render an individual's avatar and presence.
variable Pivot
const Pivot: React.FunctionComponent<IPivotProps>;
The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.
variable PlainCard
const PlainCard: React.FunctionComponent<IPlainCardProps>;
variable ProgressIndicator
const ProgressIndicator: React.FunctionComponent<IProgressIndicatorProps>;
ProgressIndicator description
variable Rating
const Rating: React.FunctionComponent<IRatingProps>;
variable ResizeGroup
const ResizeGroup: typeof ResizeGroupBase;
variable RGBA_REGEX
const RGBA_REGEX: RegExp;
Regular expression matching only numbers
variable ScrollablePane
const ScrollablePane: React.FunctionComponent<IScrollablePaneProps>;
variable ScrollablePaneContext
const ScrollablePaneContext: React.Context<IScrollablePaneContext>;
variable ScrollbarVisibility
const ScrollbarVisibility: { auto: 'auto'; always: 'always' };
variable ScrollToMode
const ScrollToMode: { auto: 0; top: 1; bottom: 2; center: 3 };
variable SearchBox
const SearchBox: React.FunctionComponent<ISearchBoxProps>;
variable Separator
const Separator: React.FunctionComponent<ISeparatorProps>;
variable SeparatorBase
const SeparatorBase: React.FunctionComponent<ISeparatorProps>;
variable Shimmer
const Shimmer: React.FunctionComponent<IShimmerProps>;
variable ShimmerCircle
const ShimmerCircle: React.FunctionComponent<IShimmerCircleProps>;
variable ShimmerCircleBase
const ShimmerCircleBase: React.FunctionComponent<IShimmerCircleProps>;
variable ShimmeredDetailsList
const ShimmeredDetailsList: React.FunctionComponent<IShimmeredDetailsListProps>;
variable ShimmerElementsGroup
const ShimmerElementsGroup: React.FunctionComponent<IShimmerElementsGroupProps>;
variable ShimmerElementsGroupBase
const ShimmerElementsGroupBase: React.FunctionComponent<IShimmerElementsGroupProps>;
variable ShimmerGap
const ShimmerGap: React.FunctionComponent<IShimmerGapProps>;
variable ShimmerGapBase
const ShimmerGapBase: React.FunctionComponent<IShimmerGapProps>;
variable ShimmerLine
const ShimmerLine: React.FunctionComponent<IShimmerLineProps>;
variable ShimmerLineBase
const ShimmerLineBase: React.FunctionComponent<IShimmerLineProps>;
variable sizeToPixels
const sizeToPixels: { [key: number]: number };
variable Slider
const Slider: React.FunctionComponent<ISliderProps>;
variable Spinner
const Spinner: React.FunctionComponent<ISpinnerProps>;
variable Stack
const Stack: any;
variable StackItem
const StackItem: React.FunctionComponent<IStackItemProps>;
variable SwatchColorPicker
const SwatchColorPicker: React.FunctionComponent<ISwatchColorPickerProps>;
variable TagItem
const TagItem: React.FunctionComponent<ITagItemProps>;
variable TagItemSuggestion
const TagItemSuggestion: React.FunctionComponent<ITagItemSuggestionProps>;
variable TagPicker
const TagPicker: React.FunctionComponent<ITagPickerProps>;
variable TeachingBubble
const TeachingBubble: React.FunctionComponent<ITeachingBubbleProps>;
variable TeachingBubbleContent
const TeachingBubbleContent: React.FunctionComponent<ITeachingBubbleProps>;
variable Text
const Text: React.FunctionComponent<ITextProps>;
variable TextField
const TextField: React.FunctionComponent<ITextFieldProps>;
variable TextStyles
const TextStyles: IComponent<ITextProps, ITextTokens, IComponentStyles<ITextSlots>>;
variable TextView
const TextView: IComponent<ITextProps, ITextTokens, IComponentStyles<ITextSlots>>;
variable Toggle
const Toggle: React.FunctionComponent<IToggleProps>;
variable Tooltip
const Tooltip: React.FunctionComponent<ITooltipProps>;
variable TooltipHost
const TooltipHost: React.FunctionComponent<ITooltipHostProps>;
variable VerticalDivider
const VerticalDivider: React.FunctionComponent<IVerticalDividerProps>;
Functions
function buildColumns
buildColumns: ( items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean) => IColumn[];
function buildKeytipConfigMap
buildKeytipConfigMap: (config: IKeytipConfig) => IKeytipConfigMap;
Builds a map of ID to IKeytipProps
Parameter config
IKeytipConfig object
Returns
Config map
function canAnyMenuItemsCheck
canAnyMenuItemsCheck: (items: IContextualMenuItem[]) => boolean;
Returns true if a list of menu items can contain a checkbox
function clamp
clamp: (value: number, max: number, min?: number) => number;
Clamp a value to ensure it falls within a given range.
function constructKeytip
constructKeytip: ( configMap: IKeytipConfigMap, parentSequence: string[], keytip: IKeytipConfigItem) => void;
Constructs a keytip from an IKeytipConfigItem and puts it in the configMap
Parameter configMap
IKeytipConfigMap to store the keytip in
Parameter parentSequence
string of the parent keytip
Parameter keytip
IKeytipConfigItem data
function correctHex
correctHex: (hex: string) => string;
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.
function correctHSV
correctHSV: (color: IHSV) => IHSV;
Corrects an HSV color to fall within the valid range.
function correctRGB
correctRGB: (color: IRGB) => IRGB;
Corrects an RGB color to fall within the valid range.
function createGenericItem
createGenericItem: ( name: string, currentValidationState: ValidationState) => IGenericItem & { key: React.Key };
function createItem
createItem: (name: string, isValid: boolean) => ISuggestionModel<IPersonaProps>;
function cssColor
cssColor: (color?: string) => IRGB | undefined;
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.
function getActivityItemClassNames
getActivityItemClassNames: ( styles: IActivityItemStyles, className: string, activityPersonas: IPersonaProps[], isCompact: boolean) => IActivityItemClassNames;
function getActivityItemStyles
getActivityItemStyles: ( theme?: ITheme, customStyles?: IActivityItemStyles | undefined, animateBeaconSignal?: boolean | undefined, beaconColorOne?: string | undefined, beaconColorTwo?: string | undefined, isCompact?: boolean | undefined) => IActivityItemStyles;
function getAllSelectedOptions
getAllSelectedOptions: ( options: ISelectableOption[], selectedIndices: number[]) => ISelectableOption[];
function getAriaDescribedBy
getAriaDescribedBy: (keySequences: string[]) => string;
Gets the aria-describedby value to put on the component with this keytip.
Parameter keySequences
KeySequences of the keytip.
Returns
The aria-describedby value to set on the component with this keytip.
function getBackgroundShade
getBackgroundShade: ( color: IColor, shade: Shade, isInverted?: boolean) => IColor | null;
function getBasePickerStyles
getBasePickerStyles: (props: IBasePickerStyleProps) => IBasePickerStyles;
function getBoundsFromTargetWindow
getBoundsFromTargetWindow: ( target: Element | MouseEvent | Point | Rectangle | null, targetWindow: IWindowWithSegments) => IRectangle;
function getColorFromHSV
getColorFromHSV: (hsv: IHSV, a?: number) => IColor;
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 #. Ifa
is unspecified or 100, the result'sstr
property will contain a hex value (*not* prefixed with #)
function getColorFromRGBA
getColorFromRGBA: (rgba: IRGB) => IColor;
Converts an RGBA color to a color object (alpha defaults to 100).
function getColorFromString
getColorFromString: (inputColor: string) => IColor | undefined;
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 thestr
property of the returned object. Alpha defaults to 100 if not specified ininputColor
. Returns undefined if the color string is invalid/not recognized.
function getCommandBarStyles
getCommandBarStyles: (props: ICommandBarStyleProps) => ICommandBarStyles;
function getCommandButtonStyles
getCommandButtonStyles: ( customStyles: IButtonStyles | undefined) => IButtonStyles;
function getContextualMenuItemStyles
getContextualMenuItemStyles: ( props: IContextualMenuItemStyleProps) => IContextualMenuItemStyles;
Wrapper function for generating ContextualMenuItem classNames which adheres to the getStyles API, but invokes memoized className generator function with primitive values.
Parameter props
the ContextualMenuItem style props used to generate its styles.
function getContrastRatio
getContrastRatio: (color1: IColor, color2: IColor) => number;
function getDetailsColumnStyles
getDetailsColumnStyles: ( props: IDetailsColumnStyleProps) => IDetailsColumnStyles;
function getDetailsHeaderStyles
getDetailsHeaderStyles: ( props: IDetailsHeaderStyleProps) => IDetailsHeaderStyles;
function getDetailsListStyles
getDetailsListStyles: (props: IDetailsListStyleProps) => IDetailsListStyles;
function getDetailsRowCheckStyles
getDetailsRowCheckStyles: ( props: IDetailsRowCheckStyleProps) => IDetailsRowCheckStyles;
function getDetailsRowStyles
getDetailsRowStyles: (props: IDetailsRowStyleProps) => IDetailsRowStyles;
function getFontIcon
getFontIcon: ( iconName: string, className?: string | undefined, ariaLabel?: string | undefined) => any;
Memoized helper for rendering a FontIcon.
Parameter iconName
The name of the icon to use from the icon font.
Parameter className
Class name for styling the icon.
Parameter ariaLabel
Label for the icon for the benefit of screen readers.
function getFullColorString
getFullColorString: (color: IColor) => string;
Converts a color hue to an HTML color string (with # prefix). This implementation ignores all components of
color
except hue.
function GetGroupCount
GetGroupCount: (groups: IGroup[] | undefined) => number;
Takes an array of groups and returns a count of the groups and all descendant groups.
Parameter groups
The array of groups to count.
function getIconContent
getIconContent: (iconName?: string | undefined) => IIconContent | null;
function getInitialResponsiveMode
getInitialResponsiveMode: () => ResponsiveMode;
function getLayerCount
getLayerCount: (hostId: string) => number;
Gets the number of layers currently registered with a host id.
Parameter hostId
Id of the layer host.
Returns
The number of layers currently registered with the host.
function getLayerHost
getLayerHost: (hostId: string) => ILayerHost | undefined;
Gets the Layer Host instance associated with a hostId, if applicable.
Parameter hostId
Id of the layer host.
Returns
A component ref for the associated layer host.
function getLayerHostSelector
getLayerHostSelector: () => string | undefined;
Get the default target selector when determining a host
function getLayerStyles
getLayerStyles: (props: ILayerStyleProps) => ILayerStyles;
function getMaxHeight
getMaxHeight: ( target: Element | MouseEvent | Point | Rectangle, targetEdge: DirectionalHint, gapSpace?: number, bounds?: IRectangle, coverTarget?: boolean) => number;
Gets the maximum height that a rectangle can have in order to fit below or above a target. If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder of the target given. If no bounds are provided then the window is treated as the bounds.
function getMeasurementCache
getMeasurementCache: () => { getCachedMeasurement: (data: any) => number | undefined; addMeasurementToCache: (data: any, measurement: number) => void;};
Returns a simple object is able to store measurements with a given key.
function getMenuItemStyles
getMenuItemStyles: (theme: ITheme) => IMenuItemStyles;
function getNextResizeGroupStateProvider
getNextResizeGroupStateProvider: (measurementCache?: { getCachedMeasurement: (data: any) => number | undefined; addMeasurementToCache: (data: any, measurement: number) => void;}) => { getNextState: ( props: IResizeGroupProps, currentState: IResizeGroupState, getElementToMeasureDimension: () => number, newContainerDimension?: number | undefined ) => IResizeGroupState | undefined; shouldRenderDataForMeasurement: (dataToMeasure: any) => boolean; getInitialResizeGroupState: (data: any) => IResizeGroupState;};
Returns a function that is able to compute the next state for the ResizeGroup given the current state and any measurement updates.
function getOppositeEdge
getOppositeEdge: (edge: RectangleEdge) => RectangleEdge;
Returns the opposite edge of the given RectangleEdge.
function getPeoplePickerItemStyles
getPeoplePickerItemStyles: ( props: IPeoplePickerItemSelectedStyleProps) => IPeoplePickerItemSelectedStyles;
function getPeoplePickerItemSuggestionStyles
getPeoplePickerItemSuggestionStyles: ( props: IPeoplePickerItemSuggestionStyleProps) => IPeoplePickerItemSuggestionStyles;
function getPersonaInitialsColor
getPersonaInitialsColor: ( props: Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>) => string;
Gets the hex color string (prefixed with #) for the given persona props. This is the logic used internally by the Persona control.
Parameter props
Current persona props
Returns
Hex color string prefixed with #
function getResponsiveMode
getResponsiveMode: (currentWindow: Window | undefined) => ResponsiveMode;
function getShade
getShade: (color: IColor, shade: Shade, isInverted?: boolean) => IColor | null;
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#
Parameter color
The base color whose shade is to be computed
Parameter shade
The shade of the base color to compute
Parameter isInverted
Default false. Whether the given theme is inverted (reverse strongen/soften logic)
function getShimmeredDetailsListStyles
getShimmeredDetailsListStyles: ( props: Required< Pick< import('./ShimmeredDetailsList.types').IShimmeredDetailsListProps, 'theme' > >) => IShimmeredDetailsListStyles;
function getSplitButtonClassNames
getSplitButtonClassNames: ( styles: IButtonStyles, disabled: boolean, expanded: boolean, checked: boolean, primaryDisabled?: boolean | undefined) => ISplitButtonClassNames;
function getSubmenuItems
getSubmenuItems: ( item: IContextualMenuItem, options?: { target?: Target }) => IContextualMenuItem[] | undefined;
function getSuggestionsItemStyles
getSuggestionsItemStyles: ( props: ISuggestionsItemStyleProps) => ISuggestionsItemStyles;
function getSuggestionsStyles
getSuggestionsStyles: (props: ISuggestionsStyleProps) => ISuggestionsStyles;
function getTagItemStyles
getTagItemStyles: (props: ITagItemStyleProps) => ITagItemStyles;
function getTagItemSuggestionStyles
getTagItemSuggestionStyles: ( props: ITagItemSuggestionStyleProps) => ITagItemSuggestionStyles;
function getTextFieldStyles
getTextFieldStyles: (props: ITextFieldStyleProps) => ITextFieldStyles;
function hsl2hsv
hsl2hsv: (h: number, s: number, l: number) => IHSV;
Converts HSL components to an HSV color.
function hsl2rgb
hsl2rgb: (h: number, s: number, l: number) => IRGB;
Converts HSL components to an RGB color. Does not set the alpha value.
function hsv2hex
hsv2hex: (h: number, s: number, v: number) => string;
Converts HSV components to a hex color string (without # prefix).
function hsv2hsl
hsv2hsl: (h: number, s: number, v: number) => IHSL;
Converts HSV components to an HSL color.
function hsv2rgb
hsv2rgb: (h: number, s: number, v: number) => IRGB;
Converts HSV components to an RGB color. Does not set the alpha value.
function initializeResponsiveMode
initializeResponsiveMode: (element?: HTMLElement) => void;
Initializes the responsive mode to the current window size. This can be used to avoid a re-render during first component mount since the window would otherwise not be measured until after mounting.
function isDark
isDark: (color: IColor) => boolean;
function isRelativeUrl
isRelativeUrl: (url: string) => boolean;
function isValidShade
isValidShade: (shade?: Shade) => boolean;
Returns true if the argument is a valid Shade value
Parameter shade
The Shade value to validate.
function ktpTargetFromId
ktpTargetFromId: (keytipId: string) => string;
Constructs the data-ktp-execute-target attribute selector from a keytip ID.
Parameter keytipId
ID of the Keytip.
Returns
String selector to use to query for the keytip execute target.
function ktpTargetFromSequences
ktpTargetFromSequences: (keySequences: string[]) => string;
Constructs the data-ktp-target attribute selector from a full key sequence.
Parameter keySequences
Full string[] for a Keytip.
Returns
String selector to use to query for the keytip target.
function mergeOverflows
mergeOverflows: ( keySequences: string[], overflowKeySequences: string[]) => string[];
Merges an overflow sequence with a key sequence.
Parameter keySequences
Full sequence for one keytip.
Parameter overflowKeySequences
Full overflow keytip sequence.
Returns
Sequence that will be used by the keytip when in the overflow.
function notifyHostChanged
notifyHostChanged: (id: string) => void;
Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that care about the specific host.
function PeoplePickerItemBase
PeoplePickerItemBase: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
function PeoplePickerItemSuggestionBase
PeoplePickerItemSuggestionBase: ( props: IPeoplePickerItemSuggestionProps) => JSX.Element;
function positionCallout
positionCallout: ( props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: ICalloutPositionedInfo) => ICalloutPositionedInfo;
function positionCard
positionCard: ( props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: ICalloutPositionedInfo) => ICalloutPositionedInfo;
function positionElement
positionElement: ( props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: IPositionedData) => IPositionedData;
Used to position an element relative to the given positioning props. If positioning has been completed before, previousPositions can be passed to ensure that the positioning element repositions based on its previous targets rather than starting with directionalhint.
function presenceBoolean
presenceBoolean: (presence: PersonaPresence) => { isAvailable: boolean; isAway: boolean; isBlocked: boolean; isBusy: boolean; isDoNotDisturb: boolean; isOffline: boolean;};
function registerLayer
registerLayer: (hostId: string, callback: () => void) => void;
Register a layer for a given host id
Parameter hostId
Id of the layer host
Parameter layer
Layer instance
function registerLayerHost
registerLayerHost: (hostId: string, layerHost: ILayerHost) => void;
Registers a Layer Host with an associated hostId.
Parameter hostId
Id of the layer host
Parameter layerHost
layer host instance
function rgb2hex
rgb2hex: (r: number, g: number, b: number) => string;
Converts RGB components to a hex color string (without # prefix).
function rgb2hsv
rgb2hsv: (r: number, g: number, b: number) => IHSV;
Converts RGB components to an HSV color.
function sequencesToID
sequencesToID: (keySequences: string[]) => string;
Converts a whole set of KeySequences into one keytip ID, which will be the ID for the last keytip sequence specified keySequences should not include the initial keytip 'start' sequence.
Parameter keySequences
Full path of IKeySequences for one keytip.
Returns
String to use for the keytip ID.
function setLayerHostSelector
setLayerHostSelector: (selector?: string) => void;
Sets the default target selector to use when determining the host in which Layered content will be injected into. If not provided, an element will be created at the end of the document body.
Passing in a falsey value will clear the default target and reset back to using a created element at the end of document body.
function setResponsiveMode
setResponsiveMode: (responsiveMode: ResponsiveMode | undefined) => void;
Allows a server rendered scenario to provide a default responsive mode.
function sizeBoolean
sizeBoolean: (size: PersonaSize) => { isSize8: boolean; isSize10: boolean; isSize16: boolean; isSize24: boolean; isSize28: boolean; isSize32: boolean; isSize40: boolean; isSize48: boolean; isSize56: boolean; isSize72: boolean; isSize100: boolean; isSize120: boolean;};
function TagItemBase
TagItemBase: (props: ITagItemProps) => JSX.Element;
function TagItemSuggestionBase
TagItemSuggestionBase: (props: ITagItemSuggestionProps) => JSX.Element;
function themeRulesStandardCreator
themeRulesStandardCreator: () => IThemeRules;
function transitionKeysAreEqual
transitionKeysAreEqual: ( key1: IKeytipTransitionKey, key2: IKeytipTransitionKey) => boolean;
Tests for equality between two IKeytipTransitionKeys.
Parameter key1
First IKeytipTransitionKey.
Parameter key2
Second IKeytipTransitionKey.
Returns
T/F if the transition keys are equal.
function transitionKeysContain
transitionKeysContain: ( keys: IKeytipTransitionKey[], key: IKeytipTransitionKey) => boolean;
Tests if 'key' is present in 'keys'.
Parameter keys
Array of IKeytipTransitionKey.
Parameter key
IKeytipTransitionKey to find in 'keys'.
Returns
T/F if 'keys' contains 'key'.
function unregisterLayer
unregisterLayer: (hostId: string, callback: () => void) => void;
Unregister a layer for a given host id
Parameter hostId
Id of the layer host
Parameter layer
Layer instance
function unregisterLayerHost
unregisterLayerHost: (hostId: string, layerHost: ILayerHost) => void;
Unregisters a Layer Host from the associated hostId.
Parameter hostId
Id of the layer host
Parameter layerHost
layer host instance
function updateA
updateA: (color: IColor, a: number) => IColor;
Gets a color with the given alpha value and the same other components as
color
. Does not modify the original color.
function updateH
updateH: (color: IColor, h: number) => IColor;
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.
function updateRGB
updateRGB: (color: IColor, component: keyof IRGB, value: number) => IColor;
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.
function updateSV
updateSV: (color: IColor, s: number, v: number) => IColor;
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 updateT
updateT: (color: IColor, t: number) => IColor;
Gets a color with the given transparency value and the same other components as
color
. Does not modify the original color.
function useKeytipRef
useKeytipRef: <TElement extends HTMLElement = HTMLElement>( options: KeytipDataOptions) => React.Ref<TElement>;
Hook that creates a ref which is used for passing to Keytip target element. The ref will handle setting the attributes needed for Keytip to work.
function useResponsiveMode
useResponsiveMode: (elementRef: React.RefObject<HTMLElement>) => ResponsiveMode;
Hook to get the current responsive mode (window size category).
function withResponsiveMode
withResponsiveMode: <TProps extends { responsiveMode?: ResponsiveMode }, TState>( ComposedComponent: new (props: TProps, ...args: any[]) => React.Component< TProps, TState >) => any;
function withViewport
withViewport: <TProps extends { viewport?: IViewport }, TState>( ComposedComponent: new (props: TProps, ...args: any[]) => React.Component< TProps, TState >) => any;
A decorator to update decorated component on viewport or window resize events.
Parameter ComposedComponent
decorated React component reference.
Classes
class ActionButton
class ActionButton extends React.Component<IButtonProps, {}> {}
method render
render: () => JSX.Element;
class ActivityItem
class ActivityItem extends React.Component<IActivityItemProps, {}> {}
constructor
constructor(props: IActivityItemProps);
method render
render: () => JSX.Element;
class AnnouncedBase
class AnnouncedBase extends React.Component<IAnnouncedProps> {}
property defaultProps
static defaultProps: Partial<IAnnouncedProps>;
method render
render: () => JSX.Element;
class Autofill
class Autofill extends React.Component<IAutofillProps, IAutofillState> implements IAutofill {}
constructor
constructor(props: IAutofillProps);
property cursorLocation
readonly cursorLocation: number;
property defaultProps
static defaultProps: { enableAutofillOnKeyPress: number[] };
property inputElement
readonly inputElement: HTMLInputElement;
property isValueSelected
readonly isValueSelected: boolean;
property selectionEnd
readonly selectionEnd: number;
property selectionStart
readonly selectionStart: number;
property value
readonly value: string;
method clear
clear: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (nextProps: IAutofillProps) => void;
class BaseAutoFill
class BaseAutoFill extends Autofill {}
Deprecated
do not use.
class BaseButton
class BaseButton extends React.Component<IBaseButtonProps, IBaseButtonState> implements IButton {}
constructor
constructor(props: IBaseButtonProps);
property defaultProps
static defaultProps: Partial<IBaseButtonProps>;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: IBaseButtonProps, prevState: IBaseButtonState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method dismissMenu
dismissMenu: () => void;
method focus
focus: () => void;
method openMenu
openMenu: ( shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean) => void;
method render
render: () => JSX.Element;
class BaseExtendedPeoplePicker
class BaseExtendedPeoplePicker extends BaseExtendedPicker< IPersonaProps, IExtendedPeoplePickerProps> {}
class BaseExtendedPicker
class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extends React.Component<P, IBaseExtendedPickerState<T>> implements IBaseExtendedPicker<T> {}
constructor
constructor(basePickerProps: IBaseExtendedPickerProps<T>);
property floatingPicker
floatingPicker: React.RefObject< BaseFloatingPicker<T, IBaseFloatingPickerProps<T>>>;
property floatingPickerProps
protected floatingPickerProps: IBaseFloatingPickerProps<T>;
property highlightedItems
readonly highlightedItems: T[];
property input
protected input: React.RefObject<Autofill>;
property inputElement
readonly inputElement: HTMLInputElement;
property items
readonly items: any;
property onBackspace
protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;
property onCopy
protected onCopy: (ev: React.ClipboardEvent<HTMLElement>) => void;
property onInputChange
protected onInputChange: ( value: string, composing?: boolean | undefined) => void;
property onInputClick
protected onInputClick: ( ev: React.MouseEvent<HTMLInputElement | Autofill, MouseEvent>) => void;
property onInputFocus
protected onInputFocus: ( ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
property onPaste
protected onPaste: ( ev: React.ClipboardEvent<HTMLInputElement | Autofill>) => void;
property onSelectionChange
protected onSelectionChange: () => void;
property root
protected root: React.RefObject<HTMLDivElement>;
property selectedItemsList
selectedItemsList: React.RefObject< BaseSelectedItemsList<T, IBaseSelectedItemsListProps<T>>>;
property selectedItemsListProps
protected selectedItemsListProps: IBaseSelectedItemsListProps<T>;
property selection
protected selection: Selection;
method canAddItems
protected canAddItems: () => boolean;
method clearInput
clearInput: () => void;
method componentDidMount
componentDidMount: () => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
method renderFloatingPicker
protected renderFloatingPicker: () => JSX.Element;
method renderSelectedItemsList
protected renderSelectedItemsList: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: P) => void;
class BaseFloatingPeoplePicker
class BaseFloatingPeoplePicker extends BaseFloatingPicker< IPersonaProps, IPeopleFloatingPickerProps> {}
class BaseFloatingPicker
class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extends React.Component<P, IBaseFloatingPickerState> implements IBaseFloatingPicker {}
constructor
constructor(basePickerProps: IBaseFloatingPickerProps<T>);
property completeSuggestion
completeSuggestion: () => void;
property currentPromise
protected currentPromise: PromiseLike<T[]>;
property currentSelectedSuggestionIndex
readonly currentSelectedSuggestionIndex: number;
property hidePicker
hidePicker: () => void;
property inputText
readonly inputText: string;
property isComponentMounted
protected isComponentMounted: boolean;
property isSuggestionsShown
readonly isSuggestionsShown: boolean;
property onKeyDown
protected onKeyDown: (ev: MouseEvent) => void;
property onQueryStringChanged
onQueryStringChanged: (queryString: string) => void;
property onSuggestionClick
protected onSuggestionClick: ( ev: React.MouseEvent<HTMLElement, MouseEvent>, item: T, index: number) => void;
property onSuggestionRemove
protected onSuggestionRemove: ( ev: React.MouseEvent<HTMLElement, MouseEvent>, item: T, index: number) => void;
property root
protected root: React.RefObject<HTMLDivElement>;
property selection
protected selection: Selection;
property showPicker
showPicker: (updateValue?: boolean) => void;
property suggestions
readonly suggestions: any[];
property suggestionsControl
protected suggestionsControl: React.RefObject<SuggestionsControl<T>>;
property SuggestionsControlOfProperType
protected SuggestionsControlOfProperType: new ( props: ISuggestionsControlProps<T>) => SuggestionsControl<T>;
property suggestionStore
protected suggestionStore: SuggestionsStore<T>;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method forceResolveSuggestion
forceResolveSuggestion: () => void;
method onChange
protected onChange: (item: T) => void;
method onSelectionChange
protected onSelectionChange: () => void;
method render
render: () => JSX.Element;
method renderSuggestions
protected renderSuggestions: () => JSX.Element | null;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: ( newProps: IBaseFloatingPickerProps<T>) => void;
method updateSuggestions
updateSuggestions: (suggestions: T[], forceUpdate?: boolean) => void;
method updateSuggestionsList
protected updateSuggestionsList: (suggestions: T[] | PromiseLike<T[]>) => void;
method updateSuggestionWithZeroState
protected updateSuggestionWithZeroState: () => void;
method updateValue
protected updateValue: (updatedValue: string) => void;
class BasePeoplePicker
class BasePeoplePicker extends BasePicker<IPersonaProps, IPeoplePickerProps> {}
class BasePeopleSelectedItemsList
class BasePeopleSelectedItemsList extends BaseSelectedItemsList< IExtendedPersonaProps, ISelectedPeopleProps> {}
class BasePicker
class BasePicker<T, P extends IBasePickerProps<T>> extends React.Component<P, IBasePickerState> implements IBasePicker<T> {}
constructor
constructor(basePickerProps: IBasePickerProps<T>);
property addItem
protected addItem: (item: T) => void;
property addItemByIndex
protected addItemByIndex: (index: number) => void;
property completeSelection
protected completeSelection: (item: T) => void;
property currentPromise
protected currentPromise: PromiseLike<any>;
property dismissSuggestions
dismissSuggestions: (ev?: any) => void;
property focusZone
protected focusZone: React.RefObject<IFocusZone>;
property input
protected input: React.RefObject<IAutofill>;
property items
readonly items: T[];
property onBlur
protected onBlur: (ev: React.FocusEvent<HTMLElement | Autofill>) => void;
property onClick
protected onClick: (ev: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
Reveals suggestions any time the user clicks on the input element without shifting focus.
property onGetMoreResults
protected onGetMoreResults: () => void;
property onInputBlur
protected onInputBlur: ( ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
property onInputChange
protected onInputChange: (value: string) => void;
property onInputFocus
protected onInputFocus: ( ev: React.FocusEvent<HTMLInputElement | Autofill>) => void;
property onItemChange
protected onItemChange: (changedItem: T, index: number) => void;
property onKeyDown
protected onKeyDown: (ev: React.KeyboardEvent<HTMLElement>) => void;
property onSuggestionClick
protected onSuggestionClick: ( ev: React.MouseEvent<HTMLElement, MouseEvent>, item: any, index: number) => void;
property onSuggestionRemove
protected onSuggestionRemove: ( ev: React.MouseEvent<HTMLElement, MouseEvent>, item: T, index: number) => void;
property refocusSuggestions
refocusSuggestions: (keyCode: number) => void;
property removeItem
protected removeItem: ( item: IPickerItemProps<T>, focusNextItem?: boolean | undefined) => void;
property removeItems
protected removeItems: (itemsToRemove: any[]) => void;
property root
protected root: React.RefObject<HTMLDivElement>;
property selection
protected selection: Selection;
property suggestionElement
protected suggestionElement: React.RefObject<ISuggestions<T>>;
property SuggestionOfProperType
protected SuggestionOfProperType: new ( props: ISuggestionsProps<T>) => Suggestions<T>;
Deprecated
this is no longer necessary as typescript now supports generic elements
property suggestionStore
protected suggestionStore: SuggestionsController<T>;
method canAddItems
protected canAddItems: () => boolean;
method completeSuggestion
completeSuggestion: (forceComplete?: boolean) => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (oldProps: P, oldState: IBasePickerState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => void;
method focusInput
focusInput: () => void;
method getActiveDescendant
protected getActiveDescendant: () => string | undefined;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( newProps: IBasePickerProps<any>) => { items: any[] } | null;
method getSuggestionsAlert
protected getSuggestionsAlert: ( suggestionAlertClassName?: string) => JSX.Element | undefined;
method onBackspace
protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;
method onChange
protected onChange: (items?: T[]) => void;
method onEmptyInputFocus
protected onEmptyInputFocus: () => void;
Only to be called when there is nothing in the input. Checks to see if the consumer has provided a function to resolve suggestions
method onSelectionChange
protected onSelectionChange: () => void;
method onSuggestionSelect
protected onSuggestionSelect: () => void;
method render
render: () => JSX.Element;
method renderItems
protected renderItems: () => JSX.Element[];
method renderSuggestions
protected renderSuggestions: () => JSX.Element | null;
method resetFocus
protected resetFocus: (index?: number) => void;
method resolveNewValue
protected resolveNewValue: (updatedValue: string, suggestions: T[]) => void;
method updateSuggestions
protected updateSuggestions: (suggestions: any[]) => void;
method updateSuggestionsList
protected updateSuggestionsList: ( suggestions: T[] | PromiseLike<T[]>, updatedValue?: string) => void;
method updateValue
protected updateValue: (updatedValue: string) => void;
class BasePickerListBelow
class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BasePicker< T, P> {}
method onBackspace
protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;
method render
render: () => JSX.Element;
class BaseSelectedItemsList
class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>> extends React.Component<P, IBaseSelectedItemsListState<T>> implements IBaseSelectedItemsList<T> {}
constructor
constructor(basePickerProps: IBaseSelectedItemsListProps<T>);
property addItems
addItems: (items: T[]) => void;
property items
readonly items: T[];
property onCopy
onCopy: (ev: React.ClipboardEvent<HTMLElement>) => void;
property onItemChange
protected onItemChange: (changedItem: T, index: number) => void;
property onSelectionChanged
protected onSelectionChanged: () => void;
property removeItem
removeItem: (item: T) => void;
property removeItemAt
removeItemAt: (index: number) => void;
property removeItems
removeItems: (itemsToRemove: any[]) => void;
property renderItems
protected renderItems: () => JSX.Element[];
property replaceItem
replaceItem: (itemToReplace: T, itemsToReplaceWith: T[]) => void;
property root
protected root: HTMLElement;
property selection
protected selection: Selection;
method componentDidMount
componentDidMount: () => void;
method copyItems
protected copyItems: (items: T[]) => void;
method hasSelectedItems
hasSelectedItems: () => boolean;
method highlightedItems
highlightedItems: () => T[];
method onChange
protected onChange: (items?: T[]) => void;
method removeSelectedItems
removeSelectedItems: () => void;
method render
render: () => any;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: P) => void;
method UNSAFE_componentWillUpdate
UNSAFE_componentWillUpdate: ( newProps: P, newState: IBaseSelectedItemsListState) => void;
method unselectAll
unselectAll: () => void;
method updateItems
updateItems: (items: T[], focusIndex?: number) => void;
Controls what happens whenever there is an action that impacts the selected items. If selectedItems is provided, this will act as a controlled component and will not update its own state.
class BreadcrumbBase
class BreadcrumbBase extends React.Component<IBreadcrumbProps, any> {}
constructor
constructor(props: IBreadcrumbProps);
property defaultProps
static defaultProps: IBreadcrumbProps;
method focus
focus: () => void;
Sets focus to the first breadcrumb link.
method render
render: () => JSX.Element;
class Button
class Button extends React.Component<IButtonProps, {}> {}
This class is deprecated. Use the individual *Button components instead.
Deprecated
Use the individual *Button components instead.
constructor
constructor(props: IButtonProps);
method render
render: () => JSX.Element;
class ButtonGridCell
class ButtonGridCell<T, P extends IButtonGridCellProps<T>> extends React.Component< P, {}> {}
property defaultProps
static defaultProps: { disabled: boolean };
method render
render: () => JSX.Element;
class Calendar
class Calendar extends React.Component<ICalendarProps, ICalendarState> implements ICalendar {}
constructor
constructor(props: ICalendarProps);
property defaultProps
static defaultProps: ICalendarProps;
method componentDidUpdate
componentDidUpdate: () => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (nextProps: ICalendarProps) => void;
class Callout
class Callout extends React.Component<ICalloutProps, ICalloutState> {}
method render
render: () => JSX.Element;
class CalloutContentBase
class CalloutContentBase extends React.Component<ICalloutProps, ICalloutState> {}
constructor
constructor(props: ICalloutProps);
property defaultProps
static defaultProps: { preventDismissOnLostFocus: boolean; preventDismissOnScroll: boolean; preventDismissOnResize: boolean; isBeakVisible: boolean; beakWidth: number; gapSpace: number; minPagePadding: number; directionalHint: 7;};
property dismiss
dismiss: ( ev?: | Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element | null;
method shouldComponentUpdate
shouldComponentUpdate: ( newProps: ICalloutProps, newState: ICalloutState) => boolean;
method UNSAFE_componentWillMount
UNSAFE_componentWillMount: () => void;
method UNSAFE_componentWillUpdate
UNSAFE_componentWillUpdate: (newProps: ICalloutProps) => void;
class CheckboxBase
class CheckboxBase extends React.Component<ICheckboxProps, ICheckboxState> implements ICheckbox {}
constructor
constructor(props: ICheckboxProps, context?: any);
Initialize a new instance of the Checkbox
Parameter props
Props for the component
Parameter context
Context or initial state for the base component.
property checked
readonly checked: boolean;
property defaultProps
static defaultProps: ICheckboxProps;
property indeterminate
readonly indeterminate: boolean;
method focus
focus: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: Readonly<ICheckboxProps>, prevState: Readonly<ICheckboxState>) => ICheckboxState | null;
method render
render: () => JSX.Element;
Render the Checkbox based on passed props
class ChoiceGroupBase
class ChoiceGroupBase extends React.Component<IChoiceGroupProps, IChoiceGroupState> implements IChoiceGroup {}
constructor
constructor(props: IChoiceGroupProps);
property checkedOption
readonly checkedOption: IChoiceGroupOption;
Gets the current checked option.
method componentDidUpdate
componentDidUpdate: ( prevProps: IChoiceGroupProps, prevState: IChoiceGroupState) => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
class CoachmarkBase
class CoachmarkBase extends React.Component<ICoachmarkProps, ICoachmarkState> implements ICoachmark {}
constructor
constructor(props: ICoachmarkProps);
property defaultProps
static defaultProps: Partial<ICoachmarkProps>;
property dismiss
dismiss: ( ev?: | Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: ICoachmarkProps, prevState: ICoachmarkState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
method shouldComponentUpdate
shouldComponentUpdate: ( newProps: ICoachmarkProps, newState: ICoachmarkState) => boolean;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: ICoachmarkProps) => void;
class ColorPickerBase
class ColorPickerBase extends React.Component<IColorPickerProps, IColorPickerState> implements IColorPicker {}
constructor
constructor(props: IColorPickerProps);
property color
readonly color: IColor;
property defaultProps
static defaultProps: Partial<IColorPickerProps>;
method componentDidUpdate
componentDidUpdate: ( prevProps: Readonly<IColorPickerProps>, prevState: Readonly<IColorPickerState>) => void;
method render
render: () => JSX.Element;
class ColorPickerGridCellBase
class ColorPickerGridCellBase extends React.PureComponent< IColorPickerGridCellProps, {}> {}
property defaultProps
static defaultProps: Partial<IColorPickerGridCellProps>;
method render
render: () => JSX.Element;
class ComboBox
class ComboBox extends React.Component<IComboBoxProps, IComboBoxState> {}
constructor
constructor(props: IComboBoxProps);
property defaultProps
static defaultProps: IComboBoxProps;
property dismissMenu
dismissMenu: () => void;
Close menu callout if it is open
property focus
focus: ( shouldOpenOnFocus?: boolean | undefined, useFocusAsync?: boolean | undefined) => void;
property selectedOptions
readonly selectedOptions: IComboBoxOption[];
All selected options
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: IComboBoxProps, prevState: IComboBoxState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: IComboBoxProps) => void;
class CommandBarBase
class CommandBarBase extends React.Component<ICommandBarProps, {}> implements ICommandBar {}
constructor
constructor(props: ICommandBarProps);
property defaultProps
static defaultProps: ICommandBarProps;
method focus
focus: () => void;
method remeasure
remeasure: () => void;
method render
render: () => JSX.Element;
class CommandBarButton
class CommandBarButton extends React.Component<IButtonProps, {}> {}
method render
render: () => JSX.Element;
class CompactPeoplePickerBase
class CompactPeoplePickerBase extends BasePeoplePicker {}
Compact layout. It uses personas without secondary text when displaying search results.
property defaultProps
static defaultProps: { onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element; onRenderSuggestionsItem: ( personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined ) => JSX.Element; createGenericItem: typeof createGenericItem;};
Default props for CompactPeoplePicker.
class CompoundButton
class CompoundButton extends React.Component<IButtonProps, {}> {}
method render
render: () => JSX.Element;
class ContextualMenuBase
class ContextualMenuBase extends React.Component< IContextualMenuProps, IContextualMenuState> {}
constructor
constructor(props: IContextualMenuProps);
property defaultProps
static defaultProps: IContextualMenuProps;
property dismiss
dismiss: (ev?: any, dismissAll?: boolean | undefined) => void;
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element | null;
method shouldComponentUpdate
shouldComponentUpdate: ( newProps: IContextualMenuProps, newState: IContextualMenuState) => boolean;
method UNSAFE_componentWillMount
UNSAFE_componentWillMount: () => void;
method UNSAFE_componentWillUpdate
UNSAFE_componentWillUpdate: (newProps: IContextualMenuProps) => void;
class ContextualMenuItemBase
class ContextualMenuItemBase extends React.Component<IContextualMenuItemProps, {}> {}
constructor
constructor(props: IContextualMenuItemProps);
property dismissMenu
dismissMenu: (dismissAll?: boolean | undefined) => void;
property dismissSubMenu
dismissSubMenu: () => void;
property openSubMenu
openSubMenu: () => void;
method render
render: () => JSX.Element;
class DatePickerBase
class DatePickerBase extends React.Component<IDatePickerProps, IDatePickerState> implements IDatePicker {}
constructor
constructor(props: IDatePickerProps);
property defaultProps
static defaultProps: IDatePickerProps;
method componentDidUpdate
componentDidUpdate: ( prevProps: IDatePickerProps, prevState: IDatePickerState) => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
method reset
reset: () => void;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (nextProps: IDatePickerProps) => void;
class DefaultButton
class DefaultButton extends React.Component<IButtonProps, {}> {}
method render
render: () => JSX.Element;
class DetailsColumnBase
class DetailsColumnBase extends React.Component<IDetailsColumnProps> {}
Component for rendering columns in a
DetailsList
.
constructor
constructor(props: IDetailsColumnProps);
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
class DetailsHeaderBase
class DetailsHeaderBase extends React.Component<IDetailsHeaderBaseProps, IDetailsHeaderState> implements IDetailsHeader {}
constructor
constructor(props: IDetailsHeaderBaseProps);
property defaultProps
static defaultProps: { selectAllVisibility: SelectAllVisibility; collapseAllVisibility: CollapseAllVisibility; useFastIcons: boolean;};
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: IDetailsHeaderBaseProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => boolean;
Set focus to the active thing in the focus area.
method render
render: () => JSX.Element;
class DetailsListBase
class DetailsListBase extends React.Component<IDetailsListProps, IDetailsListState> implements IDetailsList {}
constructor
constructor(props: IDetailsListProps);
property defaultProps
static defaultProps: { layoutMode: DetailsListLayoutMode; selectionMode: SelectionMode; constrainMode: ConstrainMode; checkboxVisibility: CheckboxVisibility; isHeaderVisible: boolean; compact: boolean; useFastIcons: boolean;};
method componentDidUpdate
componentDidUpdate: ( prevProps: IDetailsListProps, prevState: IDetailsListState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focusIndex
focusIndex: ( index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode) => void;
method forceUpdate
forceUpdate: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: IDetailsListProps, previousState: IDetailsListState) => IDetailsListState;
method getStartItemIndexInView
getStartItemIndexInView: () => number;
method render
render: () => JSX.Element;
method scrollToIndex
scrollToIndex: ( index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode) => void;
class DetailsRowBase
class DetailsRowBase extends React.Component< IDetailsRowBaseProps, IDetailsRowState> {}
constructor
constructor(props: IDetailsRowBaseProps);
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (previousProps: IDetailsRowBaseProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: (forceIntoFirstElement?: boolean) => boolean;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: IDetailsRowBaseProps, previousState: IDetailsRowState) => IDetailsRowState;
method measureCell
measureCell: (index: number, onMeasureDone: (width: number) => void) => void;
measure cell at index. and call the call back with the measured cell width when finish measure
Parameter index
The cell index
Parameter onMeasureDone
The call back function when finish measure
method render
render: () => JSX.Element;
method shouldComponentUpdate
shouldComponentUpdate: ( nextProps: IDetailsRowBaseProps, nextState: IDetailsRowState) => boolean;
class DialogBase
class DialogBase extends React.Component<IDialogProps, {}> {}
constructor
constructor(props: IDialogProps);
property defaultProps
static defaultProps: IDialogProps;
method render
render: () => JSX.Element;
class DialogContentBase
class DialogContentBase extends React.Component<IDialogContentProps, {}> {}
constructor
constructor(props: IDialogContentProps);
property defaultProps
static defaultProps: IDialogContentProps;
method render
render: () => JSX.Element;
class DialogFooterBase
class DialogFooterBase extends React.Component<IDialogFooterProps, {}> {}
constructor
constructor(props: IDialogFooterProps);
method render
render: () => JSX.Element;
class DragDropHelper
class DragDropHelper implements IDragDropHelper {}
constructor
constructor(params: IDragDropHelperParams);
method dispose
dispose: () => void;
method subscribe
subscribe: ( root: HTMLElement, events: EventGroup, dragDropOptions: IDragDropOptions) => { key: string; dispose(): void };
method unsubscribe
unsubscribe: (root: HTMLElement, key: string) => void;
class DropdownBase
class DropdownBase extends React.Component<IDropdownInternalProps, IDropdownState> implements IDropdown {}
constructor
constructor(props: IDropdownProps);
property defaultProps
static defaultProps: { options: any[] };
property selectedOptions
readonly selectedOptions: IDropdownOption[];
All selected options
method componentDidUpdate
componentDidUpdate: ( prevProps: IDropdownProps, prevState: IDropdownState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: (shouldOpenOnFocus?: boolean) => void;
method render
render: () => JSX.Element;
method setSelectedIndex
setSelectedIndex: ( event: React.FormEvent<HTMLDivElement>, index: number) => void;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: IDropdownProps) => void;
class ExpandingCardBase
class ExpandingCardBase extends React.Component< IExpandingCardProps, IExpandingCardState> {}
constructor
constructor(props: IExpandingCardProps);
property defaultProps
static defaultProps: { compactCardHeight: number; expandedCardHeight: number; directionalHintFixed: boolean;};
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
class ExtendedPeoplePicker
class ExtendedPeoplePicker extends BaseExtendedPeoplePicker {}
class ExtendedSelectedItem
class ExtendedSelectedItem extends React.Component< ISelectedPeopleItemProps, IPeoplePickerItemState> {}
constructor
constructor(props: ISelectedPeopleItemProps);
property persona
protected persona: React.RefObject<HTMLDivElement>;
method render
render: () => JSX.Element;
class FabricBase
class FabricBase extends React.Component<IFabricProps> {}
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
class FacepileBase
class FacepileBase extends React.Component<IFacepileProps, {}> {}
FacePile with no default styles. [Use the
styles
API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling)
constructor
constructor(props: IFacepileProps);
property defaultProps
static defaultProps: IFacepileProps;
method onRenderAriaDescription
protected onRenderAriaDescription: () => '' | JSX.Element | undefined;
method render
render: () => JSX.Element;
class FloatingPeoplePicker
class FloatingPeoplePicker extends BaseFloatingPeoplePicker {}
property defaultProps
static defaultProps: any;
class FocusTrapZone
class FocusTrapZone extends React.Component<IFocusTrapZoneProps, {}> implements IFocusTrapZone {}
constructor
constructor(props: IFocusTrapZoneProps);
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: IFocusTrapZoneProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (nextProps: IFocusTrapZoneProps) => void;
class GroupedListBase
class GroupedListBase extends React.Component<IGroupedListProps, IGroupedListState> implements IGroupedList {}
constructor
constructor(props: IGroupedListProps);
property defaultProps
static defaultProps: { selectionMode: SelectionMode; isHeaderVisible: boolean; groupProps: {}; compact: boolean;};
method componentDidMount
componentDidMount: () => void;
method forceUpdate
forceUpdate: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: IGroupedListProps, previousState: IGroupedListState) => IGroupedListState;
method getStartItemIndexInView
getStartItemIndexInView: () => number;
method render
render: () => JSX.Element;
method scrollToIndex
scrollToIndex: ( index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode) => void;
method toggleCollapseAll
toggleCollapseAll: (allCollapsed: boolean) => void;
class GroupedListSection
class GroupedListSection extends React.Component< IGroupedListSectionProps, IGroupedListSectionState> {}
constructor
constructor(props: IGroupedListSectionProps);
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (previousProps: IGroupedListSectionProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method forceListUpdate
forceListUpdate: () => void;
method forceUpdate
forceUpdate: () => void;
method render
render: () => JSX.Element;
class GroupedListV2Wrapper
class GroupedListV2Wrapper extends React.Component<IGroupedListV2Props, IGroupedListV2State> implements IGroupedList {}
constructor
constructor(props: IGroupedListV2Props);
property displayName
static displayName: string;
method forceUpdate
forceUpdate: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: IGroupedListV2Props, previousState: IGroupedListV2State) => IGroupedListV2State;
method getStartItemIndexInView
getStartItemIndexInView: () => number;
method render
render: () => JSX.Element;
method scrollToIndex
scrollToIndex: ( index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode) => void;
method toggleCollapseAll
toggleCollapseAll: (allCollapsed: boolean) => void;
class HoverCardBase
class HoverCardBase extends React.Component<IHoverCardProps, IHoverCardState> implements IHoverCard {}
constructor
constructor(props: IHoverCardProps);
property defaultProps
static defaultProps: { cardOpenDelay: number; cardDismissDelay: number; expandedCardOpenDelay: number; instantOpenOnClick: boolean; setInitialFocus: boolean; openHotKey: number; type: HoverCardType;};
property dismiss
dismiss: (withTimeOut?: boolean | undefined) => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: IHoverCardProps, prevState: IHoverCardState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
class IconBase
class IconBase extends React.Component<IIconProps, IIconState> {}
constructor
constructor(props: IIconProps);
method render
render: () => JSX.Element;
class IconButton
class IconButton extends React.Component<IButtonProps, {}> {}
method render
render: () => JSX.Element;
class ImageBase
class ImageBase extends React.Component<IImageProps, IImageState> {}
constructor
constructor(props: IImageProps);
property defaultProps
static defaultProps: { shouldFadeIn: boolean };
method componentDidUpdate
componentDidUpdate: (prevProps: IImageProps, prevState: IImageState) => void;
method render
render: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (nextProps: IImageProps) => void;
class Keytip
class Keytip extends React.Component<IKeytipProps, {}> {}
A callout corresponding to another Fabric component to describe a key sequence that will activate that component
method render
render: () => JSX.Element;
class KeytipLayerBase
class KeytipLayerBase extends React.Component< IKeytipLayerProps, IKeytipLayerState> {}
A layer that holds all keytip items
constructor
constructor(props: IKeytipLayerProps, context: any);
property defaultProps
static defaultProps: IKeytipLayerProps;
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method getCurrentSequence
getCurrentSequence: () => string;
method getKeytipTree
getKeytipTree: () => KeytipTree;
method processInput
processInput: (key: string, ev?: React.KeyboardEvent<HTMLElement>) => void;
Processes inputs from the document listener and traverse the keytip tree
Parameter key
Key pressed by the user
method processTransitionInput
processTransitionInput: ( transitionKey: IKeytipTransitionKey, ev?: React.KeyboardEvent<HTMLElement>) => void;
Processes an IKeytipTransitionKey entered by the user
Parameter transitionKey
IKeytipTransitionKey received by the layer to process
method render
render: () => JSX.Element;
method showKeytips
showKeytips: (ids: string[]) => void;
Show the given keytips and hide all others
Parameter ids
Keytip IDs to show
class KeytipManager
class KeytipManager {}
This class is responsible for handling registering, updating, and unregistering of keytips
property delayUpdatingKeytipChange
delayUpdatingKeytipChange: boolean;
property inKeytipMode
inKeytipMode: boolean;
property keytips
keytips: { [key: string]: IUniqueKeytip };
property persistedKeytips
persistedKeytips: { [key: string]: IUniqueKeytip };
property sequenceMapping
sequenceMapping: { [key: string]: IKeytipProps };
property shouldEnterKeytipMode
shouldEnterKeytipMode: boolean;
method addParentOverflow
addParentOverflow: (keytipProps: IKeytipProps) => IKeytipProps;
Adds the overflowSetSequence to the keytipProps if its parent keytip also has it
Parameter keytipProps
Keytip props to add overflowSetSequence to if necessary
Returns
- Modified keytip props, if needed to be modified
method enterKeytipMode
enterKeytipMode: () => void;
Manual call to enter keytip mode
method exitKeytipMode
exitKeytipMode: () => void;
Manual call to exit keytip mode
method getInstance
static getInstance: () => KeytipManager;
Static function to get singleton KeytipManager instance
Returns
Singleton KeytipManager instance
method getKeytips
getKeytips: () => IKeytipProps[];
Gets all IKeytipProps from this.keytips
Returns
All keytips stored in the manager
method init
init: (delayUpdatingKeytipChange: boolean) => void;
Initialization code to set set parameters to define how the KeytipManager handles keytip data.
Parameter delayUpdatingKeytipChange
T/F if we should delay notifiying keytip subscribers of keytip changes
method menuExecute
menuExecute: ( overflowButtonSequences: string[], keytipSequences: string[]) => void;
Public function to bind for overflow items that have a submenu
method register
register: (keytipProps: IKeytipProps, persisted?: boolean) => string;
Registers a keytip
Parameter keytipProps
Keytip to register
Parameter persisted
T/F if this keytip should be persisted, default is false
Returns
Unique ID for this keytip
method unregister
unregister: ( keytipToRemove: IKeytipProps, uniqueID: string, persisted?: boolean) => void;
Unregisters a keytip
Parameter keytipToRemove
IKeytipProps of the keytip to remove
Parameter uniqueID
Unique ID of this keytip
Parameter persisted
T/F if this keytip should be persisted, default is false
method update
update: (keytipProps: IKeytipProps, uniqueID: string) => void;
Update a keytip
Parameter keytipProps
Keytip to update
Parameter uniqueID
Unique ID of this keytip
class LabelBase
class LabelBase extends React.Component<ILabelProps, {}> {}
method render
render: () => JSX.Element;
class LayerBase
class LayerBase extends React.Component<ILayerProps, ILayerBaseState> {}
constructor
constructor(props: ILayerProps);
property defaultProps
static defaultProps: ILayerProps;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => React.ReactNode;
class LayerHost
class LayerHost extends React.Component<ILayerHostProps> implements ILayerHost {}
constructor
constructor(props: ILayerHostProps);
property hostId
hostId: string;
property rootRef
rootRef: React.RefObject<HTMLDivElement>;
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method notifyLayersChanged
notifyLayersChanged: () => void;
method render
render: () => JSX.Element;
method shouldComponentUpdate
shouldComponentUpdate: () => boolean;
class LinkBase
class LinkBase extends React.Component<ILinkProps, {}> implements ILink {}
constructor
constructor(props: ILinkProps);
method focus
focus: () => void;
method render
render: () => JSX.Element;
class List
class List<T = any> extends React.Component<IListProps<T>, IListState<T>> implements IList {}
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.
constructor
constructor(props: IListProps<T>);
property defaultProps
static defaultProps: { startIndex: number; onRenderCell: ( item: any, index: number, containsFocus: boolean ) => JSX.Element; onRenderCellConditional: undefined; renderedWindowsAhead: number; renderedWindowsBehind: number;};
property pageRefs
readonly pageRefs: Readonly<Record<string, unknown>>;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( previousProps: IListProps, previousState: IListState<T>) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method forceUpdate
forceUpdate: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: <U = any>( nextProps: IListProps<U>, previousState: IListState<U>) => IListState<U>;
method getStartItemIndexInView
getStartItemIndexInView: (measureItem?: (itemIndex: number) => number) => number;
method getTotalListHeight
getTotalListHeight: () => number;
Get the current height the list and it's pages.
method render
render: () => JSX.Element | null;
method scrollToIndex
scrollToIndex: ( index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode) => void;
Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback to measure the height of an individual item is specified, will only scroll to bring the specific item into view.
Note: with items of variable height and no passed in
getPageHeight
method, the list might jump after scrolling when windows before/ahead are being rendered, and the estimated height is replaced using actual elements.Parameter index
Index of item to scroll to
Parameter measureItem
Optional callback to measure the height of an individual item
Parameter scrollToMode
Optional defines where in the window the item should be positioned to when scrolling
method shouldComponentUpdate
shouldComponentUpdate: ( newProps: IListProps<T>, newState: IListState<T>) => boolean;
class ListPeoplePickerBase
class ListPeoplePickerBase extends MemberListPeoplePicker {}
MemberList layout. The selected people show up below the search box.
property defaultProps
static defaultProps: { onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element; onRenderSuggestionsItem: ( personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined ) => JSX.Element; createGenericItem: typeof createGenericItem;};
Default props for ListPeoplePicker.
class MaskedTextField
class MaskedTextField extends React.Component<IMaskedTextFieldProps, IMaskedTextFieldState> implements ITextField {}
constructor
constructor(props: IMaskedTextFieldProps);
property defaultProps
static defaultProps: IMaskedTextFieldProps;
property selectionEnd
readonly selectionEnd: number;
property selectionStart
readonly selectionStart: number;
property value
readonly value: string;
Returns
The value of all filled format characters or undefined if not all format characters are filled
method blur
blur: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
method select
select: () => void;
method setSelectionEnd
setSelectionEnd: (value: number) => void;
method setSelectionRange
setSelectionRange: (start: number, end: number) => void;
method setSelectionStart
setSelectionStart: (value: number) => void;
method setValue
setValue: (newValue: string) => void;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: IMaskedTextFieldProps) => void;
class MemberListPeoplePicker
class MemberListPeoplePicker extends BasePickerListBelow< IPersonaProps, IPeoplePickerProps> {}
class MessageBarBase
class MessageBarBase extends React.Component<IMessageBarProps, IMessageBarState> {}
constructor
constructor(props: IMessageBarProps);
property defaultProps
static defaultProps: IMessageBarProps;
method render
render: () => JSX.Element;
class MessageBarButton
class MessageBarButton extends React.Component<IButtonProps, {}> {}
method render
render: () => JSX.Element;
class ModalBase
class ModalBase extends React.Component<IModalProps, IDialogState> implements IModal {}
constructor
constructor(props: IModalProps);
property defaultProps
static defaultProps: IModalProps;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: IModalProps, prevState: IDialogState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => void;
method render
render: () => JSX.Element | null;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: IModalProps) => void;
class NavBase
class NavBase extends React.Component<INavProps, INavState> implements INav {}
constructor
constructor(props: INavProps);
property defaultProps
static defaultProps: INavProps;
property selectedKey
readonly selectedKey: string;
method focus
focus: (forceIntoFirstElement?: boolean) => boolean;
Sets focus to the first tabbable item in the zone.
Parameter forceIntoFirstElement
If true, focus will be forced into the first element, even if focus is already in the focus zone.
Returns
True if focus could be set to an active element, false if no operation was taken.
method render
render: () => JSX.Element | null;
class NormalPeoplePickerBase
class NormalPeoplePickerBase extends BasePeoplePicker {}
Standard People Picker.
property defaultProps
static defaultProps: { onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element; onRenderSuggestionsItem: ( personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps<any> | undefined ) => JSX.Element; createGenericItem: typeof createGenericItem;};
Default props for NormalPeoplePicker.
class OverflowSetBase
class OverflowSetBase extends React.Component<IOverflowSetProps, {}> implements IOverflowSet {}
constructor
constructor(props: IOverflowSetProps);
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: (forceIntoFirstElement?: boolean) => boolean;
Sets focus to the first tabbable item in the OverflowSet.
Parameter forceIntoFirstElement
If true, focus will be forced into the first element, even if focus is already in theOverflowSet
Returns
True if focus could be set to an active element, false if no operation was taken.
method focusElement
focusElement: (childElement?: HTMLElement) => boolean;
Sets focus to a specific child element within the OverflowSet.
Parameter childElement
The child element within the zone to focus.
Returns
True if focus could be set to an active element, false if no operation was taken.
method render
render: () => JSX.Element;
method UNSAFE_componentWillUpdate
UNSAFE_componentWillUpdate: () => void;
class OverlayBase
class OverlayBase extends React.Component<IOverlayProps, {}> {}
constructor
constructor(props: IOverlayProps);
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
class PanelBase
class PanelBase extends React.Component<IPanelProps, IPanelState> implements IPanel {}
constructor
constructor(props: IPanelProps);
property defaultProps
static defaultProps: IPanelProps;
property dismiss
dismiss: (ev?: React.SyntheticEvent<HTMLElement, Event> | undefined) => void;
property isActive
readonly isActive: boolean;
isActive is true when panel is open or opening.
method close
close: () => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( previousProps: IPanelProps, previousState: IPanelState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: Readonly<IPanelProps>, prevState: Readonly<IPanelState>) => Partial<IPanelState> | null;
method open
open: () => void;
method render
render: () => JSX.Element | null;
class PersonaBase
class PersonaBase extends React.Component<IPersonaProps, {}> {}
Persona with no default styles. [Use the
styles
API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
constructor
constructor(props: IPersonaProps);
property defaultProps
static defaultProps: IPersonaProps;
method render
render: () => JSX.Element;
class PersonaCoinBase
class PersonaCoinBase extends React.Component<IPersonaCoinProps, IPersonaState> {}
PersonaCoin with no default styles. [Use the
getStyles
API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
constructor
constructor(props: IPersonaCoinProps);
property defaultProps
static defaultProps: IPersonaCoinProps;
method render
render: () => JSX.Element | null;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (nextProps: IPersonaCoinProps) => void;
class PivotBase
class PivotBase extends React.Component<IPivotProps, IPivotState> {}
Usage:
Pivot #1 Pivot #2 Pivot #3
constructor
constructor(props: IPivotProps);
method focus
focus: () => void;
Sets focus to the first pivot tab.
method render
render: () => JSX.Element;
class PivotItem
class PivotItem extends React.Component<IPivotItemProps, {}> {}
constructor
constructor(props: IPivotItemProps);
method render
render: () => JSX.Element;
class PlainCardBase
class PlainCardBase extends React.Component<IPlainCardProps, {}> {}
constructor
constructor(props: IPlainCardProps);
method render
render: () => JSX.Element;
class Popup
class Popup extends React.Component<IPopupProps, IPopupState> {}
This adds accessibility to Dialog and Panel controls
constructor
constructor(props: IPopupProps);
property defaultProps
static defaultProps: IPopupProps;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
method UNSAFE_componentWillMount
UNSAFE_componentWillMount: () => void;
class PositioningContainer
class PositioningContainer extends React.Component<IPositioningContainerProps, IPositioningContainerState> implements PositioningContainer {}
constructor
constructor(props: IPositioningContainerProps);
property defaultProps
static defaultProps: IPositioningContainerProps;
property dismiss
dismiss: ( ev?: | Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
Deprecated, use
onResize
instead.Deprecated
Use
onResize
instead.
property onResize
onResize: ( ev?: | Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element | null;
method UNSAFE_componentWillMount
UNSAFE_componentWillMount: () => void;
method UNSAFE_componentWillUpdate
UNSAFE_componentWillUpdate: (newProps: IPositioningContainerProps) => void;
class PrimaryButton
class PrimaryButton extends React.Component<IButtonProps, {}> {}
method render
render: () => JSX.Element;
class ProgressIndicatorBase
class ProgressIndicatorBase extends React.Component<IProgressIndicatorProps, {}> {}
ProgressIndicator with no default styles. [Use the
styles
API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
constructor
constructor(props: IProgressIndicatorProps);
property defaultProps
static defaultProps: { label: string; description: string; width: number };
method render
render: () => JSX.Element;
class RatingBase
class RatingBase extends React.Component<IRatingProps, IRatingState> {}
constructor
constructor(props: IRatingProps);
property defaultProps
static defaultProps: IRatingProps;
method render
render: () => JSX.Element;
class ResizeGroupBase
class ResizeGroupBase extends React.Component< IResizeGroupProps, IResizeGroupState> {}
constructor
constructor(props: IResizeGroupProps);
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: IResizeGroupProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method remeasure
remeasure: () => void;
method render
render: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (nextProps: IResizeGroupProps) => void;
class ScrollablePaneBase
class ScrollablePaneBase extends React.Component<IScrollablePaneProps, IScrollablePaneState> implements IScrollablePane {}
constructor
constructor(props: IScrollablePaneProps);
property addSticky
addSticky: (sticky: Sticky) => void;
property contentContainer
readonly contentContainer: HTMLDivElement;
property getScrollPosition
getScrollPosition: () => number;
property notifySubscribers
notifySubscribers: () => void;
property removeSticky
removeSticky: (sticky: Sticky) => void;
property root
readonly root: HTMLDivElement;
property sortSticky
sortSticky: (sticky: Sticky, sortAgain?: boolean | undefined) => void;
property stickyAbove
readonly stickyAbove: HTMLDivElement;
property stickyBelow
readonly stickyBelow: HTMLDivElement;
property subscribe
subscribe: (handler: Function) => void;
property syncScrollSticky
syncScrollSticky: (sticky: Sticky) => void;
property unsubscribe
unsubscribe: (handler: Function) => void;
property updateStickyRefHeights
updateStickyRefHeights: () => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: IScrollablePaneProps, prevState: IScrollablePaneState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method forceLayoutUpdate
forceLayoutUpdate: () => void;
method render
render: () => JSX.Element;
method setStickiesDistanceFromTop
setStickiesDistanceFromTop: () => void;
method shouldComponentUpdate
shouldComponentUpdate: ( nextProps: IScrollablePaneProps, nextState: IScrollablePaneState) => boolean;
class SearchBoxBase
class SearchBoxBase extends React.Component<ISearchBoxProps, ISearchBoxState> {}
constructor
constructor(props: ISearchBoxProps);
property defaultProps
static defaultProps: Pick< ISearchBoxProps, 'disableAnimation' | 'clearButtonProps'>;
method focus
focus: () => void;
Sets focus to the search box input field
method hasFocus
hasFocus: () => boolean;
Returns whether or not the SearchBox has focus
method render
render: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: ISearchBoxProps) => void;
class SelectedPeopleList
class SelectedPeopleList extends BasePeopleSelectedItemsList {}
Standard People Picker.
property defaultProps
static defaultProps: any;
property renderItems
protected renderItems: () => JSX.Element[];
class SelectionZone
class SelectionZone extends React.Component< ISelectionZoneProps, ISelectionZoneState> {}
constructor
constructor(props: ISelectionZoneProps);
property defaultProps
static defaultProps: { isSelectedOnFocus: boolean; toggleWithoutModifierPressed: boolean; selectionMode: SelectionMode; selectionClearedOnEscapePress: boolean;};
property ignoreNextFocus
ignoreNextFocus: () => void;
In some cases, the consuming scenario requires to set focus on a row without having SelectionZone react to the event. Note that focus events in IE <= 11 will occur asynchronously after .focus() has been called on an element, so we need a flag to store the idea that we will bypass the "next" focus event that occurs. This method does that.
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (previousProps: ISelectionZoneProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: ISelectionZoneProps, prevState: ISelectionZoneState) => ISelectionZoneState;
method render
render: () => JSX.Element;
class ShimmerBase
class ShimmerBase extends React.Component<IShimmerProps, IShimmerState> {}
constructor
constructor(props: IShimmerProps);
property defaultProps
static defaultProps: IShimmerProps;
method componentDidUpdate
componentDidUpdate: (prevProps: IShimmerProps) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
class ShimmeredDetailsListBase
class ShimmeredDetailsListBase extends React.Component< IShimmeredDetailsListProps, {}> {}
constructor
constructor(props: IShimmeredDetailsListProps);
method render
render: () => JSX.Element;
class SliderBase
class SliderBase extends React.Component<ISliderProps, ISliderState> implements ISlider {}
constructor
constructor(props: ISliderProps);
property defaultProps
static defaultProps: ISliderProps;
property lowerValue
readonly lowerValue: number;
property range
readonly range: [number, number];
property value
readonly value: number;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => void;
method render
render: () => React.ReactElement<{}>;
class SpinButton
class SpinButton extends React.Component<ISpinButtonProps, ISpinButtonState> implements ISpinButton {}
constructor
constructor(props: ISpinButtonProps);
property defaultProps
static defaultProps: Required< Pick< ISpinButtonProps, | 'disabled' | 'label' | 'step' | 'min' | 'max' | 'labelPosition' | 'incrementButtonIcon' | 'decrementButtonIcon' >>;
property value
readonly value: string;
Gets the value of the spin button.
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: (newProps: ISpinButtonProps) => void;
Invoked when a component is receiving new props. This method is not called for the initial render.
class SpinnerBase
class SpinnerBase extends React.Component<ISpinnerProps, any> {}
property defaultProps
static defaultProps: ISpinnerProps;
method render
render: () => JSX.Element;
class Sticky
class Sticky extends React.Component<IStickyProps, IStickyState> {}
constructor
constructor(props: IStickyProps);
property canStickyBottom
readonly canStickyBottom: boolean;
property canStickyTop
readonly canStickyTop: boolean;
property contextType
static contextType: React.Context<IScrollablePaneContext>;
property defaultProps
static defaultProps: IStickyProps;
property nonStickyContent
readonly nonStickyContent: HTMLDivElement;
property placeholder
readonly placeholder: HTMLDivElement;
property root
readonly root: HTMLDivElement;
property stickyContentBottom
readonly stickyContentBottom: HTMLDivElement;
property stickyContentTop
readonly stickyContentTop: HTMLDivElement;
property syncScroll
syncScroll: (container: HTMLElement) => void;
method addSticky
addSticky: (stickyContent: HTMLDivElement) => void;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: IStickyProps, prevState: IStickyState) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
method resetSticky
resetSticky: () => void;
method setDistanceFromTop
setDistanceFromTop: (container: HTMLDivElement) => void;
method shouldComponentUpdate
shouldComponentUpdate: ( nextProps: IStickyProps, nextState: IStickyState) => boolean;
class Suggestions
class Suggestions<T> extends React.Component< ISuggestionsProps<T>, ISuggestionsState> {}
constructor
constructor(suggestionsProps: ISuggestionsProps<T>);
property tryHandleKeyDown
tryHandleKeyDown: (keyCode: number, currentSuggestionIndex: number) => boolean;
Returns true if the event was handled, false otherwise
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method executeSelectedAction
executeSelectedAction: () => void;
method focusAboveSuggestions
focusAboveSuggestions: () => void;
method focusBelowSuggestions
focusBelowSuggestions: () => void;
method focusSearchForMoreButton
focusSearchForMoreButton: () => void;
method hasSuggestedAction
hasSuggestedAction: () => boolean;
method hasSuggestedActionSelected
hasSuggestedActionSelected: () => boolean;
method render
render: () => JSX.Element;
method scrollSelected
scrollSelected: () => void;
class SuggestionsControl
class SuggestionsControl<T> extends React.Component< ISuggestionsControlProps<T>, ISuggestionsControlState<T>> {}
Class when used with SuggestionsStore, renders a suggestions control with customizable headers and footers
constructor
constructor(suggestionsProps: ISuggestionsControlProps<T>);
property currentSuggestion
readonly currentSuggestion: ISuggestionModel<T>;
property currentSuggestionIndex
readonly currentSuggestionIndex: number;
property selectedElement
readonly selectedElement: HTMLDivElement;
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method executeSelectedAction
executeSelectedAction: () => void;
method handleKeyDown
handleKeyDown: (keyCode: number) => boolean;
Handles the key down, returns true, if the event was handled, false otherwise
Parameter keyCode
The keyCode to handle
method hasSelection
hasSelection: () => boolean;
method hasSuggestionSelected
hasSuggestionSelected: () => boolean;
method removeSuggestion
removeSuggestion: (index?: number) => void;
method render
render: () => JSX.Element;
method renderFooterItems
protected renderFooterItems: () => JSX.Element | null;
method renderHeaderItems
protected renderHeaderItems: () => JSX.Element | null;
method resetSelectedItem
protected resetSelectedItem: () => void;
Resets the selected state and selects the first selectable item
method scrollSelected
scrollSelected: () => void;
method selectFirstItem
protected selectFirstItem: () => void;
Selects the first item
method selectLastItem
protected selectLastItem: () => void;
Selects the last item
method selectNextItem
protected selectNextItem: ( itemType: SuggestionItemType, originalItemType?: SuggestionItemType) => void;
Selects the next selectable item
method selectPreviousItem
protected selectPreviousItem: ( itemType: SuggestionItemType, originalItemType?: SuggestionItemType) => void;
Selects the previous selectable item
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: ( newProps: ISuggestionsControlProps<T>) => void;
class SuggestionsController
class SuggestionsController<T> {}
constructor
constructor();
property currentIndex
currentIndex: number;
property currentSuggestion
currentSuggestion: ISuggestionModel<T>;
property suggestions
suggestions: ISuggestionModel<T>[];
method convertSuggestionsToSuggestionItems
convertSuggestionsToSuggestionItems: ( suggestions: Array<ISuggestionModel<T> | T>) => ISuggestionModel<T>[];
method createGenericSuggestion
createGenericSuggestion: (itemToConvert: ISuggestionModel<T> | T) => void;
method deselectAllSuggestions
deselectAllSuggestions: () => void;
method getCurrentItem
getCurrentItem: () => ISuggestionModel<T>;
method getSuggestionAtIndex
getSuggestionAtIndex: (index: number) => ISuggestionModel<T>;
method getSuggestions
getSuggestions: () => ISuggestionModel<T>[];
method hasSelectedSuggestion
hasSelectedSuggestion: () => boolean;
method nextSuggestion
nextSuggestion: () => boolean;
Increments the suggestion index and gets the next suggestion in the list.
method previousSuggestion
previousSuggestion: () => boolean;
Decrements the suggestion index and gets the previous suggestion in the list.
method removeSuggestion
removeSuggestion: (index: number) => void;
method setSelectedSuggestion
setSelectedSuggestion: (index: number) => void;
method updateSuggestions
updateSuggestions: (newSuggestions: T[], selectedIndex?: number) => void;
class SuggestionsCore
class SuggestionsCore<T> extends React.Component<ISuggestionsCoreProps<T>, {}> {}
Class when used with SuggestionsStore, renders a basic suggestions control
constructor
constructor(suggestionsProps: ISuggestionsCoreProps<T>);
property currentIndex
currentIndex: number;
property currentSuggestion
currentSuggestion: ISuggestionModel<T>;
property selectedElement
readonly selectedElement: HTMLDivElement;
method componentDidUpdate
componentDidUpdate: () => void;
method deselectAllSuggestions
deselectAllSuggestions: () => void;
method getCurrentItem
getCurrentItem: () => ISuggestionModel<T>;
method getSuggestionAtIndex
getSuggestionAtIndex: (index: number) => ISuggestionModel<T>;
method hasSuggestionSelected
hasSuggestionSelected: () => boolean;
method nextSuggestion
nextSuggestion: () => boolean;
Increments the selected suggestion index
method previousSuggestion
previousSuggestion: () => boolean;
Decrements the selected suggestion index
method removeSuggestion
removeSuggestion: (index: number) => void;
method render
render: () => JSX.Element;
method scrollSelected
scrollSelected: () => void;
method setSelectedSuggestion
setSelectedSuggestion: (index: number) => void;
class SuggestionsHeaderFooterItem
class SuggestionsHeaderFooterItem extends React.Component< ISuggestionsHeaderFooterItemProps, {}> {}
constructor
constructor(props: ISuggestionsHeaderFooterItemProps);
method render
render: () => JSX.Element;
class SuggestionsItem
class SuggestionsItem<T> extends React.Component<ISuggestionItemProps<T>, {}> {}
constructor
constructor(props: ISuggestionItemProps<T>);
method render
render: () => JSX.Element;
class SuggestionsStore
class SuggestionsStore<T> {}
constructor
constructor(options?: SuggestionsStoreOptions<T>);
property suggestions
suggestions: ISuggestionModel<T>[];
method convertSuggestionsToSuggestionItems
convertSuggestionsToSuggestionItems: ( suggestions: Array<ISuggestionModel<T> | T>) => ISuggestionModel<T>[];
method getSuggestionAtIndex
getSuggestionAtIndex: (index: number) => ISuggestionModel<T>;
method getSuggestions
getSuggestions: () => ISuggestionModel<T>[];
method removeSuggestion
removeSuggestion: (index: number) => void;
method updateSuggestions
updateSuggestions: (newSuggestions: T[]) => void;
class SwatchColorPickerBase
class SwatchColorPickerBase extends React.Component< ISwatchColorPickerProps, ISwatchColorPickerState> {}
constructor
constructor(props: ISwatchColorPickerProps);
property defaultProps
static defaultProps: ISwatchColorPickerProps;
method componentWillUnmount
componentWillUnmount: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( newProps: ISwatchColorPickerProps, state: ISwatchColorPickerState) => { selectedIndex: number | undefined } | null;
method render
render: () => JSX.Element | null;
class TagPickerBase
class TagPickerBase extends BasePicker<ITag, ITagPickerProps> {}
constructor
constructor(props: ITagPickerProps);
property defaultProps
static defaultProps: { onRenderItem: (props: ITagItemProps) => JSX.Element; onRenderSuggestionsItem: (props: ITag) => JSX.Element;};
class TeachingBubbleBase
class TeachingBubbleBase extends React.Component< ITeachingBubbleProps, ITeachingBubbleState> {}
constructor
constructor(props: ITeachingBubbleProps);
property defaultProps
static defaultProps: { calloutProps: { beakWidth: number; gapSpace: number; setInitialFocus: boolean; doNotLayer: boolean; directionalHint: 12; };};
property rootElement
rootElement: React.RefObject<HTMLDivElement>;
method focus
focus: () => void;
method render
render: () => JSX.Element;
class TeachingBubbleContentBase
class TeachingBubbleContentBase extends React.Component< ITeachingBubbleProps, ITeachingBubbleState> {}
constructor
constructor(props: ITeachingBubbleProps);
property rootElement
rootElement: React.RefObject<HTMLDivElement>;
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => void;
method render
render: () => JSX.Element;
class TextFieldBase
class TextFieldBase extends React.Component<ITextFieldProps, ITextFieldState, ITextFieldSnapshot> implements ITextField {}
constructor
constructor(props: ITextFieldProps);
property defaultProps
static defaultProps: ITextFieldProps;
property selectionEnd
readonly selectionEnd: number;
Gets the selection end of the text field
property selectionStart
readonly selectionStart: number;
Gets the selection start of the text field
property value
readonly value: string;
Gets the current value of the text field.
method blur
blur: () => void;
Blurs the text field.
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: ( prevProps: ITextFieldProps, prevState: ITextFieldState, snapshot: ITextFieldSnapshot) => void;
method componentWillUnmount
componentWillUnmount: () => void;
method focus
focus: () => void;
Sets focus on the text field
method getSnapshotBeforeUpdate
getSnapshotBeforeUpdate: ( prevProps: ITextFieldProps, prevState: ITextFieldState) => ITextFieldSnapshot | null;
method render
render: () => JSX.Element;
method select
select: () => void;
Selects the text field
method setSelectionEnd
setSelectionEnd: (value: number) => void;
Sets the selection end of the text field to a specified value
method setSelectionRange
setSelectionRange: (start: number, end: number) => void;
Sets the start and end positions of a selection in a text field.
Parameter start
Index of the start of the selection.
Parameter end
Index of the end of the selection.
method setSelectionStart
setSelectionStart: (value: number) => void;
Sets the selection start of the text field to a specified value
class ThemeGenerator
class ThemeGenerator {}
method getThemeAsCode
static getThemeAsCode: (slotRules: IThemeRules) => any;
Gets code-formatted load theme blob that can be copy and pasted. Only used for the old theme designer, where loadTheme usage is acceptable, unlike in the new theme designer.
method getThemeAsCodeWithCreateTheme
static getThemeAsCodeWithCreateTheme: (slotRules: IThemeRules) => any;
Gets code-formatted load theme blob, specifically for the new theme designer, aka.ms/themedesigner. Shouldn't use loadTheme like the old theme designer since it's deprecated. We want to use the theme object from createTheme and use the Customizations.applySettings API instead.
method getThemeAsJson
static getThemeAsJson: (slotRules: IThemeRules) => any;
Gets the JSON-formatted blob that describes the theme, usable with the REST request endpoints:
{ [theme slot name as string] : [color as string],"tokenName": "#f00f00","tokenName2": "#ba2ba2",... }
method getThemeAsSass
static getThemeAsSass: (slotRules: IThemeRules) => any;
Gets the theme as a list of SASS variables that can be used in code
$tokenName: "[theme:tokenName, default:#f00f00]";$tokenName2: "[theme:tokenName2, default:#ba2ba2]";...
method getThemeForPowerShell
static getThemeForPowerShell: (slotRules: IThemeRules) => any;
Gets the theme formatted for PowerShell scripts
@{"tokenName" = "#f00f00";"tokenName2" = "#ba2ba2";...}
method insureSlots
static insureSlots: (slotRules: IThemeRules, isInverted: boolean) => void;
Sets the color of each slot based on its rule. Slots that don't inherit must have a color already. If this completes without error, then the theme is ready to use. (All slots will have a color.) setSlot() can be called before this, but this must be called before getThemeAs*(). Does not override colors of rules where isCustomized is true (i.e. doesn't override existing customizations).
method setSlot
static setSlot: ( rule: IThemeSlotRule, color: string | IColor, isInverted?: boolean, isCustomization?: boolean, overwriteCustomColor?: boolean) => void;
Sets an IThemeSlotRule to the given color and cascades it to the rest of the theme, updating other IThemeSlotRules in the theme that inherit from that color.
Parameter isInverted
whether it's a dark theme or not, which affects the algorithm used to generate shades
Parameter isCustomization
should be true only if it's a user action, and indicates overwriting the slot's inheritance (if any)
Parameter overwriteCustomColor
A slot could have a generated color based on its inheritance rules (isCustomized is false), or a custom color based on user input (isCustomized is true). This bool tells us whether to override existing customized colors.
class ToggleBase
class ToggleBase extends React.Component<IToggleProps, IToggleState> implements IToggle {}
constructor
constructor(props: IToggleProps);
property checked
readonly checked: boolean;
Gets the current checked state of the toggle.
method focus
focus: () => void;
method getDerivedStateFromProps
static getDerivedStateFromProps: ( nextProps: Readonly<IToggleProps>, prevState: Readonly<IToggleState>) => Partial<IToggleState> | null;
method render
render: () => JSX.Element;
class TooltipBase
class TooltipBase extends React.Component<ITooltipProps, any> {}
property defaultProps
static defaultProps: Partial<ITooltipProps>;
method render
render: () => JSX.Element;
class TooltipHostBase
class TooltipHostBase extends React.Component<ITooltipHostProps, ITooltipHostState> implements ITooltipHost {}
constructor
constructor(props: ITooltipHostProps);
property defaultProps
static defaultProps: { delay: TooltipDelay };
property dismiss
dismiss: () => void;
property show
show: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => JSX.Element;
class VirtualizedComboBox
class VirtualizedComboBox extends React.Component<IComboBoxProps, {}> implements IComboBox {}
constructor
constructor(props: IComboBoxProps);
property selectedOptions
readonly selectedOptions: IComboBoxOption[];
All selected options
method dismissMenu
dismissMenu: () => void;
method focus
focus: (shouldOpenOnFocus?: boolean, useFocusAsync?: boolean) => boolean;
method render
render: () => JSX.Element;
Interfaces
interface IAccessiblePopupProps
interface IAccessiblePopupProps {}
property closeButtonAriaLabel
closeButtonAriaLabel?: string;
Aria label on close button.
property elementToFocusOnDismiss
elementToFocusOnDismiss?: HTMLElement;
Sets the element to focus on when exiting the control's FocusTrapZone.
property firstFocusableSelector
firstFocusableSelector?: string | (() => string);
Class name (not actual selector) for first focusable item. Do not append a dot.
property forceFocusInsideTrap
forceFocusInsideTrap?: boolean;
Whether control should force focus inside its focus trap zone.
property ignoreExternalFocusing
ignoreExternalFocusing?: boolean;
If false (the default), the control's FocusTrapZone will restore focus to the element which activated it once the trap zone is unmounted or disabled. Set to true to disable this behavior.
property isClickableOutsideFocusTrap
isClickableOutsideFocusTrap?: boolean;
Whether this control will allow clicks outside its FocusTrapZone.
interface IActivityItemClassNames
interface IActivityItemClassNames {}
property activityContent
activityContent?: string;
property activityPersona
activityPersona?: string;
property activityText
activityText?: string;
property activityTypeIcon
activityTypeIcon?: string;
property commentText
commentText?: string;
property personaContainer
personaContainer?: string;
property pulsingBeacon
pulsingBeacon?: string;
property root
root?: string;
property timeStamp
timeStamp?: string;
interface IActivityItemProps
interface IActivityItemProps extends React.AllHTMLAttributes<HTMLElement> {}
property activityDescription
activityDescription?: React.ReactNode[] | React.ReactNode;
An element describing the activity that took place. If no activityDescription, activityDescriptionText, or onRenderActivityDescription are included, no description of the activity is shown.
property activityDescriptionText
activityDescriptionText?: string;
Text describing the activity that occurred and naming the people involved in it. Deprecated, use
activityDescription
instead.Deprecated
Use
activityDescription
instead.
property activityIcon
activityIcon?: React.ReactNode;
An element containing an icon shown next to the activity item.
property activityPersonas
activityPersonas?: Array<IPersonaSharedProps>;
If activityIcon is not set, then the persona props in this array will be used as the icon for this activity item.
property animateBeaconSignal
animateBeaconSignal?: boolean;
Enables/Disables the beacon that radiates from the center of the center of the activity icon. Signals an activity has started.
property beaconColorOne
beaconColorOne?: string;
Beacon color one
property beaconColorTwo
beaconColorTwo?: string;
Beacon color two
property comments
comments?: React.ReactNode[] | React.ReactNode;
An element containing the text of comments or @mention messages. If no comments, commentText, or onRenderComments are included, no comments are shown.
property commentText
commentText?: string;
Text of comments or @mention messages. Deprecated, use
comments
instead.Deprecated
Use
comments
instead.
property isCompact
isCompact?: boolean;
Indicated if the compact styling should be used.
property onRenderActivityDescription
onRenderActivityDescription?: IRenderFunction<IActivityItemProps>;
A renderer for the description of the current activity.
property onRenderComments
onRenderComments?: IRenderFunction<IActivityItemProps>;
A renderer that adds the text of a comment below the activity description.
property onRenderIcon
onRenderIcon?: IRenderFunction<IActivityItemProps>;
A renderer to create the icon next to the activity item.
property onRenderTimeStamp
onRenderTimeStamp?: IRenderFunction<IActivityItemProps>;
A renderer adds a time stamp. If not included, timeStamp is shown as plain text below the activity.
property styles
styles?: IActivityItemStyles;
Optional styling for the elements within the Activity Item.
property timeStamp
timeStamp?: string | React.ReactNode[] | React.ReactNode;
Element shown as a timestamp on this activity. If not included, no timestamp is shown.
interface IActivityItemStyles
interface IActivityItemStyles {}
property activityContent
activityContent?: IStyle;
Styles applied to the main container of the activity's description.
property activityPersona
activityPersona?: IStyle;
Styles applied to the persona of the user that did this activity.
property activityText
activityText?: IStyle;
Styles applied to the activity's description.
property activityTypeIcon
activityTypeIcon?: IStyle;
Styles applied to the icon indicating the type of the activity. Only shown when personas are unavailable.
property commentText
commentText?: IStyle;
Styles applied to the text of comments.
property doublePersona
doublePersona?: IStyle;
Styles applied to personas when two users are involved in a single activity.
property isCompactContent
isCompactContent?: IStyle;
Styles applied to main text container in the compact variant.
property isCompactIcon
isCompactIcon?: IStyle;
Styles applied to personas and icons in the compact variant.
property isCompactPersona
isCompactPersona?: IStyle;
Styles applied to personas in the compact variant.
property isCompactPersonaContainer
isCompactPersonaContainer?: IStyle;
Styles applied to a wrapper around personas in the compact variant.
property isCompactRoot
isCompactRoot?: IStyle;
Styles applied to root in the compact variant.
property isCompactTimeStamp
isCompactTimeStamp?: IStyle;
Styles applied to the timestamp in compact mode. This can occur if a host overrides the render behavior to force the timestamp to render.
property personaContainer
personaContainer?: IStyle;
Styles applied to the container of the persona image or activity type icon.
property pulsingBeacon
pulsingBeacon?: IStyle;
Styles applied to the root activity item container.
property root
root?: IStyle;
Styles applied to the root activity item container.
property timeStamp
timeStamp?: IStyle;
Styles applied to the timestamp at the end of each activity item.
interface IAnnouncedProps
interface IAnnouncedProps extends React.Props<AnnouncedBase>, React.HTMLAttributes<HTMLDivElement> {}
property 'aria-live'
'aria-live'?: 'off' | 'polite' | 'assertive';
Priority with which the screen reader should treat updates to this region 'polite'
property as
as?: React.ElementType;
Optionally render the root of this component as another component type or primitive. The custom type **must** preserve any children or native props passed in. 'div'
property message
message?: string;
The status message provided as screen reader output
property styles
styles?: IStyleFunctionOrObject<{}, IAnnouncedStyles>;
Call to provide customized styling that will layer on top of the variant rules.
interface IAnnouncedStyles
interface IAnnouncedStyles {}
property root
root: IStyle;
Style override for the root element.
property screenReaderText
screenReaderText: IStyle;
Style override for the screen reader text.
interface IAutofill
interface IAutofill {}
property cursorLocation
cursorLocation: number | null;
The current index of the cursor in the input area. Returns -1 if the input element is not ready.
property inputElement
inputElement: HTMLInputElement | null;
The current input element.
property isValueSelected
isValueSelected: boolean;
A boolean for whether or not there is a value selected in the input area.
property selectionEnd
selectionEnd: number | null;
the current index of where the selection ends. Returns -1 if the input element is not ready.
property selectionStart
selectionStart: number | null;
The current index of where the selection starts. Returns -1 if the input element is not ready.
property value
value: string;
The current text value that the user has entered.
method clear
clear: () => void;
Clear all text in the input. Sets value to '';
method focus
focus: () => void;
Focus the input element.
interface IAutofillProps
interface IAutofillProps extends React.InputHTMLAttributes<HTMLInputElement | Autofill> {}
property componentRef
componentRef?: IRefObject<IAutofill>;
Gets the compoonent ref.
property defaultVisibleValue
defaultVisibleValue?: string;
The default value to be visible. This is different from placeholder because it actually sets the current value of the picker Note: This will only be set upon component creation and will not update with subsequent prop updates.
property enableAutofillOnKeyPress
enableAutofillOnKeyPress?: KeyCodes[];
When the user uses left arrow, right arrow, clicks, or deletes text autofill is disabled Since the user has taken control. It is automatically reenabled when the user enters text and the cursor is at the end of the text in the input box. This specifies other key presses that will reenabled autofill.
property onInputChange
onInputChange?: (value: string, composing: boolean) => string;
A callback used to modify the input string.
Parameter composing
true if the change event was triggered while the inner input was in the middle of a multi-character composition. (for example, jp-hiragana IME input)
property onInputValueChange
onInputValueChange?: (newValue?: string, composing?: boolean) => void;
A callback for when the current input value changes.
Parameter composing
true if the change event was triggered while the inner input was in the middle of a multi-character composition. (for example, jp-hiragana IME input)
property preventValueSelection
preventValueSelection?: boolean;
Should the value of the input be selected? True if we're focused on our input, false otherwise. We need to explicitly not select the text in the autofill if we are no longer focused. In IE11, selecting a input will also focus the input, causing other element's focus to be stolen.
property shouldSelectFullInputValueInComponentDidUpdate
shouldSelectFullInputValueInComponentDidUpdate?: () => boolean;
Handler for checking if the full value of the input should be seleced in componentDidUpdate
Returns
- should the full value of the input be selected?
property suggestedDisplayValue
suggestedDisplayValue?: string;
The suggested autofill value that will display.
property updateValueInWillReceiveProps
updateValueInWillReceiveProps?: () => string | null;
Handler for checking and updating the value if needed in componentWillReceiveProps
Returns
- the updated value to set, if needed
interface IAutofillState
interface IAutofillState {}
property displayValue
displayValue?: string;
interface IBaseAutoFill
interface IBaseAutoFill extends IAutofill {}
Deprecated, do not use.
Deprecated
do not use, will be removed in 6.0
interface IBaseAutoFillProps
interface IBaseAutoFillProps extends IAutofillProps {}
Deprecated, do not use.
Deprecated
do not use, will be removed in 6.0
interface IBaseButtonProps
interface IBaseButtonProps extends IButtonProps {}
property baseClassName
baseClassName?: string;
property variantClassName
variantClassName?: string;
interface IBaseButtonState
interface IBaseButtonState {}
property menuHidden
menuHidden: boolean;
interface IBaseExtendedPicker
interface IBaseExtendedPicker<T> {}
property focus
focus: () => void;
Sets focus to the input.
property forceResolve
forceResolve?: () => void;
Forces the picker to resolve
property items
items: T[] | undefined;
Gets the current value of the input.
interface IBaseExtendedPickerProps
interface IBaseExtendedPickerProps<T> {}
property className
className?: string;
ClassName for the picker.
property componentRef
componentRef?: IRefObject<IBaseExtendedPicker<T>>;
Ref of the component
property currentRenderedQueryString
currentRenderedQueryString?: string;
Current rendered query string that's corealte to current rendered result
property defaultSelectedItems
defaultSelectedItems?: T[];
Initial items that have already been selected and should appear in the people picker.
property disabled
disabled?: boolean;
Flag for disabling the picker.
property floatingPickerProps
floatingPickerProps: IBaseFloatingPickerProps<T>;
Floating picker properties
property focusZoneProps
focusZoneProps?: IFocusZoneProps;
Focus zone props
property headerComponent
headerComponent?: JSX.Element;
Header/title element for the picker
property inputProps
inputProps?: IInputProps;
Autofill input native props
property itemLimit
itemLimit?: number;
Restrict the amount of selectable items.
property onBlur
onBlur?: React.FocusEventHandler<HTMLInputElement | Autofill>;
A callback for when the user moves the focus away from the picker
property onChange
onChange?: (items?: T[]) => void;
A callback for when the selected list of items changes.
property onFocus
onFocus?: React.FocusEventHandler<HTMLInputElement | Autofill>;
A callback for when the user put focus on the picker
property onItemAdded
onItemAdded?: (addedItem: T) => void;
A callback on when an item was added to the selected item list
property onItemSelected
onItemSelected?: (selectedItem?: T) => T | PromiseLike<T>;
A callback to process a selection after the user selects a suggestion from the picker. The returned item will be added to the selected items list
property onItemsRemoved
onItemsRemoved?: (removedItems: T[]) => void;
A callback on when an item or items were removed from the selected item list
property onPaste
onPaste?: (pastedText: string) => T[];
A callback for when text is pasted into the input
property onRenderFloatingPicker
onRenderFloatingPicker: React.ComponentType<IBaseFloatingPickerProps<T>>;
Function that specifies how the floating picker will appear.
property onRenderSelectedItems
onRenderSelectedItems: React.ComponentType<IBaseSelectedItemsListProps<T>>;
Function that specifies how the floating picker will appear.
property selectedItems
selectedItems?: T[];
If using as a controlled component use selectedItems here instead of the SelectedItemsList
property selectedItemsListProps
selectedItemsListProps: IBaseSelectedItemsListProps<T>;
Selected items list properties
property suggestionItems
suggestionItems?: T[];
If using as a controlled component use suggestionItems here instead of FloatingPicker
interface IBaseExtendedPickerState
interface IBaseExtendedPickerState<T> {}
property queryString
queryString: string | null;
property selectedItems
selectedItems: T[] | null;
property suggestionItems
suggestionItems: T[] | null;
interface IBaseFloatingPicker
interface IBaseFloatingPicker {}
property hidePicker
hidePicker: () => void;
Hides the picker
property inputText
inputText: string;
Gets the input text
property isSuggestionsShown
isSuggestionsShown: boolean;
Whether the suggestions are shown
property onQueryStringChanged
onQueryStringChanged: (input: string) => void;
On queryString changed
property showPicker
showPicker: (updateValue?: boolean) => void;
Shows the picker
Parameter updateValue
Optional param to indicate whether to update the query string
property suggestions
suggestions: any[];
Gets the suggestions
interface IBaseFloatingPickerProps
interface IBaseFloatingPickerProps<T> extends React.ClassAttributes<any> {}
property calloutWidth
calloutWidth?: number;
Width for the suggestions callout
property className
className?: string;
ClassName for the picker.
property componentRef
componentRef?: IRefObject<IBaseFloatingPicker>;
property createGenericItem
createGenericItem?: (input: string, isValid: boolean) => ISuggestionModel<T>;
Function that specifies how arbitrary text entered into the well is handled.
property getTextFromItem
getTextFromItem?: (item: T, currentValue?: string) => string;
A callback to get text from an item. Used to autofill text in the pickers.
property inputElement
inputElement?: HTMLInputElement | null;
The input element to listen on events
property onChange
onChange?: (item: T) => void;
A callback for when a suggestion is clicked
property onInputChanged
onInputChanged?: (filter: string) => void;
A callback for when the input has been changed
property onRemoveSuggestion
onRemoveSuggestion?: (item: T) => void;
A callback for when an item is removed from the suggestion list
property onRenderSuggestionsItem
onRenderSuggestionsItem?: ( props: T, itemProps: ISuggestionItemProps<T>) => JSX.Element;
Function that specifies how an individual suggestion item will appear.
property onResolveSuggestions
onResolveSuggestions: ( filter: string, selectedItems?: T[]) => T[] | PromiseLike<T[]> | null;
A callback for what should happen when a person types text into the input. Returns the already selected items so the resolver can filter them out. If used in conjunction with resolveDelay this will only kick off after the delay throttle. Return null if using as a controlled component
property onSuggestionsHidden
onSuggestionsHidden?: () => void;
The callback that should be called when the suggestions are hiden
property onSuggestionsShown
onSuggestionsShown?: () => void;
The callback that should be called when the suggestions are shown
property onValidateInput
onValidateInput?: (input: string) => boolean;
A function used to validate if raw text entered into the well can be added
property onZeroQuerySuggestion
onZeroQuerySuggestion?: (selectedItems?: T[]) => T[] | PromiseLike<T[]> | null;
The suggestions to show on zero query, return null if using as a controlled component
property pickerCalloutProps
pickerCalloutProps?: ICalloutProps;
The properties that will get passed to the Callout component.
property pickerSuggestionsProps
pickerSuggestionsProps?: IBaseFloatingPickerSuggestionProps;
The properties that will get passed to the Suggestions component.
property resolveDelay
resolveDelay?: number;
The delay time in ms before resolving suggestions, which is kicked off when input has been changed. e.g. If a second input change happens within the resolveDelay time, the timer will start over. Only until after the timer completes will onResolveSuggestions be called.
property searchingText
searchingText?: ((props: { input: string }) => string) | string;
The text to display while searching for more results in a limited suggestions list
property selectedItems
selectedItems?: T[];
The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled component.
property showForceResolve
showForceResolve?: () => boolean;
The callback that should be called to see if the force resolve command should be shown
property suggestionItems
suggestionItems?: T[];
If using as a controlled component, the items to show in the suggestion list
property suggestionsStore
suggestionsStore: SuggestionsStore<T>;
The suggestions store
interface IBaseFloatingPickerState
interface IBaseFloatingPickerState {}
property didBind
didBind: boolean;
property queryString
queryString: string;
property suggestionsVisible
suggestionsVisible?: boolean;
interface IBasePicker
interface IBasePicker<T> {}
BasePicker component.
property completeSuggestion
completeSuggestion: (forceComplete?: boolean) => void;
When called, will take the currently selected suggestion and complete it. If called with forceComplete true, it will attempt to force the current suggestion to complete, must provide both createGenericSuggestion, so the text can be turned into an object in the right shape, and onValidateInput, so the object knows if it's correct or not.
property focus
focus: () => void;
Sets focus to the focus zone.
property focusInput
focusInput: () => void;
Set focus to the input
property items
items: T[] | undefined;
Gets the current value of the input.
interface IBasePickerProps
interface IBasePickerProps<T> extends React.Props<any> {}
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
property ['aria-label']
['aria-label']?: string;
Aria label for the picker component. Will be applied to the element with role="combobox" If it's supplied, the input element with also have aria-labelledby added and point to the element with role=combobox
property className
className?: string;
ClassName for the picker.
property componentRef
componentRef?: IRefObject<IBasePicker<T>>;
Optional callback to access the IBasePicker interface. Use this instead of ref for accessing the public methods and properties of the component.
property createGenericItem
createGenericItem?: ( input: string, ValidationState: ValidationState) => ISuggestionModel<T> | T;
Function that specifies how arbitrary text entered into the well is handled.
property defaultSelectedItems
defaultSelectedItems?: T[];
Initial items that have already been selected and should appear in the people picker.
property disabled
disabled?: boolean;
Flag for disabling the picker.
property enableSelectedSuggestionAlert
enableSelectedSuggestionAlert?: boolean;
Adds an additional alert for the currently selected suggestion. This prop should be set to true for IE11 and below, as it enables proper screen reader behavior for each suggestion (since aria-activedescendant does not work with IE11). It should not be set for modern browsers (Edge, Chrome).
property getTextFromItem
getTextFromItem?: (item: T, currentValue?: string) => string;
A callback to get text from an item. Used to autofill text in the pickers.
property inputProps
inputProps?: IInputProps;
AutoFill input native props
property itemLimit
itemLimit?: number;
Restrict the amount of selectable items.
property onBlur
onBlur?: React.FocusEventHandler<HTMLInputElement | Autofill>;
A callback for when the user moves the focus away from the picker
property onChange
onChange?: (items?: T[]) => void;
A callback for when the selected list of items changes.
property onDismiss
onDismiss?: (ev?: any, selectedItem?: T) => boolean | void;
A callback to override the default behavior of adding the selected suggestion on dismiss. If it returns true or nothing, the selected item will be added on dismiss. If false, the selected item will not be added on dismiss.
property onEmptyInputFocus
onEmptyInputFocus?: (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
A callback for what should happen when a user clicks within the input area.
Deprecated
Please use onEmptyResolveSuggestions instead, as the suggestions aren't about setting focus as they are about resolving suggestions when there is no input.
property onEmptyResolveSuggestions
onEmptyResolveSuggestions?: (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
A callback for what should happen when suggestions are shown without input provided. Returns the already selected items so the resolver can filter them out. If used in conjunction with resolveDelay this will only kick off after the delay throttle.
property onFocus
onFocus?: React.FocusEventHandler<HTMLInputElement | Autofill>;
A callback for when the user put focus on the picker
Deprecated
Use
inputProps.onFocus
instead
property onGetMoreResults
onGetMoreResults?: ( filter: string, selectedItems?: T[]) => T[] | PromiseLike<T[]>;
A callback that gets the rest of the results when a user clicks get more results.
property onInputChange
onInputChange?: (input: string) => string;
A callback used to modify the input string.
property onItemSelected
onItemSelected?: (selectedItem?: T) => T | PromiseLike<T> | null;
A callback to process a selection after the user selects something from the picker. If the callback returns null, the item will not be added to the picker.
property onRemoveSuggestion
onRemoveSuggestion?: (item: T) => void;
A callback for when an item is removed from the suggestion list
property onRenderItem
onRenderItem?: (props: IPickerItemProps<T>) => JSX.Element;
Function that specifies how the selected item will appear.
property onRenderSuggestionsItem
onRenderSuggestionsItem?: ( props: T, itemProps: ISuggestionItemProps<T>) => JSX.Element;
Function that specifies how an individual suggestion item will appear.
property onResolveSuggestions
onResolveSuggestions: ( filter: string, selectedItems?: T[]) => T[] | PromiseLike<T[]>;
A callback for what should happen when a person types text into the input. Returns the already selected items so the resolver can filter them out. If used in conjunction with resolveDelay this will only kick off after the delay throttle.
property onValidateInput
onValidateInput?: (input: string) => ValidationState;
A function used to validate if raw text entered into the well can be added into the selected items list
property pickerCalloutProps
pickerCalloutProps?: ICalloutProps;
The properties that will get passed to the Callout component.
property pickerSuggestionsProps
pickerSuggestionsProps?: IBasePickerSuggestionsProps;
The properties that will get passed to the Suggestions component.
property removeButtonAriaLabel
removeButtonAriaLabel?: string;
Aria label for the "X" button in the selected item component.
property resolveDelay
resolveDelay?: number;
The delay time in ms before resolving suggestions, which is kicked off when input has been changed. e.g. If a second input change happens within the resolveDelay time, the timer will start over. Only until after the timer completes will onResolveSuggestions be called.
property searchingText
searchingText?: ((props: { input: string }) => string) | string;
The text to display while searching for more results in a limited suggestions list
property selectedItems
selectedItems?: T[];
The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled component.
property styles
styles?: IStyleFunctionOrObject<IBasePickerStyleProps, IBasePickerStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme provided by styled() function.
interface IBasePickerState
interface IBasePickerState {}
property isFocused
isFocused?: boolean;
property isMostRecentlyUsedVisible
isMostRecentlyUsedVisible?: boolean;
property isResultsFooterVisible
isResultsFooterVisible?: boolean;
property isSearching
isSearching?: boolean;
property items
items?: any;
property moreSuggestionsAvailable
moreSuggestionsAvailable?: boolean;
property selectedIndices
selectedIndices?: number[];
property suggestedDisplayValue
suggestedDisplayValue?: string;
property suggestionsLoading
suggestionsLoading?: boolean;
property suggestionsVisible
suggestionsVisible?: boolean;
interface IBasePickerStyles
interface IBasePickerStyles {}
Represents the stylable areas of the control.
property input
input: IStyle;
Refers to the input were to type new selections (picks).
property itemsWrapper
itemsWrapper: IStyle;
Refers to the items already selected (picked).
property root
root: IStyle;
Root element of any picker extending from BasePicker (wraps all the elements).
property screenReaderText
screenReaderText: IStyle;
Refers to helper element used for accessibility tools (hidden from view on screen).
property text
text: IStyle;
Refers to the elements already selected (picked) wrapped by
itemsWrapper
along with the input to type a new selection.
interface IBasePickerSuggestionsProps
interface IBasePickerSuggestionsProps<T = any> extends Pick< ISuggestionsProps<T>, | 'onRenderNoResultFound' | 'suggestionsHeaderText' | 'mostRecentlyUsedHeaderText' | 'noResultsFoundText' | 'className' | 'suggestionsClassName' | 'suggestionsItemClassName' | 'searchForMoreIcon' | 'searchForMoreText' | 'forceResolveText' | 'loadingText' | 'searchingText' | 'resultsFooterFull' | 'resultsFooter' | 'resultsMaximumNumber' | 'showRemoveButtons' | 'suggestionsAvailableAlertText' | 'suggestionsContainerAriaLabel' | 'showForceResolve' > {}
Subset of picker options that may be legally passed through a picker to its internal Suggestions component.
interface IBaseSelectedItemsList
interface IBaseSelectedItemsList<T> {}
interface IBaseSelectedItemsListProps
interface IBaseSelectedItemsListProps<T> extends React.ClassAttributes<any> {}
property canRemoveItem
canRemoveItem?: (item: T) => boolean;
A callback on whether this item can be deleted
property componentRef
componentRef?: IRefObject<IBaseSelectedItemsList<T>>;
property createGenericItem
createGenericItem?: ( input: string, ValidationState: ValidationState) => ISuggestionModel<T>;
Function that specifies how arbitrary text entered into the well is handled.
property defaultSelectedItems
defaultSelectedItems?: T[];
Initial items that have already been selected and should appear in the people picker.
property onChange
onChange?: (items?: T[]) => void;
A callback for when the selected list of items changes.
property onCopyItems
onCopyItems?: (items: T[]) => string;
A callback for when items are copied
property onItemDeleted
onItemDeleted?: (deletedItem: T) => void;
A callback when an item is deleted
Deprecated
Use
onItemsDeleted
instead.
property onItemsDeleted
onItemsDeleted?: (deletedItems: T[]) => void;
A callback when and item or items are deleted
property onItemSelected
onItemSelected?: (selectedItem?: T) => T | PromiseLike<T>;
A callback to process a selection after the user selects something from the picker.
property onRenderItem
onRenderItem?: (props: ISelectedItemProps<T>) => JSX.Element;
Function that specifies how the selected item will appear.
property removeButtonAriaLabel
removeButtonAriaLabel?: string;
Aria label for the 'X' button in the selected item component.
property selectedItems
selectedItems?: T[];
The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled component.
property selection
selection?: Selection;
The selection
interface IBaseSelectedItemsListState
interface IBaseSelectedItemsListState<T = any> {}
property items
items: T[];
interface IBreadcrumb
interface IBreadcrumb {}
method focus
focus: () => void;
Sets focus to the first breadcrumb link.
interface IBreadcrumbData
interface IBreadcrumbData {}
property props
props: IBreadcrumbProps;
property renderedItems
renderedItems: IBreadcrumbItem[];
property renderedOverflowItems
renderedOverflowItems: IBreadcrumbItem[];
interface IBreadcrumbItem
interface IBreadcrumbItem extends React.AllHTMLAttributes<HTMLElement> {}
property as
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'a';
Optional prop to render the item as a heading of your choice.
You can also use this to force items to render as links instead of buttons (by default, any item with a
href
renders as a link, and any item without ahref
renders as a button). This is not generally recommended because it may prevent activating the link using the keyboard.
property href
href?: string;
Url to navigate to when this breadcrumb item is clicked.
property isCurrentItem
isCurrentItem?: boolean;
Whether this is the breadcrumb item the user is currently navigated to. If true,
aria-current="page"
will be applied to this breadcrumb item.
property key
key: string;
Arbitrary unique string associated with the breadcrumb item.
property onClick
onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IBreadcrumbItem) => void;
Callback issued when the breadcrumb item is selected.
property onRender
onRender?: IRenderFunction<IBreadcrumbItem>;
A function to render the outer content of the crumb (the link).
property onRenderContent
onRenderContent?: IRenderFunction<IBreadcrumbItem>;
A function to render the inner content of the crumb (the text inside the link).
property role
role?: string;
Optional role for the breadcrumb item (which renders as a button by default)
property text
text: string;
Text to display to the user for the breadcrumb item.
interface IBreadcrumbProps
interface IBreadcrumbProps extends React.HTMLAttributes<HTMLElement> {}
property ariaLabel
ariaLabel?: string;
Aria label for the root element of the breadcrumb (which is a navigation landmark).
property className
className?: string;
Optional class for the root breadcrumb element.
property componentRef
componentRef?: IRefObject<IBreadcrumb>;
Optional callback to access the IBreadcrumb interface. Use this instead of ref for accessing the public methods and properties of the component.
property dividerAs
dividerAs?: IComponentAs<IDividerAsProps>;
Render a custom divider in place of the default chevron
>
property focusZoneProps
focusZoneProps?: IFocusZoneProps;
Extra props for the root FocusZone.
property items
items: IBreadcrumbItem[];
Collection of breadcrumbs to render
property maxDisplayedItems
maxDisplayedItems?: number;
The maximum number of breadcrumbs to display before coalescing. If not specified, all breadcrumbs will be rendered.
property onGrowData
onGrowData?: (data: IBreadcrumbData) => IBreadcrumbData | undefined;
Method that determines how to group the length of the breadcrumb. Return undefined to never increase breadcrumb length.
property onReduceData
onReduceData?: (data: IBreadcrumbData) => IBreadcrumbData | undefined;
Method that determines how to reduce the length of the breadcrumb. Return undefined to never reduce breadcrumb length.
property onRenderItem
onRenderItem?: IRenderFunction<IBreadcrumbItem>;
Custom render function to render each crumb. Default renders as a link.
property onRenderItemContent
onRenderItemContent?: IRenderFunction<IBreadcrumbItem>;
Custom render function to render the content within a crumb. Default renders the text.
property onRenderOverflowIcon
onRenderOverflowIcon?: IRenderFunction<IButtonProps>;
Render a custom overflow icon in place of the default icon
...
property overflowAriaLabel
overflowAriaLabel?: string;
Aria label for the overflow button.
property overflowButtonAs
overflowButtonAs?: IComponentAs<IButtonProps>;
Custom component for the overflow button.
property overflowIndex
overflowIndex?: number;
Optional index where overflow items will be collapsed. Defaults to 0.
property styles
styles?: IStyleFunctionOrObject<IBreadcrumbStyleProps, IBreadcrumbStyles>;
property theme
theme?: ITheme;
property tooltipHostProps
tooltipHostProps?: ITooltipHostProps;
Extra props for the TooltipHost which wraps each breadcrumb item.
interface IBreadcrumbStyleProps
interface IBreadcrumbStyleProps {}
interface IBreadcrumbStyles
interface IBreadcrumbStyles {}
interface IButton
interface IButton {}
property dismissMenu
dismissMenu: () => void;
If there is a menu associated with this button and it is visible, this will dismiss the menu
property focus
focus: () => void;
Sets focus to the button.
property openMenu
openMenu: ( shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean) => void;
If there is a menu associated with this button and it is visible, this will open the menu. Params are optional overrides to the ones defined in
menuProps
to apply to just this instance of opening the menu.Parameter shouldFocusOnContainer
override to the ContextualMenu shouldFocusOnContainer prop. BaseButton implementation defaults to 'undefined'.
Parameter shouldFocusOnMount
override to the ContextualMenu shouldFocusOnMount prop. BaseButton implementation defaults to
true
.
interface IButtonClassNames
interface IButtonClassNames {}
property description
description?: string;
property flexContainer
flexContainer?: string;
property icon
icon?: string;
property label
label?: string;
property menuIcon
menuIcon?: string;
property root
root?: string;
property screenReaderText
screenReaderText?: string;
property textContainer
textContainer?: string;
interface IButtonGrid
interface IButtonGrid {}
interface IButtonGridCellProps
interface IButtonGridCellProps<T> {}
property cellDisabledStyle
cellDisabledStyle?: string[];
Optional, the CSS class used for when the cell is disabled
property cellIsSelectedStyle
cellIsSelectedStyle?: string[];
Optional, the CSS class used for when the cell is selected
property className
className?: string;
Optional, className(s) to apply
property disabled
disabled?: boolean;
Optional, if the this option should be diabled
property getClassNames
getClassNames?: ( theme: ITheme, className: string, variantClassName: string, iconClassName: string | undefined, menuIconClassName: string | undefined, disabled: boolean, checked: boolean, expanded: boolean, isSplit: boolean | undefined) => IButtonClassNames;
Method to provide the classnames to style a button. The default value for this prop is the getClassnames func defined in BaseButton.classnames.
property id
id: string;
Arbitrary unique string associated with this option
property index
index?: number;
Index for this option
property item
item: T;
The option that will be made available to the user
property label
label?: string;
The label for this item. Visible text if this item is a header, tooltip if is this item is normal
property onClick
onClick?: (item: T) => void;
The on click handler
property onFocus
onFocus?: (item: T) => void;
Optional, the onFocus handler
property onHover
onHover?: (item?: T) => void;
Optional, the onHover handler
property onKeyDown
onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
Optional, onkeydown handler
property onMouseEnter
onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
Optional, mouseEnter handler.
Returns
true if the event should be processed, false otherwise
property onMouseLeave
onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
Optional, mouseLeave handler
property onMouseMove
onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
Optional, mouseMove handler
Returns
true if the event should be processed, false otherwise
property onRenderItem
onRenderItem: (item: T) => JSX.Element;
The render callback to handle rendering the item
property onWheel
onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
Optional, onWheel handler
property role
role?: string;
The accessible role for this option
property selected
selected?: boolean;
Optional, if the cell is currently selected
interface IButtonGridProps
interface IButtonGridProps extends React.TableHTMLAttributes<HTMLTableElement> {}
property ariaPosInSet
ariaPosInSet?: number;
Position this ButtonGrid is in the parent set (index in a parent menu, for example)
property ariaSetSize
ariaSetSize?: number;
Size of the parent set (size of parent menu, for example)
property columnCount
columnCount: number;
The number of columns.
property componentRef
componentRef?: IRefObject<IButtonGrid>;
Gets the component ref.
property containerClassName
containerClassName?: string;
Class name for the FocusZone container for the ButtonGrid.
Deprecated
Use
styles.focusedContainer
to define styling for the focus zone container
property doNotContainWithinFocusZone
doNotContainWithinFocusZone?: boolean;
If false (the default), the ButtonGrid is contained inside a FocusZone. If true, a FocusZone is not used. false
property items
items: any[];
Items to display in a ButtonGrid with the specified number of columns.
property onBlur
onBlur?: () => void;
Handler for when focus leaves the ButtonGrid.
property onRenderItem
onRenderItem: (item: any, index: number) => JSX.Element;
Custom renderer for the individual items.
property positionInSet
positionInSet?: number;
Deprecated
Use
ariaPosInSet
property setSize
setSize?: number;
Deprecated
Use
ariaSetSize
property shouldFocusCircularNavigate
shouldFocusCircularNavigate?: boolean;
Whether focus should cycle back to the beginning once the user navigates past the end (and vice versa). Only relevant if
doNotContainWithinFocusZone
is not true.
property styles
styles?: IStyleFunctionOrObject<IButtonGridStyleProps, IButtonGridStyles>;
Optional styles for the component.
property theme
theme?: ITheme;
Theme to apply to the component.
interface IButtonGridStyleProps
interface IButtonGridStyleProps {}
Properties required to build the styles for the ButtonGrid component.
property theme
theme: ITheme;
Theme to apply to the ButtonGrid.
interface IButtonGridStyles
interface IButtonGridStyles {}
Styles for the ButtonGrid Component.
property focusedContainer
focusedContainer?: IStyle;
Style for the FocusZone container for the ButtonGrid.
property root
root: IStyle;
Style for the table container of a ButtonGrid.
property tableCell
tableCell: IStyle;
Style for the table cells of the ButtonGrid.
interface IButtonProps
interface IButtonProps extends React.AllHTMLAttributes< | HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement > {}
property allowDisabledFocus
allowDisabledFocus?: boolean;
Whether the button can have focus in disabled mode
property ariaDescription
ariaDescription?: string;
Detailed description of the button for the benefit of screen readers.
Besides the compound button, other button types will need more information provided to screen reader.
property ariaHidden
ariaHidden?: boolean;
If provided and is true it adds an 'aria-hidden' attribute instructing screen readers to ignore the element.
property ariaLabel
ariaLabel?: string;
The aria label of the button for the benefit of screen readers.
property buttonType
buttonType?: ButtonType;
Deprecated at v1.2.3, to be removed at >= v2.0.0. Use specific button component instead.
Deprecated
Use specific button component instead.
property checked
checked?: boolean;
Whether the button is checked
property className
className?: string;
If provided, additional class name to provide on the root element.
property componentRef
componentRef?: IRefObject<IButton>;
Optional callback to access the IButton interface. Use this instead of ref for accessing the public methods and properties of the component.
property data
data?: any;
Any custom data the developer wishes to associate with the menu item.
property defaultRender
defaultRender?: any;
yet unknown docs
property description
description?: IStyle;
Style for the description text if applicable (for compound buttons.) Deprecated, use
secondaryText
instead.Deprecated
Use
secondaryText
instead.
property disabled
disabled?: boolean;
Whether the button is disabled
property elementRef
elementRef?: React.Ref<HTMLElement>;
Optional callback to access the root DOM element.
Deprecated
Temporary solution which will be replaced with ref in the V8 release.
property getClassNames
getClassNames?: ( theme: ITheme, className: string, variantClassName: string, iconClassName: string | undefined, menuIconClassName: string | undefined, disabled: boolean, checked: boolean, expanded: boolean, hasMenu: boolean, isSplit: boolean | undefined, allowDisabledFocus: boolean) => IButtonClassNames;
Method to provide the classnames to style a button. The default value for this prop is the getClassnames func defined in BaseButton.classnames.
property getSplitButtonClassNames
getSplitButtonClassNames?: ( disabled: boolean, expanded: boolean, checked: boolean, allowDisabledFocus: boolean) => ISplitButtonClassNames;
Method to provide the classnames to style a button. The default value for this prop is the getClassnames func defined in BaseButton.classnames.
property href
href?: string;
If provided, this component will be rendered as an anchor.
property iconProps
iconProps?: IIconProps;
The props for the icon shown in the button.
property keytipProps
keytipProps?: IKeytipProps;
Optional keytip for this button
property menuAs
menuAs?: IComponentAs<IContextualMenuProps>;
Render a custom menu in place of the normal one.
property menuIconProps
menuIconProps?: IIconProps;
The props for the icon shown when providing a menu dropdown.
property menuProps
menuProps?: IContextualMenuProps;
Props for button menu. Providing this will default to showing the menu icon. See menuIconProps for overriding how the default icon looks. Providing this in addition of onClick and setting the split property to true will render a SplitButton.
property menuTriggerKeyCode
menuTriggerKeyCode?: KeyCodes | null;
Provides a custom KeyCode that can be used to open the button menu. The default KeyCode is the down arrow. A value of null can be provided to disable the key codes for opening the button menu.
property onAfterMenuDismiss
onAfterMenuDismiss?: () => void;
Callback that runs after Button's contextual menu was closed (removed from the DOM)
property onMenuClick
onMenuClick?: ( ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, button?: IButtonProps) => void;
Optional callback when menu is clicked.
property onRenderAriaDescription
onRenderAriaDescription?: IRenderFunction<IButtonProps>;
Custom render function for the aria description element.
property onRenderChildren
onRenderChildren?: IRenderFunction<IButtonProps>;
Custom render function for rendering the button children.
property onRenderDescription
onRenderDescription?: IRenderFunction<IButtonProps>;
Custom render function for the desciption text.
property onRenderIcon
onRenderIcon?: IRenderFunction<IButtonProps>;
Custom render function for the icon
property onRenderMenu
onRenderMenu?: IRenderFunction<IContextualMenuProps>;
Deprecated at v6.3.2, to be removed at >= v7.0.0. Use
menuAs
instead.Deprecated
Use
menuAs
instead.
property onRenderMenuIcon
onRenderMenuIcon?: IRenderFunction<IButtonProps>;
Custom render function for button menu icon
property onRenderText
onRenderText?: IRenderFunction<IButtonProps>;
Custom render function for the label text.
property persistMenu
persistMenu?: boolean;
Menu will not be created or destroyed when opened or closed, instead it will be hidden. This will improve perf of the menu opening but could potentially impact overall perf by having more elements in the dom. Should only be used when perf is important. Note: This may increase the amount of time it takes for the button itself to mount.
property primary
primary?: boolean;
Changes the visual presentation of the button to be emphasized (if defined)
property primaryActionButtonProps
primaryActionButtonProps?: IButtonProps;
Optional props to be applied only to the primary action button of SplitButton and not to the overall SplitButton container
property primaryDisabled
primaryDisabled?: boolean;
If set to true and if this is a splitButton (split == true) then the primary action of a split button is disabled.
property renderPersistedMenuHiddenOnMount
renderPersistedMenuHiddenOnMount?: boolean;
If true, the persisted menu is rendered hidden when the button initially mounts. Non-persisted menus will not be in the component tree unless they are being shown
Note: This increases the time the button will take to mount, but can improve perceived menu open perf. when the user opens the menu.
Deprecated
There is known bug in Edge when this prop is true where scrollbars overlap with the content when a menu is first rendered hidden. See: https://github.com/microsoft/fluentui/issues/9034 Please do not start using this. If you are already using this, please make sure that you are doing so only in non-Edge browsers
property rootProps
rootProps?: | React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
Deprecated at v0.56.2, to be removed at >= v1.0.0. Just pass in button props instead. they will be mixed into the button/anchor element rendered by the component.
Deprecated
Use button props instead.
property secondaryText
secondaryText?: string;
Description of the action this button takes. Only used for compound buttons
property split
split?: boolean;
If set to true, and if menuProps and onClick are provided, the button will render as a SplitButton.
property splitButtonAriaLabel
splitButtonAriaLabel?: string;
Accessible label for the dropdown chevron button if this button is split.
property splitButtonMenuProps
splitButtonMenuProps?: IButtonProps;
Experimental prop that get passed into the menuButton that's rendered as part of split button. Anything passed in will likely need to have accompanying style changes.
property styles
styles?: IButtonStyles;
Custom styling for individual elements within the button DOM.
property text
text?: string;
Text to render button label. If text is supplied, it will override any string in button children. Other children components will be passed through after the text.
property theme
theme?: ITheme;
Theme provided by HOC.
property toggle
toggle?: boolean;
Whether button is a toggle button with distinct on and off states. This should be true for buttons that permanently change state when a press event finishes, such as a volume mute button.
property toggled
toggled?: boolean;
Any custom data the developer wishes to associate with the menu item. Deprecated, use
checked
if setting state.Deprecated
unused, use
checked
if setting state.
property uniqueId
uniqueId?: string | number;
Unique id to identify the item. Typically a duplicate of key value.
interface IButtonStyles
interface IButtonStyles {}
property description
description?: IStyle;
Style for the description text if applicable (for compound buttons.)
property descriptionChecked
descriptionChecked?: IStyle;
Style override for the description text when the button is checked.
property descriptionDisabled
descriptionDisabled?: IStyle;
Style override for the description text when the button is disabled.
property descriptionHovered
descriptionHovered?: IStyle;
Style override for the description text when the button is hovered.
property descriptionPressed
descriptionPressed?: IStyle;
Style for the description text when the button is pressed.
property flexContainer
flexContainer?: IStyle;
Style for the flexbox container within the root element.
property icon
icon?: IStyle;
Style for the icon on the near side of the label.
property iconChecked
iconChecked?: IStyle;
Style override for the icon when the button is checked.
property iconDisabled
iconDisabled?: IStyle;
Style override for the icon when the button is disabled.
property iconExpanded
iconExpanded?: IStyle;
Style for the icon on the near side of the label when expanded.
property iconExpandedHovered
iconExpandedHovered?: IStyle;
Style for the icon on the near side of the label when expanded and hovered.
property iconHovered
iconHovered?: IStyle;
Style for the icon on the near side of the label on hover.
property iconPressed
iconPressed?: IStyle;
Style for the icon on the near side of the label when pressed.
property label
label?: IStyle;
Style for the text content of the button.
property labelChecked
labelChecked?: IStyle;
Style override for the text content when the button is checked.
property labelDisabled
labelDisabled?: IStyle;
Style override for the text content when the button is disabled.
property labelHovered
labelHovered?: IStyle;
Style override for the text content when the button is hovered.
property menuIcon
menuIcon?: IStyle;
Style for the menu chevron.
property menuIconChecked
menuIconChecked?: IStyle;
Style override for the menu chevron when the button is checked.
property menuIconDisabled
menuIconDisabled?: IStyle;
Style override for the menu chevron when the button is disabled.
property menuIconExpanded
menuIconExpanded?: IStyle;
Style for the menu chevron when expanded.
property menuIconExpandedHovered
menuIconExpandedHovered?: IStyle;
Style for the menu chevron when expanded and hovered.
property menuIconHovered
menuIconHovered?: IStyle;
Style for the menu chevron on hover.
property menuIconPressed
menuIconPressed?: IStyle;
Style for the menu chevron when pressed.
property root
root?: IStyle;
Style for the root element in the default enabled, non-toggled state.
property rootChecked
rootChecked?: IStyle;
Style override for the root element in a checked state, layered on top of the root style.
property rootCheckedDisabled
rootCheckedDisabled?: IStyle;
Style override applied to the root on hover in a checked, disabled state
property rootCheckedHovered
rootCheckedHovered?: IStyle;
Style override applied to the root on hover in a checked, enabled state
property rootCheckedPressed
rootCheckedPressed?: IStyle;
Style override applied to the root on pressed in a checked, enabled state
property rootDisabled
rootDisabled?: IStyle;
Style override for the root element in a disabled state, layered on top of the root style.
property rootExpanded
rootExpanded?: IStyle;
Style override applied to the root on when menu is expanded in the default, enabled, non-toggled state.
property rootExpandedHovered
rootExpandedHovered?: IStyle;
Style override applied to the root on hover in a expanded state on hover
property rootFocused
rootFocused?: IStyle;
Style override applied to the root on focus in the default, enabled, non-toggled state.
property rootHasMenu
rootHasMenu?: IStyle;
Style override for the root element when it has a menu button, layered on top of the root style.
property rootHovered
rootHovered?: IStyle;
Style override applied to the root on hover in the default, enabled, non-toggled state.
property rootPressed
rootPressed?: IStyle;
Style override applied to the root on pressed in the default, enabled, non-toggled state.
property screenReaderText
screenReaderText?: IStyle;
Style override for the screen reader text.
property secondaryText
secondaryText?: IStyle;
Style for the description text if applicable (for compound buttons.)
property splitButtonContainer
splitButtonContainer?: IStyle;
Style override for the container div around a SplitButton element
property splitButtonContainerChecked
splitButtonContainerChecked?: IStyle;
Style for container div around a SplitButton element when the button is checked.
property splitButtonContainerCheckedHovered
splitButtonContainerCheckedHovered?: IStyle;
Style for container div around a SplitButton element when the button is checked and hovered.
property splitButtonContainerDisabled
splitButtonContainerDisabled?: IStyle;
Style override for the container div around a SplitButton element in a disabled state
property splitButtonContainerFocused
splitButtonContainerFocused?: IStyle;
Style for container div around a SplitButton element when the button is focused.
property splitButtonContainerHovered
splitButtonContainerHovered?: IStyle;
Style for container div around a SplitButton element when the button is hovered.
property splitButtonDivider
splitButtonDivider?: IStyle;
Style override for the divider element that appears between the button and menu button for a split button.
property splitButtonDividerDisabled
splitButtonDividerDisabled?: IStyle;
Style override for the divider element that appears between the button and menu button for a split button in a disabled state.
property splitButtonFlexContainer
splitButtonFlexContainer?: IStyle;
Style override for the SplitButton FlexContainer.
property splitButtonMenuButton
splitButtonMenuButton?: IStyle;
Style override for the SplitButton menu button
property splitButtonMenuButtonChecked
splitButtonMenuButtonChecked?: IStyle;
Style override for the SplitButton menu button element in a checked state
property splitButtonMenuButtonDisabled
splitButtonMenuButtonDisabled?: IStyle;
Style override for the SplitButton menu button element in a disabled state.
property splitButtonMenuButtonExpanded
splitButtonMenuButtonExpanded?: IStyle;
Style override for the SplitButton menu button element in an expanded state
property splitButtonMenuFocused
splitButtonMenuFocused?: IStyle;
Style override for the SplitButton when only primaryButton is in a disabled state
property splitButtonMenuIcon
splitButtonMenuIcon?: IStyle;
Style override for the SplitButton menu icon element
property splitButtonMenuIconDisabled
splitButtonMenuIconDisabled?: IStyle;
Style override for the SplitButton menu icon element in a disabled state
property textContainer
textContainer?: IStyle;
Style for the text container within the flexbox container element (and contains the text and description).
interface ICalendar
interface ICalendar {}
property focus
focus: () => void;
Sets focus to the selected date.
interface ICalendarFormatDateCallbacks
interface ICalendarFormatDateCallbacks {}
property formatDay
formatDay: (date: Date) => string;
Callback to apply formatting to the days in the Day Picker calendar
property formatMonthDayYear
formatMonthDayYear: (date: Date, strings?: ICalendarStrings) => string;
Callback to apply formatting to mmmm d, yyyy formated dates
property formatMonthYear
formatMonthYear: (date: Date, strings?: ICalendarStrings) => string;
Callback to apply formatting to the month and year in the Day Picker header
property formatYear
formatYear: (date: Date) => string;
Callback to apply formatting to the year in the Month Picker header
interface ICalendarIconStrings
interface ICalendarIconStrings {}
property closeIcon
closeIcon?: string;
Close icon
property leftNavigation
leftNavigation?: string;
FabricMDL2Icons name for the left navigation icon. Previous default: ChevronLeft.
property rightNavigation
rightNavigation?: string;
FabricMDL2Icons name for the right navigation icon. Previous default: ChevronRight.
interface ICalendarProps
interface ICalendarProps extends IBaseProps<ICalendar>, React.HTMLAttributes<HTMLElement> {}
property allFocusable
allFocusable?: boolean;
Allows all dates and buttons to be focused, including disabled ones
property autoNavigateOnSelection
autoNavigateOnSelection?: boolean;
Whether the month view should automatically navigate to the next or previous date range depending on the selected date. If this property is set to true and the currently displayed month is March 2017, if the user clicks on a day outside the month, i.e., April 1st, the picker will automatically navigate to the month of April.
property className
className?: string;
Optional class name to add to the root element.
property componentRef
componentRef?: IRefObject<ICalendar>;
Optional callback to access the ICalendar interface. Use this instead of ref for accessing the public methods and properties of the component.
property dateRangeType
dateRangeType?: DateRangeType;
The date range type indicating how many days should be selected as the user selects days
property dateTimeFormatter
dateTimeFormatter?: ICalendarFormatDateCallbacks;
Apply additional formating to dates, for example localized date formatting.
property firstDayOfWeek
firstDayOfWeek?: DayOfWeek;
The first day of the week for your locale.
property firstWeekOfYear
firstWeekOfYear?: FirstWeekOfYear;
Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
property highlightCurrentMonth
highlightCurrentMonth?: boolean;
Whether the month picker should highlight the current month
property highlightSelectedMonth
highlightSelectedMonth?: boolean;
Whether the month picker should highlight the selected month
property isDayPickerVisible
isDayPickerVisible?: boolean;
Whether the day picker is shown beside the month picker or hidden.
property isMonthPickerVisible
isMonthPickerVisible?: boolean;
Whether the month picker is shown beside the day picker or hidden.
property maxDate
maxDate?: Date;
If set the Calendar will not allow navigation to or selection of a date later than this value.
property minDate
minDate?: Date;
If set the Calendar will not allow navigation to or selection of a date earlier than this value.
property navigationIcons
navigationIcons?: ICalendarIconStrings;
Customize navigation icons using ICalendarIconStrings
property onDismiss
onDismiss?: () => void;
Callback issued when calendar is closed
property onSelectDate
onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;
Callback issued when a date is selected
Parameter date
The date the user selected
Parameter selectedDateRangeArray
The resultant list of dates that are selected based on the date range type set for the component.
property restrictedDates
restrictedDates?: Date[];
If set the Calendar will not allow selection of dates in this array.
property selectDateOnClick
selectDateOnClick?: boolean;
When clicking on "Today", select the date and close the calendar.
property shouldFocusOnMount
shouldFocusOnMount?: boolean;
This property has been removed at 0.80.0 in place of the
focus
method, to be removed @ 1.0.0.Deprecated
Replaced with the
focus
method.
property showCloseButton
showCloseButton?: boolean;
Whether the close button should be shown or not
property showGoToToday
showGoToToday?: boolean;
Whether the "Go to today" link should be shown or not
property showMonthPickerAsOverlay
showMonthPickerAsOverlay?: boolean;
Show month picker on top of date picker when visible.
property showSixWeeksByDefault
showSixWeeksByDefault?: boolean;
Whether the calendar should show 6 weeks by default.
property showWeekNumbers
showWeekNumbers?: boolean;
Whether the calendar should show the week number (weeks 1 to 53) before each week row
property strings
strings: ICalendarStrings | null;
Localized strings to use in the Calendar
property today
today?: Date;
Value of today. If null, current time in client machine will be used.
property value
value?: Date;
Default value of the Calendar, if any
property workWeekDays
workWeekDays?: DayOfWeek[];
The days that are selectable when dateRangeType is WorkWeek. If dateRangeType is not WorkWeek this property does nothing.
property yearPickerHidden
yearPickerHidden?: boolean;
Whether the year picker is enabled
interface ICalendarState
interface ICalendarState {}
property isDayPickerVisible
isDayPickerVisible?: boolean;
State used to show/hide day picker
property isMonthPickerVisible
isMonthPickerVisible?: boolean;
State used to show/hide month picker
property navigatedDayDate
navigatedDayDate?: Date;
The currently focused date in the day picker, but not necessarily selected
property navigatedMonthDate
navigatedMonthDate?: Date;
The currently focused date in the month picker, but not necessarily selected
property selectedDate
selectedDate?: Date;
The currently selected date in the calendar
interface ICalendarStrings
interface ICalendarStrings {}
property closeButtonAriaLabel
closeButtonAriaLabel?: string;
Aria-label for the "close" button.
property days
days: string[];
An array of strings for the full names of days of the week. The array is 0-based, so days[0] should be the full name of Sunday.
property goToToday
goToToday: string;
String to render for button to direct the user to today's date.
property monthPickerHeaderAriaLabel
monthPickerHeaderAriaLabel?: string;
Aria-label format string for the header button in the month picker. Should have 1 string param, e.g. "
{0}
, select to change the year". This aria-label will only be applied if the year picker is enabled; otherwise the label will default to the header string, e.g. "2019".
property months
months: string[];
An array of strings for the full names of months. The array is 0-based, so months[0] should be the full name of January.
property nextMonthAriaLabel
nextMonthAriaLabel?: string;
Aria-label for the "next month" button.
property nextYearAriaLabel
nextYearAriaLabel?: string;
Aria-label for the "next year" button.
property nextYearRangeAriaLabel
nextYearRangeAriaLabel?: string;
Aria-label for the "next year range" button.
property prevMonthAriaLabel
prevMonthAriaLabel?: string;
Aria-label for the "previous month" button.
property prevYearAriaLabel
prevYearAriaLabel?: string;
Aria-label for the "previous year" button.
property prevYearRangeAriaLabel
prevYearRangeAriaLabel?: string;
Aria-label for the "previous year range" button.
property shortDays
shortDays: string[];
An array of strings for the initials of the days of the week. The array is 0-based, so days[0] should be the initial of Sunday.
property shortMonths
shortMonths: string[];
An array of strings for the short names of months. The array is 0-based, so shortMonths[0] should be the short name of January.
property weekNumberFormatString
weekNumberFormatString?: string;
Aria-label format string for the week number header. Should have 1 string param e.g. "week number {0}"
property yearPickerHeaderAriaLabel
yearPickerHeaderAriaLabel?: string;
Aria-label format string for the header button in the year picker. Should have 1 string param, e.g. "
{0}
, select to change the month"
interface ICalloutBeakPositionedInfo
interface ICalloutBeakPositionedInfo extends IPositionedData {}
property closestEdge
closestEdge: RectangleEdge;
interface ICalloutContentStyleProps
interface ICalloutContentStyleProps {}
property backgroundColor
backgroundColor?: string;
Background color for the beak and callout.
property beakWidth
beakWidth?: number;
Width of Callout beak
property calloutMaxWidth
calloutMaxWidth?: number;
Max width for callout including borders.
property calloutMinWidth
calloutMinWidth?: number;
Min width for callout including borders.
property calloutWidth
calloutWidth?: number;
Width for callout including borders.
property className
className?: string;
CSS class to apply to the callout.
property overflowYHidden
overflowYHidden?: boolean;
Whether or not to clip content of the callout, if it overflows vertically.
property positions
positions?: ICalloutPositionedInfo;
Callout positioning data
property theme
theme: ITheme;
Theme to apply to the calloutContent.
interface ICalloutContentStyles
interface ICalloutContentStyles {}
property beak
beak: IStyle;
Style for callout beak.
property beakCurtain
beakCurtain: IStyle;
Style for callout beak curtain.
property calloutMain
calloutMain: IStyle;
Style for content component of the callout.
property container
container: IStyle;
Style for wrapper of Callout component.
property root
root: IStyle;
Style for callout container root element.
interface ICalloutPositionedInfo
interface ICalloutPositionedInfo extends IPositionedData {}
property beakPosition
beakPosition: ICalloutBeakPositionedInfo;
interface ICalloutPositionProps
interface ICalloutPositionProps extends IPositionProps {}
property beakWidth
beakWidth?: number;
The width of the beak.
property isBeakVisible
isBeakVisible?: boolean;
Whether or not the beak is visible
interface ICalloutProps
interface ICalloutProps extends React.HTMLAttributes<HTMLDivElement> {}
property alignTargetEdge
alignTargetEdge?: boolean;
If true the positioning logic will prefer to flip edges rather than to nudge the rectangle to fit within bounds, thus making sure the element aligns perfectly with target's alignment edge
property ariaDescribedBy
ariaDescribedBy?: string;
Defines the element id referencing the element containing the description for the callout.
property ariaLabel
ariaLabel?: string;
Accessible label text for callout.
property ariaLabelledBy
ariaLabelledBy?: string;
Defines the element id referencing the element containing label text for callout.
property backgroundColor
backgroundColor?: string;
The background color of the Callout in hex format ie. #ffffff.
property beakWidth
beakWidth?: number;
The width of the beak.
property bounds
bounds?: | IRectangle | ((target?: Target, targetWindow?: Window) => IRectangle | undefined);
The bounding rectangle (or callback that returns a rectangle) for which the contextual menu can appear in.
property calloutMaxHeight
calloutMaxHeight?: number;
Set max height of callout When not set the callout will expand with contents up to the bottom of the screen
property calloutMaxWidth
calloutMaxWidth?: number;
Maximum width for callout including borders. If value is 0, no width is applied.
property calloutMinWidth
calloutMinWidth?: number;
Minimum width for callout including borders. If value is 0, no width is applied.
property calloutWidth
calloutWidth?: number;
Custom width for callout including borders. If value is 0, no width is applied.
property className
className?: string;
CSS class to apply to the callout.
property coverTarget
coverTarget?: boolean;
If true the position returned will have the menu element cover the target. If false then it will position next to the target;
property directionalHint
directionalHint?: DirectionalHint;
How the element should be positioned
property directionalHintFixed
directionalHintFixed?: boolean;
If true the position will not change sides in an attempt to fit the callout within bounds. It will still attempt to align it to whatever bounds are given.
property directionalHintForRTL
directionalHintForRTL?: DirectionalHint;
How the element should be positioned in RTL layouts. If not specified, a mirror of the
directionalHint
alignment edge will be used instead. This means thatDirectionalHint.BottomLeft
will change toDirectionalHint.BottomRight
butDirectionalHint.LeftAuto
will not change.
property dismissOnTargetClick
dismissOnTargetClick?: boolean;
If true then the callout will dismiss when the target element is clicked
property doNotLayer
doNotLayer?: boolean;
If true do not render on a new layer. If false render on a new layer.
property finalHeight
finalHeight?: number;
Specify the final height of the content. To be used when expanding the content dynamically so that callout can adjust its position.
property gapSpace
gapSpace?: number;
The gap between the Callout and the target
property hidden
hidden?: boolean;
If specified, renders the Callout in a hidden state. Use this flag, rather than rendering a callout conditionally based on visibility, to improve rendering performance when it becomes visible. Note: When callout is hidden its content will not be rendered. It will only render once the callout is visible.
property hideOverflow
hideOverflow?: boolean;
Manually set OverflowYHidden style prop to true on calloutMain element A variety of callout load animations will need this to hide the scollbar that can appear
property isBeakVisible
isBeakVisible?: boolean;
If true then the beak is visible. If false it will not be shown.
property layerProps
layerProps?: ILayerProps;
Optional props to pass to the Layer component hosting the panel.
property minPagePadding
minPagePadding?: number;
The minimum distance the callout will be away from the edge of the screen.
property onDismiss
onDismiss?: (ev?: any) => void;
Callback when the Callout tries to close.
property onLayerMounted
onLayerMounted?: () => void;
Optional callback when the layer content has mounted.
property onPositioned
onPositioned?: (positions?: ICalloutPositionedInfo) => void;
Optional callback that is called once the callout has been correctly positioned.
Parameter positions
Gives the user information about how the callout is positioned such as the final edge of the target that it positioned against, the beak position, and the beaks relationship to the edges of the callout.
property onRestoreFocus
onRestoreFocus?: (options: { originalElement?: HTMLElement | Window; containsFocus: boolean; documentContainsFocus: boolean;}) => void;
Called when the component is unmounting, and focus needs to be restored. Argument passed down contains two variables, the element that the underlying popup believes focus should go to * and whether or not the popup currently contains focus. If this is provided, focus will not be restored automatically, you'll need to call originalElement.focus()
property onScroll
onScroll?: () => void;
Callback when the Callout body is scrolled.
property popupProps
popupProps?: IPopupProps;
Optional props to pass the Popup component that the callout uses.
property preventDismissOnEvent
preventDismissOnEvent?: ( ev: Event | React.FocusEvent | React.KeyboardEvent | React.MouseEvent) => boolean;
If defined, then takes priority over preventDismissOnLostFocus, preventDismissOnResize, and preventDismissOnScroll. If it returns true, then callout will not dismiss for this event. If not defined or returns false, callout can dismiss for this event.
property preventDismissOnLostFocus
preventDismissOnLostFocus?: boolean;
If true then the callout will not dismiss when it loses focus
Deprecated
use preventDismissOnEvent callback instead
property preventDismissOnResize
preventDismissOnResize?: boolean;
If true then the callout will not dismiss on resize
Deprecated
use preventDismissOnEvent callback instead
property preventDismissOnScroll
preventDismissOnScroll?: boolean;
If true then the callout will not dismiss on scroll
Deprecated
use preventDismissOnEvent callback instead
property role
role?: string;
Aria role assigned to the callout (Eg. dialog, alertdialog).
property setInitialFocus
setInitialFocus?: boolean;
If true then the callout will attempt to focus the first focusable element that it contains. If it doesn't find an element, no focus will be set and the method will return false. This means that it's the contents responsibility to either set focus or have focusable items.
Returns
True if focus was set, false if it was not.
property shouldDismissOnWindowFocus
shouldDismissOnWindowFocus?: boolean;
If true then the callout will dismiss when the window gets focus
property shouldRestoreFocus
shouldRestoreFocus?: boolean;
If true, when this component is unmounted, focus will be restored to the element that had focus when the component first mounted.
Deprecated
use onRestoreFocus callback instead
property shouldUpdateWhenHidden
shouldUpdateWhenHidden?: boolean;
If true, the component will be updated even when hidden=true. Note that this would consume resources to update even though nothing is being shown to the user. This might be helpful though if your updates are small and you want the callout to be revealed fast to the user when hidden is set to false.
property style
style?: React.CSSProperties;
CSS style to apply to the callout.
If you set
overflowY
in this object, it provides a performance optimization by preventing Popup (underlying component of Callout) from calculating whether it needs a scroll bar.
property styles
styles?: IStyleFunctionOrObject< ICalloutContentStyleProps, ICalloutContentStyles>;
Optional styles for the component.
property target
target?: Target;
The target that the Callout should try to position itself based on. It can be either an Element a querySelector string of a valid Element or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.
property theme
theme?: ITheme;
Optional theme for component
interface ICalloutState
interface ICalloutState {}
property calloutElementRect
calloutElementRect?: ClientRect;
property heightOffset
heightOffset?: number;
property positions
positions?: ICalloutPositionedInfo;
property slideDirectionalClassName
slideDirectionalClassName?: string;
interface ICellStyleProps
interface ICellStyleProps {}
property cellExtraRightPadding
cellExtraRightPadding: number;
property cellLeftPadding
cellLeftPadding: number;
property cellRightPadding
cellRightPadding: number;
interface ICheckbox
interface ICheckbox {}
Checkbox class interface.
property checked
checked: boolean;
Gets the current checked state.
property focus
focus: () => void;
Sets focus to the checkbox.
property indeterminate
indeterminate: boolean;
Gets the current indeterminate state.
interface ICheckboxProps
interface ICheckboxProps extends React.ButtonHTMLAttributes<HTMLElement | HTMLInputElement> {}
Checkbox properties.
property ariaDescribedBy
ariaDescribedBy?: string;
ID for element that provides extended information for the checkbox.
property ariaLabel
ariaLabel?: string;
Accessible label for the checkbox.
property ariaLabelledBy
ariaLabelledBy?: string;
ID for element that contains label information for the checkbox.
property ariaPositionInSet
ariaPositionInSet?: number;
The position in the parent set (if in a set) for aria-posinset.
property ariaSetSize
ariaSetSize?: number;
The total size of the parent set (if in a set) for aria-setsize.
property boxSide
boxSide?: 'start' | 'end';
Allows you to set the checkbox to be at the before (start) or after (end) the label.
property checked
checked?: boolean;
Checked state. Mutually exclusive to "defaultChecked". Use this if you control the checked state at a higher level and plan to pass in the correct value based on handling onChange events and re-rendering.
property checkmarkIconProps
checkmarkIconProps?: IIconProps;
Custom icon props for the check mark rendered by the checkbox
property className
className?: string;
Additional class name to provide on the root element, in addition to the ms-Checkbox class.
property componentRef
componentRef?: IRefObject<ICheckbox>;
Optional callback to access the ICheckbox interface. Use this instead of ref for accessing the public methods and properties of the component.
property defaultChecked
defaultChecked?: boolean;
Default checked state. Mutually exclusive to "checked". Use this if you want an uncontrolled component, and want the Checkbox instance to maintain its own state.
property defaultIndeterminate
defaultIndeterminate?: boolean;
Optional uncontrolled indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence over checked or defaultChecked props given but does not affect checked state. This is not a toggleable state. On load the checkbox will receive indeterminate visual state and after the user's first click it will be removed exposing the true state of the checkbox.
property disabled
disabled?: boolean;
Disabled state of the checkbox.
property indeterminate
indeterminate?: boolean;
Optional controlled indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence over checked or defaultChecked props given but does not affect checked state. This should not be a toggleable state. On load the checkbox will receive indeterminate visual state and after the first user click it should be removed by your supplied onChange callback function exposing the true state of the checkbox.
property inputProps
inputProps?: React.ButtonHTMLAttributes<HTMLElement | HTMLButtonElement>;
Optional input props that will be mixed into the input element, *before* other props are applied. This allows you to extend the input element with additional attributes, such as data-automation-id needed for automation. Note that if you provide, for example, "disabled" as well as "inputProps.disabled", the former will take precedence over the later.
property keytipProps
keytipProps?: IKeytipProps;
Optional keytip for this checkbox
property label
label?: string;
Label to display next to the checkbox.
property onChange
onChange?: ( ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
Callback that is called when the checked value has changed.
property onRenderLabel
onRenderLabel?: IRenderFunction<ICheckboxProps>;
Custom render function for the label.
property styles
styles?: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme provided by HOC.
interface ICheckboxState
interface ICheckboxState {}
property isChecked
isChecked?: boolean;
Is true when Uncontrolled control is checked.
property isIndeterminate
isIndeterminate?: boolean;
interface ICheckboxStyleProps
interface ICheckboxStyleProps {}
property checked
checked?: boolean;
property className
className?: string;
property disabled
disabled?: boolean;
property indeterminate
indeterminate?: boolean;
property isUsingCustomLabelRender
isUsingCustomLabelRender: boolean;
property reversed
reversed?: boolean;
property theme
theme: ITheme;
interface ICheckboxStyles
interface ICheckboxStyles {}
property checkbox
checkbox?: IStyle;
Style for checkbox in its default unchecked/enabled state.
property checkmark
checkmark?: IStyle;
Style for the checkmark in the default enabled/unchecked state.
property input
input?: IStyle;
INTERNAL: This is mostly an internal implementation detail which you should avoid styling. This refers to the element that is typically hidden and not rendered on screen.
property label
label?: IStyle;
Style for the label part (contains the customized checkbox + text) when enabled.
property root
root?: IStyle;
Style for the root element (a button) of the checkbox component in the default enabled/unchecked state.
property text
text?: IStyle;
Style for text appearing with the checkbox in its default enabled state.
interface ICheckProps
interface ICheckProps {}
property alwaysShowCheck
alwaysShowCheck?: boolean;
Deprecated
Not used
property checked
checked?: boolean;
Whether or not this menu item is currently checked.
property className
className?: string;
Additional css class to apply to the Check
property componentRef
componentRef?: IRefObject<ICheckProps>;
Gets the component ref.
property styles
styles?: IStyleFunctionOrObject<ICheckStyleProps, ICheckStyles>;
Call to provide customized styling that will layer on top of the variant rules
property theme
theme?: ITheme;
Theme provided by HOC.
property useFastIcons
useFastIcons?: boolean;
Whether to use fast icon components. The icons can't be targeted by customization but are still customizable via class names.
interface ICheckStyles
interface ICheckStyles {}
property check
check: IStyle;
The 'check' icon styles.
property checkHost
checkHost: IStyle;
Check host style
Deprecated
Not used directly within the component. Instead, use
CheckGlobalClassNames.checkHost
fromCheck.styles.ts
to get the static class name to apply to the parent element of the Check.
property circle
circle: IStyle;
The 'circle' icon styles.
property root
root: IStyle;
Style for the root element.
interface IChoiceGroup
interface IChoiceGroup {}
property checkedOption
checkedOption: IChoiceGroupOption | undefined;
Gets the current checked option.
property focus
focus: () => void;
Sets focus to the checked option or the first enabled option in the ChoiceGroup.
interface IChoiceGroupOption
interface IChoiceGroupOption extends React.InputHTMLAttributes<HTMLElement | HTMLInputElement> {}
property ariaLabel
ariaLabel?: string;
Aria label of the option for the benefit of screen reader users.
property checked
checked?: boolean;
Whether or not the option is checked.
Deprecated
Do not track checked state in the options themselves. Instead, either pass
defaultSelectedKey
to theChoiceGroup
and allow it to track selection state internally (uncontrolled), or passselectedKey
andonChange
to theChoiceGroup
to track/update the selection state manually (controlled).
property disabled
disabled?: boolean;
Whether or not the option is disabled.
property iconProps
iconProps?: IIconProps;
Props for an icon to display with this option.
property id
id?: string;
ID used on the option's input element.
property imageAlt
imageAlt?: string;
Alt text if the option is an image. '' (empty string)
property imageSize
imageSize?: { width: number; height: number;};
The width and height of the image in px for choice field.
property imageSrc
imageSrc?: string;
Image to display with this option.
property key
key: string;
A required key to uniquely identify the option.
property labelId
labelId?: string;
ID used on the option's label.
property onRenderField
onRenderField?: IRenderFunction<IChoiceGroupOption>;
Used to customize option rendering.
property onRenderLabel
onRenderLabel?: IRenderFunction<IChoiceGroupOption>;
Used to customize label rendering.
property selectedImageSrc
selectedImageSrc?: string;
The src of image for choice field which is selected.
property styles
styles?: IStyleFunctionOrObject< IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property text
text: string;
The text string for the option.
interface IChoiceGroupOptionProps
interface IChoiceGroupOptionProps extends IChoiceGroupOption {}
property componentRef
componentRef?: IRefObject<IChoiceGroupOption>;
Optional callback to access the IChoiceGroup interface. Use this instead of ref for accessing the public methods and properties of the component.
property focused
focused?: boolean;
Indicates if the ChoiceGroupOption should appear focused, visually
property name
name?: string;
This value is used to group each ChoiceGroupOption into the same logical ChoiceGroup
property onBlur
onBlur?: (ev: React.FocusEvent<HTMLElement>, props?: IChoiceGroupOption) => void;
A callback for receiving a notification when the choice has lost focus.
property onChange
onChange?: ( evt?: React.FormEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption) => void;
A callback for receiving a notification when the choice has been changed.
property onFocus
onFocus?: ( ev?: React.FocusEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption) => void | undefined;
A callback for receiving a notification when the choice has received focus.
property required
required?: boolean;
If true, it specifies that an option must be selected in the ChoiceGroup before submitting the form
property theme
theme?: ITheme;
Theme (provided through customization.)
interface IChoiceGroupOptionStyleProps
interface IChoiceGroupOptionStyleProps {}
Defines props needed to construct styles. This represents the simplified set of immutable things which control the class names.
property checked
checked?: boolean;
Whether the option is checked or not.
property disabled
disabled?: boolean;
Whether the option is disabled or not.
property focused
focused?: boolean;
Whether the option is in focus or not.
property hasIcon
hasIcon?: boolean;
Whether the option has an icon.
property hasImage
hasImage?: boolean;
Whether the option icon is an image.
property imageIsLarge
imageIsLarge?: boolean;
Whether the image width or height are higher than
71
.
property imageSize
imageSize?: { height: number; width: number;};
Image sizes used when
hasImage
orhasIcon
style props are enabled.
property theme
theme: ITheme;
Theme provided by High-Order Component.
interface IChoiceGroupOptionStyles
interface IChoiceGroupOptionStyles {}
property choiceFieldWrapper
choiceFieldWrapper?: IStyle;
property field
field?: IStyle;
property iconWrapper
iconWrapper?: IStyle;
property imageWrapper
imageWrapper?: IStyle;
property innerField
innerField?: IStyle;
property input
input?: IStyle;
property labelWrapper
labelWrapper?: IStyle;
property root
root?: IStyle;
property selectedImageWrapper
selectedImageWrapper?: IStyle;
interface IChoiceGroupProps
interface IChoiceGroupProps extends React.InputHTMLAttributes<HTMLElement | HTMLInputElement> {}
property ariaLabelledBy
ariaLabelledBy?: string;
ID of an element to use as the aria label for this ChoiceGroup.
property componentRef
componentRef?: IRefObject<IChoiceGroup>;
Optional callback to access the IChoiceGroup interface. Use this instead of ref for accessing the public methods and properties of the component.
property defaultSelectedKey
defaultSelectedKey?: string | number;
The key of the option that will be initially checked.
property label
label?: string;
Descriptive label for the choice group.
property onChange
onChange?: ( ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
A callback for receiving a notification when the choice has been changed.
property onChanged
onChanged?: ( option: IChoiceGroupOption, evt?: React.FormEvent<HTMLElement | HTMLInputElement>) => void;
Deprecated and will be removed by 07/17/2017. Use
onChange
instead.Deprecated
Use
onChange
instead.
property options
options?: IChoiceGroupOption[];
The options for the choice group.
property selectedKey
selectedKey?: string | number;
The key of the selected option. If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.
property styles
styles?: IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme (provided through customization).
interface IChoiceGroupState
interface IChoiceGroupState {}
property keyChecked
keyChecked?: string | number;
Current selected option, for **internal use only**. External users should access
IChoiceGroup.checkedOption
instead.
property keyFocused
keyFocused?: string | number;
Is set when the control has focus.
interface IChoiceGroupStyleProps
interface IChoiceGroupStyleProps {}
property className
className?: string;
property optionsContainIconOrImage
optionsContainIconOrImage?: boolean;
property theme
theme: ITheme;
interface IChoiceGroupStyles
interface IChoiceGroupStyles {}
property applicationRole
applicationRole?: IStyle;
The actual root of the component.
Deprecated
Styles will be merged with
root
in a future release.
property flexContainer
flexContainer?: IStyle;
property label
label?: IStyle;
property root
root?: IStyle;
Not currently the actual root of the component (will be fixed in a future release). For now, to style the actual root, use
applicationRole
.
interface ICircle
interface ICircle extends IShimmerElement {}
Circle element interface
property height
height?: number;
Sets the height of the shimmer circle in pixels. Minimum supported 10px.
interface ICoachmark
interface ICoachmark {}
property dismiss
dismiss?: (ev?: any) => void;
Forces the Coachmark to dismiss
interface ICoachmarkProps
interface ICoachmarkProps extends React.ClassAttributes<CoachmarkBase> {}
Coachmark component props
property ariaAlertText
ariaAlertText?: string;
Text to announce to screen reader / narrator when Coachmark is displayed
property ariaDescribedBy
ariaDescribedBy?: string;
Defines the element id referencing the element containing the description for the Coachmark.
property ariaDescribedByText
ariaDescribedByText?: string;
Defines the text content for the ariaDescribedBy element
property ariaLabelledBy
ariaLabelledBy?: string;
Defines the element id referencing the element containing label text for Coachmark.
property ariaLabelledByText
ariaLabelledByText?: string;
Defines the text content for the ariaLabelledBy element
property beaconColorOne
beaconColorOne?: string;
Beacon color one.
property beaconColorTwo
beaconColorTwo?: string;
Beacon color two.
property beakHeight
beakHeight?: number;
The height of the Beak component.
Deprecated
No longer used.
property beakWidth
beakWidth?: number;
The width of the Beak component.
Deprecated
No longer used.
property className
className?: string;
If provided, additional class name to provide on the root element.
property collapsed
collapsed?: boolean;
The starting collapsed state for the Coachmark. Use
isCollapsed
instead.Deprecated
Use
isCollapsed
instead.
property color
color?: string;
Color of the Coachmark/TeachingBubble.
property componentRef
componentRef?: IRefObject<ICoachmark>;
Optional callback to access the ICoachmark interface. Use this instead of ref for accessing the public methods and properties of the component.
property delayBeforeCoachmarkAnimation
delayBeforeCoachmarkAnimation?: number;
Delay in milliseconds before Coachmark animation appears.
property delayBeforeMouseOpen
delayBeforeMouseOpen?: number;
Delay before allowing mouse movements to open the Coachmark.
property height
height?: number;
The height of the Coachmark.
Deprecated
No longer used.
property isCollapsed
isCollapsed?: boolean;
The starting collapsed state for the Coachmark.
property isPositionForced
isPositionForced?: boolean;
Whether or not to force the Coachmark/TeachingBubble content to fit within the window bounds.
property mouseProximityOffset
mouseProximityOffset?: number;
The distance in pixels the mouse is located before opening up the Coachmark.
property onAnimationOpenEnd
onAnimationOpenEnd?: () => void;
Callback when the opening animation completes.
property onAnimationOpenStart
onAnimationOpenStart?: () => void;
Callback when the opening animation begins.
property onDismiss
onDismiss?: (ev?: any) => void;
Callback when the Coachmark tries to close.
property onMouseMove
onMouseMove?: (e: MouseEvent) => void;
Callback to run when the mouse moves.
property persistentBeak
persistentBeak?: boolean;
If true then the Coachmark beak (arrow pointing towards target) will always be visible as long as Coachmark is visible
property positioningContainerProps
positioningContainerProps?: IPositioningContainerProps;
Props to pass to the PositioningContainer component. Specify the
directionalHint
to indicate on which edge the Coachmark/TeachingBubble should be positioned.
property preventDismissOnLostFocus
preventDismissOnLostFocus?: boolean;
If true then the Coachmark will not dismiss when it loses focus
property preventFocusOnMount
preventFocusOnMount?: boolean;
If true then focus will not be set to the Coachmark when it mounts. Useful in cases where focus on coachmark is causing other components in page to dismiss upon losing focus.
property styles
styles?: IStyleFunctionOrObject<ICoachmarkStyleProps, ICoachmarkStyles>;
Call to provide customized styling that will layer on top of the variant rules
property target
target: HTMLElement | string | null;
The target that the Coachmark should try to position itself based on.
property teachingBubbleRef
teachingBubbleRef?: ITeachingBubble;
Ref for TeachingBubble
Deprecated
Coachmark uses
focusFirstChild
utility instead to focus on TeachingBubbleContent
property theme
theme?: ITheme;
Theme provided by higher order component.
property width
width?: number;
The width of the Coachmark.
Deprecated
No longer used.
interface ICoachmarkState
interface ICoachmarkState {}
property alertText
alertText?: string;
ARIA alert text to read aloud with Narrator once the Coachmark is mounted
property beakBottom
beakBottom?: string;
The bottom position of the beak
property beakLeft
beakLeft?: string;
The left position of the beak
property beakRight
beakRight?: string;
The right position of the beak
property beakTop
beakTop?: string;
The right position of the beak
property entityInnerHostRect
entityInnerHostRect: IEntityRect;
Cached width and height of _entityInnerHostElement
property isBeaconAnimating
isBeaconAnimating: boolean;
Enables/Disables the beacon that radiates from the center of the coachmark.
property isCollapsed
isCollapsed: boolean;
Is the Coachmark currently collapsed into a tear drop shape
property isMeasured
isMeasured: boolean;
Is the Coachmark done measuring the hosted entity
property isMeasuring
isMeasuring: boolean;
Is the teaching bubble currently retreiving the original dimensions of the hosted entity.
property isMouseInProximity
isMouseInProximity: boolean;
Is the mouse in proximity of the default target element
property targetAlignment
targetAlignment?: RectangleEdge;
Alignment edge of callout in relation to target
property targetPosition
targetPosition?: RectangleEdge;
Position of Coachmark/TeachingBubble in relation to target
property transformOrigin
transformOrigin?: string;
Transform origin of teaching bubble callout
interface ICoachmarkStyleProps
interface ICoachmarkStyleProps {}
The props needed to construct styles.
property beaconColorOne
beaconColorOne?: string;
Beacon color one
property beaconColorTwo
beaconColorTwo?: string;
Beacon color two
property className
className?: string;
ClassName to provide on the root style area.
property collapsed
collapsed?: boolean;
Is the Coachmark collapsed. Deprecated, use
isCollapsed
instead.Deprecated
Use
isCollapsed
instead.
property color
color?: string;
Color
property delayBeforeCoachmarkAnimation
delayBeforeCoachmarkAnimation?: string;
Delay time for the animation to start
property entityHostHeight
entityHostHeight?: string;
The height measured before the component has been mounted in pixels
property entityHostWidth
entityHostWidth?: string;
The width measured in pixels
property height
height?: string;
Height of the coachmark
property isBeaconAnimating
isBeaconAnimating: boolean;
Is the beacon currently animating.
Deprecated
Property is never used
property isCollapsed
isCollapsed: boolean;
Is the Coachmark collapsed
property isMeasured
isMeasured: boolean;
Is the Coachmark finished measuring the dimensions of innerHostElement
Deprecated
Value is always the inverse of
isMeasuring
property isMeasuring
isMeasuring: boolean;
Is the component taking measurements
property theme
theme?: ITheme;
Current theme.
property transformOrigin
transformOrigin?: string;
Transform origin for teaching bubble content
property width
width?: string;
Width of the coachmark
interface ICoachmarkStyles
interface ICoachmarkStyles {}
Represents the stylable areas of the control.
property ariaContainer
ariaContainer?: IStyle;
The styles applied to the ARIA attribute container
property childrenContainer
childrenContainer: IStyle;
The layer that directly contains the TeachingBubbleContent
property collapsed
collapsed?: IStyle;
The styles applied when the Coachmark has collapsed.
property entityHost
entityHost?: IStyle;
The layer that content/components/elements will be hosted in.
property entityInnerHost
entityInnerHost: IStyle;
The inner layer that components will be hosted in and primary purpose is scaling the layer down while the Coachmark collapsed.
property pulsingBeacon
pulsingBeacon?: IStyle;
The pulsing beacon that animates when the Coachmark is collapsed.
property root
root?: IStyle;
Style for the root element in the default enabled/unchecked state.
property rotateAnimationLayer
rotateAnimationLayer?: IStyle;
The layer the Rotate animation will be applied to.
property scaleAnimationLayer
scaleAnimationLayer?: IStyle;
The layer the Scale animation will be applied to.
property translateAnimationContainer
translateAnimationContainer?: IStyle;
The layer, or div, that the translate animation will be applied to.
interface IColor
interface IColor extends IRGB, IHSV {}
property hex
hex: string;
Hex string for the color (excluding alpha component), *not* prefixed with #.
property str
str: string;
CSS color string. If a hex value, it must be prefixed with #.
property t
t?: number;
Transparency value, range 0 (opaque) to 100 (transparent). Usually assumed to be 0 if not specified.
interface IColorCellProps
interface IColorCellProps {}
interface IColorPicker
interface IColorPicker {}
property color
color: IColor;
The currently selected color.
interface IColorPickerGridCellProps
interface IColorPickerGridCellProps {}
property borderWidth
borderWidth?: number;
Width of the border that indicates a selected/hovered cell, in pixels.
property circle
circle?: boolean;
True if this cell should be rendered as a circle, false if it should be a square.
true
(render as circle)
property color
color?: string;
The CSS-compatible string to describe the color
property disabled
disabled?: boolean;
Whether this cell should be disabled false
property height
height?: number;
Height of the cell, in pixels
property id
id?: string;
Used as a PREFIX for the cell's ID (the cell will not have this literal string as its ID).
Deprecated
Deprecated due to misleading name. Use
idPrefix
instead.
property idPrefix
idPrefix?: string;
Prefix for this cell's ID. Will be required in a future version once
id
is removed.
property index
index?: number;
Index for this option
property item
item: IColorCellProps;
Item to render
property label
label?: string;
Tooltip and aria label for this item
property onClick
onClick?: (item: IColorCellProps) => void;
Handler for when a color cell is clicked.
property onFocus
onFocus?: (item: IColorCellProps) => void;
property onHover
onHover?: (item?: IColorCellProps) => void;
property onKeyDown
onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
property onMouseEnter
onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
Mouse enter handler. Returns true if the event should be processed, false otherwise.
property onMouseLeave
onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
property onMouseMove
onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
Mouse move handler. Returns true if the event should be processed, false otherwise.
property onWheel
onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
property selected
selected: boolean;
Whether this cell is currently selected
property styles
styles?: IStyleFunctionOrObject< IColorPickerGridCellStyleProps, IColorPickerGridCellStyles>;
Custom styles for the component.
property theme
theme?: ITheme;
The theme object to use for styling.
property width
width?: number;
Width of the cell, in pixels
interface IColorPickerGridCellStyleProps
interface IColorPickerGridCellStyleProps {}
property borderWidth
borderWidth?: number;
The width of the border indicating a hovered or selected cell, in pixels.
property circle
circle?: boolean;
Whether the svg color element should be rendered as a circle or not.
property disabled
disabled?: boolean;
Whether the component is disabled or not.
property height
height?: number;
The height of this cell, in pixels.
property isWhite
isWhite?: boolean;
Whether the color being rendered is white or not. If it is white we show a border around it.
property selected
selected?: boolean;
Whether the cell is currently selected or not.
property theme
theme: ITheme;
Theme to apply to the cell.
property width
width?: number;
The width of this cell, in pixels.
interface IColorPickerGridCellStyles
interface IColorPickerGridCellStyles {}
interface IColorPickerProps
interface IColorPickerProps {}
property alphaLabel
alphaLabel?: string;
Label for the alpha textfield.
Deprecated
Use
strings
property alphaSliderHidden
alphaSliderHidden?: boolean;
Whether to hide the alpha (or transparency) slider and text field.
Deprecated
Use
alphaType: 'none'
property alphaType
alphaType?: 'alpha' | 'transparency' | 'none';
alpha
(the default) means display a slider and text field for editing alpha values.transparency
also displays a slider and text field but for editing transparency values.none
hides these controls.Alpha represents the opacity of the color, whereas transparency represents the transparentness of the color: i.e. a 30% transparent color has 70% opaqueness.
property blueLabel
blueLabel?: string;
Label for the blue text field.
Deprecated
Use
strings
property className
className?: string;
Additional CSS class(es) to apply to the ColorPicker.
property color
color: IColor | string;
Object or CSS-compatible string to describe the color.
property componentRef
componentRef?: IRefObject<IColorPicker>;
Gets the component ref.
property greenLabel
greenLabel?: string;
Label for the green text field.
Deprecated
Use
strings
property hexLabel
hexLabel?: string;
Label for the hex text field.
Deprecated
Use
strings
property onChange
onChange?: (ev: React.SyntheticEvent<HTMLElement>, color: IColor) => void;
Callback for when the user changes the color. (Not called when the color is changed via props.)
property redLabel
redLabel?: string;
Label for the red text field.
Deprecated
Use
strings
property showPreview
showPreview?: boolean;
Whether to show color preview box.
property strings
strings?: IColorPickerStrings;
Labels for elements within the ColorPicker. Defaults are provided in English only.
property styles
styles?: IStyleFunctionOrObject<IColorPickerStyleProps, IColorPickerStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme (provided through customization).
interface IColorPickerState
interface IColorPickerState {}
property color
color: IColor;
Most recently selected color
property editingColor
editingColor?: { /** Which color component is being edited */ component: ColorComponent; /** Currently entered value, which is not valid */ value: string;};
Color component currently being edited via a text field (if intermediate value is invalid)
interface IColorPickerStrings
interface IColorPickerStrings {}
property alpha
alpha?: string;
Label for the alpha text field. Also used as the aria label for the alpha slider if
alphaAriaLabel
is not provided.
property alphaAriaLabel
alphaAriaLabel?: string;
Customized aria-label for the alpha slider.
property blue
blue?: string;
Label for the blue text field.
property green
green?: string;
Label for the green text field.
property hex
hex?: string;
Label for the hex text field.
property hue
hue?: string;
Aria label for the hue slider.
Deprecated
Use
hueAriaLabel
property hueAriaLabel
hueAriaLabel?: string;
Aria label for the hue slider.
property red
red?: string;
Label for the red text field.
property rootAriaLabelFormat
rootAriaLabelFormat?: string;
Accessible label for the root of the color picker region. The string should contain a placeholder
{0}
for the currently selected color.
property svAriaDescription
svAriaDescription?: string;
Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts saturation and moving it vertically adjusts value (essentially, brightness).
property svAriaLabel
svAriaLabel?: string;
Aria label for the color rectangle, which adjusts saturation and value (brightness).
property svAriaValueFormat
svAriaValueFormat?: string;
Format string for the current values of the color rectangle. The string must include descriptions and two placeholders for the current values:
{0}
for saturation and{1}
for value/brightness.
property transparency
transparency?: string;
Label for the transparency text field.
property transparencyAriaLabel
transparencyAriaLabel?: string;
Customized aria-label for the transparency slider.
interface IColorPickerStyles
interface IColorPickerStyles {}
property colorRectangle
colorRectangle?: IStyle;
Style set for the panel element that contains the color rectangle
property colorSquare
colorSquare?: IStyle;
Color Square
property flexContainer
flexContainer?: IStyle;
flexContainer
property flexPreviewBox
flexPreviewBox?: IStyle;
flexPreviewBox
property flexSlider
flexSlider?: IStyle;
flexSlider
property input
input?: IStyle;
Style set for each text field input.
property panel
panel?: IStyle;
Style set for the panel element that contains the color rectangle, color sliders and inputs .
property root
root?: IStyle;
Style set for the root element.
property table
table?: IStyle;
Style set for the table element that contains the color sliders and inputs.
property tableAlphaCell
tableAlphaCell?: IStyle;
Style set for the table cell that contains the alpha or transparency label.
property tableHeader
tableHeader?: IStyle;
Style set for the table header that contains the labels.
property tableHexCell
tableHexCell?: IStyle;
Style set for the table cell that contains the hex label.
interface IColorRectangle
interface IColorRectangle {}
property color
color: IColor;
Currently selected color.
interface IColorRectangleProps
interface IColorRectangleProps {}
property ariaDescription
ariaDescription?: string;
Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts saturation and moving it vertically adjusts value (essentially, brightness).
property ariaLabel
ariaLabel?: string;
Label of the ColorRectangle for the benefit of screen reader users.
property ariaValueFormat
ariaValueFormat?: string;
Format string for the color rectangle's current value as read by screen readers. The string must include descriptions and two placeholders for the current values:
{0}
for saturation and{1}
for value/brightness.
property className
className?: string;
Additional CSS class(es) to apply to the ColorRectangle.
property color
color: IColor;
Current color of the rectangle.
property componentRef
componentRef?: IRefObject<IColorRectangle>;
Gets the component ref.
property minSize
minSize?: number;
Minimum width and height.
property onChange
onChange?: (ev: React.MouseEvent | React.KeyboardEvent, color: IColor) => void;
Callback for when the color changes.
property styles
styles?: IStyleFunctionOrObject< IColorRectangleStyleProps, IColorRectangleStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme (provided through customization).
interface IColorRectangleStyleProps
interface IColorRectangleStyleProps {}
interface IColorRectangleStyles
interface IColorRectangleStyles {}
property dark
dark?: IStyle;
Style set for the dark-colored rectangle.
property description
description?: IStyle;
Style for a hidden detailed description for screen reader users.
property light
light?: IStyle;
Style set for the light-colored rectangle.
property root
root?: IStyle;
Style set for the root element.
property thumb
thumb?: IStyle;
Style set for the draggable thumb element.
interface IColorSlider
interface IColorSlider {}
property value
value: number;
Current value of the slider.
interface IColorSliderProps
interface IColorSliderProps {}
property ariaLabel
ariaLabel?: string;
Label of the ColorSlider for the benefit of screen reader users.
property className
className?: string;
Additional CSS class(es) to apply to the ColorSlider.
property componentRef
componentRef?: IRefObject<IColorSlider>;
Gets the component ref.
property isAlpha
isAlpha?: boolean;
If true, the slider represents an alpha slider and will display a gray checkered pattern in the background. Otherwise, the slider represents a hue slider.
Deprecated
Use
type
property maxValue
maxValue?: number;
Maximum value of the slider.
Deprecated
Will be 100 for alpha or transparency sliders, or 359 for hue sliders.
property minValue
minValue?: number;
Minimum value of the slider.
Deprecated
Will always be 0
property onChange
onChange?: ( event: React.MouseEvent | React.KeyboardEvent, newValue?: number) => void;
Callback issued when the value changes.
property overlayColor
overlayColor?: string;
Hex color to use when rendering an alpha or transparency slider's overlay, *without* the
#
.
property overlayStyle
overlayStyle?: React.CSSProperties;
Custom style for the overlay element.
Deprecated
Use
overlayColor
instead
property styles
styles?: IStyleFunctionOrObject<IColorSliderStyleProps, IColorSliderStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme (provided through customization).
property thumbColor
thumbColor?: string;
CSS-compatible string for the color of the thumb element.
Deprecated
Not used. Use
styles.sliderThumb
instead.
property type
type?: 'hue' | 'alpha' | 'transparency';
Type of slider to display.
property value
value?: number;
Current value of the slider.
interface IColorSliderStyles
interface IColorSliderStyles {}
property root
root?: IStyle;
Style set for the root element.
property sliderOverlay
sliderOverlay?: IStyle;
Style set for the overlay element.
property sliderThumb
sliderThumb?: IStyle;
Style set for the draggable thumb element.
interface IColumn
interface IColumn {}
property ariaLabel
ariaLabel?: string;
Accessible label for the column. The column name will still be used as the primary label, but this text (if specified) will be read after the column name.
property calculatedWidth
calculatedWidth?: number;
Internal only value.
property className
className?: string;
Class name to apply to the column cell within each row.
property columnActionsMode
columnActionsMode?: ColumnActionsMode;
Defines how the column's header should render.
property currentWidth
currentWidth?: number;
Internal only value. Remembers the actual width of the column in any case.
calculatedWidth
is only saved when it's defined by user, not for justified calculations.
property data
data?: any;
Arbitrary data passthrough which can be used by the caller.
property fieldName
fieldName?: string;
The field to pull the text value from for the column. Can be unset if a custom
onRender
method is provided.
property filterAriaLabel
filterAriaLabel?: string;
Accessible label for the status of this column when filtered.
property flexGrow
flexGrow?: number;
If specified, the width of the column is a portion of the available space equal to this value divided by the sum of all proportional column widths in the list. For example, if there is a list with two proportional columns that have widths of 1 and 3, they will respectively occupy (1/4) = 25% and (3/4) = 75% of the remaining space. Note that this relies on viewport measures and will not work well with skipViewportMeasures.
property getValueKey
getValueKey?: (item?: any, index?: number, column?: IColumn) => string;
Custom override for the parent list's
getCellValueKey
.
property groupAriaLabel
groupAriaLabel?: string;
Accessible label for the status of this column when grouped.
property headerClassName
headerClassName?: string;
Class name to apply to the column header cell.
property iconClassName
iconClassName?: string;
Class name for the icon within the header.
property iconName
iconName?: string;
Custom icon to use in the column header.
property isCollapsable
isCollapsable?: boolean;
If true, allow the column to be collapsed when rendered in justified layout.
Deprecated
Use
isCollapsible
property isCollapsible
isCollapsible?: boolean;
If true, allow the column to be collapsed when rendered in justified layout.
property isFiltered
isFiltered?: boolean;
Whether the list is filtered by this column. If true, shows a filter icon next to this column's name.
property isGrouped
isGrouped?: boolean;
Whether the list is grouped by this column. If true, shows a grouped icon next to this column's name.
property isIconOnly
isIconOnly?: boolean;
Whether only the icon should be displayed in the column header. If true, the column name and dropdown chevron will not be displayed.
property isMenuOpen
isMenuOpen?: boolean;
Whether a dropdown menu is open so that the appropriate ARIA attributes are rendered.
property isMultiline
isMultiline?: boolean;
Determines if the column can render multi-line text.
property isPadded
isPadded?: boolean;
If true, add additional LTR padding-right to column and cells.
property isResizable
isResizable?: boolean;
Determines if the column can be resized.
property isRowHeader
isRowHeader?: boolean;
Whether the column is a header for the given row. There should be only one column with this set to true.
property isSorted
isSorted?: boolean;
Determines if the column is currently sorted. Renders a sort arrow in the column header.
property isSortedDescending
isSortedDescending?: boolean;
Determines if the sort arrow is pointed down (descending) or up.
property key
key: string;
A unique key for identifying the column.
property maxWidth
maxWidth?: number;
Maximum width for the column, if stretching is allowed in justified scenarios.
property minWidth
minWidth: number;
Minimum width for the column.
property name
name: string;
Name to render on the column header.
property onColumnClick
onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
Callback for when the user clicks on the column header.
property onColumnContextMenu
onColumnContextMenu?: ( column?: IColumn, ev?: React.MouseEvent<HTMLElement>) => void;
Callback for when the user opens the column header context menu.
property onColumnResize
onColumnResize?: (width?: number) => void;
Callback for when the column is resized (
width
is the current width).Prefer this over
DetailsList
'sonColumnResize
if you require theIColumn
to report its width after every resize event. Consider debouncing the callback if resize events occur frequently.
property onRender
onRender?: (item?: any, index?: number, column?: IColumn) => any;
Custom renderer for cell content, instead of the default text rendering.
property onRenderDivider
onRenderDivider?: IRenderFunction<IDetailsColumnProps>;
Custom renderer for column header divider.
property onRenderFilterIcon
onRenderFilterIcon?: IRenderFunction<IDetailsColumnFilterIconProps>;
Custom renderer for filter icon.
property onRenderHeader
onRenderHeader?: IRenderFunction<IDetailsColumnProps>;
Custom renderer for column header content, instead of the default text rendering.
property sortAscendingAriaLabel
sortAscendingAriaLabel?: string;
Accessible label for indicating that the list is sorted by this column in ascending order. This will be read after the main column header label.
property sortDescendingAriaLabel
sortDescendingAriaLabel?: string;
Accessible label for indicating that the list is sorted by this column in descending order. This will be read after the main column header label.
property styles
styles?: IStyleFunctionOrObject<IDetailsColumnStyleProps, IDetailsColumnStyles>;
Custom overrides to the themed or default styles.
property targetWidthProportion
targetWidthProportion?: number;
If specified, the width of the column is a portion of the available space equal to this value divided by the sum of all proportional column widths in the list. For example, if there is a list with two proportional columns that have widths of 1 and 3, they will respectively occupy (1/4) = 25% and (2/4) = 75% of the remaining space. Note that this relies on viewport measures and will not work well with skipViewportMeasures.
interface IColumnDragDropDetails
interface IColumnDragDropDetails {}
property draggedIndex
draggedIndex: number;
Specifies the source column index
property targetIndex
targetIndex: number;
Specifies the target column index
interface IColumnReorderHeaderProps
interface IColumnReorderHeaderProps extends IColumnReorderOptions {}
property onColumnDragEnd
onColumnDragEnd?: ( props: { dropLocation?: ColumnDragEndLocation; }, event: MouseEvent) => void;
Callback to notify the column dragEnd event to List Need this to check whether the dragEnd has happened on corresponding list or outside of the list
interface IColumnReorderOptions
interface IColumnReorderOptions {}
property frozenColumnCountFromEnd
frozenColumnCountFromEnd?: number;
Specifies the number fixed columns from right
property frozenColumnCountFromStart
frozenColumnCountFromStart?: number;
Specifies the number fixed columns from left
property handleColumnReorder
handleColumnReorder?: (draggedIndex: number, targetIndex: number) => void;
Callback to handle column reordering.
draggedIndex
is the source column index, which should be placed attargetIndex
.Deprecated
Use
onColumnDrop
instead.
property onColumnDragStart
onColumnDragStart?: (dragStarted: boolean) => void;
Callback to handle when dragging on this column's DetailsHeader has started.
property onColumnDrop
onColumnDrop?: (dragDropDetails: IColumnDragDropDetails) => void;
Callback to handle column reordering.
draggedIndex
is the source column index, which should be placed attargetIndex
.
property onDragEnd
onDragEnd?: (columnDropLocationDetails: ColumnDragEndLocation) => void;
Callback to handle when dragging on this column's DetailsHeader has finished.
interface IColumnResizeDetails
interface IColumnResizeDetails {}
property columnIndex
columnIndex: number;
property columnMinWidth
columnMinWidth: number;
property originX
originX?: number;
interface IComboBox
interface IComboBox {}
property dismissMenu
dismissMenu: () => void;
If there is a menu open this will dismiss the menu.
property selectedOptions
readonly selectedOptions: IComboBoxOption[];
All selected options.
method focus
focus: (shouldOpenOnFocus?: boolean, useFocusAsync?: boolean) => boolean;
Sets focus to the input in the ComboBox
Parameter shouldOpenOnFocus
Determines if we should open the ComboBox menu when the input gets focus.
Parameter useFocusAsync
Determines if we should focus the input asynchronously.
Returns
True if focus could be set, false if no operation was taken.
interface IComboBoxClassNames
interface IComboBoxClassNames {}
property callout
callout: string;
property container
container: string;
property divider
divider: string;
property errorMessage
errorMessage: string;
property header
header: string;
property input
input: string;
property label
label: string;
property optionsContainer
optionsContainer: string;
property optionsContainerWrapper
optionsContainerWrapper: string;
property root
root: string;
property screenReaderText
screenReaderText: string;
interface IComboBoxOption
interface IComboBoxOption extends ISelectableOption {}
property styles
styles?: Partial<IComboBoxOptionStyles>;
Specific styles for each ComboBox option. To give common styles to all options, use
IComboBoxProps.comboBoxOptionStyles
instead.
property useAriaLabelAsText
useAriaLabelAsText?: boolean;
Whether to use the
ariaLabel
prop instead of thetext
prop to set the preview text as well as thearia-label
. This is for scenarios where thetext
prop is used for embedded data.
interface IComboBoxOptionClassNames
interface IComboBoxOptionClassNames {}
property optionText
optionText: string;
property optionTextWrapper
optionTextWrapper: string;
property root
root: string;
interface IComboBoxOptionStyles
interface IComboBoxOptionStyles extends IButtonStyles {}
property optionText
optionText: IStyle;
Styles for the text inside the ComboBox option. This should be used instead of the description in IButtonStyles because we custom render the text in the ComboBox options.
property optionTextWrapper
optionTextWrapper: IStyle;
Styles for the ComboBox option text's wrapper.
interface IComboBoxProps
interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox, IComboBox> {}
property allowFreeform
allowFreeform?: boolean;
Whether the ComboBox allows freeform user input, rather than restricting to the provided options.
property ariaDescribedBy
ariaDescribedBy?: string;
Optional ID of an element providing a description of the ComboBox for screen reader users.
property autoComplete
autoComplete?: 'on' | 'off';
Whether the ComboBox auto completes. As the user is entering text, potential matches will be suggested from the list of options. If the ComboBox is expanded, this will also scroll to the suggested option and give it a selected style.
property autofill
autofill?: IAutofillProps;
Props to pass through to the Autofill component (the input field) inside the ComboBox.
property buttonIconProps
buttonIconProps?: IIconProps;
The IconProps to use for the caret button of the ComboBox.
property caretDownButtonStyles
caretDownButtonStyles?: Partial<IButtonStyles>;
Styles for the caret down button.
property comboBoxOptionStyles
comboBoxOptionStyles?: Partial<IComboBoxOptionStyles>;
Default styles that should be applied to ComboBox options.
property componentRef
componentRef?: IRefObject<IComboBox>;
Optional callback to access the
IComboBox
interface. Use this instead ofref
for accessing the public methods and properties of the component.
property dropdownMaxWidth
dropdownMaxWidth?: number;
Custom max width for the options list dropdown.
property dropdownWidth
dropdownWidth?: number;
Custom width for options list dropdown. Mutually exclusive with
useComboBoxAsMenuWidth
.
property getClassNames
getClassNames?: ( theme: ITheme, isOpen: boolean, disabled: boolean, required: boolean, focused: boolean, allowFreeForm: boolean, hasErrorMessage: boolean, className?: string) => IComboBoxClassNames;
Custom function for providing the classNames for the ComboBox. Can be used to provide all styles for the component instead of applying them on top of the default styles.
property iconButtonProps
iconButtonProps?: IButtonProps;
Additional props for the caret button.
property isButtonAriaHidden
isButtonAriaHidden?: boolean;
Sets the
aria-hidden
attribute on the ComboBox's caret button element. This element is hidden from screen readers by default because all functionality is handled by the input element and the arrow button is only meant to be decorative.
property keytipProps
keytipProps?: IKeytipProps;
Optional keytip for this ComboBox.
property multiSelectDelimiter
multiSelectDelimiter?: string;
When multiple items are selected, this will be used to separate values in the ComboBox input.
property onChange
onChange?: ( event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string) => void;
Callback for when either: 1) The selected option changes. 2) A manually edited value is submitted. In this case there may not be a matched option if
allowFreeform
is also true (and hence onlyvalue
would be provided; the other parameters would be unspecified).
property onInputValueChange
onInputValueChange?: (text: string) => void;
Called when the user types in to the input of the combo box
Ideal if you want to be notified of raw text input
property onItemClick
onItemClick?: ( event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number) => void;
Callback for when a ComboBox item is clicked.
property onMenuDismiss
onMenuDismiss?: () => void;
Callback for before the menu gets dismissed.
property onMenuDismissed
onMenuDismissed?: () => void;
Callback for when the ComboBox menu is dismissed.
property onMenuOpen
onMenuOpen?: () => void;
Called when the ComboBox menu is launched.
property onPendingValueChanged
onPendingValueChanged?: ( option?: IComboBoxOption, index?: number, value?: string) => void;
Called when the user changes the pending value in ComboBox, either by typing in the input or hovering over options. When typing, the behavior varies depending on
autoComplete
andallowFreeform
settings.In all cases, when the pending value is reset, all parameters will be undefined.
When hovering options:
option
andindex
will be provided, andvalue
will be undefined.Typing with
allowFreeform
on: If there's an option matching the input (an exact match ifautoComplete
is off, or a prefix match otherwise),option
andindex
are provided andvalue
is undefined. Otherwise onlyvalue
is provided.Typing with
allowFreeform
off (or unspecified): IfautoComplete
is on (or unspecified), and the user types text matching the start of an option within a timeout,option
andindex
are provided andvalue
is undefined. IfautoComplete
is off, typing does nothing.If you simply want to be notified of raw text input, use the prop
onInputValueChange
.
property onRenderLabel
onRenderLabel?: IRenderFunction<IOnRenderComboBoxLabelProps>;
Custom render function for the label text.
property onRenderLowerContent
onRenderLowerContent?: IRenderFunction<IComboBoxProps>;
Add additional content below the option list in the callout.
property onRenderUpperContent
onRenderUpperContent?: IRenderFunction<IComboBoxProps>;
Add additional content above the option list in the callout.
property onResolveOptions
onResolveOptions?: ( options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;
Callback for when the options should be resolved, if they have been updated or if they need to be passed in the first time.
property onScrollToItem
onScrollToItem?: (itemIndex: number) => void;
Callback for when the ComboBox requests the list to scroll to a specific element.
property options
options: IComboBoxOption[];
Collection of options for this ComboBox.
property persistMenu
persistMenu?: boolean;
Whether to show/hide the menu when it's opened/closed (rather than creating/destroying it). This will improve perf of the menu opening but could potentially have a negative impact on overall perf by increasing initial render time (since the ComboBox will render the menu hidden on mount) and keeping more elements in the DOM. Should only be used when perf to open/close the menu is important.
property scrollSelectedToTop
scrollSelectedToTop?: boolean;
When the options list is scrollable, whether to position the selected option at the top of the callout when it is opened (unless it has reached the end of the scrollbar).
property shouldRestoreFocus
shouldRestoreFocus?: boolean;
Whether the options list callout should restore focus after being dismissed. Set to false to prevent the menu from trying to re-focus the element that had focus before the menu was opened.
property styles
styles?: Partial<IComboBoxStyles>;
Custom styles for this component.
property text
text?: string;
Value to show in the input (does not have to map to a ComboBox option).
property theme
theme?: ITheme;
Theme provided by HOC.
property useComboBoxAsMenuWidth
useComboBoxAsMenuWidth?: boolean;
Whether to use the ComboBox field width as the menu's width.
interface IComboBoxState
interface IComboBoxState {}
property currentOptions
currentOptions: IComboBoxOption[];
The options currently available for the callout
property currentPendingValue
currentPendingValue?: string;
When taking input, this will store the actual text that is being entered
property currentPendingValueValidIndex
currentPendingValueValidIndex: number;
When taking input, this will store the index that the options input matches (-1 if no input or match)
property currentPendingValueValidIndexOnHover
currentPendingValueValidIndexOnHover: number;
Stores the hovered over value in the dropdown (used for styling the options without updating the input)
property focusState
focusState?: 'none' | 'focused' | 'focusing';
The focused state of the comboBox
property isOpen
isOpen?: boolean;
The open state
property selectedIndices
selectedIndices?: number[];
The currently selected indices
property suggestedDisplayValue
suggestedDisplayValue?: string;
This value is used for the autocomplete hint value
interface IComboBoxStyles
interface IComboBoxStyles {}
property callout
callout: IStyle;
Styles for the callout.
property container
container: IStyle;
Style for the container which has the ComboBox and the label. (In most other components this would be called
root
.)
property divider
divider: IStyle;
Styles for a divider in the options.
property errorMessage
errorMessage: IStyle;
Styles for the error message text of the ComboBox.
property header
header: IStyle;
Styles for a header in the options.
property input
input: IStyle;
Base styles for the input element which contains the currently selected option.
property inputDisabled
inputDisabled: IStyle;
Style override for the input element when ComboBox is disabled.
property label
label: IStyle;
Style for the label element of the ComboBox.
property labelDisabled
labelDisabled: IStyle;
Style for the label element of the ComboBox in the disabled state.
property optionsContainer
optionsContainer: IStyle;
Styles for the container of all the ComboBox options. Includes the headers and dividers.
property optionsContainerWrapper
optionsContainerWrapper: IStyle;
Styles for the options list container element.
property root
root: IStyle;
Base styles for the wrapper element containing the input field and caret button, applied to all state variants.
Unlike in most components, this is NOT the actual root element which also contains the label as well as the field; for that, use
container
.
property rootDisabled
rootDisabled: IStyle;
Styles for the wrapper element containing the input field and caret button, applied when the ComboBox is disabled. These override all the other styles.
NOTE: Hover/focused/active styles are not applied for disabled ComboBoxes.
property rootDisallowFreeForm
rootDisallowFreeForm: IStyle;
Styles for the wrapper element containing the input field and caret button, applied when
IComboBoxProps.allowFreeform
is false.
property rootError
rootError: IStyle;
Styles for the wrapper element containing the input field and caret button, applied when the ComboBox has an error message.
property rootFocused
rootFocused: IStyle;
Styles for the wrapper element containing the input field and caret button, applied any time the ComboBox is focused (unless it's disabled).
property rootHovered
rootHovered: IStyle;
Styles for the wrapper element containing the input field and caret button, applied any time the ComboBox is hovered (unless it's disabled).
property rootPressed
rootPressed: IStyle;
Styles for the wrapper element containing the input field and caret button, applied any time the ComboBox is active (unless it's disabled).
property screenReaderText
screenReaderText: IStyle;
Styles for hidden screen reader text.
interface ICommandBar
interface ICommandBar {}
interface ICommandBarData
interface ICommandBarData {}
property cacheKey
cacheKey: string;
Unique string used to cache the width of the command bar
property farItems
farItems: ICommandBarItemProps[] | undefined;
Items being rendered on the far side
property minimumOverflowItems
minimumOverflowItems: number;
Length of original overflowItems to ensure that they are not moved into primary region on resize
property overflowItems
overflowItems: ICommandBarItemProps[];
Items being rendered in the overflow
property primaryItems
primaryItems: ICommandBarItemProps[];
Items being rendered in the primary region
interface ICommandBarItemProps
interface ICommandBarItemProps extends IContextualMenuItem {}
ICommandBarItemProps extends IContextualMenuItem and adds a few CommandBar-specific props.
property buttonStyles
buttonStyles?: IButtonStyles;
Custom styles for individual button
property cacheKey
cacheKey?: string;
A custom cache key to be used for this item. If
cacheKey
is changed, the cache will invalidate. Defaults tokey
value.
property commandBarButtonAs
commandBarButtonAs?: IComponentAs<ICommandBarItemProps>;
Method to override the render of the individual command bar button. Not used when item is rendered in overflow.
property iconOnly
iconOnly?: boolean;
Show only an icon for this item, not text. Does not apply if item is in the overflow.
property renderedInOverflow
renderedInOverflow?: boolean;
Context under which the item is being rendered. This value is mutated by the CommandBar and is useful for adjusting the
onRender
function.
property tooltipHostProps
tooltipHostProps?: ITooltipHostProps;
Props for the tooltip when in
iconOnly
mode.
interface ICommandBarProps
interface ICommandBarProps extends React.HTMLAttributes<HTMLDivElement> {}
property ariaLabel
ariaLabel?: string;
Accessibility text to be read by the screen reader when the user's focus enters the command bar. The screen reader will read this text after reading information about the first focusable item in the command bar.
property buttonAs
buttonAs?: IComponentAs<IButtonProps>;
Custom component for the near and far item buttons. Not used for overflow menu items.
property className
className?: string;
Additional css class to apply to the command bar
property componentRef
componentRef?: IRefObject<ICommandBar>;
Optional callback to access the ICommandBar interface. Use this instead of ref for accessing the public methods and properties of the component.
property dataDidRender
dataDidRender?: (renderedData: any) => void;
Function to be called every time data is rendered. It provides the data that was actually rendered. A use case would be adding telemetry when a particular control is shown in an overflow or dropped as a result of
onReduceData
, or to count the number of renders that an implementation ofonReduceData
triggers.
property farItems
farItems?: ICommandBarItemProps[];
Items to render on the right side (or left, in RTL). ICommandBarItemProps extends IContextualMenuItem.
property items
items: ICommandBarItemProps[];
Items to render. ICommandBarItemProps extends IContextualMenuItem.
property onDataGrown
onDataGrown?: (movedItem: ICommandBarItemProps) => void;
Callback invoked when data has been grown.
property onDataReduced
onDataReduced?: (movedItem: ICommandBarItemProps) => void;
Callback invoked when data has been reduced.
property onGrowData
onGrowData?: (data: ICommandBarData) => ICommandBarData | undefined;
Custom function to grow data if items are too small for the given space. Return
undefined
if no more steps can be taken to avoid infinate loop.
property onReduceData
onReduceData?: (data: ICommandBarData) => ICommandBarData | undefined;
Custom function to reduce data if items do not fit in given space. Return
undefined
if no more steps can be taken to avoid infinate loop.
property overflowButtonAs
overflowButtonAs?: IComponentAs<IButtonProps>;
Custom component for the overflow button.
property overflowButtonProps
overflowButtonProps?: IButtonProps;
Props to be passed to overflow button. If
menuProps
are passed through this prop, any items provided will be prepended to any computed overflow items.
property overflowItems
overflowItems?: ICommandBarItemProps[];
Default items to have in the overflow menu. ICommandBarItemProps extends IContextualMenuItem.
property shiftOnReduce
shiftOnReduce?: boolean;
When true, items will be 'shifted' off the front of the array when reduced, and unshifted during grow.
property styles
styles?: IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles>;
Customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme provided by HOC.
interface ICommandBarStyleProps
interface ICommandBarStyleProps {}
interface ICommandBarStyles
interface ICommandBarStyles {}
property primarySet
primarySet?: IStyle;
property root
root?: IStyle;
property secondarySet
secondarySet?: IStyle;
interface IContextualMenu
interface IContextualMenu {}
interface IContextualMenuClassNames
interface IContextualMenuClassNames {}
Deprecated
in favor of mergeStyles API.
interface IContextualMenuItem
interface IContextualMenuItem {}
property ariaDescription
ariaDescription?: string;
Detailed description of the menu item for the benefit of screen readers.
property ariaLabel
ariaLabel?: string;
Custom accessible label for the element. If no override is specified, the
aria-label
attribute will contain the item name.
property canCheck
canCheck?: boolean;
Whether or not this menu item can be checked
property checked
checked?: boolean;
Whether or not this menu item is currently checked.
property className
className?: string;
Additional CSS class to apply to the menu item.
property componentRef
componentRef?: IRefObject<IContextualMenuRenderItem>;
Optional callback to access the IContextualMenuRenderItem interface. This will get passed down to ContextualMenuItem.
property customOnRenderListLength
customOnRenderListLength?: number;
When rendering a custom menu component that is passed in, the component might also be a list of elements. We want to keep track of the correct index our menu is using based off of the length of the custom list. It is up to the user to increment the count for their list.
property data
data?: any;
Any custom data the developer wishes to associate with the menu item.
property disabled
disabled?: boolean;
Whether the menu item is disabled
property getItemClassNames
getItemClassNames?: ( theme: ITheme, disabled: boolean, expanded: boolean, checked: boolean, isAnchorLink: boolean, knownIcon: boolean, itemClassName?: string, dividerClassName?: string, iconClassName?: string, subMenuClassName?: string, primaryDisabled?: boolean) => IMenuItemClassNames;
Method to provide the classnames to style the individual items inside a menu.
Deprecated
Use
styles
prop ofIContextualMenuItemProps
to leverage mergeStyles API.
property getSplitButtonVerticalDividerClassNames
getSplitButtonVerticalDividerClassNames?: ( theme: ITheme) => IVerticalDividerClassNames;
Method to provide the classnames to style the Vertical Divider of a split button inside a menu. Default value is the
getSplitButtonVerticalDividerClassNames
func defined inContextualMenu.classnames.ts
.
property href
href?: string;
Navigate to this URL when the menu item is clicked.
property iconProps
iconProps?: IIconProps;
Props for an icon to display next to the item.
property inactive
inactive?: boolean;
This prop is no longer used. All contextual menu items are now focusable when disabled.
Deprecated
in 6.38.2 will be removed in 7.0.0
property itemProps
itemProps?: Partial<IContextualMenuItemProps>;
Optional IContextualMenuItemProps overrides to customize behaviors such as item styling via
styles
.
property items
items?: IContextualMenuItem[];
Deprecated
Use subMenuProps.items instead.
property itemType
itemType?: ContextualMenuItemType;
property key
key: string;
Unique id to identify the item
property keytipProps
keytipProps?: IKeytipProps;
Keytip for this contextual menu item
property name
name?: string;
Text of the menu item.
Deprecated
Use
text
instead.
property onClick
onClick?: ( ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => boolean | void;
Callback for when the menu item is invoked. If
ev.preventDefault()
is called inonClick
, the click will not close the menu.Only for ContextualMenu items, returning true will dismiss the menu even if
ev.preventDefault()
was called (does not apply for button or CommandBar sub-menu items).
property onMouseDown
onMouseDown?: ( item: IContextualMenuItem, event: React.MouseEvent<HTMLElement>) => void;
A function to be executed on mouse down. This is executed before an
onClick
event and can be used to interrupt native on click events as well. The click event should still handle the commands. This should only be used in special cases when react and non-react are mixed.
property onRender
onRender?: ( item: any, dismissMenu: (ev?: any, dismissAll?: boolean) => void) => React.ReactNode;
Method to custom render this menu item. For keyboard accessibility, the top-level rendered item should be a focusable element (like an anchor or a button) or have the
data-is-focusable
property set to true.Parameter item
Item to render. Will typically be of type
IContextualMenuItem
. (When rendering a command bar item, will beICommandBarItemProps
.)Parameter dismissMenu
Function to dismiss the menu. Can be used to ensure that a custom menu item click dismisses the menu. (Will be undefined if rendering a command bar item.)
property onRenderContent
onRenderContent?: ( props: IContextualMenuItemProps, defaultRenders: IContextualMenuItemRenderFunctions) => React.ReactNode;
Method to customize sub-components rendering of this menu item.
Parameter props
Props used to pass into render functions
Parameter defaultRenders
Default render functions that renders default sub-components
property onRenderIcon
onRenderIcon?: IRenderFunction<IContextualMenuItemProps>;
Custom render function for the menu item icon
property preferMenuTargetAsEventTarget
preferMenuTargetAsEventTarget?: boolean;
Flag which indicates that, when the item is clicked, the 'target' for the click event should be overridden to reflect the launch target from the root menu. This avoids a situation where the 'target' of the event may wind up detached from the DOM when the menu is dismissed in response to the click.
property primaryDisabled
primaryDisabled?: boolean;
If the menu item is a split button, this prop disables purely the primary action of the button.
property rel
rel?: string;
Link relation setting when using
href
. Iftarget
is_blank
,rel
is defaulted to a value to prevent clickjacking.
property role
role?: string;
Optional override for the menu button's role. Defaults to
menuitem
ormenuitemcheckbox
.
property secondaryText
secondaryText?: string;
Seconday description for the menu item to display
property sectionProps
sectionProps?: IContextualMenuSection;
Properties to apply to render this item as a section. This prop is mutually exclusive with
subMenuProps
.
property shortCut
shortCut?: string;
Deprecated
Not used
property split
split?: boolean;
Whether or not this menu item is a splitButton.
property style
style?: React.CSSProperties;
Additional styles to apply to the menu item
Deprecated
in favor of the
styles
prop to leverage mergeStyles API.
property submenuIconProps
submenuIconProps?: IIconProps;
Props for the Icon used for the chevron.
property subMenuProps
subMenuProps?: IContextualMenuProps;
Properties to apply to a submenu to this item.
The ContextualMenu will provide default values for
target
,onDismiss
,isSubMenu
,id
,shouldFocusOnMount
,directionalHint
,className
, andgapSpace
, all of which can be overridden.
property target
target?: string;
Target window when using
href
.
property text
text?: string;
Text of the menu item. If a standard hyphen (-) is passed in, then the item will be rendered as a divider. If a dash must appear as text, use an emdash (—), figuredash (‒), or minus symbol (−) instead.
property title
title?: string;
Title (tooltip) text displayed when hovering over an item.
index signature
[propertyName: string]: any;
Any additional properties to use when custom rendering menu items.
interface IContextualMenuItemProps
interface IContextualMenuItemProps extends React.HTMLAttributes<IContextualMenuItemProps> {}
property className
className?: string;
Additional css class to apply to the ContextualMenuItem
property classNames
classNames: IMenuItemClassNames;
Classnames for different aspects of a menu item
property componentRef
componentRef?: IRefObject<IContextualMenuRenderItem>;
Optional callback to access the IContextualMenuRenderItem interface. Use this instead of ref for accessing the public methods and properties of the component.
property dismissMenu
dismissMenu?: (ev?: any, dismissAll?: boolean) => void;
This prop will get set by ContextualMenu and can be called to close the menu this item belongs to. If dismissAll is true, all menus will be closed.
property dismissSubMenu
dismissSubMenu?: () => void;
This prop will get set by ContextualMenu and can be called to close this item's subMenu, if present.
property getSubmenuTarget
getSubmenuTarget?: () => HTMLElement | undefined;
This prop will get set by the wrapping component and will return the element that wraps this ContextualMenuItem. Used for openSubMenu.
property hasIcons
hasIcons: boolean | undefined;
If this item has icons
property index
index: number;
Index of the item
property item
item: IContextualMenuItem;
The item to display
property onCheckmarkClick
onCheckmarkClick?: ( item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => void;
Click handler for the checkmark
property openSubMenu
openSubMenu?: (item: any, target: HTMLElement) => void;
This prop will get set by ContextualMenu and can be called to open this item's subMenu, if present.
property styles
styles?: IStyleFunctionOrObject< IContextualMenuItemStyleProps, IContextualMenuItemStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme provided by High-Order Component.
interface IContextualMenuItemRenderFunctions
interface IContextualMenuItemRenderFunctions {}
property renderCheckMarkIcon
renderCheckMarkIcon: ( props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
Rendering function for check mark icon
property renderItemIcon
renderItemIcon: ( props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
Rendering function for item icon
property renderItemName
renderItemName: ( props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
Rendering function for item label
property renderSecondaryText
renderSecondaryText: ( props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
Rendering function for secondary text label
property renderSubMenuIcon
renderSubMenuIcon: ( props: IContextualMenuItemProps, customClassNames?: string[]) => React.ReactNode;
Rendering function for submenu icon
interface IContextualMenuItemRenderProps
interface IContextualMenuItemRenderProps extends IContextualMenuItem {}
property focusableElementIndex
focusableElementIndex: number;
property hasCheckmarks
hasCheckmarks: boolean;
property hasIcons
hasIcons: boolean;
property index
index: number;
property totalItemCount
totalItemCount: number;
interface IContextualMenuItemStyleProps
interface IContextualMenuItemStyleProps {}
property checked
checked: boolean;
Whether or not the menu item is checked.
property className
className?: string;
Accept custom classNames
property disabled
disabled: boolean;
Whether or not the menu item is disabled.
property dividerClassName
dividerClassName?: string;
The optional class name to apply to the divider element.
property expanded
expanded: boolean;
Whether or not the menu item is expanded.
property iconClassName
iconClassName?: string;
The optional class name to apply to the icon element.
property isAnchorLink
isAnchorLink: boolean;
Indicates if a menu item is an anchor link.
property itemClassName
itemClassName?: string;
The optional class name to apply to the item element.
property knownIcon
knownIcon: boolean;
Indicates if the icon used is of the known set of icons.
property primaryDisabled
primaryDisabled?: boolean;
Whether or not the primary section of a split menu item is disabled.
property subMenuClassName
subMenuClassName?: string;
The optional class name to apply to the sub-menu if present.
property theme
theme: ITheme;
Theme provided by High-Order Component.
interface IContextualMenuItemStyles
interface IContextualMenuItemStyles extends IButtonStyles {}
property anchorLink
anchorLink?: IStyle;
Styles for a menu item that is an anchor link.
property checkmarkIcon
checkmarkIcon?: IStyle;
Default style for checkmark icons.
property divider
divider?: IStyle;
Styles for a divider item of a ContextualMenu.
property icon
icon?: IStyle;
Styles for the icon element of a menu item.
property iconColor
iconColor?: IStyle;
Default icon color style for known icons.
property item
item?: IStyle;
Styles for a menu item that is an anchor link.
property label
label?: IStyle;
Styles for the label of a menu item.
property linkContent
linkContent?: IStyle;
Styles for the content inside the button/link of the menuItem.
property linkContentMenu
linkContentMenu?: IStyle;
Styles for a menu item that is a link.
property root
root?: IStyle;
Style for the root element.
property screenReaderText
screenReaderText?: IStyle;
Styles for hidden screen reader text.
property secondaryText
secondaryText?: IStyle;
Styles for the secondary text of a menu item.
property splitContainer
splitContainer?: IStyle;
Styles for the container of a split menu item.
property splitMenu
splitMenu?: IStyle;
Styles for the menu portion of a split menu item.
property splitPrimary
splitPrimary?: IStyle;
Styles for the primary portion of a split menu item.
property subMenuIcon
subMenuIcon?: IStyle;
Styles for the submenu icon of a menu item.
interface IContextualMenuListProps
interface IContextualMenuListProps {}
property ariaLabel
ariaLabel?: string;
property defaultMenuItemRenderer
defaultMenuItemRenderer: ( item: IContextualMenuItemRenderProps) => React.ReactNode;
property hasCheckmarks
hasCheckmarks: boolean;
property hasIcons
hasIcons: boolean;
property items
items: IContextualMenuItem[];
property labelElementId
labelElementId?: string;
property role
role?: string;
property totalItemCount
totalItemCount: number;
interface IContextualMenuProps
interface IContextualMenuProps extends IBaseProps<IContextualMenu>, IWithResponsiveModeState {}
property alignTargetEdge
alignTargetEdge?: boolean;
If true the positioning logic will prefer to flip edges rather than to nudge the rectangle to fit within bounds, thus making sure the element aligns perfectly with target's alignment edge
property ariaLabel
ariaLabel?: string;
Accessible label for the ContextualMenu's root element (inside the callout).
property beakWidth
beakWidth?: number;
The width of the beak.
property bounds
bounds?: | IRectangle | ((target?: Target, targetWindow?: Window) => IRectangle | undefined);
The bounding rectangle (or callback that returns a rectangle) which the contextual menu can appear in.
property calloutProps
calloutProps?: ICalloutProps;
Additional custom props for the Callout.
property className
className?: string;
Additional CSS class to apply to the ContextualMenu.
property componentRef
componentRef?: IRefObject<IContextualMenu>;
Optional callback to access the IContextualMenu interface. Use this instead of ref for accessing the public methods and properties of the component.
property contextualMenuItemAs
contextualMenuItemAs?: | React.ComponentClass<IContextualMenuItemProps> | React.FunctionComponent<IContextualMenuItemProps>;
Custom component to use for rendering individual menu items.
property coverTarget
coverTarget?: boolean;
If true, the menu will be positioned to cover the target. If false, it will be positioned next to the target.
property delayUpdateFocusOnHover
delayUpdateFocusOnHover?: boolean;
If true, the contextual menu will not be updated until focus enters the menu via other means. This will only result in different behavior when
shouldFocusOnMount = false
.
property directionalHint
directionalHint?: DirectionalHint;
How the menu should be positioned
property directionalHintFixed
directionalHintFixed?: boolean;
If true the position will not change sides in an attempt to fit the ContextualMenu within bounds. It will still attempt to align it to whatever bounds are given.
property directionalHintForRTL
directionalHintForRTL?: DirectionalHint;
How the menu should be positioned in RTL layouts. If not specified, a mirror of
directionalHint
will be used.
property doNotLayer
doNotLayer?: boolean;
If true do not render on a new layer. If false render on a new layer.
property focusZoneProps
focusZoneProps?: IFocusZoneProps;
Props to pass down to the FocusZone. NOTE: the default FocusZoneDirection will be used unless a direction is specified in the focusZoneProps (even if other focusZoneProps are defined)
property gapSpace
gapSpace?: number;
The gap between the ContextualMenu and the target
property getMenuClassNames
getMenuClassNames?: ( theme: ITheme, className?: string) => IContextualMenuClassNames;
Method to provide the classnames to style the contextual menu.
Deprecated
Use
styles
instead to leverage mergeStyles API.
property hidden
hidden?: boolean;
If true, renders the ContextualMenu in a hidden state. Use this flag, rather than rendering a ContextualMenu conditionally based on visibility, to improve rendering performance when it becomes visible. Note: When ContextualMenu is hidden its content will not be rendered. It will only render once the ContextualMenu is visible.
property id
id?: string;
ID for the ContextualMenu's root element (inside the callout). Should be used for
aria-owns
and other such uses, rather than direct reference for programmatic purposes.
property isBeakVisible
isBeakVisible?: boolean;
If true then the beak is visible. If false it will not be shown.
property isSubMenu
isSubMenu?: boolean;
Whether this menu is a submenu of another menu.
property items
items: IContextualMenuItem[];
Menu items to display.
property labelElementId
labelElementId?: string;
Used as
aria-labelledby
for the menu element inside the callout.
property onDismiss
onDismiss?: ( ev?: React.MouseEvent | React.KeyboardEvent, dismissAll?: boolean) => void;
Callback when the ContextualMenu tries to close. If
dismissAll
is true then all submenus will be dismissed.
property onItemClick
onItemClick?: ( ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => boolean | void;
Click handler which is invoked if
onClick
is not passed for individual contextual menu item. Returning true will dismiss the menu even ifev.preventDefault()
was called.
property onMenuDismissed
onMenuDismissed?: (contextualMenu?: IContextualMenuProps) => void;
Callback for when the menu is being closed (removing from the DOM).
property onMenuOpened
onMenuOpened?: (contextualMenu?: IContextualMenuProps) => void;
Callback for when the menu has been opened.
property onRenderMenuList
onRenderMenuList?: IRenderFunction<IContextualMenuListProps>;
Method to override the render of the list of menu items.
property onRenderSubMenu
onRenderSubMenu?: IRenderFunction<IContextualMenuProps>;
Custom render function for a submenu.
property onRestoreFocus
onRestoreFocus?: (options: { originalElement?: HTMLElement | Window; containsFocus: boolean; documentContainsFocus: boolean;}) => void;
Called when the component is unmounting, and focus needs to be restored. Argument passed down contains two variables, the element that the underlying popup believes focus should go to and whether or not the popup currently contains focus. If this prop is provided, focus will not be restored automatically, you'll need to call originalElement.focus()
property shouldFocusOnContainer
shouldFocusOnContainer?: boolean;
Whether to focus on the contextual menu container (as opposed to the first menu item).
property shouldFocusOnMount
shouldFocusOnMount?: boolean;
Whether to focus on the menu when mounted.
property shouldUpdateWhenHidden
shouldUpdateWhenHidden?: boolean;
If true, the menu will be updated even when
hidden=true
. Note that this will consume resources to update even when nothing is being shown to the user. This might be helpful if your updates are small and you want the menu to display quickly whenhidden
is set to false.
property styles
styles?: IStyleFunctionOrObject< IContextualMenuStyleProps, IContextualMenuStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property subMenuHoverDelay
subMenuHoverDelay?: number;
Delay (in milliseconds) to wait before expanding / dismissing a submenu on mouseEnter or mouseLeave
property target
target?: Target;
The target that the ContextualMenu should try to position itself based on. It can be either an element, a query selector string resolving to a valid element, or a MouseEvent. If a MouseEvent is given, the origin point of the event will be used.
property theme
theme?: ITheme;
Theme provided by higher-order component.
property title
title?: string;
Title to be displayed at the top of the menu, above the items.
property useTargetAsMinWidth
useTargetAsMinWidth?: boolean;
If true the context menu will have a minimum width equal to the width of the target element
property useTargetWidth
useTargetWidth?: boolean;
If true the context menu will render as the same width as the target element
interface IContextualMenuRenderItem
interface IContextualMenuRenderItem {}
property dismissMenu
dismissMenu: (dismissAll?: boolean) => void;
Dismiss the menu this item belongs to.
property dismissSubMenu
dismissSubMenu: () => void;
Function to close this item's subMenu, if present.
property openSubMenu
openSubMenu: () => void;
Function to open this item's subMenu, if present.
interface IContextualMenuSection
interface IContextualMenuSection extends React.ClassAttributes<any> {}
property bottomDivider
bottomDivider?: boolean;
If set to true, the section will display a divider at the bottom of the section.
property items
items: IContextualMenuItem[];
The items to include inside the section.
property title
title?: string | IContextualMenuItem;
The optional section title.
property topDivider
topDivider?: boolean;
If set to true, the section will display a divider at the top of the section.
interface IContextualMenuState
interface IContextualMenuState {}
property contextualMenuItems
contextualMenuItems?: IContextualMenuItem[];
property contextualMenuTarget
contextualMenuTarget?: Element;
property dismissedMenuItemKey
dismissedMenuItemKey?: string;
property expandedByMouseClick
expandedByMouseClick?: boolean;
True if the menu was expanded by mouse click OR hover (as opposed to by keyboard)
property expandedMenuItemKey
expandedMenuItemKey?: string;
property positions
positions?: any;
property slideDirectionalClassName
slideDirectionalClassName?: string;
property submenuDirection
submenuDirection?: DirectionalHint;
property subMenuId
subMenuId?: string;
property submenuTarget
submenuTarget?: Element;
interface IContextualMenuStyleProps
interface IContextualMenuStyleProps {}
interface IContextualMenuStyles
interface IContextualMenuStyles {}
property container
container: IStyle;
Style for the container which parents all menu items.
property header
header: IStyle;
Styles for the header item of a ContextualMenu
property list
list: IStyle;
Styles for the list that contains all menuItems.
property root
root: IStyle;
Base styles for the root element of all ContextualMenus.
property subComponentStyles
subComponentStyles: IContextualMenuSubComponentStyles;
SubComponent styles.
property title
title: IStyle;
Style override for the contextual menu title.
interface IContextualMenuSubComponentStyles
interface IContextualMenuSubComponentStyles {}
interface IDatePicker
interface IDatePicker {}
interface IDatePickerProps
interface IDatePickerProps extends IBaseProps<IDatePicker>, React.HTMLAttributes<HTMLElement> {}
property allFocusable
allFocusable?: boolean;
Allows all elements to be focused, including disabled ones
property allowTextInput
allowTextInput?: boolean;
Whether the DatePicker allows input a date string directly or not
property ariaLabel
ariaLabel?: string;
Aria Label for TextField of the DatePicker for screen reader users.
property borderless
borderless?: boolean;
Determines if DatePicker has a border.
property calendarAs
calendarAs?: IComponentAs<ICalendarProps>;
Custom Calendar to be used for date picking
property calendarProps
calendarProps?: ICalendarProps;
Pass calendar props to calendar component
property calloutProps
calloutProps?: ICalloutProps;
Pass callout props to callout component
property className
className?: string;
Optional Classname for datepicker root element .
property componentRef
componentRef?: IRefObject<IDatePicker>;
Optional callback to access the IDatePicker interface. Use this instead of ref for accessing the public methods and properties of the component.
property dateTimeFormatter
dateTimeFormatter?: ICalendarFormatDateCallbacks;
Apply additional formating to dates, for example localized date formatting.
property disableAutoFocus
disableAutoFocus?: boolean;
Whether the DatePicker should open automatically when the control is focused
property disabled
disabled?: boolean;
Disabled state of the DatePicker.
property firstDayOfWeek
firstDayOfWeek?: DayOfWeek;
The first day of the week for your locale.
property firstWeekOfYear
firstWeekOfYear?: FirstWeekOfYear;
Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
property formatDate
formatDate?: (date?: Date) => string;
Optional method to format the chosen date to a string to display in the DatePicker
property highlightCurrentMonth
highlightCurrentMonth?: boolean;
Whether the month picker should highlight the current month
property highlightSelectedMonth
highlightSelectedMonth?: boolean;
Whether the month picker should highlight the selected month
property initialPickerDate
initialPickerDate?: Date;
The initially highlighted date in the calendar picker
property isMonthPickerVisible
isMonthPickerVisible?: boolean;
Whether the month picker is shown beside the day picker or hidden.
property isRequired
isRequired?: boolean;
Whether the DatePicker is a required field or not
property label
label?: string;
Label for the DatePicker
property maxDate
maxDate?: Date;
The maximum allowable date.
property minDate
minDate?: Date;
The minimum allowable date.
property onAfterMenuDismiss
onAfterMenuDismiss?: () => void;
Callback that runs after DatePicker's menu (Calendar) is closed
property onSelectDate
onSelectDate?: (date: Date | null | undefined) => void;
Callback issued when a date is selected
property parseDateFromString
parseDateFromString?: (dateStr: string) => Date | null;
Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true
property pickerAriaLabel
pickerAriaLabel?: string;
Aria label for date picker popup for screen reader users.
property placeholder
placeholder?: string;
Placeholder text for the DatePicker
property showCloseButton
showCloseButton?: boolean;
Whether the CalendarDay close button should be shown or not.
property showGoToToday
showGoToToday?: boolean;
Whether the "Go to today" link should be shown or not
property showMonthPickerAsOverlay
showMonthPickerAsOverlay?: boolean;
Show month picker on top of date picker when visible.
property showWeekNumbers
showWeekNumbers?: boolean;
Whether the calendar should show the week number (weeks 1 to 53) before each week row
property strings
strings?: IDatePickerStrings;
Localized strings to use in the DatePicker
property styles
styles?: IStyleFunctionOrObject<IDatePickerStyleProps, IDatePickerStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property tabIndex
tabIndex?: number;
The tabIndex of the TextField
property textField
textField?: ITextFieldProps;
Pass textField props to textField component. Prop name is "textField" for compatiblity with upcoming slots work.
property theme
theme?: ITheme;
Theme provided by High-Order Component.
property today
today?: Date;
Value of today. If null, current time in client machine will be used.
property underlined
underlined?: boolean;
Whether or not the Textfield of the DatePicker is underlined.
property value
value?: Date;
Default value of the DatePicker, if any
interface IDatePickerState
interface IDatePickerState {}
property errorMessage
errorMessage?: string;
property formattedDate
formattedDate?: string;
property isDatePickerShown
isDatePickerShown?: boolean;
property selectedDate
selectedDate?: Date;
interface IDatePickerStrings
interface IDatePickerStrings extends ICalendarStrings {}
property invalidInputErrorMessage
invalidInputErrorMessage?: string;
Error message to render for TextField if input date string parsing fails.
property isOutOfBoundsErrorMessage
isOutOfBoundsErrorMessage?: string;
Error message to render for TextField if date boundary (minDate, maxDate) validation fails.
property isRequiredErrorMessage
isRequiredErrorMessage?: string;
Error message to render for TextField if isRequired validation fails.
interface IDatePickerStyleProps
interface IDatePickerStyleProps {}
property className
className?: string;
Accept custom classNames
property disabled
disabled?: boolean;
property isDatePickerShown
isDatePickerShown?: boolean;
property label
label?: boolean;
property theme
theme: ITheme;
Theme provided by High-Order Component.
property underlined
underlined?: boolean;
interface IDatePickerStyles
interface IDatePickerStyles {}
property callout
callout: IStyle;
property icon
icon: IStyle;
property readOnlyPlaceholder
readOnlyPlaceholder?: IStyle;
property readOnlyTextField
readOnlyTextField?: IStyle;
property root
root: IStyle;
Style for the root element.
property textField
textField: IStyle;
property wrapper
wrapper?: IStyle;
interface IDetailsCheckboxProps
interface IDetailsCheckboxProps {}
interface IDetailsColumnFilterIconProps
interface IDetailsColumnFilterIconProps extends IIconProps {}
property columnProps
columnProps?: IDetailsColumnProps;
interface IDetailsColumnProps
interface IDetailsColumnProps extends React.ClassAttributes<DetailsColumnBase> {}
property cellStyleProps
cellStyleProps?: ICellStyleProps;
Custom styles for cell rendering.
property column
column: IColumn;
The column definition for the component instance.
property columnIndex
columnIndex: number;
The column index for the component instance.
property componentRef
componentRef?: () => void;
A reference to the component instance.
property dragDropHelper
dragDropHelper?: IDragDropHelper | null;
The drag and drop helper for the component instance.
property isDraggable
isDraggable?: boolean;
Whether or not the column can be re-ordered via drag and drop.
property isDropped
isDropped?: boolean;
Whether or not the column has been dropped via drag and drop.
property onColumnClick
onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
Callback fired when click event occurs.
property onColumnContextMenu
onColumnContextMenu?: ( column: IColumn, ev: React.MouseEvent<HTMLElement>) => void;
Callback fired on contextual menu event to provide contextual menu UI.
property onRenderColumnHeaderTooltip
onRenderColumnHeaderTooltip?: IRenderFunction<IDetailsColumnRenderTooltipProps>;
Render function for providing a column header tooltip.
property parentId
parentId?: string;
Parent ID used for accessibility label(s).
property setDraggedItemIndex
setDraggedItemIndex?: (itemIndex: number) => void;
Deprecated
use
updateDragInfo
property styles
styles?: IStyleFunctionOrObject<IDetailsColumnStyleProps, IDetailsColumnStyles>;
The component styles to respect during render.
property theme
theme?: ITheme;
The theme object to respect during render.
property updateDragInfo
updateDragInfo?: ( props: { itemIndex: number; }, event?: MouseEvent) => void;
Callback on drag and drop event.
property useFastIcons
useFastIcons?: boolean;
Whether to use fast icon and check components. The icons can't be targeted by customization but are still customizable via class names.
interface IDetailsColumnRenderTooltipProps
interface IDetailsColumnRenderTooltipProps extends ITooltipHostProps {}
property column
column?: IColumn;
Information about the column for which the tooltip is being rendered. Use this to format status information about the column, such as its filter or sort state.
interface IDetailsColumnStyles
interface IDetailsColumnStyles {}
property accessibleLabel
accessibleLabel: IStyle;
Styleable label region.
property borderAfterDropping
borderAfterDropping: IStyle;
Styleable border region after drag & drop.
property borderWhileDragging
borderWhileDragging: IStyle;
Styleable border while drag & drop occurs.
property cellName
cellName: IStyle;
Styleable cell name region.
property cellTitle
cellTitle: IStyle;
Styleable cell title region.
property cellTooltip
cellTooltip: IStyle;
Styleable cell tooltip region.
property filterChevron
filterChevron: IStyle;
Styleable filter glyph.
property gripperBarVerticalStyle
gripperBarVerticalStyle: IStyle;
Styleable resize glyph region.
property iconClassName
iconClassName: IStyle;
Styleable icon region.
property nearIcon
nearIcon: IStyle;
Styleable margin by icon region.
property noBorderAfterDropping
noBorderAfterDropping: IStyle;
Transparent no border region after drag & drop to avoid content shift.
property noBorderWhileDragging
noBorderWhileDragging: IStyle;
Transparent no border region while drag & drop occurs to avoid content shift.
property root
root: IStyle;
Styleable root region.
property sortIcon
sortIcon: IStyle;
Styleable column sort icon region.
interface IDetailsFooterBaseProps
interface IDetailsFooterBaseProps extends IDetailsItemProps {}
interface IDetailsFooterProps
interface IDetailsFooterProps extends IDetailsFooterBaseProps {}
property columns
columns: IColumn[];
Column metadata
property selection
selection: ISelection;
Selection from utilities
property selectionMode
selectionMode: SelectionMode;
Selection mode
interface IDetailsGroupDividerProps
interface IDetailsGroupDividerProps extends IGroupDividerProps, IDetailsItemProps {}
interface IDetailsGroupRenderProps
interface IDetailsGroupRenderProps extends IGroupRenderProps {}
property groupedListAs
groupedListAs?: IComponentAs<IGroupedListProps>;
property onRenderFooter
onRenderFooter?: IRenderFunction<IDetailsGroupDividerProps>;
property onRenderHeader
onRenderHeader?: IRenderFunction<IDetailsGroupDividerProps>;
interface IDetailsHeader
interface IDetailsHeader {}
property focus
focus: () => boolean;
sets focus into the header
interface IDetailsHeaderBaseProps
interface IDetailsHeaderBaseProps extends React.ClassAttributes<DetailsHeaderBase>, IDetailsItemProps {}
property ariaLabel
ariaLabel?: string;
ariaLabel for the entire header
property ariaLabelForSelectAllCheckbox
ariaLabelForSelectAllCheckbox?: string;
ariaLabel for the header checkbox that selects or deselects everything
property ariaLabelForSelectionColumn
ariaLabelForSelectionColumn?: string;
ariaLabel for the selection column
property ariaLabelForToggleAllGroupsButton
ariaLabelForToggleAllGroupsButton?: string;
ariaLabel for expand/collapse group button
property className
className?: string;
Overriding class name
property collapseAllVisibility
collapseAllVisibility?: CollapseAllVisibility;
Whether to collapse for all visibility
property columnReorderOptions
columnReorderOptions?: IColumnReorderOptions;
Column reordering options
property columnReorderProps
columnReorderProps?: IColumnReorderHeaderProps;
Column reordering options
property componentRef
componentRef?: IRefObject<IDetailsHeader>;
Ref to the component itself
property isAllCollapsed
isAllCollapsed?: boolean;
Whether or not all is collapsed
property layoutMode
layoutMode: DetailsListLayoutMode;
Layout mode - fixedColumns or justified
property minimumPixelsForDrag
minimumPixelsForDrag?: number;
Minimum pixels to be moved before dragging is registered
property onColumnAutoResized
onColumnAutoResized?: (column: IColumn, columnIndex: number) => void;
Callback for when column is automatically resized
property onColumnClick
onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
Callback for when the column is clicked
property onColumnContextMenu
onColumnContextMenu?: ( column: IColumn, ev: React.MouseEvent<HTMLElement>) => void;
Callback for when the column needs to show a context menu
property onColumnIsSizingChanged
onColumnIsSizingChanged?: (column: IColumn, isSizing: boolean) => void;
Callback for when column sizing has changed
property onColumnResized
onColumnResized?: ( column: IColumn, newWidth: number, columnIndex: number) => void;
Callback for when column is resized
property onRenderColumnHeaderTooltip
onRenderColumnHeaderTooltip?: IRenderFunction<IDetailsColumnRenderTooltipProps>;
Callback to render a tooltip for the column header
property onRenderDetailsCheckbox
onRenderDetailsCheckbox?: IRenderFunction<IDetailsCheckboxProps>;
If provided, can be used to render a custom checkbox
property onToggleCollapseAll
onToggleCollapseAll?: (isAllCollapsed: boolean) => void;
Callback for when collapse all is toggled
property selectAllVisibility
selectAllVisibility?: SelectAllVisibility;
Select all button visibility
property styles
styles?: IStyleFunctionOrObject<IDetailsHeaderStyleProps, IDetailsHeaderStyles>;
Call to provide customized styling that will layer on top of the variant rules.
property theme
theme?: ITheme;
Theme from the Higher Order Component
property useFastIcons
useFastIcons?: boolean;
Whether to use fast icon and check components. The icons can't be targeted by customization but are still customizable via class names.
interface IDetailsHeaderProps
interface IDetailsHeaderProps extends IDetailsHeaderBaseProps {}
property columns
columns: IColumn[];
Column metadata
property selection
selection: ISelection;
Selection from utilities
property selectionMode
selectionMode: SelectionMode;
Selection mode
interface IDetailsHeaderState
interface IDetailsHeaderState {}
property columnResizeDetails
columnResizeDetails?: IColumnResizeDetails;
property isAllCollapsed
isAllCollapsed?: boolean;
property isAllSelected
isAllSelected?: boolean;
property isSizing
isSizing?: boolean;
interface IDetailsHeaderStyles
interface IDetailsHeaderStyles {}
property accessibleLabel
accessibleLabel: IStyle;
property cellIsActionable
cellIsActionable: IStyle;
Deprecated
Not used
property cellIsCheck
cellIsCheck: IStyle;
property cellIsEmpty
cellIsEmpty: IStyle;
Deprecated
Not used
property cellIsGroupExpander
cellIsGroupExpander: IStyle;
property cellIsResizing
cellIsResizing: IStyle;
property cellSizer
cellSizer: IStyle;
property cellSizerEnd
cellSizerEnd: IStyle;
property cellSizerStart
cellSizerStart: IStyle;
property cellWrapperPadded
cellWrapperPadded: IStyle;
Deprecated
Not used
property check
check: IStyle;
property checkTooltip
checkTooltip: IStyle;
property collapseButton
collapseButton: IStyle;
property dropHintCaretStyle
dropHintCaretStyle: IStyle;
property dropHintCircleStyle
dropHintCircleStyle: IStyle;
property dropHintLineStyle
dropHintLineStyle: IStyle;
property dropHintStyle
dropHintStyle: IStyle;
property root
root: IStyle;
property sizingOverlay
sizingOverlay: IStyle;
interface IDetailsItemProps
interface IDetailsItemProps {}
property cellStyleProps
cellStyleProps?: ICellStyleProps;
Rules for rendering column cells.
property checkboxVisibility
checkboxVisibility?: CheckboxVisibility | undefined;
Checkbox visibility
property columns
columns?: IColumn[];
Column metadata
property groupNestingDepth
groupNestingDepth?: number;
Nesting depth of a grouping
property indentWidth
indentWidth?: number | undefined;
How much to indent
property rowWidth
rowWidth?: number;
Minimum width of the row.
property selection
selection?: ISelection | undefined;
Selection from utilities
property selectionMode
selectionMode?: SelectionMode | undefined;
Selection mode
property viewport
viewport?: IViewport | undefined;
View port of the virtualized list
Deprecated
use rowWidth instead
interface IDetailsList
interface IDetailsList extends IList {}
property focusIndex
focusIndex: ( index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode) => void;
Scroll to and focus the item at the given index. focusIndex will call scrollToIndex on the specified index.
Parameter index
Index of item to scroll to
Parameter forceIntoFirstElement
If true, focus will be set to the first focusable child element of the item rather than the item itself.
Parameter measureItem
Optional callback to measure the height of an individual item
Parameter scrollToMode
Optional setting to determine where in the window the item should be scrolled to when focused.
property forceUpdate
forceUpdate: () => void;
Ensures that the list content is updated. Call this in cases where the list prop updates don't change, but the list still needs to be re-evaluated. For example, if a sizer bar is adjusted and causes the list width to change, you can call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly.
property getStartItemIndexInView
getStartItemIndexInView: () => number;
Get the start index of the page that is currently in view
interface IDetailsListCheckboxProps
interface IDetailsListCheckboxProps extends IDetailsCheckboxProps {}
interface IDetailsListProps
interface IDetailsListProps extends IBaseProps<IDetailsList>, IWithViewportProps {}
property ariaLabel
ariaLabel?: string;
Accessible label describing or summarizing the list.
property ariaLabelForGrid
ariaLabelForGrid?: string;
Accessible label for the grid within the list.
property ariaLabelForListHeader
ariaLabelForListHeader?: string;
Accessible label for the list header.
property ariaLabelForSelectAllCheckbox
ariaLabelForSelectAllCheckbox?: string;
Accessible label for the select all checkbox.
property ariaLabelForSelectionColumn
ariaLabelForSelectionColumn?: string;
Accessible label for the name of the selection column.
property cellStyleProps
cellStyleProps?: ICellStyleProps;
Props impacting the render style of cells. Since these have an impact on calculated column widths, they are handled separately from normal theme styling, but they are passed to the styling system.
property checkboxCellClassName
checkboxCellClassName?: string;
Class name to add to the cell of a checkbox.
property checkboxVisibility
checkboxVisibility?: CheckboxVisibility;
Controls the visibility of selection check box.
property checkButtonAriaLabel
checkButtonAriaLabel?: string;
Accessible label for the row check button, e.g. "select row"
property checkButtonGroupAriaLabel
checkButtonGroupAriaLabel?: string;
Accessible label for the group header check button, e.g. "select section".
property className
className?: string;
Class name to add to the root element.
property columnReorderOptions
columnReorderOptions?: IColumnReorderOptions;
Options for column reordering using drag and drop.
property columns
columns?: IColumn[];
column defitions. If none are provided, default columns will be created based on the items' properties.
property compact
compact?: boolean;
Whether to render in compact mode.
property componentRef
componentRef?: IRefObject<IDetailsList>;
Callback to access the IDetailsList interface. Use this instead of ref for accessing the public methods and properties of the component.
property constrainMode
constrainMode?: ConstrainMode;
Controls how the list contrains overflow.
property disableSelectionZone
disableSelectionZone?: boolean;
Whether to disable the built-in SelectionZone, so the host component can provide its own.
property dragDropEvents
dragDropEvents?: IDragDropEvents;
Map of callback functions related to row drag and drop functionality.
property enableUpdateAnimations
enableUpdateAnimations?: boolean;
Whether to animate updates
property enterModalSelectionOnTouch
enterModalSelectionOnTouch?: boolean;
Whether the selection zone should enter modal state on touch.
property flexMargin
flexMargin?: number;
An optional margin for proportional columns, to e.g. account for scrollbars when laying out width.
property getCellValueKey
getCellValueKey?: (item?: any, index?: number, column?: IColumn) => string;
If provided, will be the "default" item column cell value return. A column's
getValueKey
can overridegetCellValueKey
.
property getGroupHeight
getGroupHeight?: IGroupedListProps['getGroupHeight'];
Callback to override default group height calculation used by list virtualization.
property getKey
getKey?: (item: any, index?: number) => string;
Callback to get the item key, to be used in the selection and on render. Must be provided if sorting or filtering is enabled.
property getRowAriaDescribedBy
getRowAriaDescribedBy?: (item: any) => string;
Callback to get the aria-describedby IDs (space-separated strings) of elements that describe the item.
property getRowAriaLabel
getRowAriaLabel?: (item: any) => string;
Callback to get the aria-label string for a given item.
property groupProps
groupProps?: IDetailsGroupRenderProps;
Override properties to render groups.
property groups
groups?: IGroup[];
Grouping instructions.
property indentWidth
indentWidth?: number;
Override for the indent width used for group nesting.
property initialFocusedIndex
initialFocusedIndex?: number;
Default index to set focus to once the items have rendered and the index exists.
property isHeaderVisible
isHeaderVisible?: boolean;
Controls the visibility of the header.
property isPlaceholderData
isPlaceholderData?: boolean;
Set this to true to indicate that the items being displayed are placeholder data.
property isSelectedOnFocus
isSelectedOnFocus?: boolean;
Determines if an item is selected on focus.
property items
items: any[];
The items to render.
property layoutMode
layoutMode?: DetailsListLayoutMode;
Controls how the columns are adjusted.
property listProps
listProps?: IListProps;
Properties to pass through to the List components being rendered.
property minimumPixelsForDrag
minimumPixelsForDrag?: number;
The minimum mouse move distance to interpret the action as drag event.