Bagaimana untuk membuat semua kad dalam mui ketinggian yang sama?
Bagaimana untuk membuat kad ini mempunyai ketinggian yang sama dalam mui? Saya tidak suka menetapkan ketinggian tetap. Ini perlu berubah secara dinamik. Semua ketinggian kad perlu ditetapkan kepada ketinggian tertinggi dalam tapak web. Antara butang dan kandungan kita boleh menambah ruang. Bagaimana saya melakukan ini?
Masalah yang anda nampaknya hadapi ialah anda ingin membuat kad dengan ketinggian kandungan berubah menggunakan perpustakaan Bahan-UI, tetapi anda mahu semua kad mempunyai ketinggian yang sama tanpa menetapkan ketinggian tetap. Anda juga ingin menambah ruang antara butang dan kandungan.
Kod Kotak Pasir
function ItemRow({ page_block }) {
return page_block.map((page_block_item, index) => (
<Grid
justifyContent="space-between"
alignItems="center"
align="center"
xs={12}
sm={6}
md={4}
lg={4}
>
<Grid
justifyContent="center"
// alignItems="center"
xs={10.5}
sm={12}
md={11}
lg={12}
>
<Card page_block_item={page_block_item} key={index} />
</Grid>
</Grid>
));
}
const Card = ({ page_block_item: block_detail }) => {
const [open, setOpen] = useState(false);
const router = useRouter();
const [cart, setCart] = useAtom(cartAtom);
return (
<Grid
key={block_detail.id}
justifyContent="center"
display={'flex'}
flexGrow={1}
alignItems="stretch"
>
<Box
sx={{
position: 'relative',
display: 'flex',
flexDirection: 'column',
height: '100%',
boxShadow: '0px 6px 12px -6px rgba(24, 39, 75, 0.12)',
}}
justifyContent="space-between"
border="1px solid #E3E3E3"
borderRadius="8px"
overflow="hidden"
margin={2}
flexGrow={1}
alignItems="stretch"
>
<Grid sx={{ position: 'relative' }}>
<Grid
item
position="relative"
sx={{ aspectRatio: '3/2', height: '100%' }}
>
<NextImage
className="image-cover"
media={block_detail.media}
/>
</Grid>
<Box
sx={{
position: 'absolute',
right: 0,
bottom: 20,
}}
>
<ShareIcon
sx={{
background: '#FC916A',
marginRight: '15px',
padding: '5px',
height: '30px',
width: '30px',
borderRadius: '50%',
color: '#FFFFFF',
cursor: 'pointer',
'&:hover': {
background: '#FFFFFF',
color: '#FC916A',
},
}}
/>
<BookmarkBorderIcon
sx={{
background: '#FC916A',
marginRight: '15px',
padding: '5px',
height: '30px',
width: '30px',
borderRadius: '50%',
color: '#FFFFFF',
cursor: 'pointer',
'&:hover': {
background: '#FFFFFF',
color: '#FC916A',
},
}}
/>
</Box>
</Grid>
<Box
sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
height: '100%',
maxHeight: 'fix-content',
}}
padding={2}
>
<Grid item sx={{ textAlign: 'left' }}>
<StyledText
my={1}
variant="H_Regular_Tagline"
color="primary.main"
content={block_detail.info_title}
/>
</Grid>
<Grid item sx={{ textAlign: 'left' }}>
<StyledText
my={1}
variant="H_Regular_Body"
color="secondary.dark"
content={block_detail.info_description}
/>
</Grid>
</Box>
<Grid item sx={{ position: 'relative' }}>
<Link
href={`/${router.query.centerName}/post/donation/${block_detail?.slug}`}
>
<StyledButton
variant="H_Regular_H4"
sx={{ width: '90%' }}
>
{block_detail.info_action_button?.text}
</StyledButton>
</Link>
</Grid>
</Box>
</Grid>
);
};
