fondue

Система проектирования фондю от Frontify

Использование @frontify/fondue

Начиная

Добро пожаловать в Fondue, система проектирования для экосистемы Frontify.

Установка

Добавьте пакет системы проектирования Fondue в качестве зависимости вашего проекта.

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

Поиск компонентов

Вы можете просмотреть все доступные компоненты в экземпляре сборника рассказов системы проектирования фондю. Этот сборник рассказов содержит все компоненты из всех подпакеров в Fondue Monorepo. Каждый компонент будет иметь значок в верхней панели, указывающий его текущее состояние жизненного цикла.

Для дизайнеров документация доступна в документации системы проектирования фондю о Weare.

Использование

В течение переходного периода, в котором мы очищаем компоненты фондю, вы можете использовать старые и новые компоненты рядом.

Был ли этот компонент уже рефактован?

Если компонент был рефактор, старая реализация будет помечена как устаревшая .

Это будет видно в коде, когда вы потребляете компонент и через значок в верхней панели истории рассказов.

Используя рефакторированные компоненты

Если вы хотите использовать рефакторированный компонент, вы уже можете импортировать их через субэпорт /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 > ; 

Внося

См.

Важные ссылки

• Сборник рассказов - сборник рассказов для просмотра компонентов фондю
• Документация Fondue - Документация для системы проектирования фондю
• Tailwind-утилита-первая структура CSS, используемая в фондю