@material-ui/lab
- Version 4.0.0-alpha.61
- Published
- 1.35 MB
- 5 dependencies
- MIT license
Install
npm i @material-ui/lab
yarn add @material-ui/lab
pnpm add @material-ui/lab
Overview
Material-UI Lab - Incubator for Material-UI React components.
Index
Variables
Functions
- Alert()
- AlertTitle()
- Autocomplete()
- AvatarGroup()
- createFilterOptions()
- getPanelId()
- getTabId()
- Pagination()
- Rating()
- SpeedDial()
- SpeedDialAction()
- SpeedDialIcon()
- TabContext()
- TabPanel()
- Timeline()
- TimelineConnector()
- TimelineContent()
- TimelineDot()
- TimelineItem()
- TimelineOppositeContent()
- TimelineSeparator()
- ToggleButtonGroup()
- TreeItem()
- TreeView()
- useAutocomplete()
- usePagination()
- useTabContext()
Interfaces
UseAutocompleteProps
- autoComplete
- autoHighlight
- autoSelect
- blurOnSelect
- clearOnBlur
- clearOnEscape
- componentName
- debug
- defaultValue
- disableClearable
- disableCloseOnSelect
- disabledItemsFocusable
- disableListWrap
- filterOptions
- filterSelectedOptions
- freeSolo
- getOptionDisabled
- getOptionLabel
- getOptionSelected
- groupBy
- handleHomeEndKeys
- id
- includeInputInList
- inputValue
- multiple
- onChange
- onClose
- onHighlightChange
- onInputChange
- onOpen
- open
- openOnFocus
- options
- selectOnFocus
- value
Type Aliases
- AlertClassKey
- AlertTitleClassKey
- AutocompleteChangeReason
- AutocompleteClassKey
- AutocompleteCloseReason
- AutocompleteFreeSoloValueMapping
- AutocompleteGetTagProps
- AutocompleteHighlightChangeReason
- AutocompleteInputChangeReason
- AvatarGroupClassKey
- CloseReason
- Color
- OpenReason
- PaginationClassKey
- PaginationItemClassKey
- PaginationItemProps
- RatingClassKey
- SkeletonClassKey
- SkeletonProps
- SpeedDialActionClassKey
- SpeedDialClassKey
- SpeedDialIconClassKey
- TabListClassKey
- TabListProps
- TabPanelClassKey
- TimelineClassKey
- TimelineConnectorClassKey
- TimelineContentClassKey
- TimelineDotClassKey
- TimelineItemClassKey
- TimelineOppositeContentClassKey
- TimelineSeparatorClassKey
- ToggleButtonClassKey
- ToggleButtonGroupClassKey
- ToggleButtonProps
- ToggleButtonTypeMap
- TreeItemClassKey
- TreeViewClassKey
- TreeViewProps
- Value
Variables
variable PaginationItem
const PaginationItem: OverridableComponent<PaginationItemTypeMap<{}, 'div'>>;
Demos:
- [Pagination](https://mui.com/components/pagination/)
API:
- [PaginationItem API](https://mui.com/api/pagination-item/)
variable Skeleton
const Skeleton: OverridableComponent<SkeletonTypeMap<{}, 'span'>>;
Demos:
- [Skeleton](https://mui.com/components/skeleton/)
API:
- [Skeleton API](https://mui.com/api/skeleton/)
variable TabList
const TabList: OverridableComponent<TabListTypeMap<{}, TabsTypeMap>>;
Demos:
- [Tabs](https://mui.com/components/tabs/)
API:
- [TabList API](https://mui.com/api/tab-list/) - inherits [Tabs API](https://mui.com/api/tabs/)
variable ToggleButton
const ToggleButton: ExtendButtonBase< ExtendButtonBaseTypeMap<{ props: P & { disableFocusRipple?: boolean; selected?: boolean; size?: 'small' | 'medium' | 'large'; value?: any; }; defaultComponent: D; classKey: ToggleButtonClassKey; }>>;
Demos:
- [Toggle Button](https://mui.com/components/toggle-button/)
API:
- [ToggleButton API](https://mui.com/api/toggle-button/) - inherits [ButtonBase API](https://mui.com/api/button-base/)
Functions
function Alert
Alert: (props: AlertProps) => JSX.Element;
Demos:
- [Alert](https://mui.com/components/alert/)
API:
- [Alert API](https://mui.com/api/alert/) - inherits [Paper API](https://mui.com/api/paper/)
function AlertTitle
AlertTitle: (props: AlertTitleProps) => JSX.Element;
Demos:
- [Alert](https://mui.com/components/alert/)
API:
- [AlertTitle API](https://mui.com/api/alert-title/)
function Autocomplete
Autocomplete: < T, Multiple extends boolean = undefined, DisableClearable extends boolean = undefined, FreeSolo extends boolean = undefined>( props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
Demos:
- [Autocomplete](https://mui.com/components/autocomplete/)
API:
- [Autocomplete API](https://mui.com/api/autocomplete/)
function AvatarGroup
AvatarGroup: (props: AvatarGroupProps) => JSX.Element;
Demos:
- [Avatars](https://mui.com/components/avatars/)
API:
- [AvatarGroup API](https://mui.com/api/avatar-group/)
function createFilterOptions
createFilterOptions: <T>( config?: CreateFilterOptionsConfig<T>) => (options: T[], state: FilterOptionsState<T>) => T[];
function getPanelId
getPanelId: (context: TabContextValue, tabValue: string) => string;
function getTabId
getTabId: (context: TabContextValue, tabValue: string) => string;
function Pagination
Pagination: (props: PaginationProps) => JSX.Element;
Demos:
- [Pagination](https://mui.com/components/pagination/)
API:
- [Pagination API](https://mui.com/api/pagination/)
function Rating
Rating: (props: RatingProps) => JSX.Element;
Demos:
- [Rating](https://mui.com/components/rating/)
API:
- [Rating API](https://mui.com/api/rating/)
function SpeedDial
SpeedDial: (props: SpeedDialProps) => JSX.Element;
Demos:
- [Speed Dial](https://mui.com/components/speed-dial/)
API:
- [SpeedDial API](https://mui.com/api/speed-dial/)
function SpeedDialAction
SpeedDialAction: (props: SpeedDialActionProps) => JSX.Element;
Demos:
- [Speed Dial](https://mui.com/components/speed-dial/)
API:
- [SpeedDialAction API](https://mui.com/api/speed-dial-action/) - inherits [Tooltip API](https://mui.com/api/tooltip/)
function SpeedDialIcon
SpeedDialIcon: (props: SpeedDialIconProps) => JSX.Element;
Demos:
- [Speed Dial](https://mui.com/components/speed-dial/)
API:
- [SpeedDialIcon API](https://mui.com/api/speed-dial-icon/)
function TabContext
TabContext: (props: TabContextProps) => JSX.Element;
Demos:
- [Tabs](https://mui.com/components/tabs/)
API:
- [TabContext API](https://mui.com/api/tab-context/)
function TabPanel
TabPanel: (props: TabPanelProps) => JSX.Element;
Demos:
- [Tabs](https://mui.com/components/tabs/)
API:
- [TabPanel API](https://mui.com/api/tab-panel/)
function Timeline
Timeline: (props: TimelineProps) => JSX.Element;
Demos:
- [Timeline](https://mui.com/components/timeline/)
API:
- [Timeline API](https://mui.com/api/timeline/)
function TimelineConnector
TimelineConnector: (props: TimelineConnectorProps) => JSX.Element;
Demos:
- [Timeline](https://mui.com/components/timeline/)
API:
- [TimelineConnector API](https://mui.com/api/timeline-connector/)
function TimelineContent
TimelineContent: (props: TimelineContentProps) => JSX.Element;
Demos:
- [Timeline](https://mui.com/components/timeline/)
API:
- [TimelineContent API](https://mui.com/api/timeline-content/)
function TimelineDot
TimelineDot: (props: TimelineDotProps) => JSX.Element;
Demos:
- [Timeline](https://mui.com/components/timeline/)
API:
- [TimelineDot API](https://mui.com/api/timeline-dot/)
function TimelineItem
TimelineItem: (props: TimelineItemProps) => JSX.Element;
Demos:
- [Timeline](https://mui.com/components/timeline/)
API:
- [TimelineItem API](https://mui.com/api/timeline-item/)
function TimelineOppositeContent
TimelineOppositeContent: (props: TimelineOppositeContentProps) => JSX.Element;
Demos:
- [Timeline](https://mui.com/components/timeline/)
API:
- [TimelineOppositeContent API](https://mui.com/api/timeline-opposite-content/)
function TimelineSeparator
TimelineSeparator: (props: TimelineSeparatorProps) => JSX.Element;
Demos:
- [Timeline](https://mui.com/components/timeline/)
API:
- [TimelineSeparator API](https://mui.com/api/timeline-separator/)
function ToggleButtonGroup
ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
Demos:
- [Toggle Button](https://mui.com/components/toggle-button/)
API:
- [ToggleButtonGroup API](https://mui.com/api/toggle-button-group/)
function TreeItem
TreeItem: (props: TreeItemProps) => JSX.Element;
Demos:
- [Tree View](https://mui.com/components/tree-view/)
API:
- [TreeItem API](https://mui.com/api/tree-item/)
function TreeView
TreeView: (props: TreeViewProps) => JSX.Element;
Demos:
- [Tree View](https://mui.com/components/tree-view/)
API:
- [TreeView API](https://mui.com/api/tree-view/)
function useAutocomplete
useAutocomplete: < T, Multiple extends boolean = undefined, DisableClearable extends boolean = undefined, FreeSolo extends boolean = undefined>( props: UseAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => { getRootProps: () => {}; getInputProps: () => {}; getInputLabelProps: () => {}; getClearProps: () => {}; getPopupIndicatorProps: () => {}; getTagProps: ({ index }: { index: number }) => {}; getListboxProps: () => {}; getOptionProps: ({ option, index }: { option: T; index: number }) => {}; id: string; inputValue: string; value: Value<T, Multiple, DisableClearable, FreeSolo>; dirty: boolean; popupOpen: boolean; focused: boolean; anchorEl: null | HTMLElement; setAnchorEl: () => void; focusedTag: number; groupedOptions: T[];};
function usePagination
usePagination: (props: UsePaginationProps) => UsePaginationResult;
function useTabContext
useTabContext: () => TabContextValue | null;
Interfaces
interface AlertProps
interface AlertProps extends StandardProps<PaperProps, AlertClassKey, 'variant'> {}
property action
action?: React.ReactNode;
The action to display. It renders after the message, at the end of the alert.
property closeText
closeText?: string;
Override the default label for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/).
property color
color?: Color;
The main color for the alert. Unless provided, the value is taken from the
severity
prop.
property icon
icon?: React.ReactNode | false;
Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the
severity
prop.
property iconMapping
iconMapping?: Partial<Record<Color, React.ReactNode>>;
The component maps the
severity
prop to a range of different icons, for instance success to<SuccessOutlined>
. If you wish to change this mapping, you can provide your own. Alternatively, you can use theicon
prop to override the icon displayed.
property onClose
onClose?: (event: React.SyntheticEvent) => void;
Callback fired when the component requests to be closed. When provided and no
action
prop is set, a close icon button is displayed that triggers the callback when clicked.Parameter event
The event source of the callback.
property role
role?: string;
The ARIA role attribute of the element.
property severity
severity?: Color;
The severity of the alert. This defines the color and icon used.
property variant
variant?: 'standard' | 'filled' | 'outlined';
The variant to use.
interface AlertTitleProps
interface AlertTitleProps extends StandardProps< React.HTMLAttributes<HTMLDivElement>, AlertTitleClassKey > {}
property children
children?: React.ReactNode;
The content of the component.
interface AutocompleteChangeDetails
interface AutocompleteChangeDetails<T = string> {}
property option
option: T;
interface AutocompleteProps
interface AutocompleteProps< T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> extends UseAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, StandardProps< React.HTMLAttributes<HTMLDivElement>, AutocompleteClassKey, 'defaultValue' | 'onChange' | 'children' > {}
property ChipProps
ChipProps?: object;
Props applied to the [
Chip
](/api/chip/) element.
property clearText
clearText?: string;
Override the default text for the *clear* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/).
property closeIcon
closeIcon?: React.ReactNode;
The icon to display in place of the default close icon.
property closeText
closeText?: string;
Override the default text for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/).
property disabled
disabled?: boolean;
If
true
, the input will be disabled.
property disablePortal
disablePortal?: boolean;
Disable the portal behavior. The children stay within it's parent DOM hierarchy.
property forcePopupIcon
forcePopupIcon?: true | false | 'auto';
Force the visibility display of the popup icon.
property fullWidth
fullWidth?: boolean;
If
true
, the input will take up the full width of its container.
property getLimitTagsText
getLimitTagsText?: (more: number) => React.ReactNode;
The label to display when the tags are truncated (
limitTags
).Parameter more
The number of truncated tags.
Returns
{ReactNode}
property limitTags
limitTags?: number;
The maximum number of tags that will be visible when not focused. Set
-1
to disable the limit.
property ListboxComponent
ListboxComponent?: React.ComponentType<React.HTMLAttributes<HTMLElement>>;
The component used to render the listbox.
property ListboxProps
ListboxProps?: object;
Props applied to the Listbox element.
property loading
loading?: boolean;
If
true
, the component is in a loading state.
property loadingText
loadingText?: React.ReactNode;
Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/).
property noOptionsText
noOptionsText?: React.ReactNode;
Text to display when there are no options.
For localization purposes, you can use the provided [translations](/guides/localization/).
property openText
openText?: string;
Override the default text for the *open popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/).
property PaperComponent
PaperComponent?: React.ComponentType<React.HTMLAttributes<HTMLElement>>;
The component used to render the body of the popup.
property PopperComponent
PopperComponent?: React.ComponentType<PopperProps>;
The component used to position the popup.
property popupIcon
popupIcon?: React.ReactNode;
The icon to display in place of the default popup icon.
property renderGroup
renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode;
Render the group.
Parameter option
The group to render.
Returns
{ReactNode}
property renderInput
renderInput: (params: AutocompleteRenderInputParams) => React.ReactNode;
Render the input.
Parameter params
Returns
{ReactNode}
property renderOption
renderOption?: ( option: T, state: AutocompleteRenderOptionState) => React.ReactNode;
Render the option, use
getOptionLabel
by default.Parameter option
The option to render.
Parameter state
The state of the component.
Returns
{ReactNode}
property renderTags
renderTags?: ( value: T[], getTagProps: AutocompleteGetTagProps) => React.ReactNode;
Render the selected value.
Parameter value
The
value
provided to the component.Parameter getTagProps
A tag props getter.
Returns
{ReactNode}
property size
size?: 'small' | 'medium';
The size of the autocomplete.
interface AutocompleteRenderGroupParams
interface AutocompleteRenderGroupParams {}
interface AutocompleteRenderInputParams
interface AutocompleteRenderInputParams {}
property disabled
disabled: boolean;
property fullWidth
fullWidth: boolean;
property id
id: string;
property InputLabelProps
InputLabelProps: object;
property inputProps
inputProps: object;
property InputProps
InputProps: { ref: React.Ref<any>; className: string; startAdornment: React.ReactNode; endAdornment: React.ReactNode;};
property size
size: 'small' | undefined;
interface AutocompleteRenderOptionState
interface AutocompleteRenderOptionState {}
property inputValue
inputValue: string;
property selected
selected: boolean;
interface AvatarGroupProps
interface AvatarGroupProps extends StandardProps< React.HTMLAttributes<HTMLDivElement>, AvatarGroupClassKey > {}
interface CreateFilterOptionsConfig
interface CreateFilterOptionsConfig<T> {}
property ignoreAccents
ignoreAccents?: boolean;
property ignoreCase
ignoreCase?: boolean;
property limit
limit?: number;
property matchFrom
matchFrom?: 'any' | 'start';
property stringify
stringify?: (option: T) => string;
property trim
trim?: boolean;
interface FilterOptionsState
interface FilterOptionsState<T> {}
property getOptionLabel
getOptionLabel: (option: T) => string;
property inputValue
inputValue: string;
interface IconContainerProps
interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement> {}
property value
value: number;
interface MultiSelectTreeViewProps
interface MultiSelectTreeViewProps extends TreeViewPropsBase {}
property defaultSelected
defaultSelected?: string[];
Selected node ids. (Uncontrolled) When
multiSelect
is true this takes an array of strings; when false (default) a string.
property multiSelect
multiSelect?: true;
If true
ctrl
andshift
will trigger multiselect.
property onNodeSelect
onNodeSelect?: (event: React.ChangeEvent<{}>, nodeIds: string[]) => void;
Callback fired when tree items are selected/unselected.
Parameter event
The event source of the callback
Parameter value
of the selected nodes. When
multiSelect
is true this is an array of strings; when false (default) a string.
property selected
selected?: string[];
Selected node ids. (Controlled) When
multiSelect
is true this takes an array of strings; when false (default) a string.
interface PaginationItemTypeMap
interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'div'> {}
property classKey
classKey: PaginationItemClassKey;
property defaultComponent
defaultComponent: D;
property props
props: P & { /** * The active color. */ color?: 'standard' | 'primary' | 'secondary'; /** * If `true`, the item will be disabled. */ disabled?: boolean; /** * The current page number. */ page?: number; /** * If `true` the pagination item is selected. */ selected?: boolean; /** * The shape of the pagination item. */ shape?: 'round' | 'rounded'; /** * The size of the pagination item. */ size?: 'small' | 'medium' | 'large'; /** * The type of pagination item. */ type?: UsePaginationItem['type']; /** * The pagination item variant. */ variant?: 'text' | 'outlined';};
interface PaginationProps
interface PaginationProps extends UsePaginationProps, StandardProps< React.HTMLAttributes<HTMLElement>, PaginationClassKey, 'children' | 'onChange' > {}
property color
color?: 'primary' | 'secondary' | 'standard';
The active color.
property getItemAriaLabel
getItemAriaLabel?: ( type: 'page' | 'first' | 'last' | 'next' | 'previous', page: number, selected: boolean) => string;
Accepts a function which returns a string value that provides a user-friendly name for the current page.
For localization purposes, you can use the provided [translations](/guides/localization/).
Parameter type
The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
Parameter page
The page number to format.
Parameter selected
If true, the current page is selected.
Returns
{string}
property renderItem
renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
Render the item.
Parameter params
The props to spread on a PaginationItem.
Returns
{ReactNode}
property shape
shape?: 'round' | 'rounded';
The shape of the pagination items.
property size
size?: 'small' | 'medium' | 'large';
The size of the pagination component.
property variant
variant?: 'text' | 'outlined';
The variant to use.
interface PaginationRenderItemParams
interface PaginationRenderItemParams extends UsePaginationItem {}
interface RatingProps
interface RatingProps extends StandardProps< React.HTMLAttributes<HTMLSpanElement>, RatingClassKey, 'children' | 'onChange' > {}
property defaultValue
defaultValue?: number;
The default value. Use when the component is not controlled.
property disabled
disabled?: boolean;
If
true
, the rating will be disabled.
property emptyIcon
emptyIcon?: React.ReactNode;
The icon to display when empty.
property emptyLabelText
emptyLabelText?: React.ReactNode;
The label read when the rating input is empty.
property getLabelText
getLabelText?: (value: number) => string;
Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.
For localization purposes, you can use the provided [translations](/guides/localization/).
Parameter value
The rating label's value to format.
Returns
{string}
property icon
icon?: React.ReactNode;
The icon to display.
property IconContainerComponent
IconContainerComponent?: React.ElementType<IconContainerProps>;
The component containing the icon.
property max
max?: number;
Maximum rating.
property name
name?: string;
The name attribute of the radio
input
elements. IfreadOnly
is false, the prop is required, this input name`should be unique within the parent form.
property onChange
onChange?: (event: React.ChangeEvent<{}>, value: number | null) => void;
Callback fired when the value changes.
Parameter event
The event source of the callback.
Parameter value
The new value.
property onChangeActive
onChangeActive?: (event: React.ChangeEvent<{}>, value: number) => void;
Callback function that is fired when the hover state changes.
Parameter event
The event source of the callback.
Parameter value
The new value.
property precision
precision?: number;
The minimum increment value change allowed.
property readOnly
readOnly?: boolean;
Removes all hover effects and pointer events.
property size
size?: 'small' | 'medium' | 'large';
The size of the rating.
property value
value?: number | null;
The rating value.
interface SingleSelectTreeViewProps
interface SingleSelectTreeViewProps extends TreeViewPropsBase {}
property defaultSelected
defaultSelected?: string;
Selected node ids. (Uncontrolled) When
multiSelect
is true this takes an array of strings; when false (default) a string.
property multiSelect
multiSelect?: false;
If true
ctrl
andshift
will trigger multiselect.
property onNodeSelect
onNodeSelect?: (event: React.ChangeEvent<{}>, nodeIds: string) => void;
Callback fired when tree items are selected/unselected.
Parameter event
The event source of the callback
Parameter value
of the selected nodes. When
multiSelect
is true this is an array of strings; when false (default) a string.
property selected
selected?: string;
Selected node ids. (Controlled) When
multiSelect
is true this takes an array of strings; when false (default) a string.
interface SkeletonTypeMap
interface SkeletonTypeMap<P = {}, D extends React.ElementType = 'span'> {}
property classKey
classKey: SkeletonClassKey;
property defaultComponent
defaultComponent: 'div';
property props
props: P & { animation?: 'pulse' | 'wave' | false; children?: React.ReactNode; height?: number | string; variant?: 'text' | 'rect' | 'circle'; width?: number | string;};
interface SpeedDialActionProps
interface SpeedDialActionProps extends StandardProps< Partial<TooltipProps>, SpeedDialActionClassKey, 'children' > {}
property delay
delay?: number;
Adds a transition delay, to allow a series of SpeedDialActions to be animated.
property FabProps
FabProps?: Partial<FabProps>;
Props applied to the [
Fab
](/api/fab/) component.
property icon
icon?: React.ReactNode;
The Icon to display in the SpeedDial Fab.
property TooltipClasses
TooltipClasses?: TooltipProps['classes'];
classes
prop applied to the [Tooltip
](/api/tooltip/) element.
property tooltipOpen
tooltipOpen?: boolean;
Make the tooltip always visible when the SpeedDial is open.
property tooltipPlacement
tooltipPlacement?: TooltipProps['placement'];
Placement of the tooltip.
property tooltipTitle
tooltipTitle?: React.ReactNode;
Label to display in the tooltip.
interface SpeedDialIconProps
interface SpeedDialIconProps extends StandardProps< React.HTMLAttributes<HTMLSpanElement>, SpeedDialIconClassKey, 'children' > {}
interface SpeedDialProps
interface SpeedDialProps extends StandardProps< React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>, SpeedDialClassKey, 'children' > {}
property ariaLabel
ariaLabel: string;
The aria-label of the button element. Also used to provide the
id
for theSpeedDial
element and its children.
property children
children?: React.ReactNode;
SpeedDialActions to display when the SpeedDial is
open
.
property direction
direction?: 'up' | 'down' | 'left' | 'right';
The direction the actions open relative to the floating action button.
property FabProps
FabProps?: Partial<FabProps>;
Props applied to the [
Fab
](/api/fab/) element.
property hidden
hidden?: boolean;
If
true
, the SpeedDial will be hidden.
property icon
icon?: React.ReactNode;
The icon to display in the SpeedDial Fab. The
SpeedDialIcon
component provides a default Icon with animation.
property onClose
onClose?: (event: React.SyntheticEvent<{}>, reason: CloseReason) => void;
Callback fired when the component requests to be closed.
Parameter event
The event source of the callback.
Parameter reason
Can be:
"toggle"
,"blur"
,"mouseLeave"
,"escapeKeyDown"
.
property onOpen
onOpen?: (event: React.SyntheticEvent<{}>, reason: OpenReason) => void;
Callback fired when the component requests to be open.
Parameter event
The event source of the callback.
Parameter reason
Can be:
"toggle"
,"focus"
,"mouseEnter"
.
property open
open: boolean;
If
true
, the SpeedDial is open.
property openIcon
openIcon?: React.ReactNode;
The icon to display in the SpeedDial Fab when the SpeedDial is open.
property TransitionComponent
TransitionComponent?: React.ComponentType<TransitionProps>;
The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
property transitionDuration
transitionDuration?: TransitionProps['timeout'];
The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
property TransitionProps
TransitionProps?: TransitionProps;
Props applied to the [
Transition
](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
interface TabContextProps
interface TabContextProps {}
interface TabContextValue
interface TabContextValue {}
interface TabListTypeMap
interface TabListTypeMap< P = {}, D extends React.ElementType = TabsTypeMap['defaultComponent']> {}
property classKey
classKey: TabListClassKey;
property defaultComponent
defaultComponent: D;
property props
props: P & Omit<TabsTypeMap['props'], 'value'>;
interface TabPanelProps
interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TabPanelClassKey> {}
interface TimelineConnectorProps
interface TimelineConnectorProps extends StandardProps<{}, TimelineConnectorClassKey> {}
property children
children?: React.ReactNode;
The content of the component.
interface TimelineContentProps
interface TimelineContentProps extends StandardProps<{}, TimelineContentClassKey> {}
property children
children?: React.ReactNode;
The content of the component.
interface TimelineDotProps
interface TimelineDotProps extends StandardProps<{}, TimelineDotClassKey> {}
interface TimelineItemProps
interface TimelineItemProps extends StandardProps<{}, TimelineItemClassKey> {}
property children
children?: React.ReactNode;
The content of the component.
interface TimelineOppositeContentProps
interface TimelineOppositeContentProps extends StandardProps<{}, TimelineOppositeContentClassKey> {}
property children
children?: React.ReactNode;
The content of the component.
interface TimelineProps
interface TimelineProps extends StandardProps<{}, TimelineClassKey> {}
interface TimelineSeparatorProps
interface TimelineSeparatorProps extends StandardProps<{}, TimelineSeparatorClassKey> {}
property children
children?: React.ReactNode;
The content of the component.
interface ToggleButtonGroupProps
interface ToggleButtonGroupProps extends StandardProps< React.HTMLAttributes<HTMLDivElement>, ToggleButtonGroupClassKey, 'onChange' | 'children' > {}
property children
children?: React.ReactNode;
The content of the button.
property exclusive
exclusive?: boolean;
If
true
, only allow one of the child ToggleButton values to be selected.
property onChange
onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
Callback fired when the value changes.
Parameter event
The event source of the callback.
Parameter value
of the selected buttons. When
exclusive
is true this is a single value; when false an array of selected values. If no value is selected andexclusive
is true the value is null; when false an empty array.
property orientation
orientation?: 'horizontal' | 'vertical';
The group orientation (layout flow direction).
property size
size?: 'small' | 'medium' | 'large';
The size of the buttons.
property value
value?: any;
The currently selected value within the group or an array of selected values when
exclusive
is false.The value must have reference equality with the option in order to be selected.
interface TreeItemProps
interface TreeItemProps extends StandardProps<React.HTMLAttributes<HTMLLIElement>, TreeItemClassKey> {}
property children
children?: React.ReactNode;
The content of the component.
property collapseIcon
collapseIcon?: React.ReactNode;
The icon used to collapse the node.
property endIcon
endIcon?: React.ReactNode;
The icon displayed next to a end node.
property expandIcon
expandIcon?: React.ReactNode;
The icon used to expand the node.
property icon
icon?: React.ReactNode;
The icon to display next to the tree node's label.
property label
label?: React.ReactNode;
The tree node label.
property nodeId
nodeId: string;
The id of the node.
property onIconClick
onIconClick?: React.MouseEventHandler;
onClick
handler for the icon container. Callevent.preventDefault()
to preventonNodeToggle
from being called.
property onLabelClick
onLabelClick?: React.MouseEventHandler;
onClick
handler for the label container. Callevent.preventDefault()
to preventonNodeToggle
from being called.
property TransitionComponent
TransitionComponent?: React.ComponentType<TransitionProps>;
The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
property TransitionProps
TransitionProps?: TransitionProps;
Props applied to the [
Transition
](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
interface TreeViewPropsBase
interface TreeViewPropsBase extends StandardProps< React.HTMLAttributes<HTMLUListElement>, TreeViewClassKey > {}
property children
children?: React.ReactNode;
The content of the component.
property defaultCollapseIcon
defaultCollapseIcon?: React.ReactNode;
The default icon used to collapse the node.
property defaultEndIcon
defaultEndIcon?: React.ReactNode;
The default icon displayed next to a end node. This is applied to all tree nodes and can be overridden by the TreeItem
icon
prop.
property defaultExpanded
defaultExpanded?: string[];
Expanded node ids. (Uncontrolled)
property defaultExpandIcon
defaultExpandIcon?: React.ReactNode;
The default icon used to expand the node.
property defaultParentIcon
defaultParentIcon?: React.ReactNode;
The default icon displayed next to a parent node. This is applied to all parent nodes and can be overridden by the TreeItem
icon
prop.
property disableSelection
disableSelection?: boolean;
If
true
selection is disabled.
property expanded
expanded?: string[];
Expanded node ids. (Controlled)
property onNodeToggle
onNodeToggle?: (event: React.ChangeEvent<{}>, nodeIds: string[]) => void;
Callback fired when tree items are expanded/collapsed.
Parameter event
The event source of the callback.
Parameter nodeIds
The ids of the expanded nodes.
interface UseAutocompleteProps
interface UseAutocompleteProps< T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> {}
property autoComplete
autoComplete?: boolean;
If
true
, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state.
property autoHighlight
autoHighlight?: boolean;
If
true
, the first option is automatically highlighted.
property autoSelect
autoSelect?: boolean;
If
true
, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.
property blurOnSelect
blurOnSelect?: 'touch' | 'mouse' | true | false;
Control if the input should be blurred when an option is selected:
-
false
the input is not blurred. -true
the input is always blurred. -touch
the input is blurred after a touch event. -mouse
the input is blurred after a mouse event.
property clearOnBlur
clearOnBlur?: boolean;
If
true
, the input's text will be cleared on blur if no value is selected.Set to
true
if you want to help the user enter a new value. Set tofalse
if you want to help the user resume his search.
property clearOnEscape
clearOnEscape?: boolean;
If
true
, clear all values when the user presses escape and the popup is closed.
property componentName
componentName?: string;
The component name that is using this hook. Used for warnings.
property debug
debug?: boolean;
If
true
, the popup will ignore the blur event if the input is filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component.
property defaultValue
defaultValue?: Value<T, Multiple, DisableClearable, FreeSolo>;
The default input value. Use when the component is not controlled.
property disableClearable
disableClearable?: DisableClearable;
If
true
, the input can't be cleared.
property disableCloseOnSelect
disableCloseOnSelect?: boolean;
If
true
, the popup won't close when a value is selected.
property disabledItemsFocusable
disabledItemsFocusable?: boolean;
If
true
, will allow focus on disabled items.
property disableListWrap
disableListWrap?: boolean;
If
true
, the list box in the popup will not wrap focus.
property filterOptions
filterOptions?: (options: T[], state: FilterOptionsState<T>) => T[];
A filter function that determines the options that are eligible.
Parameter options
The options to render.
Parameter state
The state of the component.
Returns
{T[]}
property filterSelectedOptions
filterSelectedOptions?: boolean;
If
true
, hide the selected options from the list box.
property freeSolo
freeSolo?: FreeSolo;
If
true
, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
property getOptionDisabled
getOptionDisabled?: (option: T) => boolean;
Used to determine the disabled state for a given option.
Parameter option
The option to test.
Returns
{boolean}
property getOptionLabel
getOptionLabel?: (option: T) => string;
Used to determine the string value for a given option. It's used to fill the input (and the list box options if
renderOption
is not provided).Parameter option
Returns
{string}
property getOptionSelected
getOptionSelected?: (option: T, value: T) => boolean;
Used to determine if an option is selected, considering the current value. Uses strict equality by default.
Parameter option
The option to test.
Parameter value
The value to test against.
Returns
{boolean}
property groupBy
groupBy?: (option: T) => string;
If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when
renderGroup
is not provided.Parameter options
The options to group.
Returns
{string}
property handleHomeEndKeys
handleHomeEndKeys?: boolean;
If
true
, the component handles the "Home" and "End" keys when the popup is open. It should move focus to the first option and last option, respectively.
property id
id?: string;
This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
property includeInputInList
includeInputInList?: boolean;
If
true
, the highlight can move to the input.
property inputValue
inputValue?: string;
The input value.
property multiple
multiple?: Multiple;
If
true
,value
must be an array and the menu will support multiple selections.
property onChange
onChange?: ( event: React.ChangeEvent<{}>, value: Value<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<T>) => void;
Callback fired when the value changes.
Parameter event
The event source of the callback.
Parameter value
The new value of the component.
Parameter reason
One of "create-option", "select-option", "remove-option", "blur" or "clear".
property onClose
onClose?: ( event: React.ChangeEvent<{}>, reason: AutocompleteCloseReason) => void;
Callback fired when the popup requests to be closed. Use in controlled mode (see open).
Parameter event
The event source of the callback.
Parameter reason
Can be:
"toggleInput"
,"escape"
,"select-option"
,"blur"
.
property onHighlightChange
onHighlightChange?: ( event: React.ChangeEvent<{}>, option: T | null, reason: AutocompleteHighlightChangeReason) => void;
Callback fired when the highlight option changes.
Parameter event
The event source of the callback.
Parameter option
The highlighted option.
Parameter reason
Can be:
"keyboard"
,"auto"
,"mouse"
.
property onInputChange
onInputChange?: ( event: React.ChangeEvent<{}>, value: string, reason: AutocompleteInputChangeReason) => void;
Callback fired when the input value changes.
Parameter event
The event source of the callback.
Parameter value
The new value of the text input.
Parameter reason
Can be:
"input"
(user input),"reset"
(programmatic change),"clear"
.
property onOpen
onOpen?: (event: React.ChangeEvent<{}>) => void;
Callback fired when the popup requests to be opened. Use in controlled mode (see open).
Parameter event
The event source of the callback.
property open
open?: boolean;
Control the popup` open state.
property openOnFocus
openOnFocus?: boolean;
If
true
, the popup will open on input focus.
property options
options: T[];
Array of options.
property selectOnFocus
selectOnFocus?: boolean;
If
true
, the input's text will be selected on focus. It helps the user clear the selected value.
property value
value?: Value<T, Multiple, DisableClearable, FreeSolo>;
The value of the autocomplete.
The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the
getOptionSelected
prop.
interface UsePaginationItem
interface UsePaginationItem {}
interface UsePaginationProps
interface UsePaginationProps {}
property boundaryCount
boundaryCount?: number;
Number of always visible pages at the beginning and end. 1
property componentName
componentName?: string;
The name of the component where this hook is used.
property count
count?: number;
The total number of pages. 1
property defaultPage
defaultPage?: number;
The page selected by default when the component is uncontrolled. 1
property disabled
disabled?: boolean;
If
true
, the pagination component will be disabled. false
property hideNextButton
hideNextButton?: boolean;
If
true
, hide the next-page button. false
property hidePrevButton
hidePrevButton?: boolean;
If
true
, hide the previous-page button. false
property onChange
onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
Callback fired when the page is changed.
Parameter event
The event source of the callback.
Parameter page
The page selected.
property page
page?: number;
The current page.
property showFirstButton
showFirstButton?: boolean;
If
true
, show the first-page button. false
property showLastButton
showLastButton?: boolean;
If
true
, show the last-page button. false
property siblingCount
siblingCount?: number;
Number of always visible pages before and after the current page. 1
interface UsePaginationResult
interface UsePaginationResult {}
property items
items: UsePaginationItem[];
Type Aliases
type AlertClassKey
type AlertClassKey = | 'root' | 'standardSuccess' | 'standardInfo' | 'standardWarning' | 'standardError' | 'outlinedSuccess' | 'outlinedInfo' | 'outlinedWarning' | 'outlinedError' | 'filledSuccess' | 'filledInfo' | 'filledWarning' | 'filledError' | 'icon' | 'message' | 'action';
type AlertTitleClassKey
type AlertTitleClassKey = 'root';
type AutocompleteChangeReason
type AutocompleteChangeReason = | 'create-option' | 'select-option' | 'remove-option' | 'clear' | 'blur';
type AutocompleteClassKey
type AutocompleteClassKey = | 'root' | 'focused' | 'tag' | 'tagSizeSmall' | 'inputRoot' | 'input' | 'inputFocused' | 'endAdornment' | 'clearIndicator' | 'clearIndicatorDirty' | 'popupIndicator' | 'popupIndicatorOpen' | 'popper' | 'popperDisablePortal' | 'paper' | 'listbox' | 'loading' | 'noOptions' | 'option' | 'groupLabel' | 'groupUl';
type AutocompleteCloseReason
type AutocompleteCloseReason = 'toggleInput' | 'escape' | 'select-option' | 'blur';
type AutocompleteFreeSoloValueMapping
type AutocompleteFreeSoloValueMapping<FreeSolo> = FreeSolo extends true ? string : never;
type AutocompleteGetTagProps
type AutocompleteGetTagProps = ({ index }: { index: number }) => {};
type AutocompleteHighlightChangeReason
type AutocompleteHighlightChangeReason = 'keyboard' | 'mouse' | 'auto';
type AutocompleteInputChangeReason
type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear';
type AvatarGroupClassKey
type AvatarGroupClassKey = 'root' | 'avatar';
type CloseReason
type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';
type Color
type Color = 'success' | 'info' | 'warning' | 'error';
type OpenReason
type OpenReason = 'toggle' | 'focus' | 'mouseEnter';
type PaginationClassKey
type PaginationClassKey = 'root' | 'ul';
type PaginationItemClassKey
type PaginationItemClassKey = | 'root' | 'page' | 'sizeSmall' | 'sizeLarge' | 'textPrimary' | 'textSecondary' | 'outlined' | 'outlinedPrimary' | 'outlinedSecondary' | 'rounded' | 'ellipsis' | 'focusVisible' | 'disabled' | 'selected' | 'icon';
type PaginationItemProps
type PaginationItemProps< D extends React.ElementType = PaginationItemTypeMap['defaultComponent'], P = {}> = OverrideProps<PaginationItemTypeMap<P, D>, D>;
type RatingClassKey
type RatingClassKey = | 'root' | 'sizeSmall' | 'sizeLarge' | 'readOnly' | 'disabled' | 'focusVisible' | 'visuallyhidden' | 'pristine' | 'label' | 'icon' | 'iconEmpty' | 'iconFilled' | 'iconHover' | 'iconFocus' | 'iconActive' | 'decimal';
type SkeletonClassKey
type SkeletonClassKey = | 'root' | 'text' | 'rect' | 'circle' | 'pulse' | 'wave' | 'withChildren' | 'fitContent' | 'heightAuto';
type SkeletonProps
type SkeletonProps< D extends React.ElementType = SkeletonTypeMap['defaultComponent'], P = {}> = OverrideProps<SkeletonTypeMap<P, D>, D>;
type SpeedDialActionClassKey
type SpeedDialActionClassKey = | 'fab' | 'fabClosed' | 'staticTooltip' | 'staticTooltipClosed' | 'staticTooltipLabel' | 'tooltipPlacementLeft';
type SpeedDialClassKey
type SpeedDialClassKey = | 'root' | 'fab' | 'directionUp' | 'directionDown' | 'directionLeft' | 'directionRight' | 'actions' | 'actionsClosed';
type SpeedDialIconClassKey
type SpeedDialIconClassKey = | 'root' | 'icon' | 'iconOpen' | 'iconWithOpenIconOpen' | 'openIcon' | 'openIconOpen';
type TabListClassKey
type TabListClassKey = TabsClassKey;
type TabListProps
type TabListProps< D extends React.ElementType = TabListTypeMap['defaultComponent'], P = {}> = OverrideProps<TabListTypeMap<P, D>, D>;
type TabPanelClassKey
type TabPanelClassKey = 'root';
type TimelineClassKey
type TimelineClassKey = 'root' | 'alignLeft' | 'alignRight' | 'alignAlternate';
type TimelineConnectorClassKey
type TimelineConnectorClassKey = 'root';
type TimelineContentClassKey
type TimelineContentClassKey = 'root';
type TimelineDotClassKey
type TimelineDotClassKey = | 'root' | 'defaultDefault' | 'defaultPrimary' | 'defaultSecondary' | 'outlinedDefault' | 'outlinedPrimary' | 'outlinedSecondary';
type TimelineItemClassKey
type TimelineItemClassKey = | 'root' | 'alignLeft' | 'alignRight' | 'alignAlternate' | 'missingOppositeContent';
type TimelineOppositeContentClassKey
type TimelineOppositeContentClassKey = 'root' | 'alignRight';
type TimelineSeparatorClassKey
type TimelineSeparatorClassKey = 'root';
type ToggleButtonClassKey
type ToggleButtonClassKey = | 'root' | 'disabled' | 'selected' | 'label' | 'sizeSmall' | 'sizeLarge';
type ToggleButtonGroupClassKey
type ToggleButtonGroupClassKey = | 'root' | 'vertical' | 'grouped' | 'groupedHorizontal' | 'groupedVertical';
type ToggleButtonProps
type ToggleButtonProps< D extends React.ElementType = ToggleButtonTypeMap['defaultComponent'], P = {}> = OverrideProps<ToggleButtonTypeMap<P, D>, D>;
type ToggleButtonTypeMap
type ToggleButtonTypeMap< P = {}, D extends React.ElementType = 'button'> = ExtendButtonBaseTypeMap<{ props: P & { disableFocusRipple?: boolean; selected?: boolean; size?: 'small' | 'medium' | 'large'; value?: any; }; defaultComponent: D; classKey: ToggleButtonClassKey;}>;
type TreeItemClassKey
type TreeItemClassKey = | 'root' | 'expanded' | 'selected' | 'group' | 'content' | 'iconContainer' | 'label';
type TreeViewClassKey
type TreeViewClassKey = 'root';
type TreeViewProps
type TreeViewProps = SingleSelectTreeViewProps | MultiSelectTreeViewProps;
type Value
type Value<T, Multiple, DisableClearable, FreeSolo> = Multiple extends | undefined | false ? DisableClearable extends true ? NonNullable<T | AutocompleteFreeSoloValueMapping<FreeSolo>> : T | null | AutocompleteFreeSoloValueMapping<FreeSolo> : Array<T | AutocompleteFreeSoloValueMapping<FreeSolo>>;
Package Files (28)
- Alert/Alert.d.ts
- AlertTitle/AlertTitle.d.ts
- Autocomplete/Autocomplete.d.ts
- AvatarGroup/AvatarGroup.d.ts
- Pagination/Pagination.d.ts
- Pagination/usePagination.d.ts
- PaginationItem/PaginationItem.d.ts
- Rating/Rating.d.ts
- Skeleton/Skeleton.d.ts
- SpeedDial/SpeedDial.d.ts
- SpeedDialAction/SpeedDialAction.d.ts
- SpeedDialIcon/SpeedDialIcon.d.ts
- TabContext/TabContext.d.ts
- TabList/TabList.d.ts
- TabPanel/TabPanel.d.ts
- Timeline/Timeline.d.ts
- TimelineConnector/TimelineConnector.d.ts
- TimelineContent/TimelineContent.d.ts
- TimelineDot/TimelineDot.d.ts
- TimelineItem/TimelineItem.d.ts
- TimelineOppositeContent/TimelineOppositeContent.d.ts
- TimelineSeparator/TimelineSeparator.d.ts
- ToggleButton/ToggleButton.d.ts
- ToggleButtonGroup/ToggleButtonGroup.d.ts
- TreeItem/TreeItem.d.ts
- TreeView/TreeView.d.ts
- index.d.ts
- useAutocomplete/useAutocomplete.d.ts
Dependencies (5)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (4)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material-ui/lab
.
- Markdown[](https://www.jsdocs.io/package/@material-ui/lab)
- HTML<a href="https://www.jsdocs.io/package/@material-ui/lab"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 6257 ms. - Missing or incorrect documentation? Open an issue for this package.