Sıfırdan ileriye ReactJs yeni konusuna hoş geldiniz. En son Material UI componentlerinden Surface bölümünü bitirmiştik. Bugün ise Layout bölümünü göreceğiz. Layout bölümü aslında normal div etiketlerinin daha gelişmiş versiyonu diyebiliriz. Zaten bunu konu içinde çok daha net göreceksiniz iyi okumalar.
Box
Box aslında normal div farkı yoktur. Sitede parça parça html kodu yazmak için box kullanabilirsiniz. Tabi ekleyeceğiniz css kodları burada önem teşkil etmektedir.
JavaScript:
import React from 'react'
import Box from '@mui/material/Box';
function App() {
return (
<div className='app'>
<Box sx={{ display: "flex", justifyContent: "space-around" }}>
<Box
sx={{
height: 200,
width: 200,
my: 4,
display: 'flex',
alignItems: 'center',
gap: 4,
p: 2,
border: '2px solid grey',
}}
>
Kutu 1
</Box>
<Box
sx={{
height: 200,
width: 200,
my: 4,
display: 'flex',
alignItems: 'center',
gap: 4,
p: 2,
border: '2px solid grey',
}}
>
Kutu 2
</Box>
<Box
sx={{
height: 200,
width: 200,
my: 4,
display: 'flex',
alignItems: 'center',
gap: 4,
p: 2,
border: '2px solid grey',
}}
>
Kutu 3
</Box>
</Box>
</div>
)
}
export default App
Görüldüğü üzere üç adet kutu oluşturduk. Bunu box componentleri ile ayırdık ve css düzenlemeleri ile son haline çevirdik.
Container
Container sağ ve sol taraflardan padding değeri verilmiş divin değişik versiyonu diyebiliriz. Ne zaman ki elemanlarımızı sitenin tam ortasında göstermek istiyorsak o zaman container kullanabiliriz.
JavaScript:
import React from 'react'
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
function App() {
return (
<div className='app'>
<Container maxWidth="md">
<Box sx={{ bgcolor: '#cfe8fc', height: '50vh', width: "auto" }} />
</Container>
</div>
)
}
export default App
Container boyutunu ayarlamak için width, minWidth veya maxWidth özelliklerinden yararlanabilirsiniz.
Grid
Grid, grid aslında css biliyorsanız bilmeniz gereken bir şeydir. Material UI ile componenetleşmiş sadece o kadar. Bir container veya box düşünün önemli değil. Sitenin ortasına 3 tane kutu koyacağız (eşit uzaklıkta) ve site ekranı küçüldüğünde bu kutular alt alta gelecek tarzı durumlarda grid kullanılır.
JavaScript:
import React from 'react'
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';
function App() {
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: (theme.vars ?? theme).palette.text.secondary,
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
}),
}));
return (
<div className='app'>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
</Box>
</div>
)
}
export default App
Bu örnek aslında normal css öğrenirken de yapılan örneklerdendir. Birkaç kutu yapılır ve bunlara farklı boyutlar verilir. Bu size değerleini 1'den 12'ye kadar değer verebilirsiniz. Alt kutularda bir 4 sizelık kutu bir de 8 sizelik kutu mevcuttur. Bunların toplamı 12 yapar. Dilerseniz 12 eş parçaya bölün tamamen sizin yapmak istediğiniz işleme kalmış. Eğer 12 uzunluk değerini geçerseniz bir alta kayacaktır.
Stack
Stack, elemanları dikey veya yatay olarak kolayca hizalamak ve aralarına boşluk eklemek için kullanılan bir düzen (layout) bileşenidir.
Kısaca Flexbox’ın sadeleştirilmiş ve daha pratik hali diyebiliriz
Kısaca Flexbox’ın sadeleştirilmiş ve daha pratik hali diyebiliriz
JavaScript:
import * as React from 'react';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/material/styles';
function App() {
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: (theme.vars ?? theme).palette.text.secondary,
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
}),
}));
return (
<div className='app'>
<Stack direction="row" spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
)
}
export default App
Burada yatay şekilde 3 kutu belirledik. Özellik fotoğrafları sıralama işlemlerinde stack çok kullanırız.
Bugün Layoutbölümünü bitirdik. Componentlerden bunlardan ibaret ama daha fazla tasarım vs bakmak isterseniz resmi dokümantasyona bakmanızı öneririm. Okuduğunuz için teşekkürler bir başka konuda görüşürüz.
