Getting started Installation
 Скачать 45.43 Kb.
|
|
Checkbox <Checkbox id="checkbox-id" // уникальный id checked// значение отвечающее за то выбрал чекбокс или нет defaultChecked// выбран (с поставленной галочкой) disabled// недоступен disabled checked// недоступен и выбран size="small / medium / large" // задание размера чекбокса color="success / error / secondary / …" // задание цвета чекбокса icon={ checkedIcon={ required// чекбокс является обязательным indeterminate// чекбокс является неопределенным indeterminateIcon// отображаемая иконка когда чекбокс неопределенный /> <FormComtrolLabel // компонент для отображения чекбокса с надписью label="Checkbox text" // надпись рядом с чекбоксом value="checkbox text" // значение чекбокса control={<Checkbox />} // отображаемый чекбокс labelPlacement=”top / start / bottom / end” // положение надписи относительно чекбокса /> Fab <Fab children={} // содержание компонента color="success / error / secondary / …" // задание цвета обертки aria-label="add" // метка или название компонента disabled// недоступен variant="circular / extended" // вариант использования (круглая обертка или расширенная), по дефолту Circular size="small / medium / large" // задание размера обертки href="#link" // ссылка на которую переходить при нажатии > <AddIcon /> Fab> <RadioGroup row// расположение группы радио горизонтально children={} // содержание компонента aria-labelledby="radio-buttons-group" name="radio-buttons-group" // значение имени группы радио value={value} > <Radio id="checkbox-id" // уникальный id disabled// недоступен value="value" // значение радио checked// значение отвечающее за то выбрал радио или нет name="radio-buttom" // значение имени элемента required// чекбокс является обязательным size="small / medium / large" // задание размера радио color="success / error / secondary / …" // задание цвета радио icon={ checkedIcon={ /> RadioGroup> Rating <Rating disabled// недоступен name="rating" // значение имени элемента value={value} // значение рейтинга onChange={(event, newValue) => { // функция срабатывает при изменении значения setValue(newValue); }} onChangeActive={(event, newValue) => { // функция срабатывает при наведении на значение setValue(newValue); }} defaultValue={3} // значение по дефолту precision={0.5} // шаг при выборе значения readOnly// только для чтения highlightSelectedOnly// позволяет выбрать только одно значение size="small / medium / large" // задание размера рейтинга max={10} // задание количества звездочек icon={ emptyIcon={ getLabelText={func} // принимает функцию, которая будет возвращать строку соответствующую выбранному значению /> Select <FormControl variant="outlined / standard / filled" // внешний вид дочерних элементов (по дефолту Outlined) disabled// недоступен fullWidth// элемент растянется на всю ширину родительского контейнера size="small / medium / large" // задание размера формы required// форма является обязательной error// Select помечается как с ошибкой (красный цвет) focused// Select всегда будет в фокусе > <InputLabelid="select-label-id">AgeInputLabel> // заголовок для Select <Select children={} // содержание компонента autoWidth// ширина устанавливается в соответствии с выбранным элементом multiple// множественный выбор defaultOpen// значения для выбора сразу показываются labelId="select-label-id" // уникальное название id="select-id" // уникальный id value={10} // значение выбора label="Age" // название выборки open={false / true} // отвечает за открытие списка (true – всегда открыт, false – нельзя открыть) variant="outlined / standard / filled" // внешний вид Select (по дефолту Outlined) onChange={handleChange} // функция, которая срабатывает при выборе значения renderValue={() => ()} // отображение значения в Select, когда его выбрали IconComponent={() => ()} // иконка отображаемая вместо стрелочки > <MenuItemvalue=””>NoneMenuItem> <MenuItemvalue={10}>TenMenuItem> <MenuItemvalue={20}>TwentyMenuItem> <MenuItemvalue={30}>ThirtyMenuItem> Select> FormControl> Slider <Slider disabled// недоступен aria-label="Volume" // название value={value} // значение слайдера defaultValue={30 / [30, 50]} // значение по умолчанию / значение по умолчанию с двумя ползунками size="small / medium / large" // задание размера слайдера step={10 / null} // шаг изменения / ограничения шагов (шаги по marks) min={10} // минимальное значение в слайдере max={100} // максимальное значение в слайдере marks // добавление отметок шагов на шкале слайдера marks={array}// добавление отметок из массива track={“normal” / false / “inverted”}// включение / отключение / боковое соединения нескольких ползунков orientation=”horizontal / vertical” // управление расположения слайдера по осям (по дефолту horizontal) color="success / error / secondary / …" // задание цвета слайдера disableSwap // если два ползунка, то запрещается их пересечение valueLabelDisplay=”auto / on / off”// отображение значения ползунка (отображается при наведении / постоянное отображение / не отображается) onChange={handleChange} // функция, которая сработает при изменении значения /> Switch <Switch id="switch-id" // уникальный id defaultChecked// выбран disabled// недоступен size="small / medium / large" // задание размера color="success / error / secondary / …" // задание цвета name="switch" // значение имени icon={ checkedIcon={ value={value} // значение required// switch является обязательным /> Text field <TextField id="text-field-id" // уникальный id label=”TextField” // заголовок disabled// недоступен required// switch является обязательным error// поле окрашено красным как с ошибкой autoFocus// поле будет в фокусе value={10} // значение variant="outlined / standard / filled" // внешний вид TextField (по дефолту Outlined) defaultValue=”Hello”// значения по умолчанию type=”text / password / number / search / …” // содержание компонента helperText=”helper text” // текст с подсказкой placeholder=”placeholder” // плейсхолдер multiline// многострочный ввод maxRows={4} // максимальное количество видимых строк minRows={4} // минимальное количество видимых строк rows={4} // начальное количество строк select// дает выбора нужно варианта их выпадающего меню InputProps={{ startAdornment: ( // добавление иконки в начало текстового поля <InputAdornmentposition="start"> <AccountCircle /> InputAdornment> ), }} size="small / medium / large" // задание размера color="success / error / secondary / …" // задание цвета margin="normal / danse" // задание отступа fullWidth// растягивание элемента на всю ширину родительского контейнера inputProps={} // атрибуты применяемые к input элементу /> <ToggleButtonGroup children={} // содержание компонента value={alignment} // значение exclusive// можно выбрать только одно значение disabled// недоступен onChange={handleAlignment} aria-label="text alignment" size="small / medium / large" // задание размера color="success / error / secondary / …" // задание цвета orientation=”horizontal / vertical” // управление расположения слайдера по осям (по дефолту horizontal) fullWidth// растягивание элемента на всю ширину родительского контейнера > <ToggleButton children={} // содержание компонента color="success / error / secondary / …" // задание цвета size="small / medium / large" // задание размера fullWidth// растягивание элемента на всю ширину родительского контейнера value="left" // значение aria-label="left aligned" disabled// недоступен selected// кнопка отображается в активном состоянии key="left aligned" // ключ > <FormatAlignLeftIcon /> ToggleButton> ToggleButtonGroup> Avatar <AvatarGroup children={} // содержание компонента max={5} // количество видимых аватарок в группе spacing=”medium / small / number” // расстояние между аватарами total={25} // общее количество аватарок в группе variant="circular / square / rounded" // управление скруглением углов (по дефолту circular) > <Avatar children={} // содержание компонента alt="avatar" // отображаемая надпись при незагруженной фотографии src="url" // ссылка на фотографию sx={{ width: 24, height: 24 }} // задание размера imgProps={} // пропсы для img sizes="10" // значение размера img variant="circular / square / rounded" // управление скруглением углов (по дефолту circular) /> AvatarGroup> Badge <Badge children={} // содержание компонента badgeContent={4} // значение внутри значка max={999} // максимальное значение содержимого значка color="success / error / secondary / …" // задание цвета variant="dot / standart" // варианты внешнего вида значка overlap="circular / rectangular" // размещение значка относительно угла элемента invisible={true / false} // видимость значка showZelo// отображение нуля anchorOrigin={{ // управление расположением значка vertical: 'top / bottom', horizontal: 'right / left', }} > <MailIconcolor="action" /> Badge> Chip <Chip disabled// недоступен children={} // содержание компонента label="Chip Outlined" // наименование variant="filled / outlined" // внешний вид (по дефолту Filled) onClick={func} // добавление действия на клик onDelete={func} // добавляет иконку удаления элемента и функционала при удалении deleteIcon={ avatar={ icon={ href=”#link” // добавление ссылки на которую переходить при клики clickable// элемент будет выглядеть как кликабельный color="success / error / secondary / …" // задание цвета size="small / medium" // задание размера /> Divider <Divider children={} // содержание компонента absolute// абсолютное расположение элемента light// цвет линии будет более светлый variant="fullWidth / inset / middle" // длина разделительной линии (по дефолту FullWidth) orientation=”horizontal / vertical” // управление расположения слайдера по осям (по дефолту horizontal) textAling=”center / left / right” // выравнивание текста (по дефолту center) flexItem// использование правильной высоты в flex контейнере /> Icon <Icon children={} // содержание компонента baseClassName="material-icons" // базовый класс color="success / error / secondary / …" // задание цвета fontSize="inherit / large / medium / small" // размер > <Icon/> List <List children={} // содержание компонента subheader={<ListSubheader />} // подзаголовок списка disablePadding// вертикальное заполнение удаляется из списка (убираются отступы между листами) dense// плотное расположение элементов > <ListItem children={} // содержание компонента autoFocus// элемент списка будет сразу выбран button// элемент элемент представляет из себя кнопку alignItem=”center / flex-start” // свойство align-items disabled// недоступен divider// добавление снизу элемента светлой границы в 1 пиксель danse// компактное вертикальное заполнение элемента disablePadding// вертикальное заполнение удаляется из списка (убираются отступы между листами) disableGutters// горизонтальные заполнение удаляется из списка (убираются отступы справа и слева) > … ListItem> List> Tooltip <Tooltip id="tooltip-id" // уникальный id children={} // содержание компонента title="Delete" // отображаемый текст при наведении placement="top-start / top / top-end / right-start / right / right-end / bottom-start / bottom / bottom-start / left-start / left / left-start / " // положение текста в зависимости от элемента на который навели курсор arrow// добавление стрелки, которая будет указывать на элемент на который навелись disableFocusListener// не реагирует на событие focus disableTouthListener// не реагирует на событие touch disableHoverListener// не реагирует на событие hover disableInteractive// делает подсказку неинтерактивной, она закроется как только курсор наводится на нее followCursor// подсказка двигает следом за курсором describeChild// передача подсказки дочернему элементу open={false / true} // если true до подсказка будет отображаться всегда onOpen={func} // функция которая сработает при открытии подсказки onClose={func} // функция которая сработает при закрытии подсказки TransitionComponent={Grow / Fade / Zoom} // анимация появления подсказки (по дефолту Grow) TransitionProps={{ timeout: 600 }} // пропсы для анимации enterDelay={500} // задержка пред появление подсказки leaveDelay={500} // задержка пред исчезанием подсказки > <Button> Submit Button> Tooltip> Typography <Typography children={} // содержание компонента noWrap// текст не будет переноситься, а при переполнении будут добавляться … variant="h1 / … / h6 / …" // стиль типографии component="div" // в какой компонент будет обернут контент внутри gutterBottom// добавление margin снизу align="center / inherit / justify / left / right" // выравнивание текста paragraph// компонент будет элементом абзаца > h1. Heading Typography> Table <TableContainer children={} // содержание компонента classes={} // класс CSS component="div" // в какой компонент будет обернут контент внутри sx={} // стили > <Table size="medium / small" // значение размера stickyHeader// устанавливает липкие (фиксированный на экране) заголовки (устарел) > <TableHead> <TableRow hover// строка будет затемняться при наведении selected// строка будет иметь выбираемые значения > <TableCell padding=”normal / none / checkbox” // задание внутренних отступов size=”medium / small” // значение размера scope=”” // атрибут области действия sortDirection=”asc / desc” // задание направления сортировки variant=”body / header / footer” // тип ячейки > <TableSortLable active// метка будет активной direction=”asc / desc” // задание направления сортировки IconComponent={} // иконка сортировки hideSortIcon// скрытие иконки сортировки > Dessert (100g serving) TableSortLable> TableCell> TableRow> TableHead> <TableBody> <TableRow> <TableCell>CakeTableCell> TableRow> TableBody> <TableFooter> <TableRow> <TableCell>Dessert (100g serving)TableCell> TableRow> TableFooter> Table> TableContainer> <DataGrid rows={rows} // массив строк columns={columns} // массив колонок rowHeight={40} // высота строки pageSize={5} // количество записей на одной странице rowsPerPageOptions={[5]} checkboxSelection// добавление checkbox в каждую строку disableSelectionOnClick// отключение постановки checkbox при нажатии на саму строку … /> Alert <Alert severity="error / warning / info / success" // тип (важность) алерта iconMapping={{ error: icon={ variant="outlined / filled / standart" // внешний вид color="error / warning / info / success" // цвет компонента > <AlertTitle>Alert!AlertTitle> Information. Alert> Backdrop <Backdrop open={true / false} // значение отвечающее за отображение заднего фона onClick={func} // функция отрабатываемая при нажатии на задний фон children={} // содержание компонента invisible// задний фон будет не виден transitionDuration={} // продолжительность перехода > <CircularProgress /> Backdrop> Dialog <Dialog open={true / false} // значение отвечающее за отображение диалогового окна onClose={func} // функция отрабатываемая при закрытии диалогового окна disableEscapeKeyDown// диалоговое окно закроется по нажатию на esc (вызовется функция из onClose) children={} // содержание компонента scroll={} // настройка скролла контента в диалогового окне maxWidth={} // максимальная ширина диалогового окна fullScreen// открытие диалогового окна на весь экран fullWidth// диалоговое окно растянется до максимальной ширины TransitionComponent={} // отвечает за анимацию появления диалогового окна transitionDuration={} // продолжительность перехода BackdropComponent={} // компонент который будет отображаться как задний фон PaperComponent={} // компонент который будет оберткой для диалогового окна > <DialogTitle>TextDialogTitle> <DialogContent> <DialogContentText>TextDialogContentText> DialogContent> <DialogActions>ButtonDialogActions> Dialog> Progress <CircularProgress color="primary / secondary / …" // задание цвета variant="indeterminate / determinate" // задание определенного значения загрузки (determinate) и неопределенного (indeterminate) value={0 - 100 / progress} // значение спиннера size={number} // размера thickness={number} // толщина круга disableShrink// отключение соединения крутящейся линии загрузки /> <LinearProgress color="primary / secondary / …" // задание цвета variant="indeterminate / determinate / buffer / query" // value={0 - 100 / progress} // значение спиннера valueBuffer={0 - 100 / progress} // значение спиннера для variant=”buffer” /> Skeleton <Skeleton variant="text / circular / rectangle / rounded" // задание внешнего вида (очертание) width={number} // ширина height={number} // высота animation={false} / "wave /" pulse // анимация /> Snackbar <Snackbar children={} // содержание компонента open={true / false} // значение отвечающее за отображение снекбара onClose={func} // функция отрабатываемая при закрытии снекбара message="text" // сообщение снекбара action={} // содержание снекбара autoHideDuration={number} // задержка перед закрытием anchorOrigin={{ vertical: "center / left / right", horizontal: "top / bottom" }} // отвечает за положение снекбара на экране key={key} // ключ для независимого отображение снек бара TransitionComponent={} // отвечает за анимацию появления transitionDuration={} // продолжительность перехода > … Snackbar> Accordion <Accordion children={} // содержание компонента onChange={func} // функция отрабатываемая при изменении defaultExpended// компонент будет развернут по дефолту disableGutters// удаляет границу между двумя развернутыми элементами expanded={true / false} // отвечает за раскрытие компонента disabled// недоступен square={true / false} // если false то появятся закругленные углы TransitionComponent={} // отвечает за анимацию появления > <AccordionSummary expandIcon={<Icon />} // иконка раскрытия children={} // содержание компонента > Text AccordionSummary> <AccordionDetails children={} // содержание компонента > Text AccordionDetails> Accordion> App bar <AppBar children={} // содержание компонента position=”fixed / relative / absolute / static / sticky” // позиционирование color=”default / inherit / primary / secondary / transparent” // цвет enableColorOnDark// цветовая палитра будет опираться на темный режим > <Toolbar children={} // содержание компонента variant=”danse / regular” // внешний вид disableGutters// удаляет внешние отступы > … Toolbar> <Menu children={} // содержание компонента > … Menu> AppBar> Card <Card children={} // содержание компонента raised// карточка будет иметь реферальный стиль > <CardHeader avatar={} // отображаемая аватарка action={} // действие для отображения заголовка карточки title={} // отображаемый заголовок /> <CardMedia width=”number” // настройка ширины картинки height=”number” // настройка высоты картинки image=”url” // отображаемая картинка alt=”string” // наименование картинки /> <CardContent children={} // содержание компонента > <Typography>...Typography> CardContent> <CardActions children={} // содержание компонента > <Button>...Button> CardActions> Card> Paper <Paper elevation={number} // глубина тени (от 0 до 24) square={true / false} // если false то появятся закругленные углы children={} // содержание компонента variant=”elevation / outlined” // внешний вид /> Link <Link href=”#” // ссылка color=”inherit / primary / secondary / …” // цвет children={} // содержание компонента variant="h1 / … / h6 / …" // стиль текста внутри ссылки underline=”none / hover / always” // подчеркивание ссылки component=”button” // компонент который будет внутри ссылки > link Link> Menu <Menu id=”id” // уникальный id onClose={} onClick={} open={true / false} // отвечает за отображение списка children={} // содержание компонента anchorEl={} // отвечает за положение списка TransitionComponent={} // отвечает за анимацию появления variant="menu / selectedMenu" // стиль меню anchorOrigin={{ // управление расположением раскрывающегося меню vertical: 'top / bottom', horizontal: 'right / left', }} > <MemuItem children={} // содержание компонента autoFocus// элемент списка будет сразу выбран divider// добавление снизу элемента светлой границы в 1 пиксель danse// компактное вертикальное заполнение элемента disableGutters// горизонтальные заполнение удаляется из списка (убираются отступы справа и слева) > Text MemuItem> Menu> <BottomNavigation onChange={} value={} // значение showLabels// отображение заголовка кнопки, если она не выбрана > <BottomNavigationAction label=”text” // текст кнопки навигации icon={ value={} // значение /> BottomNavigation> Breadcrumbs <Breadcrumbs children={} // содержание компонента aria-label=”” separator=”/” // разделительный элемент maxItems={number} // максимальное количество отображаемых элементов, все остальные скрываются за троеточием (...) itemsAfterCollapse={number} // количество элементов отображаемых после троиточия itemsBeforeCollapse={number} // количество элементов отображаемых до троиточия > … Breadcrumbs> Drawer <Drawer children={} // содержание компонента anchor=”bottom / top / left / right” // расположение бокового меню variant=”temporary / permanent / persistent” // варианты отображения open={true / false} // отвечает за открытие бокового меню hideBackdrop={true / false} // при true задний фон не будет отображаться onClose={} onOpen={} transitionDuration={} // продолжительность перехода > … Drawer> Pagination <Pagination disabled// недоступен count={number} // количество страниц в пагинации color="success / error / secondary / …" // задание цвета size="small / medium / large" // задание размера variant=”outlined / text” // варианты внешнего вида shape=”rounded / circular” // закругление углов showFirstButton// отображение кнопки перехода к первому элементу showLastButton// отображение кнопки перехода к последнему элементу hidePrewButton// скрытие кнопки перехода к предыдущему элементу hideNextButton// скрытие кнопки перехода к следующему элементу defaultPage={number} // страница которая отображает по дефолту siblingCount={number} // количество всегда видимых страницы до и после текущей страницы boundaryCount={number} // количество всегда видимых страницы в начале и в конце onChange={} /> Tabs <Tabs value={} // значение onChange={} indicatorColor=”primary / secondary / …” // задание цвета variant=”fullWidth / scrollable / standard” // варианты внешнего вида scrollButtons=”auto” // отображение кнопки скрона allowScrollButtonsModile// скрытие кнопки скролла на мобильной версии visibleScrollbar// отображение полосы прокрутки centered// выравнивание по центру orientation=”vertical / horizontal” // ось отображения > <Tab icon={} // отображаемая иконка iconPosition=”bottom / top / left / right” // положение иконки label=”text” // текст таба value={} // значение disabled// недоступен wrapped// метки таба отображаются на одной строке > … Tab> Tabs> Speed dial <SpeedDial ariaLabel=”” // идентификатор элемента direction=”down / up / left / right” // направление раскрытия элементов hidden// скрытие элемента onOpen={} onClose={} open={true / false} // отвечает за раскрытие элемента icon={} // отображаемая иконка openIcon={} // отображаемая иконка при раскрытие элемента TransitionComponent={} // отвечает за анимацию появления transitionDuration={} // продолжительность перехода > <SpeedDialAction> … SpeedDialAction> SpeedDial> Container <Container disableGutters// удаление правых и левых внутренних отступов fixed// установка максимальной ширины так, чтобы она соответствовала минимальной ширине текущего брейкпоинта maxWidth=”xs / sm / md / lg / xl / …” // определение максимальной ширины контейнера > … Container> Stack <Stack spacing={number} // расстояние между внутренними элементами divider={ direction=”row / column / row-reverse / column-reverse” // расположение элементов по осям justifyContent=”center / flex-start / …” // управления расположением элементов по главной оси alignItems=”center / flex-start / …” // управления расположением элементов по побочной оси mt={number} // margin-top > <Item>TextItem> Stack> Grid <Grid spacing={number} // расстояние между колонками container// компонент будет вести себя как гибкий контейнер item// компонент будет внутренним элементов контейнера xs={number} // количество столбцов при брейкпоинте xs sm={number} // количество столбцов при брейкпоинте sm md={number} // количество столбцов при брейкпоинте md lg={number} // количество столбцов при брейкпоинте ls xl={number} // количество столбцов при брейкпоинте xl p={number} // внутренние отступы m={number} // внешние отступы columns={{ xs: 4, sm: 8, md: 12 } / number} // rowSpacing={number} // расстояние между строками columnSpacing={number} // расстояние между столбцами direction=”row / column / row-reverse / column-reverse” // расположение элементов по осям justifyContent=”center / flex-start / …” // управления расположением элементов по главной оси alignItems=”center / flex-start / …” // управления расположением элементов по побочной оси wrap=”nowrap / wrap / wrap-reverse” // управления переносимости элементов на следующую строку или столбец zeroMinWidth// задание минимальной ширины равной 0 > <Griditemxs={8}> <Item>xs=8Item> Grid> Grid> Image list <ImageList cols={number} // количество строк children={} // содержание компонента gap={number} // расстояние между элементами rowHeight={auto / number} // высота строки variant=”masonry / quilted / standard / woven” // внешний вид > <ImageListItem cols={number} // ширина элемента в количестве столбцов rows={number} // высота элемента в количестве строк children={} // содержание компонента component=”img” // компонент который будет находится внутри данного элемента > <img /> ImageListItem> ImageList> DatePicker <DesktopDatePicker label=”Date desktop” // текст заголовка inputFormat=”MM/dd/yyyy” // формат вводимого ил выбираемого содержимого value={} // значение onChange={func} // функция, которая будет срабатывать при изменении значения renderInput={() => <TextField />} // отображаемое текстовое поле /> <MobileDatePicker label=”Date mobile” // текст заголовка inputFormat=”MM/dd/yyyy” // формат вводимого ил выбираемого содержимого value={} // значение onChange={func} // функция, которая будет срабатывать при изменении значения renderInput={() => <TextField />} // отображаемое текстовое поле /> <TimePicker label=”Time” // текст заголовка value={} // значение onChange={func} // функция, которая будет срабатывать при изменении значения renderInput={() => <TextField />} // отображаемое текстовое поле /> <DateTimePicker label=”Date and Time picker” // текст заголовка value={} // значение onChange={func} // функция, которая будет срабатывать при изменении значения renderInput={() => <TextField />} // отображаемое текстовое поле /> Utils Click-away listener Данная утилита прослушивает событие клика за пределами элемента. Утилита принимает в себя только один дочерний компонент. <ClickAwayListener onClickAway={handleClickAway} // функция, которая срабатывает при клике вне Box > <Box> … Box> ClickAwayListener> CSS Baseline Данная утилита позволяет сбросить CSS код в |