fondue

Frontify의 퐁듀 디자인 시스템

@frontify/fondue 사용

시작하기

Frontify 생태계의 디자인 시스템 인 Fondue에 오신 것을 환영합니다.

설치

Fondue Design System 패키지를 프로젝트의 종속성으로 추가하십시오.

npm i @frontify/fondue
# or
pnpm i @frontify/fondue
# or
yarn add @frontify/fondue

구성 요소 찾기

퐁듀 디자인 시스템의 스토리 북 인스턴스에서 사용 가능한 모든 구성 요소를 탐색 할 수 있습니다. 이 스토리 북에는 Fondue Monorepo의 모든 하위 포장지의 모든 구성 요소가 포함되어 있습니다. 각 구성 요소는 상단 막대에 배지가 있으며 현재 수명주기 상태를 나타냅니다.

디자이너의 경우 문서는 Weare의 Fondue Design System Documentation에서 제공됩니다.

용법

퐁듀 구성 요소를 정리하는 전환 기간 동안 구식 및 새로운 구성 요소를 나란히 사용할 수 있습니다.

이 구성 요소가 이미 리팩토링 되었습니까?

구성 요소가 리팩토링되면 이전 구현은 더 이상 사용 되지 않습니다.

이것은 구성 요소를 소비 할 때 코드와 스토리 북 스토리의 최상위 막대에서 배지를 통해 볼 수 있습니다.

리팩토링 된 구성 요소 사용

refactored 구성 요소를 사용하려면 Fondue 패키지의 /components 하위 출입구를 통해 이미 가져올 수 있습니다.

 import { Button } from "@frontify/fondue/components" ;

const App = ( ) => < Button > Click Me </ Button > ;

오래된 구성 요소 사용

이전 구성 요소를 사용하는 경우 @frontify/fondue 패키지에서 직접 가져올 수 있습니다.

 import { Button } from "@frontify/fondue" ;

const App = ( ) => < Button > Click Me </ Button > ; 

기여

기여 및 지역 개발 지원에 대한 기여 지침을 참조하십시오.

중요한 링크

• 스토리 북 - 퐁듀 구성 요소 미리보기를위한 스토리 북
• 퐁듀 문서 - 퐁듀 디자인 시스템에 대한 문서
• Tailwind-Fondue에 사용되는 유틸리티 우선 CSS 프레임 워크