@lotte-innovate/ui-component-test 0.1.87 → 0.1.90
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +133 -133
- package/dist/globals.css +4 -4
- package/dist/lib/components/Toggle/ToggleWithText.js +1 -1
- package/dist/lib/components/Toggle/ToggleWithText.mjs +1 -1
- package/dist/lib/components/Toggle/ToggleWithText.mjs.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +135 -142
package/README.md
CHANGED
|
@@ -1,133 +1,133 @@
|
|
|
1
|
-
# LOTTE UI COMPONENT LIBRARY
|
|
2
|
-
|
|
3
|
-
<br />
|
|
4
|
-
|
|
5
|
-
## 목차
|
|
6
|
-
|
|
7
|
-
- [Introduction](#introduction)
|
|
8
|
-
- [Installation](#installation)
|
|
9
|
-
- [Setup](#setup)
|
|
10
|
-
- [Usage](#usage)
|
|
11
|
-
- [Components](#components)
|
|
12
|
-
- [License](#license)
|
|
13
|
-
|
|
14
|
-
## Introduction
|
|
15
|
-
|
|
16
|
-
모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
|
|
17
|
-
|
|
18
|
-
일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
|
|
19
|
-
|
|
20
|
-
이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
|
|
21
|
-
|
|
22
|
-
## Installation
|
|
23
|
-
|
|
24
|
-
패키지를 설치하기 위해 아래 명령어를 사용합니다.
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
npm i @lotte-innovate/lui
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
yarn add @lotte-innovate/lui
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Setup
|
|
35
|
-
|
|
36
|
-
패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
|
|
37
|
-
|
|
38
|
-
프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
|
|
39
|
-
|
|
40
|
-
```
|
|
41
|
-
import '@lotte-innovate/lui/dist/globals.css';
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Usage
|
|
45
|
-
|
|
46
|
-
React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
|
|
47
|
-
|
|
48
|
-
```javascript
|
|
49
|
-
import React from 'react';
|
|
50
|
-
import { Button } from '@lotte-innovate/lui';
|
|
51
|
-
|
|
52
|
-
const App = () => {
|
|
53
|
-
return (
|
|
54
|
-
<div>
|
|
55
|
-
<Button onClick={() => alert('Button clicked!')}>Click Me</Button>
|
|
56
|
-
</div>
|
|
57
|
-
);
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export default App;
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
|
|
64
|
-
|
|
65
|
-
```javascript
|
|
66
|
-
import React from 'react';
|
|
67
|
-
import { IconButton } from '@lotte-innovate/lui';
|
|
68
|
-
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
|
|
69
|
-
|
|
70
|
-
const App = () => {
|
|
71
|
-
return (
|
|
72
|
-
<div>
|
|
73
|
-
<IconButton>
|
|
74
|
-
<MagnifyingGlassIcon />
|
|
75
|
-
</IconButton>
|
|
76
|
-
</div>
|
|
77
|
-
);
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
export default App;
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
## Components
|
|
84
|
-
|
|
85
|
-
<br />
|
|
86
|
-
|
|
87
|
-
<details>
|
|
88
|
-
<summary>컴포넌트 목록</summary>
|
|
89
|
-
|
|
90
|
-
| 구분 | 종류 |
|
|
91
|
-
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
92
|
-
| Typography 컴포넌트 | Text, Header |
|
|
93
|
-
| 기본 컴포넌트 | Avatar, Badge, Button, Icon Button, Label |
|
|
94
|
-
| 입력 컴포넌트 | Checkbox, Checkbox Group, Checkbox Cards, Radio, Radio Group, Radio Cards, Select, Slider, Switch, Text Area, Text Field, Toggle, Toggle Group |
|
|
95
|
-
| 네비게이션 컴포넌트 | Menubar, Navigation Menu, Tabs, Tab Nav |
|
|
96
|
-
| 레이아웃 컴포넌트 | Aspeact Ratio, Card, Inset, Scroll Area, Separator, Table |
|
|
97
|
-
| 피드백 컴포넌트 | Alert Dialog, Dialog, Hover Card, Popover, Toast, Tooltip |
|
|
98
|
-
| 로딩 컴포넌트 | Progress, Skeleton, Spinner, |
|
|
99
|
-
| 메뉴 및 선택 컴포넌트 | Context Menu, Dropdown Menu, Segmented Control |
|
|
100
|
-
| 기타 컴포넌트 | Accordian, Callout |
|
|
101
|
-
|
|
102
|
-
</details>
|
|
103
|
-
<details>
|
|
104
|
-
<summary>차트 목록</summary>
|
|
105
|
-
|
|
106
|
-
| 구분 | 종류 |
|
|
107
|
-
| --------- | ------------- |
|
|
108
|
-
| 비교 차트 | Bar, Line |
|
|
109
|
-
| 구성 차트 | Pie, Doughnut |
|
|
110
|
-
| 분포 차트 | Bubble |
|
|
111
|
-
| 관계 차트 | Radar |
|
|
112
|
-
|
|
113
|
-
</details>
|
|
114
|
-
|
|
115
|
-
<details>
|
|
116
|
-
<summary>공통 Props 목록</summary>
|
|
117
|
-
|
|
118
|
-
| name | description | 단계 | option |
|
|
119
|
-
| ---------- | ------------------------------------------------- | -------- | --------------------------------------------- |
|
|
120
|
-
| Color | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... |
|
|
121
|
-
| Radius | 컴포넌트의 둥글기 적용 | 5단계 | none, small, medium, large, full |
|
|
122
|
-
| Scaling | 컴포넌트의 비율 | 5단계 | 90%, 95%, 100%, 105%, 110% |
|
|
123
|
-
| Weight | 컴포넌트의 텍스트 굵기 | 4단계 | regular, medium, semibold, bold |
|
|
124
|
-
| Appearance | 컴포넌트의 디자인 스타일 | 6단계 | classic, ghost, outline, soft, solid, surface |
|
|
125
|
-
| Size | 컴포넌트의 크기 | 5단계 | x-small, small, medium, large, x-large |
|
|
126
|
-
|
|
127
|
-
</details>
|
|
128
|
-
|
|
129
|
-
<br />
|
|
130
|
-
|
|
131
|
-
## License
|
|
132
|
-
|
|
133
|
-
@lotte-innovate
|
|
1
|
+
# LOTTE UI COMPONENT LIBRARY
|
|
2
|
+
|
|
3
|
+
<br />
|
|
4
|
+
|
|
5
|
+
## 목차
|
|
6
|
+
|
|
7
|
+
- [Introduction](#introduction)
|
|
8
|
+
- [Installation](#installation)
|
|
9
|
+
- [Setup](#setup)
|
|
10
|
+
- [Usage](#usage)
|
|
11
|
+
- [Components](#components)
|
|
12
|
+
- [License](#license)
|
|
13
|
+
|
|
14
|
+
## Introduction
|
|
15
|
+
|
|
16
|
+
모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
|
|
17
|
+
|
|
18
|
+
일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
|
|
19
|
+
|
|
20
|
+
이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
패키지를 설치하기 위해 아래 명령어를 사용합니다.
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm i @lotte-innovate/lui
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
yarn add @lotte-innovate/lui
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Setup
|
|
35
|
+
|
|
36
|
+
패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
|
|
37
|
+
|
|
38
|
+
프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
import '@lotte-innovate/lui/dist/globals.css';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Usage
|
|
45
|
+
|
|
46
|
+
React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
|
|
47
|
+
|
|
48
|
+
```javascript
|
|
49
|
+
import React from 'react';
|
|
50
|
+
import { Button } from '@lotte-innovate/lui';
|
|
51
|
+
|
|
52
|
+
const App = () => {
|
|
53
|
+
return (
|
|
54
|
+
<div>
|
|
55
|
+
<Button onClick={() => alert('Button clicked!')}>Click Me</Button>
|
|
56
|
+
</div>
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export default App;
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
import React from 'react';
|
|
67
|
+
import { IconButton } from '@lotte-innovate/lui';
|
|
68
|
+
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
|
|
69
|
+
|
|
70
|
+
const App = () => {
|
|
71
|
+
return (
|
|
72
|
+
<div>
|
|
73
|
+
<IconButton>
|
|
74
|
+
<MagnifyingGlassIcon />
|
|
75
|
+
</IconButton>
|
|
76
|
+
</div>
|
|
77
|
+
);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
export default App;
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Components
|
|
84
|
+
|
|
85
|
+
<br />
|
|
86
|
+
|
|
87
|
+
<details>
|
|
88
|
+
<summary>컴포넌트 목록</summary>
|
|
89
|
+
|
|
90
|
+
| 구분 | 종류 |
|
|
91
|
+
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
92
|
+
| Typography 컴포넌트 | Text, Header |
|
|
93
|
+
| 기본 컴포넌트 | Avatar, Badge, Button, Icon Button, Label |
|
|
94
|
+
| 입력 컴포넌트 | Checkbox, Checkbox Group, Checkbox Cards, Radio, Radio Group, Radio Cards, Select, Slider, Switch, Text Area, Text Field, Toggle, Toggle Group |
|
|
95
|
+
| 네비게이션 컴포넌트 | Menubar, Navigation Menu, Tabs, Tab Nav |
|
|
96
|
+
| 레이아웃 컴포넌트 | Aspeact Ratio, Card, Inset, Scroll Area, Separator, Table |
|
|
97
|
+
| 피드백 컴포넌트 | Alert Dialog, Dialog, Hover Card, Popover, Toast, Tooltip |
|
|
98
|
+
| 로딩 컴포넌트 | Progress, Skeleton, Spinner, |
|
|
99
|
+
| 메뉴 및 선택 컴포넌트 | Context Menu, Dropdown Menu, Segmented Control |
|
|
100
|
+
| 기타 컴포넌트 | Accordian, Callout |
|
|
101
|
+
|
|
102
|
+
</details>
|
|
103
|
+
<details>
|
|
104
|
+
<summary>차트 목록</summary>
|
|
105
|
+
|
|
106
|
+
| 구분 | 종류 |
|
|
107
|
+
| --------- | ------------- |
|
|
108
|
+
| 비교 차트 | Bar, Line |
|
|
109
|
+
| 구성 차트 | Pie, Doughnut |
|
|
110
|
+
| 분포 차트 | Bubble |
|
|
111
|
+
| 관계 차트 | Radar |
|
|
112
|
+
|
|
113
|
+
</details>
|
|
114
|
+
|
|
115
|
+
<details>
|
|
116
|
+
<summary>공통 Props 목록</summary>
|
|
117
|
+
|
|
118
|
+
| name | description | 단계 | option |
|
|
119
|
+
| ---------- | ------------------------------------------------- | -------- | --------------------------------------------- |
|
|
120
|
+
| Color | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... |
|
|
121
|
+
| Radius | 컴포넌트의 둥글기 적용 | 5단계 | none, small, medium, large, full |
|
|
122
|
+
| Scaling | 컴포넌트의 비율 | 5단계 | 90%, 95%, 100%, 105%, 110% |
|
|
123
|
+
| Weight | 컴포넌트의 텍스트 굵기 | 4단계 | regular, medium, semibold, bold |
|
|
124
|
+
| Appearance | 컴포넌트의 디자인 스타일 | 6단계 | classic, ghost, outline, soft, solid, surface |
|
|
125
|
+
| Size | 컴포넌트의 크기 | 5단계 | x-small, small, medium, large, x-large |
|
|
126
|
+
|
|
127
|
+
</details>
|
|
128
|
+
|
|
129
|
+
<br />
|
|
130
|
+
|
|
131
|
+
## License
|
|
132
|
+
|
|
133
|
+
@lotte-innovate
|