|
|
Getting started Installation|
| , для того чтобы вписать в head настройки MUI. Это нужно для корректной работы компонентов MUI.
<MuiThemeProvider theme={theme}>
Fragment>
<CssBaseline />
<Root />
Fragment>
MuiThemeProvider>
Modal
Данная утилита обеспечивает прочную основу для создания диалоговых окон и тд (Modal). Под капотом используется у Dialog, Drawer, Menu, Popover.
Что он делает:
управляет модальным стеком;
создает фон для отключения взаимодействия с тем что ниже модального окна;
отключает прокрутку страницы, которая находится ниже модального окна;
правильно управляется фокусом (фокус находится на модальном окне, до того момента пока модальное окно не будет закрыто);
автоматически добавляет соответствующие роли ARIA.
<Modal>...Modal>
No SSR
Данная утилита намеренно удаляет компоненты из объекта рендеринга на стороне сервера (SSR).
Плюсы использования NoSsr:
улучшает время до первого рендера на клиенте, прорисовывается только верхний слой;
сокращает время рендеринга на сервере;
при слишком большой нагрузке на сервер можно включить деградацию сервера.
<NoSsr>
<Box>…Box>
NoSsr>
Popover
Данную утилиту можно использовать для отображения одного компонента поверх другого (всплывающее окно).
Что нужно знать при использовании Popover:
компонент строится поверх Modal компонента;
прокрутка и клики заблокированы.
<Popover
id={id} // уникальный id
open={open} // отвечает за отображение модального окна
onClose={handleClose}
anchorOrigin={{ // отвечает за позиционирование модального окна
vertical: 'bottom / top',
horizontal: 'left / right',
}}
anchorPosition={number} // отвечает за позиционирование модального окна по координатам
TransitionComponent={} // отвечает за анимацию появления
transitionDuration={} // продолжительность перехода
>
<Typography>The content of the PopoverTypography>
Popover>
Popper
Данную утилиту можно использовать для отображения одного компонента поверх другого (альтернатива Popover).
Что нужно знать при использовании Popper:
popper использует стороннюю библиотеку Popper.js;
прокрутка и клики не блокируется;
при клике вне Popper, он не закроется.
<Popper
id={id} // уникальный id
open={open} // отвечает за отображение модального окна
onClose={handleClose}
direction=”ltr / rtl” // направление текста внутри
placement=”left / left-start / left-end / …” // значение расположения
>
<Typography>The content of the PopoverTypography>
Popper>
Portal
Данная утилита отображает свои дочерние компоненты в новом поддереве, за пределами текущей иерархии Dom.
<Portal>
<Box>...Box>
Portal>
Textarea autosize
Данная утилита, автоматически регулирует высоту окна для ввода текста в зависимости от введенного контента.
<TextareaAutosize
aria-label="empty textarea" // заголовок
placeholder="Empty" // текст при пустом инпутнике
style={{ width: 200 }} // стили
minRows={number} // минимальное количество строк
maxRows={number} // максимальное количество строк
defaultValue=”text” // текст по умолчанию
/>
Transitions
Данная утилита помогает реализовать переходы и базовые движения.
useMediaQuery
Это хук для медиа-запросов CSS в React. Он прослушивает совпадения с медиа-запросом в CSS.
const matches = useMediaQuery('(min-width: 600px)');
return
<span>
{`(min-width:600px) matches: ${matches}`}
span>;
ИЛИ
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up('sm'));
return
<span>
{`theme.breakpoints.up('sm') matches: ${matches}`}
span>;
Masonry
Masonry размещает содержимое разных размеров в виде блоков одинаковой ширины и разной высоты с настраиваемыми промежутками.
<Masonry
children={} // содержание компонента
columns={4} // количество колонок в блоке
spacing={2} // расстояние между элементами
defaultColumns={4} // количество колонок в блоке по умолчанию
defaultSpacing={4} // расстояние между элементами по умолчанию
defaultHeitght={4} // высота элементов по умолчанию
>
{heights.map((height, index) => (
<Item key={index} sx={{ height }}>
{index + 1}
Item>
))}
Masonry>
Timeline
Timeline отображает на временной шкале список событий в хронологическом порядке.
<Timeline
position=”left / right / alternate”// расположение текста относительно вертикальной шкалы
>
<TimelineItem>
<TimelineSeparator>
<TimelineDot
color=”secondary / primary / success / …” // цвет точки
variant=”outlined / filled” // внешний вид точки
/>
<TimelineConnector />
TimelineSeparator>
<TimelineContent>TextTimelineContent>
TimelineItem>
Timeline>
Tree view
Tree view представляет собой иерархический список.
<TreeView
aria-label="file system navigator" // наименование
defaultCollapseIcon={} // значок для сворачивания узла
defaultExpandIcon={} // значок для развертывания узла
sx={{}} // стили
multiSelect// ctrl и shift вызову множественный выбор
selected={} // выбранные узлы
onNodeToggle={func} // функция срабатывает при разворачивании/сворачивании узла списка
onNodeSelect={func} // функция срабатывает при выборе/отмене узла списка
onNodeFocus={func} // функция срабатывает при фокусе на узле списка
>
<TreeItem
nodeId="1" // уровень вложенности узла
label="Applications" // текст заголовка узла
endIcon={} // иконка для конечного узла
collapseIcon={} // иконка сворачивания узла
expandIcon={} // иконка развертывания узла
icon={} // иконка, которая располагается рядом с label
TransitionComponent={} // отвечает за анимацию появления
>
<TreeItemnodeId="2" label="Calendar" />
TreeItem>
TreeView>
|
|
Скачать 45.43 Kb.