aiq design system

AIQ 설계 시스템

AIQFOME GALERA의 React 프로젝트를위한 구성 요소 라이브러리.

프로젝트에 추가하는 방법

yarn add aiq-design-system

or

npm install aiq-design-system

구성 요소

우리의 구성 요소는이 스토리 북에 있습니다

공식 문서 : 곧 출시됩니다

기본 구성

구성 요소 사용을 시작하려면 다음 단계를 따르십시오.

1- 우리는 응용 프로그램에 추가 할 수있는 래퍼를 만들고 AIQ-Design-System 에서 ThemeProvider 가져옵니다.

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

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

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

2- 이제 AIQ-Design-System 의 가져온 구성 요소를 사용하여 나올 수 있습니다.

 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 >
  )
} 

코드 및 박스 템플릿

구성된 lib가있는 Codesandbox에 구성된 템플릿이 있습니다!