@lotte-innovate/ui-component-test
v0.1.34
Published
Lotte UI Library
Downloads
1,822
Readme
LOTTE UI COMPONENT LIBRARY
목차
Introduction
모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
Installation
패키지를 설치하기 위해 아래 명령어를 사용합니다.
npm i @lotte-innovate/ui-component-test
yarn add @lotte-innovate/ui-component-test
Setup
패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
import '@lotte-innovate/ui-component-test/dist/globals.css';
Usage
React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
import React from 'react';
import { Button } from '@lotte-innovate/ui-component-test';
const App = () => {
return (
<div>
<Button onClick={() => alert('Button clicked!')}>Click Me</Button>
</div>
);
};
export default App;
컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
import React from 'react';
import { IconButton } from '@lotte-innovate/ui-component-test';
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
const App = () => {
return (
<div>
<IconButton>
<MagnifyingGlassIcon />
</IconButton>
</div>
);
};
export default App;
Components
| 구분 | 종류 | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | Typography 컴포넌트 | Text, Header | | 기본 컴포넌트 | Avatar, Badge, Button, Icon Button, Label | | 입력 컴포넌트 | Checkbox, Checkbox Group, Checkbox Cards, Radio, Radio Group, Radio Cards, Select, Slider, Switch, Text Area, Text Field, Toggle, Toggle Group | | 네비게이션 컴포넌트 | Menubar, Navigation Menu, Tabs, Tab Nav | | 레이아웃 컴포넌트 | Aspeact Ratio, Card, Inset, Scroll Area, Separator, Table | | 피드백 컴포넌트 | Alert Dialog, Dialog, Hover Card, Popover, Toast, Tooltip | | 로딩 컴포넌트 | Progress, Skeleton, Spinner, | | 메뉴 및 선택 컴포넌트 | Context Menu, Dropdown Menu, Segmented Control | | 기타 컴포넌트 | Accordian, Callout |
| 구분 | 종류 | | --------- | ------------- | | 비교 차트 | Bar, Line | | 구성 차트 | Pie, Doughnut | | 분포 차트 | Bubble | | 관계 차트 | Radar |
| name | description | 단계 | option | | ---------- | ------------------------------------------------- | -------- | --------------------------------------------- | | Color | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... | | Radius | 컴포넌트의 둥글기 적용 | 5단계 | none, small, medium, large, full | | Scaling | 컴포넌트의 비율 | 5단계 | 90%, 95%, 100%, 105%, 110% | | Weight | 컴포넌트의 텍스트 굵기 | 4단계 | regular, medium, semibold, bold | | Appearance | 컴포넌트의 디자인 스타일 | 6단계 | classic, ghost, outline, soft, solid, surface | | Size | 컴포넌트의 크기 | 5단계 | x-small, small, medium, large, x-large |
License
@lotte-innovate