목록Chakra (2)

bkdragon's log

CSS 프레임워크로 atomic design pattern 적용하기

팀프로젝트에서 atomic design pattern을 적용해 진행하고 있다. CSS 프레임워크를 사용하여 atomic design pattern을 적용한 경험을 공유하려고 한다. css 프레임워크는 Chakra ui를 사용했다. https://chakra-ui.com/ CRA로 앱을 설치할 때 Charka ui도 함께 설치할 수 있다. npx create-react-app my-app --template @chakra-ui/typescript atomic pattern atomic pattern은 화학적 관점에서 영감을 얻은 디자인 시스템이다. 출처 : https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole 각 단계를 간략하게 설명하면..
concept 2023. 9. 2. 23:32
Button (with Chakra)

Button은 아주 많이 사용되는 UI이다. 그냥 button 태그를 사용해도 되고 스타일 같은 것들을 지정해서 변경하면서 재사용 할 수 있게 컴포넌트를 만들어서 사용할 수도 있다. 조만간 Chakra UI를 사용할 일이 있어서 미리 공부할 겸 간단하게 컴포넌트를 작성해보았다. CustomButton.tsx import React, { PropsWithChildren } from 'react'; import { Button, ButtonProps } from '@chakra-ui/react'; type Props = ButtonProps; const CustomButton = (props: PropsWithChildren) => { const { children, ...rest } = props; ret..
UI UX 2023. 8. 25. 23:32
이전 Prev 1 Next 다음