/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/masonry/MasonryWithVariableHeightItems.js
38 строк
1 KB
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import { styled } from '@mui/material/styles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Masonry from '@mui/lab/Masonry'; import Accordion from '@mui/material/Accordion'; import AccordionDetails from '@mui/material/AccordionDetails'; import AccordionSummary from '@mui/material/AccordionSummary'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const StyledAccordion = styled(Accordion)(({ theme }) => ({ backgroundColor: '#fff', color: (theme.vars || theme).palette.text.secondary, ...theme.applyStyles('dark', { backgroundColor: '#1A2027', }), })); export default function MasonryWithVariableHeightItems() { return ( <Box sx={{ width: 500, minHeight: 377 }}> <Masonry columns={3} spacing={2}> {heights.map((height, index) => ( <Paper key={index}> <StyledAccordion sx={{ minHeight: height }}> <AccordionSummary expandIcon={<ExpandMoreIcon />}> <Typography component="span">Accordion {index + 1}</Typography> </AccordionSummary> <AccordionDetails>Contents</AccordionDetails> </StyledAccordion> </Paper> ))} </Masonry> </Box> ); }