aiq design system

AIQ -Designsystem

Die Komponentenbibliothek für React -Projekte von AIQFOME Galera.

So fügen Sie dem Projekt hinzu

yarn add aiq-design-system

or

npm install aiq-design-system

die Komponenten

Unsere Komponenten befinden sich in diesem Storybook

Offizielle Dokumentation: bald kommen

Grundkonfiguration

Befolgen Sie die folgenden Schritte, um die Komponenten zu verwenden:

1 Wir stellen eine Wrapper zur Verfügung, die Sie zur Anwendung hinzufügen können, ThemeProvider wird vom AIQ-Design-System importiert.

 import React from 'react'
import ReactDOM from 'react-dom'

import { ThemeProvider } from 'aiq-design-system'

function App ( { children } ) {
  return < ThemeProvider > { children } </ ThemeProvider >
}

2-Sie können jetzt mit den importierten Komponenten des AIQ-Design-Systems herauskommen

 import React from 'react'
import ReactDOM from 'react-dom'

import { Button , Flex , Input } from "aiq-design-system" ;

export const AiqComponent ( ) {
  return (
    < Flex p = { 20 } flexDirection = "column" >
      < Input variant = "outlined" label = "duas pizzas é muito?" />
      < Button variant = "contained" > fazer pedido! </ Button >
    </ Flex >
  )
} 

CodesAndbox -Vorlage

Wir haben eine Vorlage auf CodesAndbox mit konfigurierter LIB konfiguriert!