io.github.nafg.scalajs.facades.mui

View original docs online: https://v4.mui.com/api/accordion/

View original docs online: https://v4.mui.com/api/accordion-actions/

View original docs online: https://v4.mui.com/api/accordion-details/

View original docs online: https://v4.mui.com/api/accordion-summary/

View original docs online: https://v4.mui.com/api/app-bar/

View original docs online: https://v4.mui.com/api/avatar/

View original docs online: https://v4.mui.com/api/backdrop/

View original docs online: https://v4.mui.com/api/badge/

View original docs online: https://v4.mui.com/api/bottom-navigation/

View original docs online: https://v4.mui.com/api/bottom-navigation-action/

View original docs online: https://v4.mui.com/api/breadcrumb-collapsed/

View original docs online: https://v4.mui.com/api/breadcrumbs/

View original docs online: https://v4.mui.com/api/button/

View original docs online: https://v4.mui.com/api/button-base/

ButtonBase contains as few styles as possible. It aims to be a simple building block for creating a button. It contains a load of style reset and some focus/ripple logic.

View original docs online: https://v4.mui.com/api/button-group/

View original docs online: https://v4.mui.com/api/card/

View original docs online: https://v4.mui.com/api/card-action-area/

View original docs online: https://v4.mui.com/api/card-actions/

View original docs online: https://v4.mui.com/api/card-content/

View original docs online: https://v4.mui.com/api/card-header/

View original docs online: https://v4.mui.com/api/card-media/

View original docs online: https://v4.mui.com/api/checkbox/

View original docs online: https://v4.mui.com/api/chip/

Chips represent complex entities in small blocks, such as a contact.

View original docs online: https://v4.mui.com/api/circular-progress/

ARIA

If the progress bar is describing the loading progress of a particular region of a page, you should use aria-describedby to point to the progress bar, and set the aria-busy attribute to true on that region until it has finished loading.

View original docs online: https://v4.mui.com/api/click-away-listener/

Listen for click events that occur somewhere in the document, outside of the element itself. For instance, if you need to hide a menu when people click anywhere else on your page.

View original docs online: https://v4.mui.com/api/collapse/

The Collapse transition is used by the Vertical Stepper StepContent component. It uses react-transition-group internally.

View original docs online: https://v4.mui.com/api/container/

View original docs online: https://v4.mui.com/api/css-baseline/

Kickstart an elegant, consistent, and simple baseline to build upon.

View original docs online: https://v4.mui.com/api/dialog/

Dialogs are overlaid modal paper based components with a backdrop.

View original docs online: https://v4.mui.com/api/dialog-actions/

View original docs online: https://v4.mui.com/api/dialog-content/

View original docs online: https://v4.mui.com/api/dialog-content-text/

View original docs online: https://v4.mui.com/api/dialog-title/

View original docs online: https://v4.mui.com/api/divider/

View original docs online: https://v4.mui.com/api/drawer/

The props of the Modal component are available when variant="temporary" is set.

View original docs online: https://v4.mui.com/api/expansion-panel/

⚠️ The ExpansionPanel component was renamed to Accordion to use a more common naming convention.

You should use import { Accordion } from '@material-ui/core' or import Accordion from '@material-ui/core/Accordion'.

View original docs online: https://v4.mui.com/api/expansion-panel-actions/

⚠️ The ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention.

You should use import { AccordionActions } from '@material-ui/core' or import AccordionActions from '@material-ui/core/AccordionActions'.

View original docs online: https://v4.mui.com/api/expansion-panel-details/

⚠️ The ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention.

You should use import { AccordionDetails } from '@material-ui/core' or import AccordionDetails from '@material-ui/core/AccordionDetails'.

View original docs online: https://v4.mui.com/api/expansion-panel-summary/

⚠️ The ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.

You should use import { AccordionSummary } from '@material-ui/core' or import AccordionSummary from '@material-ui/core/AccordionSummary'.

View original docs online: https://v4.mui.com/api/fab/

View original docs online: https://v4.mui.com/api/fade/

The Fade transition is used by the Modal component. It uses react-transition-group internally.

View original docs online: https://v4.mui.com/api/filled-input/

View original docs online: https://v4.mui.com/api/form-control/

Provides context such as filled/focused/error/required for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl. This context is used by the following components:

• FormLabel
• FormHelperText
• Input
• InputLabel

You can find one composition example below and more going to the demos.

<FormControl>
 <InputLabel htmlFor="my-input">Email address</InputLabel>
 <Input id="my-input" aria-describedby="my-helper-text" />
 <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
</FormControl>

⚠️Only one input can be used within a FormControl.

View original docs online: https://v4.mui.com/api/form-control-label/

Drop in replacement of the Radio, Switch and Checkbox component. Use this component if you want to display an extra label.

