/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/system/grid/GridTemplateAreas.js
36 строк
1011 B
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import Box from '@mui/material/Box'; export default function GridTemplateAreas() { return ( <Box sx={{ width: '100%', height: '140px', color: '#fff', '& > .MuiBox-root > .MuiBox-root': { p: 1, borderRadius: 2, fontSize: '0.875rem', fontWeight: '700', }, }} > <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, gridTemplateRows: 'auto', gridTemplateAreas: `"header header header header" "main main . sidebar" "footer footer footer footer"`, }} > <Box sx={{ gridArea: 'header', bgcolor: 'primary.main' }}>Header</Box> <Box sx={{ gridArea: 'main', bgcolor: 'secondary.main' }}>Main</Box> <Box sx={{ gridArea: 'sidebar', bgcolor: 'error.main' }}>Sidebar</Box> <Box sx={{ gridArea: 'footer', bgcolor: 'warning.dark' }}>Footer</Box> </Box> </Box> ); }