fondue

Fondue -Design -System durch Frontify

Verwenden Sie @frontify/fondue

Erste Schritte

Willkommen bei Fondue, dem Designsystem für das Frontify -Ökosystem.

Installation

Fügen Sie das Fondue Design -Systempaket als Abhängigkeit zu Ihrem Projekt hinzu.

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

Komponenten finden

Sie können alle verfügbaren Komponenten in der Storybook -Instanz des Fondue Design -Systems durchsuchen. Dieses Storybook enthält alle Komponenten aller Unterpackungen im Fondue Monorepo. Jede Komponente hat ein Abzeichen in der oberen Balken, das ihren aktuellen Lebenszykluszustand anzeigt.

Für die Designer ist die Dokumentation in der Dokumentation des Fondue Design -Systems zu Weare erhältlich.

Verwendung

Während der Übergangszeit, in der wir die Fondue -Komponenten aufräumen, können Sie alte und neue Komponenten nebeneinander verwenden.

War diese Komponente bereits neu?

Wenn eine Komponente neu gestaltet wurde, wird die alte Implementierung als veraltet gekennzeichnet.

Dies ist im Code sichtbar, wenn Sie die Komponente konsumieren und durch ein Abzeichen in der oberen Bar der Storybook -Geschichte.

Verwenden von refaktorierten Komponenten

Wenn Sie eine refaktorierte Komponente verwenden möchten, können Sie sie bereits über das Fondue -Paket /components im Fondue -Paket importieren.

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

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

Verwenden alter Komponenten

Wenn Sie die alten Komponenten verwenden, können Sie sie weiterhin direkt über das @frontify/fondue -Paket importieren.

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

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

Beitragen

Siehe Beitragsrichtlinien für den Beitrag und die lokale Entwicklungshilfe.

Wichtige Links

• Storybook - Storybook zur Vorschau auf Fondue -Komponenten
• Fondue -Dokumentation - Dokumentation für das Fondue Design -System
• Rückenwind-Utility-First CSS-Framework in Fondue verwendet