View original docs online: https://v4.mui.com/api/form-group/

FormGroup wraps controls such as Checkbox and Switch. It provides compact row layout. For the Radio, you should be using the RadioGroup component instead of this one.

View original docs online: https://v4.mui.com/api/form-helper-text/

View original docs online: https://v4.mui.com/api/form-label/

View original docs online: https://v4.mui.com/api/grid/

View original docs online: https://v4.mui.com/api/grid-list/

⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.

You should use import { ImageList } from '@material-ui/core' or import ImageList from '@material-ui/core/ImageList'.

View original docs online: https://v4.mui.com/api/grid-list-tile/

⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.

You should use import { ImageListItem } from '@material-ui/core' or import ImageListItem from '@material-ui/core/ImageListItem'.

View original docs online: https://v4.mui.com/api/grid-list-tile-bar/

⚠️ The GridListTileBar component was renamed to ImageListItemBar to align with the current Material Design naming.

You should use import { ImageListItemBar } from '@material-ui/core' or import ImageListItemBar from '@material-ui/core/ImageListItemBar'.

View original docs online: https://v4.mui.com/api/grow/

The Grow transition is used by the Tooltip and Popover components. It uses react-transition-group internally.

View original docs online: https://v4.mui.com/api/hidden/

Responsively hides children based on the selected implementation.

View original docs online: https://v4.mui.com/api/hidden-css/

View original docs online: https://v4.mui.com/api/icon/

View original docs online: https://v4.mui.com/api/icon-button/

Refer to the Icons section of the documentation regarding the available icon options.

View original docs online: https://v4.mui.com/api/image-list/

View original docs online: https://v4.mui.com/api/image-list-item/

View original docs online: https://v4.mui.com/api/image-list-item-bar/

View original docs online: https://v4.mui.com/api/input/

View original docs online: https://v4.mui.com/api/input-adornment/

View original docs online: https://v4.mui.com/api/input-base/

InputBase contains as few styles as possible. It aims to be a simple building block for creating an input. It contains a load of style reset and some state logic.

View original docs online: https://v4.mui.com/api/input-label/

View original docs online: https://v4.mui.com/api/linear-progress/

ARIA

If the progress bar is describing the loading progress of a particular region of a page, you should use aria-describedby to point to the progress bar, and set the aria-busy attribute to true on that region until it has finished loading.

View original docs online: https://v4.mui.com/api/link/

View original docs online: https://v4.mui.com/api/list/

View original docs online: https://v4.mui.com/api/list-item/

Uses an additional container component if ListItemSecondaryAction is the last child.

View original docs online: https://v4.mui.com/api/list-item-avatar/

A simple wrapper to apply List styles to an Avatar.

View original docs online: https://v4.mui.com/api/list-item-icon/

A simple wrapper to apply List styles to an Icon or SvgIcon.

View original docs online: https://v4.mui.com/api/list-item-secondary-action/

Must be used as the last child of ListItem to function properly.

View original docs online: https://v4.mui.com/api/list-item-text/

View original docs online: https://v4.mui.com/api/list-subheader/

View original docs online: https://v4.mui.com/api/menu/

View original docs online: https://v4.mui.com/api/menu-item/

View original docs online: https://v4.mui.com/api/menu-list/

A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton. It's exposed to help customization of the Menu component. If you use it separately you need to move focus into the component manually. Once the focus is placed inside the component it is fully keyboard accessible.

View original docs online: https://v4.mui.com/api/mobile-stepper/

View original docs online: https://v4.mui.com/api/modal/

Modal is a lower-level construct that is leveraged by the following components:

• Dialog
• Drawer
• Menu
• Popover

If you are creating a modal dialog, you probably want to use the Dialog component rather than directly using Modal.

This component shares many concepts with react-overlays.

View original docs online: https://v4.mui.com/api/native-select/

An alternative to <Select native /> with a much smaller bundle size footprint.

View original docs online: https://v4.mui.com/api/native-select-input/

View original docs online: https://v4.mui.com/api/no-ssr/

NoSsr purposely removes components from the subject of Server Side Rendering (SSR).

This component can be useful in a variety of situations:

• Escape hatch for broken dependencies not supporting SSR.
• Improve the time-to-first paint on the client by only rendering above the fold.
• Reduce the rendering time on the server.
• Under too heavy server load, you can turn on service degradation.

View original docs online: https://v4.mui.com/api/notched-outline/

View original docs online: https://v4.mui.com/api/outlined-input/

View original docs online: https://v4.mui.com/api/paper/

View original docs online: https://v4.mui.com/api/popover/

View original docs online: https://v4.mui.com/api/popper/

Poppers rely on the 3rd party library Popper.js for positioning.

