@jk-core/components 1.1.9 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +17 -17
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +8 -8
- package/dist/index.umd.cjs.map +1 -1
- package/dist/src/common/Breadcrumbs/index.d.ts +1 -1
- package/dist/src/common/Divider/index.d.ts +8 -0
- package/package.json +1 -1
- package/src/common/Breadcrumbs/Breadcrumbs.module.scss +1 -0
- package/src/common/Breadcrumbs/index.tsx +10 -9
- package/src/common/Divider/Divider.module.scss +101 -0
- package/src/common/Divider/index.tsx +25 -0
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
interface DividerProps {
|
|
2
|
+
children?: React.ReactNode;
|
|
3
|
+
textAlign?: 'left' | 'center' | 'right';
|
|
4
|
+
variant?: 'full' | 'middle' | 'short';
|
|
5
|
+
orientation?: 'horizontal' | 'vertical';
|
|
6
|
+
}
|
|
7
|
+
export default function Divider({ children, textAlign, variant, orientation, }: DividerProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
package/package.json
CHANGED
|
@@ -20,14 +20,15 @@ export default function Breadcrumbs({ children }: BreadcumbsProps) {
|
|
|
20
20
|
<div className={styles.breadcrumbs}>
|
|
21
21
|
{Array.isArray(children)
|
|
22
22
|
? children.map((child, idx) => (
|
|
23
|
-
|
|
24
|
-
{idx
|
|
25
|
-
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
23
|
+
(!!child &&
|
|
24
|
+
<Fragment key={idx}>
|
|
25
|
+
{idx > 0 && (
|
|
26
|
+
<div className={styles.separator}>
|
|
27
|
+
{'>'}
|
|
28
|
+
</div>
|
|
29
|
+
)}
|
|
30
|
+
{child}
|
|
31
|
+
</Fragment>)
|
|
31
32
|
))
|
|
32
33
|
: children}
|
|
33
34
|
</div>
|
|
@@ -39,7 +40,7 @@ interface BreadcrumbsItemProps {
|
|
|
39
40
|
* BreadcrumbsItem의 자식 요소로 표시될 텍스트입니다.
|
|
40
41
|
* 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
|
|
41
42
|
*/
|
|
42
|
-
children
|
|
43
|
+
children: React.ReactNode;
|
|
43
44
|
/**
|
|
44
45
|
* BreadcrumbsItem이 클릭되었을 때 이동할 경로입니다.
|
|
45
46
|
* 기본값은 '/'로 설정되어 있습니다.
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
.divider {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
margin: 16px 0;
|
|
5
|
+
align-self: center;
|
|
6
|
+
justify-self: center;
|
|
7
|
+
|
|
8
|
+
&.vertical {
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
height: 100px;
|
|
11
|
+
width: auto;
|
|
12
|
+
margin: 0 16px;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.content {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
width: 100%;
|
|
20
|
+
|
|
21
|
+
&::before,
|
|
22
|
+
&::after {
|
|
23
|
+
content: "";
|
|
24
|
+
flex: 1;
|
|
25
|
+
height: 1px;
|
|
26
|
+
background-color: var(--G-30);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.vertical & {
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
height: 100%;
|
|
32
|
+
width: auto;
|
|
33
|
+
|
|
34
|
+
&::before,
|
|
35
|
+
&::after {
|
|
36
|
+
width: 1px;
|
|
37
|
+
height: auto;
|
|
38
|
+
flex: 1;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.text {
|
|
44
|
+
padding: 0 16px;
|
|
45
|
+
color: var(--G-70);
|
|
46
|
+
font-size: 14px;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
|
|
49
|
+
.vertical & {
|
|
50
|
+
padding: 16px 0;
|
|
51
|
+
writing-mode: vertical-rl;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// 텍스트가 없을 때는 전체 라인만 표시
|
|
56
|
+
.noText .content {
|
|
57
|
+
&::before {
|
|
58
|
+
flex: 1;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&::after {
|
|
62
|
+
display: none;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// 정렬 옵션
|
|
67
|
+
.left .content::before {
|
|
68
|
+
flex: 0.2;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.right .content::after {
|
|
72
|
+
flex: 0.2;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.center .content::before,
|
|
76
|
+
.center .content::after {
|
|
77
|
+
flex: 1;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.full {
|
|
81
|
+
width: 100%;
|
|
82
|
+
height: 100%;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.middle {
|
|
86
|
+
width: 80%;
|
|
87
|
+
height: 80%;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.short {
|
|
91
|
+
width: 50%;
|
|
92
|
+
height: 50%;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.horizontal {
|
|
96
|
+
height: 1px !important;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.vertical {
|
|
100
|
+
width: 1px !important;
|
|
101
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import styles from './Divider.module.scss';
|
|
2
|
+
|
|
3
|
+
interface DividerProps {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
textAlign?: 'left' | 'center' | 'right';
|
|
6
|
+
variant?: 'full' | 'middle' | 'short';
|
|
7
|
+
orientation?: 'horizontal' | 'vertical';
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default function Divider({
|
|
11
|
+
children,
|
|
12
|
+
textAlign = 'center',
|
|
13
|
+
variant = 'full',
|
|
14
|
+
orientation = 'horizontal',
|
|
15
|
+
}: DividerProps) {
|
|
16
|
+
const hasText = Boolean(children);
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<div className={`${styles.divider} ${styles[variant]} ${styles[textAlign]} ${styles[orientation]} ${!hasText ? styles.noText : ''}`}>
|
|
20
|
+
<div className={styles.content}>
|
|
21
|
+
{children && <span className={styles.text}>{children}</span>}
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
25
|
+
}
|