In a user interface, an icon is an image that represents an application, a capability, or some other concept or specific entity with meaning for the user. An icon is usually selectable but can also be a nonselectable image, such as a company's logo.
-
For a list of icons, visit our icon documentation.
-
Note that icons are not bundled by default and typically must be loaded by calling initializeIcons
from the @uifabric/icons
package at the root of your application. See the icon documentation for more details.
+
For a list of icons, visit our icon documentation.
+
Note that icons are not bundled by default and typically must be loaded by calling initializeIcons
from the @uifabric/icons
package at the root of your application. See the icon documentation for more details.
For more details and examples visit the official docs.
The R package cannot handle each and every case, so for advanced use cases
you need to work using the original docs to achieve the desired result.
diff --git a/reference/Pickers.html b/reference/Pickers.html
index 8dab4387..39830447 100644
--- a/reference/Pickers.html
+++ b/reference/Pickers.html
@@ -196,8 +196,8 @@
alwaysRender boolean
Defines whether to always render the pivot item (regardless of whether it is selected or not). Useful if you're rendering content that is expensive to mount.
- ariaLabel string
The aria label of each pivot link which will read by screen reader instead of linkText.Note that unless you have compelling requirements you should not override aria-label.
- componentRef IRefObject<{}>
Gets the component ref.
+ ariaLabel string
The aria label of each pivot link which will read by screen reader instead of linkText.
+
Note that unless you have compelling requirements you should not override aria-label.
componentRef IRefObject<{}>
Gets the component ref.
headerButtonProps IButtonProps | { [key: string]: string | number | boolean; }
Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*, for each pivot header/link element.
headerText string
The text displayed of each pivot link.
- itemCount number | string
Defines an optional item count displayed in parentheses just after the linkText
.Examples: completed (4), Unread (99+)
- itemIcon string
An optional icon to show next to the pivot link.
- itemKey string
An required key to uniquely identify a pivot item.Note: The 'key' from react props cannot be used inside component.
- keytipProps IKeytipProps
Optional keytip for this PivotItem.
+ itemCount number | string
Defines an optional item count displayed in parentheses just after the linkText
.
+
Examples: completed (4), Unread (99+)
Note: The 'key' from react props cannot be used inside component.
keytipProps IKeytipProps
Optional keytip for this PivotItem.
linkText string
The text displayed of each pivot link - renaming to headerText
.
onRenderItemLink IRenderFunction<IPivotItemProps>
Optional custom renderer for the pivot item link.
className string
Additional css class to apply to the Pivot
componentRef IRefObject<IPivot>
Optional callback to access the IPivot interface. Use this instead of ref for accessing the public methods and properties of the component.
- defaultSelectedIndex number
Default selected index for the pivot. Only provide this if the pivot is an uncontrolled component; otherwise, use the selectedKey
property.This property is also mutually exclusive with defaultSelectedKey
.
- defaultSelectedKey string
Default selected key for the pivot. Only provide this if the pivot is an uncontrolled component; otherwise, use the selectedKey
property.This property is also mutually exclusive with defaultSelectedIndex
.
- getTabId (itemKey: string, index: number) => string
Callback to customize how IDs are generated for each tab header. Useful if you're rendering content outside and need to connect aria-labelledby.
+ defaultSelectedIndex number
Default selected index for the pivot. Only provide this if the pivot is an uncontrolled component; otherwise, use the selectedKey
property.
+
This property is also mutually exclusive with defaultSelectedKey
.
This property is also mutually exclusive with defaultSelectedIndex
.
getTabId (itemKey: string, index: number) => string
Callback to customize how IDs are generated for each tab header. Useful if you're rendering content outside and need to connect aria-labelledby.
headersOnly boolean
Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to separately render the tab content and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.
initialSelectedIndex number
Index of the pivot item initially selected. Mutually exclusive with initialSelectedKey
. Only provide this if the pivot is an uncontrolled component; otherwise, use selectedKey
.
initialSelectedKey string
Key of the pivot item initially selected. Mutually exclusive with initialSelectedIndex
. Only provide this if the pivot is an uncontrolled component; otherwise, use selectedKey
.
diff --git a/reference/SpinButton.html b/reference/SpinButton.html
index ae675158..7b0717e0 100644
--- a/reference/SpinButton.html
+++ b/reference/SpinButton.html
@@ -147,10 +147,10 @@ Details
componentRef IRefObject<ISpinButton>
Gets the component ref.
decrementButtonAriaLabel string
Accessible label text for the decrement button (for screen reader users).
decrementButtonIcon IIconProps
Custom props for the decrement button.
- defaultValue string
Initial value of the control. Updates to this prop will not be respected.Use this if you intend for the SpinButton to be an uncontrolled component which maintains its own value. Mutually exclusive with value
.
- disabled boolean
Whether or not the control is disabled.
- downArrowButtonStyles Partial<IButtonStyles>
Custom styles for the down arrow button.Note: The buttons are in a checked state when arrow keys are used to incremenent/decrement the SpinButton. Use rootChecked
instead of rootPressed
for styling when that is the case.
- getClassNames (theme: ITheme, disabled: boolean, isFocused: boolean, keyboardSpinDirection: KeyboardSpinDirection, labelPosition?: Position, className?: string) => ISpinButtonClassNames
Custom function for providing the classNames for the control. Can be used to provide all styles for the component instead of applying them on top of the default styles.
+ defaultValue string
Initial value of the control. Updates to this prop will not be respected.
+
Use this if you intend for the SpinButton to be an uncontrolled component which maintains its own value. Mutually exclusive with value
.
Note: The buttons are in a checked state when arrow keys are used to incremenent/decrement the SpinButton. Use rootChecked
instead of rootPressed
for styling when that is the case.
getClassNames (theme: ITheme, disabled: boolean, isFocused: boolean, keyboardSpinDirection: KeyboardSpinDirection, labelPosition?: Position, className?: string) => ISpinButtonClassNames
Custom function for providing the classNames for the control. Can be used to provide all styles for the component instead of applying them on top of the default styles.
iconButtonProps IButtonProps
Additional props for the up and down arrow buttons.
iconProps IIconProps
Props for an icon to display alongside the control's label.
incrementButtonAriaLabel string
Accessible label text for the increment button (for screen reader users).
@@ -166,14 +166,15 @@ Details
onFocus React.FocusEventHandler<HTMLInputElement>
Callback for when the user focuses the control.
onIncrement (value: string, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => string | void
Callback for when the increment button or up arrow key is pressed.
onValidate (value: string, event?: React.SyntheticEvent<HTMLElement>) => string | void
Callback for when the entered value should be validated.
- precision number
How many decimal places the value should be rounded to.The default is calculated based on the precision of step
: i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
- step number
Difference between two adjacent values of the control. This value is used to calculate the precision of the input if no precision
is given. The precision calculated this way will always be \>= 0.
+ precision number
How many decimal places the value should be rounded to.
+
The default is calculated based on the precision of step
: i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
step number
Difference between two adjacent values of the control. This value is used to calculate the precision of the input if no precision
is given. The precision calculated this way will always be \>= 0.
styles Partial<ISpinButtonStyles>
Custom styling for individual elements within the control.
theme ITheme
Theme provided by HOC.
title string
A more descriptive title for the control, visible on its tooltip.
- upArrowButtonStyles Partial<IButtonStyles>
Custom styles for the up arrow button.Note: The buttons are in a checked state when arrow keys are used to incremenent/decrement the SpinButton. Use rootChecked
instead of rootPressed
for styling when that is the case.
- value string
Current value of the control.Use this if you intend to pass in a new value as a result of change events. Mutually exclusive with defaultValue
.
-
+