office-ui-fabric-react package
Classes
| ActionButton | |
| ActivityItem | |
| AnnouncedBase | |
| Autofill | |
| BaseAutoFill | |
| BaseButton | |
| BaseExtendedPeoplePicker | |
| BaseExtendedPicker | |
| BaseFloatingPeoplePicker | |
| BaseFloatingPicker | |
| BasePeoplePicker | |
| BasePeopleSelectedItemsList | |
| BasePicker | |
| BasePickerListBelow | |
| BaseSelectedItemsList | |
| BreadcrumbBase | |
| Button |
This class is deprecated. Use the individual *Button components instead. |
| ButtonGridCell | |
| Calendar | |
| Callout | |
| CheckboxBase | |
| ChoiceGroupBase | |
| CoachmarkBase | |
| ColorPickerBase | |
| ColorPickerGridCellBase | |
| ComboBox | |
| CommandBarBase | |
| CommandBarButton | |
| CompactPeoplePickerBase |
Compact layout. It uses personas without secondary text when displaying search results. |
| CompoundButton | |
| ContextualMenuBase | |
| ContextualMenuItemBase | |
| DatePickerBase | |
| DefaultButton | |
| DetailsColumnBase |
Component for rendering columns in a |
| DetailsHeaderBase | |
| DetailsListBase | |
| DetailsRowBase | |
| DialogBase | |
| DialogContentBase | |
| DialogFooterBase | |
| DragDropHelper | |
| DropdownBase | |
| ExpandingCardBase | |
| ExtendedPeoplePicker | |
| ExtendedSelectedItem | |
| FabricBase | |
| FacepileBase |
FacePile with no default styles. [Use the |
| FloatingPeoplePicker | |
| FocusTrapZone | |
| GroupedListBase | |
| GroupedListSection | |
| HoverCardBase | |
| IconBase | |
| IconButton | |
| ImageBase | |
| Keytip |
A callout corresponding to another Fabric component to describe a key sequence that will activate that component |
| KeytipLayerBase |
A layer that holds all keytip items |
| KeytipManager |
This class is responsible for handling registering, updating, and unregistering of keytips |
| LabelBase | |
| LayerBase | |
| LayerHost | |
| LinkBase | |
| List |
The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback if provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if provided by the caller, or by cached measurements if available, or by a running average, or a default fallback. The algorithm for rendering pages works like this:
Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that we can avoid re-measuring during operations that should not alter heights, like scrolling. To optimize glass rendering performance, onShouldVirtualize can be set. When onShouldVirtualize return false, List will run in fast mode (not virtualized) to render all items without any measurements to improve page load time. And we start doing measurements and rendering in virtualized mode when items grows larger than this threshold. However, certain operations can make measure data stale. For example, resizing the list, or passing in new props, or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion number, which we associate with cached measurements and use to determine if a remeasure should occur. |
| ListPeoplePickerBase |
MemberList layout. The selected people show up below the search box. |
| MaskedTextField | |
| MemberListPeoplePicker | |
| MessageBarBase | |
| MessageBarButton | |
| ModalBase | |
| NavBase | |
| NormalPeoplePickerBase |
Standard People Picker. |
| OverflowSetBase | |
| OverlayBase | |
| PersonaBase |
Persona with no default styles. [Use the |
| PersonaCoinBase |
PersonaCoin with no default styles. [Use the |
| PivotBase |
Usage:
|
| PivotItem | |
| PlainCardBase | |
| Popup |
This adds accessibility to Dialog and Panel controls |
| PositioningContainer | |
| PrimaryButton | |
| ProgressIndicatorBase |
ProgressIndicator with no default styles. [Use the |
| RatingBase | |
| ResizeGroupBase | |
| ScrollablePaneBase | |
| SearchBoxBase | |
| SelectedPeopleList |
Standard People Picker. |
| SelectionZone | |
| ShimmerBase | |
| ShimmeredDetailsListBase | |
| SliderBase | |
| SpinButton | |
| SpinnerBase | |
| Sticky | |
| Suggestions | |
| SuggestionsControl |
Class when used with SuggestionsStore, renders a suggestions control with customizable headers and footers |
| SuggestionsController | |
| SuggestionsCore |
Class when used with SuggestionsStore, renders a basic suggestions control |
| SuggestionsHeaderFooterItem | |
| SuggestionsItem | |
| SuggestionsStore | |
| SwatchColorPickerBase | |
| TagPickerBase | |
| TeachingBubbleBase | |
| TeachingBubbleContentBase | |
| TextFieldBase | |
| ThemeGenerator | |
| ToggleBase | |
| TooltipBase | |
| TooltipHostBase | |
| VirtualizedComboBox | |
Interfaces
Enums
| BaseSlots | |
| ButtonType | |
| CheckboxVisibility | |
| CollapseAllVisibility | |
| ColumnActionsMode |
Enum to describe how a particular column header behaves. This is used to to specify the property |
| ColumnDragEndLocation |
Enum to describe where the column has been dropped, after starting the drag |
| ConstrainMode | |
| ContextualMenuItemType | |
| DetailsListLayoutMode | |
| DialogType | |
| DocumentCardType | |
| ElementType | |
| ExpandingCardMode | |
| FabricSlots | |
| HoverCardType | |
| IconType | |
| ImageCoverStyle |
The cover style to be used on the image |
| ImageFit |
The possible methods that can be used to fit the image. |
| ImageLoadState | |
| KeyboardSpinDirection | |
| MessageBarType | |
| OpenCardMode | |
| OverflowButtonType | |
| PanelType | |
| PersonaInitialsColor | |
| PersonaPresence | |
| PersonaSize | |
| PivotLinkFormat | |
| PivotLinkSize | |
| Position | |
| RatingSize | |
| RectangleEdge | |
| ResizeGroupDirection | |
| ResponsiveMode | |
| SelectableOptionMenuItemType | |
| SelectAllVisibility | |
| SemanticColorSlots | |
| Shade |
Shades of a given color, from softest to strongest. |
| ShimmerElementsDefaultHeights |
Describes the default heights for shimmer elements when omitted in implementation. |
| ShimmerElementType |
Describes the possible types for shimmer elements used. |
| SpinnerSize |
Possible variations of the spinner circle size. |
| SpinnerType |
Deprecated at v2.0.0, use |
| StickyPositionType | |
| SuggestionActionType |
Enum to help identify which suggestions action button is selected. |
| SuggestionItemType | |
| TooltipDelay | |
| TooltipOverflowMode | |
| ValidationState |
Validation state of the user's input. |
Functions
| build |
|
| build |
Builds a map of ID to IKeytipProps |
| can |
Returns true if a list of menu items can contain a checkbox |
| clamp(value, max, min) | Clamp a value to ensure it falls within a given range. |
| construct |
Constructs a keytip from an IKeytipConfigItem and puts it in the configMap |
| correct |
Corrects a hex color to have length 3 or 6. Defaults to white if too short. Does NOT check anything besides the length (such as valid characters) and does NOT handle hex values starting with # sign. |
| correctHSV(color) | Corrects an HSV color to fall within the valid range. |
| correctRGB(color) | Corrects an RGB color to fall within the valid range. |
| create |
|
| create |
|
| css |
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. |
| get |
|
| get |
Gets the aria-describedby value to put on the component with this keytip. |
| get |
|
| get |
|
| get |
Converts an HSV color (and optional alpha value) to a color object. If |
| get |
Converts an RGBA color to a color object (alpha defaults to 100). |
| get |
Converts a CSS color string to a color object. Note that hex colors *must* be prefixed with # to be considered valid.
|
| get |
|
| get |
Converts a color hue to an HTML color string (with # prefix). This implementation ignores all components of |
| get |
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. |
| get |
Returns the opposite edge of the given RectangleEdge. |
| get |
Gets the hex color string (prefixed with #) for the given persona props. This is the logic used internally by the Persona control. |
| get |
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# |
| get |
|
| hsl2hsv(h, s, l) | Converts HSL components to an HSV color. |
| hsl2rgb(h, s, l) | Converts HSL components to an RGB color. Does not set the alpha value. |
| hsv2hex(h, s, v) | Converts HSV components to a hex color string (without # prefix). |
| hsv2hsl(h, s, v) | Converts HSV components to an HSL color. |
| hsv2rgb(h, s, v) | Converts HSV components to an RGB color. Does not set the alpha value. |
| is |
|
| is |
|
| is |
Returns true if the argument is a valid Shade value |
| ktp |
Constructs the data-ktp-execute-target attribute selector from a keytip ID. |
| ktp |
Constructs the data-ktp-target attribute selector from a full key sequence. |
| merge |
Merges an overflow sequence with a key sequence. |
| position |
|
| position |
|
| position |
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. |
| rgb2hex(r, g, b) | Converts RGB components to a hex color string (without # prefix). |
| rgb2hsv(r, g, b) | Converts RGB components to an HSV color. |
| sequences |
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. |
| theme |
|
| transition |
Tests for equality between two IKeytipTransitionKeys. |
| transition |
Tests if 'key' is present in 'keys'. |
| updateA(color, a) | Gets a color with the given alpha value and the same other components as |
| updateH(color, h) | Gets a color with the same saturation and value as Does not modify the original |
| updateRGB(color, component, value) | Gets a color with a single RGBA component updated to a new value. Does not modify the original |
| updateSV(color, s, v) | Gets a color with the same hue as Does not modify the original |
| updateT(color, t) | Gets a color with the given transparency value and the same other components as |
| use |
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 Details
buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline)
export declare function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean): IColumn[];Parameters
- items
-
any[]
- canResizeColumns
-
boolean
- onColumnClick
-
(ev: React.MouseEvent<HTMLElement>, column: IColumn) => void
- sortedColumnKey
-
string
- isSortedDescending
-
boolean
- groupedColumnKey
-
string
- isMultiline
-
boolean
Returns
IColumn[]
buildKeytipConfigMap(config)
Builds a map of ID to IKeytipProps
export declare function buildKeytipConfigMap(config: IKeytipConfig): IKeytipConfigMap;Parameters
- config
-
IKeytipConfig
IKeytipConfig object
Returns
IKeytipConfigMap
Config map
canAnyMenuItemsCheck(items)
Returns true if a list of menu items can contain a checkbox
export declare function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean;Parameters
- items
-
IContextualMenuItem[]
Returns
boolean
clamp(value, max, min)
Clamp a value to ensure it falls within a given range.
export declare function clamp(value: number, max: number, min?: number): number;Parameters
- value
-
number
- max
-
number
- min
-
number
Returns
number
constructKeytip(configMap, parentSequence, keytip)
Constructs a keytip from an IKeytipConfigItem and puts it in the configMap
export declare function constructKeytip(configMap: IKeytipConfigMap, parentSequence: string[], keytip: IKeytipConfigItem): void;Parameters
- configMap
-
IKeytipConfigMap
IKeytipConfigMap to store the keytip in
- parentSequence
-
string[]
string of the parent keytip
- keytip
-
IKeytipConfigItem
IKeytipConfigItem data
Returns
void
correctHex(hex)
Corrects a hex color to have length 3 or 6. Defaults to white if too short. Does NOT check anything besides the length (such as valid characters) and does NOT handle hex values starting with # sign.
export declare function correctHex(hex: string): string;Parameters
- hex
-
string
Returns
string
correctHSV(color)
Corrects an HSV color to fall within the valid range.
export declare function correctHSV(color: IHSV): IHSV;Parameters
- color
-
IHSV
Returns
IHSV
correctRGB(color)
Corrects an RGB color to fall within the valid range.
export declare function correctRGB(color: IRGB): IRGB;Parameters
- color
-
IRGB
Returns
IRGB
createGenericItem(name, currentValidationState)
export declare function createGenericItem(name: string, currentValidationState: ValidationState): IGenericItem & {
key: React.Key;
};Parameters
- name
-
string
- currentValidationState
-
ValidationState
Returns
IGenericItem & { key: React.Key; }
createItem(name, isValid)
export declare function createItem(name: string, isValid: boolean): ISuggestionModel<IPersonaProps>;Parameters
- name
-
string
- isValid
-
boolean
Returns
ISuggestionModel<IPersonaProps>
cssColor(color)
Converts a valid CSS color string to an RGB color. Note that hex colors *must* be prefixed with # to be considered valid. Alpha in returned color defaults to 100. Four and eight digit hex values (with alpha) are supported if the current browser supports them.
export declare function cssColor(color?: string): IRGB | undefined;Parameters
- color
-
string
Returns
IRGB | undefined
getAllSelectedOptions(options, selectedIndices)
export declare function getAllSelectedOptions(options: ISelectableOption[], selectedIndices: number[]): ISelectableOption[];Parameters
- options
-
ISelectableOption[]
- selectedIndices
-
number[]
Returns
ISelectableOption[]
getAriaDescribedBy(keySequences)
Gets the aria-describedby value to put on the component with this keytip.
export declare function getAriaDescribedBy(keySequences: string[]): string;Parameters
- keySequences
-
string[]
KeySequences of the keytip.
Returns
string
The aria-describedby value to set on the component with this keytip.
getBackgroundShade(color, shade, isInverted)
export declare function getBackgroundShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null;Parameters
- color
-
IColor
- shade
-
Shade
- isInverted
-
boolean
Returns
IColor | null
getBoundsFromTargetWindow(target, targetWindow)
export declare function getBoundsFromTargetWindow(target: Element | MouseEvent | Point | null, targetWindow: IWindowWithSegments): IRectangle;Parameters
- target
-
Element | MouseEvent | Point | null
- targetWindow
-
IWindowWithSegments
Returns
getColorFromHSV(hsv, a)
Converts an HSV color (and optional alpha value) to a color object. If a is not given, a default of 100 is used. Hex in the returned value will *not* be prefixed with #. If a is unspecified or 100, the result's str property will contain a hex value (*not* prefixed with #)
export declare function getColorFromHSV(hsv: IHSV, a?: number): IColor;Parameters
- hsv
-
IHSV
- a
-
number
Returns
IColor
getColorFromRGBA(rgba)
Converts an RGBA color to a color object (alpha defaults to 100).
export declare function getColorFromRGBA(rgba: IRGB): IColor;Parameters
- rgba
-
IRGB
Returns
IColor
getColorFromString(inputColor)
Converts a CSS color string to a color object. Note that hex colors *must* be prefixed with # to be considered valid.
inputColor will be used unmodified as the str property of the returned object. Alpha defaults to 100 if not specified in inputColor. Returns undefined if the color string is invalid/not recognized.
export declare function getColorFromString(inputColor: string): IColor | undefined;Parameters
- inputColor
-
string
Returns
IColor | undefined
getContrastRatio(color1, color2)
export declare function getContrastRatio(color1: IColor, color2: IColor): number;Parameters
- color1
-
IColor
- color2
-
IColor
Returns
number
getFullColorString(color)
Converts a color hue to an HTML color string (with # prefix). This implementation ignores all components of color except hue.
export declare function getFullColorString(color: IColor): string;Parameters
- color
-
IColor
Returns
string
getMaxHeight(target, targetEdge, gapSpace, bounds, coverTarget)
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.
export declare function getMaxHeight(target: Element | MouseEvent | Point, targetEdge: DirectionalHint, gapSpace?: number, bounds?: IRectangle, coverTarget?: boolean): number;Parameters
- target
-
Element | MouseEvent | Point
- targetEdge
-
DirectionalHint
- gapSpace
-
number
- bounds
- IRectangle
- coverTarget
-
boolean
Returns
number
getOppositeEdge(edge)
Returns the opposite edge of the given RectangleEdge.
export declare function getOppositeEdge(edge: RectangleEdge): RectangleEdge;Parameters
- edge
-
RectangleEdge
Returns
RectangleEdge
getPersonaInitialsColor(props)
Gets the hex color string (prefixed with #) for the given persona props. This is the logic used internally by the Persona control.
export declare function getPersonaInitialsColor(props: Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>): string;Parameters
- props
-
Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>
Current persona props
Returns
string
Hex color string prefixed with #
getShade(color, shade, isInverted)
Given a color and a shade specification, generates the requested shade of the color. Logic: if white darken via tables defined above if black lighten if light strongen if dark soften else default soften or strongen depending on shade#
export declare function getShade(color: IColor, shade: Shade, isInverted?: boolean): IColor | null;Parameters
- color
-
IColor
The base color whose shade is to be computed
- shade
-
Shade
The shade of the base color to compute
- isInverted
-
boolean
Default false. Whether the given theme is inverted (reverse strongen/soften logic)
Returns
IColor | null
getSubmenuItems(item)
export declare function getSubmenuItems(item: IContextualMenuItem): IContextualMenuItem[] | undefined;Parameters
- item
-
IContextualMenuItem
Returns
IContextualMenuItem[] | undefined
hsl2hsv(h, s, l)
Converts HSL components to an HSV color.
export declare function hsl2hsv(h: number, s: number, l: number): IHSV;Parameters
- h
-
number
- s
-
number
- l
-
number
Returns
IHSV
hsl2rgb(h, s, l)
Converts HSL components to an RGB color. Does not set the alpha value.
export declare function hsl2rgb(h: number, s: number, l: number): IRGB;Parameters
- h
-
number
- s
-
number
- l
-
number
Returns
IRGB
hsv2hex(h, s, v)
Converts HSV components to a hex color string (without # prefix).
export declare function hsv2hex(h: number, s: number, v: number): string;Parameters
- h
-
number
- s
-
number
- v
-
number
Returns
string
hsv2hsl(h, s, v)
Converts HSV components to an HSL color.
export declare function hsv2hsl(h: number, s: number, v: number): IHSL;Parameters
- h
-
number
- s
-
number
- v
-
number
Returns
IHSL
hsv2rgb(h, s, v)
Converts HSV components to an RGB color. Does not set the alpha value.
export declare function hsv2rgb(h: number, s: number, v: number): IRGB;Parameters
- h
-
number
- s
-
number
- v
-
number
Returns
IRGB
isDark(color)
export declare function isDark(color: IColor): boolean;Parameters
- color
-
IColor
Returns
boolean
isRelativeUrl(url)
export declare function isRelativeUrl(url: string): boolean;Parameters
- url
-
string
Returns
boolean
isValidShade(shade)
Returns true if the argument is a valid Shade value
export declare function isValidShade(shade?: Shade): boolean;Parameters
- shade
-
Shade
The Shade value to validate.
Returns
boolean
ktpTargetFromId(keytipId)
Constructs the data-ktp-execute-target attribute selector from a keytip ID.
export declare function ktpTargetFromId(keytipId: string): string;Parameters
- keytipId
-
string
ID of the Keytip.
Returns
string
String selector to use to query for the keytip execute target.
ktpTargetFromSequences(keySequences)
Constructs the data-ktp-target attribute selector from a full key sequence.
export declare function ktpTargetFromSequences(keySequences: string[]): string;Parameters
- keySequences
-
string[]
Full string[] for a Keytip.
Returns
string
String selector to use to query for the keytip target.
mergeOverflows(keySequences, overflowKeySequences)
Merges an overflow sequence with a key sequence.
export declare function mergeOverflows(keySequences: string[], overflowKeySequences: string[]): string[];Parameters
- keySequences
-
string[]
Full sequence for one keytip.
- overflowKeySequences
-
string[]
Full overflow keytip sequence.
Returns
string[]
Sequence that will be used by the keytip when in the overflow.
positionCallout(props, hostElement, elementToPosition, previousPositions)
export declare function positionCallout(props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: ICalloutPositionedInfo): ICalloutPositionedInfo;Parameters
- props
-
IPositionProps
- hostElement
-
HTMLElement
- elementToPosition
-
HTMLElement
- previousPositions
-
ICalloutPositionedInfo
Returns
ICalloutPositionedInfo
positionCard(props, hostElement, elementToPosition, previousPositions)
export declare function positionCard(props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: ICalloutPositionedInfo): ICalloutPositionedInfo;Parameters
- props
-
IPositionProps
- hostElement
-
HTMLElement
- elementToPosition
-
HTMLElement
- previousPositions
-
ICalloutPositionedInfo
Returns
ICalloutPositionedInfo
positionElement(props, hostElement, elementToPosition, previousPositions)
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.
export declare function positionElement(props: IPositionProps, hostElement: HTMLElement, elementToPosition: HTMLElement, previousPositions?: IPositionedData): IPositionedData;Parameters
- props
-
IPositionProps
- hostElement
-
HTMLElement
- elementToPosition
-
HTMLElement
- previousPositions
-
IPositionedData
Returns
IPositionedData
rgb2hex(r, g, b)
Converts RGB components to a hex color string (without # prefix).
export declare function rgb2hex(r: number, g: number, b: number): string;Parameters
- r
-
number
- g
-
number
- b
-
number
Returns
string
rgb2hsv(r, g, b)
Converts RGB components to an HSV color.
export declare function rgb2hsv(r: number, g: number, b: number): IHSV;Parameters
- r
-
number
- g
-
number
- b
-
number
Returns
IHSV
sequencesToID(keySequences)
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.
export declare function sequencesToID(keySequences: string[]): string;Parameters
- keySequences
-
string[]
Full path of IKeySequences for one keytip.
Returns
string
String to use for the keytip ID.
themeRulesStandardCreator()
export declare function themeRulesStandardCreator(): IThemeRules;Returns
IThemeRules
transitionKeysAreEqual(key1, key2)
Tests for equality between two IKeytipTransitionKeys.
export declare function transitionKeysAreEqual(key1: IKeytipTransitionKey, key2: IKeytipTransitionKey): boolean;Parameters
- key1
-
IKeytipTransitionKey
First IKeytipTransitionKey.
- key2
-
IKeytipTransitionKey
Second IKeytipTransitionKey.
Returns
boolean
T/F if the transition keys are equal.
transitionKeysContain(keys, key)
Tests if 'key' is present in 'keys'.
export declare function transitionKeysContain(keys: IKeytipTransitionKey[], key: IKeytipTransitionKey): boolean;Parameters
- keys
-
IKeytipTransitionKey[]
Array of IKeytipTransitionKey.
- key
-
IKeytipTransitionKey
IKeytipTransitionKey to find in 'keys'.
Returns
boolean
T/F if 'keys' contains 'key'.
updateA(color, a)
Gets a color with the given alpha value and the same other components as color. Does not modify the original color.
export declare function updateA(color: IColor, a: number): IColor;Parameters
- color
-
IColor
- a
-
number
Returns
IColor
updateH(color, h)
Gets a color with the same saturation and value as color and the other components updated to match the given hue.
Does not modify the original color and does not supply a default alpha value.
export declare function updateH(color: IColor, h: number): IColor;Parameters
- color
-
IColor
- h
-
number
Returns
IColor
updateRGB(color, component, value)
Gets a color with a single RGBA component updated to a new value. Does not modify the original color. Alpha defaults to 100 if not set.
export declare function updateRGB(color: IColor, component: keyof IRGB, value: number): IColor;Parameters
- color
-
IColor
- component
-
keyof IRGB
- value
-
number
Returns
IColor
updateSV(color, s, v)
Gets a color with the same hue as color and other components updated to match the given saturation and value.
Does not modify the original color and does not supply a default alpha value.
export declare function updateSV(color: IColor, s: number, v: number): IColor;Parameters
- color
-
IColor
- s
-
number
- v
-
number
Returns
IColor
updateT(color, t)
Gets a color with the given transparency value and the same other components as color. Does not modify the original color.
export declare function updateT(color: IColor, t: number): IColor;Parameters
- color
-
IColor
- t
-
number
Returns
IColor
useKeytipRef(options)
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.
export declare function useKeytipRef<TElement extends HTMLElement = HTMLElement>(options: KeytipDataOptions): React.Ref<TElement>;Parameters
- options
-
KeytipDataOptions
Returns
React.Ref<TElement>