fone-design-system_v2 1.0.98 → 1.0.99
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/components/Tabs/Tabs.d.ts +32 -21
- package/dist/fone-design-system.es.js +8556 -8485
- package/dist/fone-design-system.umd.js +180 -180
- package/package.json +1 -1
|
@@ -1,33 +1,44 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { SxProps, Theme } from '@mui/material';
|
|
1
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
3
2
|
import { TabsProps as MuiTabsProps } from '@mui/material/Tabs';
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
export type TabsItem = {
|
|
5
|
+
key: string;
|
|
6
|
+
label: React.ReactNode;
|
|
7
|
+
content: React.ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
icon?: React.ReactNode;
|
|
10
|
+
iconPosition?: "start" | "end" | "top" | "bottom";
|
|
11
|
+
ariaLabel?: string;
|
|
12
|
+
};
|
|
13
|
+
export interface TabsProps extends Omit<MuiTabsProps, "children" | "value" | "onChange"> {
|
|
14
|
+
/** 현재 선택된 탭 인덱스 */
|
|
6
15
|
value: number;
|
|
7
|
-
/** 탭 변경 이벤트
|
|
16
|
+
/** 탭 변경 이벤트 */
|
|
8
17
|
onChange: (event: React.SyntheticEvent, newValue: number) => void;
|
|
9
18
|
/** 탭 방향 */
|
|
10
19
|
orientation?: "horizontal" | "vertical";
|
|
11
20
|
/** 탭 변형 */
|
|
12
21
|
variant?: "standard" | "scrollable" | "fullWidth";
|
|
13
|
-
/** 탭
|
|
14
|
-
items:
|
|
15
|
-
|
|
16
|
-
content: React.ReactNode;
|
|
17
|
-
key: string;
|
|
18
|
-
disabled?: boolean;
|
|
19
|
-
icon?: React.ReactNode;
|
|
20
|
-
iconPosition?: "start" | "end" | "top" | "bottom";
|
|
21
|
-
}[];
|
|
22
|
-
/** 탭 텍스트 색상 */
|
|
23
|
-
textColor?: "inherit" | "primary" | "secondary";
|
|
24
|
-
/** 탭 인디케이터 색상 */
|
|
25
|
-
indicatorColor?: "primary" | "secondary";
|
|
26
|
-
/** 탭 선택 포커스 여부 */
|
|
22
|
+
/** 탭 목록 */
|
|
23
|
+
items: TabsItem[];
|
|
24
|
+
/** 탭 포커스 시 자동 선택 여부 */
|
|
27
25
|
selectionFollowsFocus?: boolean;
|
|
28
|
-
/**
|
|
26
|
+
/** 숨겨진 패널도 DOM 유지 여부 */
|
|
27
|
+
keepMounted?: boolean;
|
|
28
|
+
/** 루트 wrapper 스타일 */
|
|
29
29
|
sx?: SxProps<Theme>;
|
|
30
|
+
/** MuiTabs 스타일 */
|
|
31
|
+
tabsSx?: SxProps<Theme>;
|
|
32
|
+
/** 개별 Tab 공통 스타일 */
|
|
33
|
+
tabSx?: SxProps<Theme>;
|
|
34
|
+
/** 개별 TabPanel 공통 스타일 */
|
|
35
|
+
panelSx?: SxProps<Theme>;
|
|
30
36
|
}
|
|
31
|
-
/**
|
|
37
|
+
/**
|
|
38
|
+
* 접근성을 고려한 Tabs 컴포넌트
|
|
39
|
+
* - tablist / tab / tabpanel 연결
|
|
40
|
+
* - 중복되지 않는 id 생성
|
|
41
|
+
* - ripple 제거 시 focus-visible 스타일 유지
|
|
42
|
+
*/
|
|
32
43
|
declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
33
44
|
export default Tabs;
|