@ktnexr/neb-ui
TypeScript icon, indicating that this package has built-in type declarations

1.5.5 • Public • Published

확인 사항

해당 라이브러리는 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)

테마 적용 방법

기본 테마

image

사용자 정의 테마

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

image

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 의 기본 예제를 확인 해주세요 :)

Readme

Keywords

none

Package Sidebar

Install

npm i @ktnexr/neb-ui

Weekly Downloads

2

Version

1.5.5

License

none

Unpacked Size

1.81 MB

Total Files

90

Last publish

Collaborators

  • dbseogns1212
  • ktnexr