View original docs online: https://v4.mui.com/api/portal/

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

View original docs online: https://v4.mui.com/api/radio/

View original docs online: https://v4.mui.com/api/radio-button-icon/

View original docs online: https://v4.mui.com/api/radio-group/

View original docs online: https://v4.mui.com/api/render-context/

View original docs online: https://v4.mui.com/api/ripple/

View original docs online: https://v4.mui.com/api/root-ref/

⚠️⚠️⚠️ If you want the DOM element of a Material-UI component check out FAQ: How can I access the DOM element? first.

This component uses findDOMNode which is deprecated in React.StrictMode.

Helper component to allow attaching a ref to a wrapped element to access the underlying DOM element.

It's highly inspired by https://github.com/facebook/react/issues/11401#issuecomment-340543801. For example:

import React from 'react';
import RootRef from '@material-ui/core/RootRef';

function MyComponent() {
 const domRef = React.useRef();

 React.useEffect(() => {
   console.log(domRef.current); // DOM node
 }, []);

 return (
   <RootRef rootRef={domRef}>
     <SomeChildComponent />
   </RootRef>
 );
}

View original docs online: https://v4.mui.com/api/scoped-css-baseline/

View original docs online: https://v4.mui.com/api/scrollbar-size/

View original docs online: https://v4.mui.com/api/select/

View original docs online: https://v4.mui.com/api/select-input/

View original docs online: https://v4.mui.com/api/simple-backdrop/

View original docs online: https://v4.mui.com/api/slide/

The Slide transition is used by the Drawer component. It uses react-transition-group internally.

View original docs online: https://v4.mui.com/api/slider/

View original docs online: https://v4.mui.com/api/snackbar/

View original docs online: https://v4.mui.com/api/snackbar-content/

View original docs online: https://v4.mui.com/api/step/

View original docs online: https://v4.mui.com/api/step-button/

View original docs online: https://v4.mui.com/api/step-connector/

View original docs online: https://v4.mui.com/api/step-content/

View original docs online: https://v4.mui.com/api/step-icon/

View original docs online: https://v4.mui.com/api/step-label/

View original docs online: https://v4.mui.com/api/stepper/

View original docs online: https://v4.mui.com/api/svg-icon/

View original docs online: https://v4.mui.com/api/swipe-area/

View original docs online: https://v4.mui.com/api/swipeable-drawer/

View original docs online: https://v4.mui.com/api/switch/

View original docs online: https://v4.mui.com/api/switch-base/

View original docs online: https://v4.mui.com/api/tab/

View original docs online: https://v4.mui.com/api/tab-indicator/

View original docs online: https://v4.mui.com/api/tab-scroll-button/

View original docs online: https://v4.mui.com/api/table/

View original docs online: https://v4.mui.com/api/table-body/

View original docs online: https://v4.mui.com/api/table-cell/

The component renders a <th> element when the parent context is a header or otherwise a <td> element.

View original docs online: https://v4.mui.com/api/table-container/

View original docs online: https://v4.mui.com/api/table-footer/

View original docs online: https://v4.mui.com/api/table-head/

View original docs online: https://v4.mui.com/api/table-pagination/

A TableCell based component for placing inside TableFooter for pagination.

View original docs online: https://v4.mui.com/api/table-pagination-actions/

View original docs online: https://v4.mui.com/api/table-row/

Will automatically set dynamic row height based on the material table element parent (head, body, etc).

View original docs online: https://v4.mui.com/api/table-sort-label/

A button based label for placing inside TableCell for column sorting.

View original docs online: https://v4.mui.com/api/tabs/

View original docs online: https://v4.mui.com/api/text-field/

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.

Advanced Configuration

It's important to understand that the text field is a simple abstraction on top of the following components:

• FormControl
• InputLabel
• FilledInput
• OutlinedInput
• Input
• FormHelperText

If you wish to alter the props applied to the input element, you can do so as follows:

const inputProps = {
 step: 300,
};

return <TextField id="time" type="time" inputProps={inputProps} />;

For advanced cases, please look at the source of TextField by clicking on the "Edit this page" button above. Consider either:

• using the upper case props for passing values directly to the components
• using the underlying components directly as shown in the demos

View original docs online: https://v4.mui.com/api/textarea-autosize/

View original docs online: https://v4.mui.com/api/toolbar/

View original docs online: https://v4.mui.com/api/tooltip/

View original docs online: https://v4.mui.com/api/touch-ripple/

View original docs online: https://v4.mui.com/api/typography/

View original docs online: https://v4.mui.com/api/unstable_trap-focus/

Utility component that locks focus inside the component.

View original docs online: https://v4.mui.com/api/zoom/

The Zoom transition can be used for the floating variant of the Button component. It uses react-transition-group internally.