@ktnexr/neb-ui v1.5.4

확인 사항

해당 라이브러리는 React StrictMode 를 호환하지 않습니다. index.tsx에서 React.StrictMode 로 래핑된 경우 해당 래핑을 해제해야 사용 가능합니다.

필수 설치

npm install --save @mdi/font

global.css

@import "~@mdi/font/css/materialdesignicons.min.css";

mdi icon font를 사용하기위해 개별로 설치하여 global css파일에 import 를 해야 정상적인 사용이 가능합니다.

필수 - Provider 적용

// index.tsx
import { ThemeProvider } from '@ktnexr/neb-ui'
ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
  ,
  document.getElementById('root')
);

지원 컴포넌트

• Icons
• Input
  • CheckBox
  • Input
  • InputNumber
  • Radio
  • Search
  • Select
  • TextArea
• Button
• EmptyBox
• Form
  • Form
  • Group
  • Item
• Loading
  • OverlayLoading
• Table
• TableBase
• ThemeProvider
• defaultTheme
• Methods (type)

테마 적용 방법

기본 테마

사용자 정의 테마

// index.tsx
import { ThemeProvider } from '@ktnexr/neb-ui'
ReactDOM.render(
  <ThemeProvider
    theme={{
      primary: 'black',
      primarystop1: 'white',
      primarystop2: 'black',
    }}
  >
    <App />
  </ThemeProvider>
  ,
  document.getElementById('root')
);

primary 적용

// index.tsx
import { ThemeProvider } from '@ktnexr/neb-ui'
ReactDOM.render(
  <ThemeProvider
    primary="#ff0000"
    theme={{
      primarystop1: 'white',
      primarystop2: 'black',
    }}
  >
    <App />
  </ThemeProvider>
  ,
  document.getElementById('root')
);

primary prop에 값을 추가 시 자동으로 해당값을 추출하여 rgba값을 생성합니다. 하지만 gradient color의 경우 primary값을 기준으로 추출할 방법이 없기 때문에 따로 입력을 해주셔야합니다.

사용 예제

• neb-ui 프로젝트 혹은 src/App.tsx 의 기본 예제를 확인 해주세요 :)