Chakra UI 및 React JS에서 최신 카드를 만드는 방법 ⚡️
81330 단어 webdevproductivityreacttutorial
오늘날 우리는 카드가 웹사이트와 모바일 앱 UI 전반에 걸쳐 디자인 트렌드 및 주요 요소가 되었다고 안전하게 말할 수 있습니다. Revolut, Apple & Google과 같은 대기업에서 웹사이트와 앱에서 대화형 및 최신 카드를 사용하여 고객에게 제공하는 예를 볼 수 있습니다. 그리고 사용자는 솔루션 사용에 대한 훌륭한 경험을 제공합니다!
따라서 카드 디자인 및 개발을 시작할 때 다음과 같은 몇 가지 중요한 측면을 고려해야 합니다.
UI 카드의 인기를 정의하는 또 다른 중요한 측면은 반응형 UI 디자인을 용이하게 하고 어떤 그리드 구조에도 완벽하게 맞는 사각형 모양으로 인해 모든 장치 해상도로 쉽게 축소할 수 있다는 것입니다.
카드 예제로 바로 들어가 봅시다!
오늘의 예에서는 최신 UI 트렌드로 업데이트된 세 개의 간단한 카드를 만들 것입니다. Horizon UI React 카드에서 몇 가지 디자인 영감을 얻었습니다.
좋아, 코딩하자!
이미 보셨듯이 오늘 아름다운 카드를 만들기 위해 사용할 React JS 라이브러리는 Chakra UI입니다. 또한 Chakra 테마 도구 및 React 아이콘과 같은 도구에서 도움을 받을 것입니다.
먼저 Chakra UI와 위의 추가 기능을 설치해 보겠습니다.
npm i @chakra-ui/react @chakra-ui/theme @chakra-ui/theme-tools react-icons
그런 다음 style.js 파일을 만들고 다음 스타일을 입력해야 합니다.
// @src/theme/styles.js
import { mode } from "@chakra-ui/theme-tools";
export const globalStyles = {
colors: {
gray: {
700: "#1f2733",
},
navy: {
50: "#d0dcfb",
100: "#aac0fe",
200: "#a3b9f8",
300: "#728fea",
400: "#3652ba",
500: "#1b3bbb",
600: "#24388a",
700: "#1b254b",
800: "#111c44",
900: "#0b1437",
},
brand: {
50: "#cbbff8",
100: "#876cea",
200: "#582CFF",
300: "#542de1",
400: "#7551FF",
500: "#4318FF",
600: "#300eaa",
700: "#1c0377",
800: "#130156",
900: "#0e0042",
},
},
styles: {
global: (props) => ({
body: {
overflowX: "hidden",
bg: mode("gray.50", "#1B254B")(props),
},
html: {
fontFamily: "Helvetica, sans-serif",
},
}),
},
};
엄청난!/theme의 구성 요소 폴더에서 또는 와 같은 다양한 Chakra UI 구성 요소를 수정했습니다. 이를 사용하려면 보유한 각 구성 요소(badge.js, button.js 및 breakpoints.js)에 대한 모든 스타일 파일이 있는 특수 폴더를 만들어야 합니다!
아래 구성 요소에 대한 특수 파일을 만듭니다.
배지.js
// @src/theme/components/badge.js
export const badgeStyles = {
components: {
Badge: {
sizes: {
md: {
width: "65px",
height: "25px"
}
},
baseStyle: {
textTransform: "capitalize"
}
}
}
}
button.js
// @src/theme/components/button.js
import { mode } from "@chakra-ui/theme-tools";
export const buttonStyles = {
components: {
Button: {
variants: {
primary: {
fontSize: "10px",
bg: "blue.400",
color: "#fff",
_hover: { bg: "blue.300" },
_focus: { bg: "blue.300" },
_active: { bg: "blue.300" },
},
navy: {
fontSize: "10px",
bg: "navy.900",
color: "#fff",
_hover: { bg: "navy.900" },
_focus: { bg: "navy.900" },
_active: { bg: "navy.900" },
},
"no-effects": {
_hover: "none",
_active: "none",
_focus: "none",
},
danger: () => ({
color: "white",
bg: "red.500",
fontSize: "10px",
_hover: "red.400",
_focus: "red.400",
_active: "red.400",
}),
outlined: (props) => ({
color: mode("blue.400", "white")(props),
bg: "transparent",
fontSize: "10px",
border: "1px solid",
borderColor: { bg: mode("blue.400", "white")(props)},
_hover: { bg: mode("blue.50", "transparent")(props) },
_focus: { bg: mode("blue.50", "transparent")(props) },
_active: { bg: mode("blue.50", "transparent")(props) },
}),
dark: (props) => ({
color: "white",
bg: mode("gray.700", "blue.500")(props),
fontSize: "10px",
_hover: { bg: mode("gray.700", "blue.500")(props) },
_focus: { bg: mode("gray.700", "blue.600")(props) },
_active: { bg: mode("gray.700", "blue.400")(props) },
}),
light: (props) => ({
color: mode("gray.700", "gray.700")(props),
bg: mode("gray.100", "white")(props),
fontSize: "10px",
_hover: { bg: mode("gray.50", "white")(props) },
_focus: { bg: mode("gray.50", "white")(props) },
_active: { bg: mode("gray.50", "white")(props) },
}),
},
baseStyle: {
fontWeight: "bold",
borderRadius: "8px",
fontSize: "10px",
},
},
},
};
일반 스타일을 수정한 후에는 응답 정확도를 위해 다른 중단점을 설정하는 것도 도움이 됩니다. 다음 코드를 사용하여 breakpoints.js 파일을 만듭니다.
// @src/theme/theme.js
import { extendTheme } from "@chakra-ui/react";
import { globalStyles } from "./styles";
import { breakpoints } from "./foundations/breakpoints";
import { buttonStyles } from "./components/button";
import { badgeStyles } from "./components/badge";
export default extendTheme(
{ breakpoints }, // Breakpoints
globalStyles, // Global styles
buttonStyles, // Button styles
badgeStyles, // Badge styles
);
그런 다음 index.js에서 구성 요소에 테마를 추가합니다.
// @src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
import { ChakraProvider } from "@chakra-ui/react";
// Custom Chakra theme
import theme from "theme/theme.js";
ReactDOM.render(
<ChakraProvider theme={theme} resetCss={false} position="relative">
<App />
</ChakraProvider>,
document.getElementById("root")
);
놀라운! Chakra UI + React 카드의 구조 코딩을 시작하겠습니다! ⚡️
우리가 해야 할 일은 각각에 대한 특수 파일을 만들고 아래 코드를 붙여넣는 것입니다.
Chakra UI - 프로필 카드
// @src/components/Profile.js
import React from "react";
// Chakra imports
import { Flex, Image, Text, useColorModeValue } from "@chakra-ui/react";
function Profile() {
let boxBg = useColorModeValue("white !important", "#111c44 !important");
let mainText = useColorModeValue("gray.800", "white");
let secondaryText = useColorModeValue("gray.400", "gray.400");
return (
<Flex
borderRadius='20px'
bg={boxBg}
p='20px'
h='345px'
w={{ base: "315px", md: "345px" }}
alignItems='center'
direction='column'>
<Image
src='https://i.ibb.co/xmP2pS6/Profile.png'
maxW='100%'
borderRadius='20px'
/>
<Flex flexDirection='column' mb='30px'>
<Image
src='https://i.ibb.co/B3gYTYs/Profile-Image.png'
border='5px solid red'
mx='auto'
borderColor={boxBg}
width='68px'
height='68px'
mt='-38px'
borderRadius='50%'
/>
<Text
fontWeight='600'
color={mainText}
textAlign='center'
fontSize='xl'>
Adela Parkson
</Text>
<Text
color={secondaryText}
textAlign='center'
fontSize='sm'
fontWeight='500'>
Product Designer
</Text>
</Flex>
<Flex justify='space-between' w='100%' px='36px'>
<Flex flexDirection='column'>
<Text
fontWeight='600'
color={mainText}
fontSize='xl'
textAlign='center'>
17
</Text>
<Text color={secondaryText} fontWeight='500'>
Posts
</Text>
</Flex>
<Flex flexDirection='column'>
<Text
fontWeight='600'
color={mainText}
fontSize='xl'
textAlign='center'>
9.7k
</Text>
<Text color={secondaryText} fontWeight='500'>
Followers
</Text>
</Flex>
<Flex flexDirection='column'>
<Text
fontWeight='600'
fontSize='xl'
color={mainText}
textAlign='center'>
274
</Text>
<Text color={secondaryText} fontWeight='500'>
Following
</Text>
</Flex>
</Flex>
</Flex>
);
}
export default Profile;
Chakra UI - 팀 카드
// @src/components/Teams.js
import React from "react";
// Chakra imports
import {
Avatar,
AvatarGroup,
Badge,
Flex,
Button,
Icon,
Image,
Text,
DarkMode,
useColorModeValue,
} from "@chakra-ui/react";
// Assets
import { MdPeople } from "react-icons/md";
import { IoEllipsisHorizontalSharp } from "react-icons/io5";
function Teams() {
let boxBg = useColorModeValue("white !important", "#111c44 !important");
let mainText = useColorModeValue("gray.800", "white");
let iconBox = useColorModeValue("gray.100", "whiteAlpha.200");
let iconColor = useColorModeValue("brand.200", "white");
return (
<Flex
borderRadius='20px'
bg={boxBg}
p='20px'
h='345px'
w={{ base: "315px", md: "345px" }}
alignItems='center'
direction='column'>
<Flex w='100%' mb='18px'>
<Flex
w='38px'
h='38px'
align='center'
justify='center'
borderRadius='50%'
me='12px'
bg={iconBox}>
<Icon w='24px' h='24px' as={MdPeople} color={iconColor} />
</Flex>
<Text
my='auto'
fontWeight='600'
color={mainText}
textAlign='center'
fontSize='xl'
me='auto'>
Teams
</Text>
<Button
w='38px'
h='38px'
align='center'
justify='center'
borderRadius='12px'
me='12px'
bg={iconBox}>
<Icon
w='24px'
h='24px'
as={IoEllipsisHorizontalSharp}
color={iconColor}
/>
</Button>
</Flex>
<Image
src='https://i.ibb.co/KVwmVGW/Teams-Image.png'
maxW='100%'
borderRadius='20px'
mb='10px'
/>
<Text
fontWeight='600'
color={mainText}
textAlign='start'
fontSize='xl'
w='100%'>
Simmmple Web
</Text>
<Flex mt='auto' justify='space-between' w='100%' align='center'>
<DarkMode>
<Badge
borderRadius='9px'
size='md'
colorScheme='green'
color='green.400'
textAlign='center'
display='flex'
justifyContent='center'
alignItems='center'>
Design
</Badge>
</DarkMode>
<AvatarGroup
size='sm'
max={4}
color={iconColor}
fontSize='9px'
fontWeight='700'>
<Avatar src='https://i.ibb.co/CmxNdhQ/avatar1.png' />
<Avatar src='https://i.ibb.co/cFWc59B/avatar2.png' />
<Avatar src='https://i.ibb.co/vLQJVFy/avatar3.png' />
<Avatar src='https://i.ibb.co/8mcrvQk/avatar4.png' />
<Avatar src='https://i.ibb.co/CmxNdhQ/avatar1.png' />
<Avatar src='https://i.ibb.co/cFWc59B/avatar2.png' />
<Avatar src='https://i.ibb.co/vLQJVFy/avatar3.png' />
<Avatar src='https://i.ibb.co/8mcrvQk/avatar4.png' />
</AvatarGroup>
</Flex>
</Flex>
);
}
export default Teams;
Chakra UI - 제품 카드
// @src/components/Product.js
import React from "react";
// Chakra imports
import {
Avatar,
AvatarGroup,
Box,
Flex,
Button,
Icon,
Image,
Text,
useColorModeValue,
} from "@chakra-ui/react";
// Assets
import { MdTimer, MdVideoLibrary } from "react-icons/md";
import { IoEllipsisHorizontalSharp } from "react-icons/io5";
function Product() {
let boxBg = useColorModeValue("white !important", "#111c44 !important");
let secondaryBg = useColorModeValue("gray.50", "whiteAlpha.100");
let mainText = useColorModeValue("gray.800", "white");
let iconBox = useColorModeValue("gray.100", "whiteAlpha.200");
let iconColor = useColorModeValue("brand.200", "white");
return (
<Flex
borderRadius='20px'
bg={boxBg}
h='345px'
w={{ base: "315px", md: "345px" }}
direction='column'>
<Box p='20px'>
<Flex w='100%' mb='10px'>
<Image src='https://i.ibb.co/ZWxRPRq/Venus-Logo.png' me='auto' />
<Button
w='38px'
h='38px'
align='center'
justify='center'
borderRadius='12px'
me='12px'
bg={iconBox}>
<Icon
w='24px'
h='24px'
as={IoEllipsisHorizontalSharp}
color={iconColor}
/>
</Button>
</Flex>
<Box>
<Text fontWeight='600' color={mainText} w='100%' fontSize='2xl'>
Venus Product
</Text>
<AvatarGroup
size='sm'
max={4}
color={iconColor}
fontSize='9px'
fontWeight='700'>
<Avatar src='https://i.ibb.co/CmxNdhQ/avatar1.png' />
<Avatar src='https://i.ibb.co/cFWc59B/avatar2.png' />
<Avatar src='https://i.ibb.co/vLQJVFy/avatar3.png' />
<Avatar src='https://i.ibb.co/8mcrvQk/avatar4.png' />
<Avatar src='https://i.ibb.co/CmxNdhQ/avatar1.png' />
<Avatar src='https://i.ibb.co/cFWc59B/avatar2.png' />
<Avatar src='https://i.ibb.co/vLQJVFy/avatar3.png' />
<Avatar src='https://i.ibb.co/8mcrvQk/avatar4.png' />
</AvatarGroup>
</Box>
</Box>
<Flex
bg={secondaryBg}
w='100%'
p='20px'
borderBottomLeftRadius='inherit'
borderBottomRightRadius='inherit'
height='100%'
direction='column'>
<Text
fontSize='sm'
color='gray.500'
lineHeight='24px'
pe='40px'
fontWeight='500'
mb='auto'>
You have the opportunity to play this game of life you need to
appreciate every moment.
</Text>
<Flex>
<Flex me='25px'>
<Icon as={MdTimer} w='20px' h='20px' me='6px' color='green.400' />
<Text color={mainText} fontSize='sm' my='auto' fontWeight='500'>
85 mins
</Text>
</Flex>
<Flex>
<Icon
as={MdVideoLibrary}
w='20px'
h='20px'
me='6px'
color='red.500'
/>
<Text color={mainText} fontSize='sm' my='auto' fontWeight='500'>
Video Format
</Text>
</Flex>
</Flex>
</Flex>
</Flex>
);
}
export default Product;
축하합니다! 🎉
엄청난! 이제 App.js에서 우리가 만든 카드 구성 요소를 가져올 것입니다! 가져오기는 다음과 같아야 합니다.
// Components Import
import Product from "./components/Product";
import Profile from "./components/Profile";
import Teams from "./components/Teams";
결론 및 리소스 ⭐️
이 기사에서는 Chakra UI를 사용하여 완전하고 완벽하게 반응하는 카드를 만들 수 있었습니다. 도움이 되고 흥미로웠기를 바랍니다.
Here 위의 카드가 포함된 오늘의 프로젝트에서 .zip 파일을 찾을 수 있습니다!
또한 살펴보고 시도하는 것이 좋습니다. 이 기사와 같은 더 멋진 카드, 최신 차트 및 기타 놀라운 UI 요소를 찾을 수 있습니다. 모든 장치에 반응하는 아름답게 찾을 수 있습니다! 무료이며 오픈 소스입니다!⚡️
읽어 주셔서 감사합니다!
Reference
이 문제에 관하여(Chakra UI 및 React JS에서 최신 카드를 만드는 방법 ⚡️), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/fredy/how-to-create-modern-cards-in-chakra-ui-react-js-j1b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
