GET STARTED
전체 지원 현황
플랫폼별 지원 범위와 제약을 살펴보고, 컴포넌트의 차이와 연결된 검증 기록을 확인하세요.
지원·검증 요약
공개 컴포넌트 77개 모두 Vue 2·React에서 지원, Native Web에서 브라우저 미리보기 상태입니다.
Vue 2
77 / 77개 제공지원 77개
검증 환경 · Chromium
React
77 / 77개 제공지원 77개
검증 환경 · Chromium
Native Web
77 / 77개 제공미리보기 77개
검증 환경 · React Native Web
Native는 브라우저 미리보기입니다. iOS·Android 실제 기기와 시뮬레이터 검증은 수행하지 않았습니다.
기본 범위와 다른 컴포넌트
없음 · 모든 공개 컴포넌트가 위 기본 범위를 따릅니다.
공개 컴포넌트 77개 기준이며 Provider·서비스·보조 API는 제외합니다. 검색과 분류는 이 수치를 바꾸지 않습니다. 현재 카탈로그 상태와 연결된 검증 기록을 보여 주며, 모든 상태 조합의 검증이나 최신 코드의 재검증을 보장하지 않습니다.
컴포넌트 목록
77개 컴포넌트 / 전체 77개
- 지원
- 웹 검증 통과
- 미리보기
- 브라우저 미리보기 · 기기 검증 아님
| 컴포넌트 | Vue 2 | React | Native Web | 플랫폼 차이·근거 |
|---|---|---|---|---|
| AccordionLayout | 지원 | 지원 | 미리보기 | Vue provide/inject와 React·Native Context가 부모 규칙을 전달합니다. Native도 헤더 누름으로 열고 닫으며 웹의 DOM 키보드 처리는 별도입니다. Vue provide/inject와 React·Native Context가 부모 규칙을 전달합니다. Native도 헤더 누름으로 열고 닫으며 웹의 DOM 키보드 처리는 별도입니다. |
| AccordionItemLayout | 지원 | 지원 | 미리보기 | Vue header 슬롯과 React·Native header prop으로 제목 영역을 바꿉니다. disabled는 이 항목의 토글을 막고 부모 multiple 규칙은 유지합니다. Vue header 슬롯과 React·Native header prop으로 제목 영역을 바꿉니다. disabled는 이 항목의 토글을 막고 부모 multiple 규칙은 유지합니다. |
| AlertFeedback | 지원 | 지원 | 미리보기 | Vue close 이벤트와 React·Native onClose로 내부 숨김 이후를 통지합니다. 다시 표시하려면 새 알림 인스턴스를 구성하세요. 외부 visible 제어 prop은 없습니다. Vue close 이벤트와 React·Native onClose로 내부 숨김 이후를 통지합니다. 다시 표시하려면 새 알림 인스턴스를 구성하세요. 외부 visible 제어 prop은 없습니다. |
| AnimatedNumberData Display | 지원 | 지원 | 미리보기 | Vue는 formatters 주입도 사용할 수 있습니다. React는 className, Native는 style로 바깥 표시를 꾸밉니다. Vue는 formatters 주입도 사용할 수 있습니다. React는 className, Native는 style로 바깥 표시를 꾸밉니다. |
| AvatarData Display | 지원 | 지원 | 미리보기 | Native는 source로 로컬 리소스도 받습니다. 접근성 이름은 전체 이름을 유지합니다. Native는 source로 로컬 리소스도 받습니다. 접근성 이름은 전체 이름을 유지합니다. |
| BadgeData Display | 지원 | 지원 | 미리보기 | Vue default 슬롯, React·Native children으로 문구를 전달합니다. React HTML 속성과 Native style은 각 기본 요소에 적용됩니다. Vue default 슬롯, React·Native children으로 문구를 전달합니다. React HTML 속성과 Native style은 각 기본 요소에 적용됩니다. |
| BottomActionBarLayout | 지원 | 지원 | 미리보기 | 세 플랫폼 모두 일반 배치 흐름을 사용하며 키보드 위치 보정은 앱 화면이 담당합니다. 세 플랫폼 모두 일반 배치 흐름을 사용하며 키보드 위치 보정은 앱 화면이 담당합니다. |
| BottomNavigationNavigation | 지원 | 지원 | 미리보기 | 웹의 href는 실제 링크입니다. Native는 이동 요청 콜백을 사용하며 Native Web에서는 href도 연결합니다. |
| BreadcrumbNavigation | 지원 | 지원 | 미리보기 | Vue to는 URL 문자열이며 navigate 이벤트를 제공합니다. React는 renderLink, Native는 renderLink·onNavigate로 라우팅을 주입합니다. Vue to는 URL 문자열이며 navigate 이벤트를 제공합니다. React는 renderLink, Native는 renderLink·onNavigate로 라우팅을 주입합니다. |
| ButtonActions | 지원 | 지원 | 미리보기 | Vue htmlType·click, React type·onClick, Native onPress를 사용합니다. Native에는 HTML 폼 제출 동작이 없습니다. Vue htmlType·click, React type·onClick, Native onPress를 사용합니다. Native에는 HTML 폼 제출 동작이 없습니다. |
| ButtonGroupActions | 지원 | 지원 | 미리보기 | Vue는 그룹 disabled만 적용하고 options의 disabled를 소비하지 않습니다. React·Native는 그룹과 옵션별 disabled를 모두 적용합니다. Vue는 그룹 disabled만 적용하고 options의 disabled를 소비하지 않습니다. React·Native는 그룹과 옵션별 disabled를 모두 적용합니다. |
| CardLayout | 지원 | 지원 | 미리보기 | Vue의 header·header-actions·footer 슬롯은 React·Native의 해당 콘텐츠 prop으로 구성합니다. 웹 CSS 길이와 Native style의 값 형식을 구분합니다. Vue의 header·header-actions·footer 슬롯은 React·Native의 해당 콘텐츠 prop으로 구성합니다. 웹 CSS 길이와 Native style의 값 형식을 구분합니다. |
| ChartSkeletonFeedback | 지원 | 지원 | 미리보기 | 세 플랫폼의 공개 조절기는 kind·height입니다. animated나 행 수를 직접 조절하는 prop은 없습니다. 세 플랫폼의 공개 조절기는 kind·height입니다. animated나 행 수를 직접 조절하는 prop은 없습니다. |
| CheckboxInputs | 지원 | 지원 | 미리보기 | Vue input·change, React·Native onValueChange·onChange로 다음 값을 받습니다. 중간 선택을 지정하는 공개 prop은 없습니다. Vue input·change, React·Native onValueChange·onChange로 다음 값을 받습니다. 중간 선택을 지정하는 공개 prop은 없습니다. |
| ChipActions | 지원 | 지원 | 미리보기 | Native 삭제 버튼은 최소 44px 터치 영역을 확보합니다. Native 삭제 버튼은 최소 44px 터치 영역을 확보합니다. |
| CollectionMarkFinance | 지원 | 지원 | 미리보기 | 세 플랫폼 모두 kind·active·size를 받습니다. Vue 공통 formatters는 이 아이콘 표시에 직접 사용하지 않습니다. 세 플랫폼 모두 kind·active·size를 받습니다. Vue 공통 formatters는 이 아이콘 표시에 직접 사용하지 않습니다. |
| ComboboxInputs | 지원 | 지원 | 미리보기 | Vue input·change·search와 React·Native의 해당 콜백을 연결합니다. Native에서는 팝업 내부 입력으로 검색을 이어갑니다. Vue input·change·search와 React·Native의 해당 콜백을 연결합니다. Native에서는 팝업 내부 입력으로 검색을 이어갑니다. |
| CopyButtonActions | 지원 | 지원 | 미리보기 | 웹은 기본 클립보드 경로가 있으며 Native는 copyText 함수를 필수로 제공합니다. 복사 결과는 Vue 이벤트와 React·Native 콜백으로 받습니다. 웹은 기본 클립보드 경로가 있으며 Native는 copyText 함수를 필수로 제공합니다. 복사 결과는 Vue 이벤트와 React·Native 콜백으로 받습니다. |
| DataStateFeedback | 지원 | 지원 | 미리보기 | 세 플랫폼 모두 생략한 resultKey와 명시적 null을 구분합니다. Vue error 슬롯은 error·retry를 받으며 React·Native errorContent는 인자를 받는 함수가 아닌 요소입니다. 세 플랫폼 모두 생략한 resultKey와 명시적 null을 구분합니다. Vue error 슬롯은 error·retry를 받으며 React·Native errorContent는 인자를 받는 함수가 아닌 요소입니다. |
| DatePickerInputs | 지원 | 지원 | 미리보기 | 웹은 날짜 input의 브라우저 선택기를 사용합니다. 평소에는 YYYY. MM. DD. 형식으로 표시하지만, 키보드로 편집하는 동안에는 브라우저 언어의 날짜 형식(예: 영어 브라우저의 MM/DD/YYYY)이 보입니다. Native는 달력 팝업에서 선택하며 React의 HTML type은 구현에서 date로 고정됩니다. 웹은 날짜 input의 브라우저 선택기를 사용합니다. 평소에는 YYYY. MM. DD. 형식으로 표시하지만, 키보드로 편집하는 동안에는 브라우저 언어의 날짜 형식(예: 영어 브라우저의 MM/DD/YYYY)이 보입니다. Native는 달력 팝업에서 선택하며 React의 HTML type은 구현에서 date로 고정됩니다. |
| DeviationFinance | 지원 | 지원 | 미리보기 | React·Native는 formatter 함수를 직접 받을 수 있고 Vue는 주입된 formatters와 기본 포맷을 사용합니다. React·Native는 formatter 함수를 직접 받을 수 있고 Vue는 주입된 formatters와 기본 포맷을 사용합니다. |
| DrawerLayout | 지원 | 지원 | 미리보기 | Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 레이어 포커스·스크롤을, Native는 Modal과 뒤로 가기 경로를 처리합니다. Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 레이어 포커스·스크롤을, Native는 Modal과 뒤로 가기 경로를 처리합니다. |
| DropdownActions | 지원 | 지원 | 미리보기 | Vue trigger 슬롯과 React·Native trigger prop을 사용합니다. 웹은 방향키·문자 탐색을 제공하고 Native는 Modal 메뉴를 사용합니다. Vue trigger 슬롯과 React·Native trigger prop을 사용합니다. 웹은 방향키·문자 탐색을 제공하고 Native는 Modal 메뉴를 사용합니다. |
| DropdownDividerActions | 지원 | 지원 | 미리보기 | React·Native의 공개 전용 prop은 없습니다. Vue의 공통 formatters도 이 장식선에 직접 사용하지 않습니다. React·Native의 공개 전용 prop은 없습니다. Vue의 공통 formatters도 이 장식선에 직접 사용하지 않습니다. |
| DropdownItemActions | 지원 | 지원 | 미리보기 | Vue click, React onClick, Native onPress를 사용합니다. React textValue는 텍스트 탐색에 사용하며 Native에는 이 prop이 없습니다. Vue click, React onClick, Native onPress를 사용합니다. React textValue는 텍스트 탐색에 사용하며 Native에는 이 prop이 없습니다. |
| EmptyData Display | 지원 | 지원 | 미리보기 | Vue는 슬롯, React·Native는 children으로 행동 영역을 구성합니다. Empty 자체에는 재시도 콜백이 없습니다. Vue는 슬롯, React·Native는 children으로 행동 영역을 구성합니다. Empty 자체에는 재시도 콜백이 없습니다. |
| ErrorBoundaryFeedback | 지원 | 지원 | 미리보기 | Vue errorCaptured와 React·Native 오류 경계의 포착 범위는 각 프레임워크를 따릅니다. React·Native는 fallback·onError·onReset으로 대체 화면과 보고를 연결합니다. Vue errorCaptured와 React·Native 오류 경계의 포착 범위는 각 프레임워크를 따릅니다. React·Native는 fallback·onError·onReset으로 대체 화면과 보고를 연결합니다. |
| ExecutionStatusBadgeFinance | 지원 | 지원 | 미리보기 | 세 플랫폼에서 status·label·size로 표시를 구성합니다. 상태를 변경하는 이벤트는 없습니다. 세 플랫폼에서 status·label·size로 표시를 구성합니다. 상태를 변경하는 이벤트는 없습니다. |
| ExternalLinkNavigation | 지원 | 지원 | 미리보기 | 웹은 안전한 HTTP(S) 링크를 열고 Native는 주입한 openUrl을 사용합니다. Native 연동 없이 실제 기기 URL 열림을 보장하지 않습니다. 웹은 안전한 HTTP(S) 링크를 열고 Native는 주입한 openUrl을 사용합니다. Native 연동 없이 실제 기기 URL 열림을 보장하지 않습니다. |
| FilterGroupInputs | 지원 | 지원 | 미리보기 | Vue input·change와 React·Native onValueChange·onChange를 사용합니다. scroll은 필터의 가로 배치이며 데이터 요청과 무관합니다. Vue input·change와 React·Native onValueChange·onChange를 사용합니다. scroll은 필터의 가로 배치이며 데이터 요청과 무관합니다. |
| FormActionsActions | 지원 | 지원 | 미리보기 | Vue confirm·cancel 이벤트와 React·Native onConfirm·onCancel을 연결합니다. loading은 확인 버튼에 적용하고 취소 비활성은 cancelDisabled로 별도 설정합니다. Vue confirm·cancel 이벤트와 React·Native onConfirm·onCancel을 연결합니다. loading은 확인 버튼에 적용하고 취소 비활성은 cancelDisabled로 별도 설정합니다. |
| FormGroupInputs | 지원 | 지원 | 미리보기 | Vue는 명시적 id로 label의 for를 연결합니다. React는 생략한 id를 생성하고 Native는 필드 맥락을 접근성 이름·설명에 사용합니다. 자세한 연결 규칙은 API에서 확인하세요. Vue는 명시적 id로 label의 for를 연결합니다. React는 생략한 id를 생성하고 Native는 필드 맥락을 접근성 이름·설명에 사용합니다. 자세한 연결 규칙은 API에서 확인하세요. |
| FormSkeletonFeedback | 지원 | 지원 | 미리보기 | 세 플랫폼 모두 같은 필드 구성 prop을 사용합니다. 자체 animated 조절기는 없으며 기본 Skeleton 표현을 사용합니다. 세 플랫폼 모두 같은 필드 구성 prop을 사용합니다. 자체 animated 조절기는 없으며 기본 Skeleton 표현을 사용합니다. |
| FreshnessFinance | 지원 | 지원 | 미리보기 | Vue는 주입된 시각 포맷을 사용하고 React·Native는 formatter를 받을 수 있습니다. 웹 title과 Native 접근성 설명의 표시 방식은 다릅니다. Vue는 주입된 시각 포맷을 사용하고 React·Native는 formatter를 받을 수 있습니다. 웹 title과 Native 접근성 설명의 표시 방식은 다릅니다. |
| HeatmapCellData Display | 지원 | 지원 | 미리보기 | Vue 슬롯과 React·Native children으로 셀 내용을 바꿉니다. Native color는 Native 색상 값 형식을 따릅니다. Vue 슬롯과 React·Native children으로 셀 내용을 바꿉니다. Native color는 Native 색상 값 형식을 따릅니다. |
| IconData Display | 지원 | 지원 | 미리보기 | Vue size는 문자열, React size는 웹 길이, Native size는 숫자입니다. Native는 color 값을, 웹은 기본 SVG 스타일·현재 색상을 사용합니다. Vue size는 문자열, React size는 웹 길이, Native size는 숫자입니다. Native는 color 값을, 웹은 기본 SVG 스타일·현재 색상을 사용합니다. |
| IconToggleActions | 지원 | 지원 | 미리보기 | 웹 activeColorClass·inactiveColorClass는 Native에 없습니다. Native는 activeColor·inactiveColor 값을 사용하며 누름 동작으로 토글을 요청합니다. 웹 activeColorClass·inactiveColorClass는 Native에 없습니다. Native는 activeColor·inactiveColor 값을 사용하며 누름 동작으로 토글을 요청합니다. |
| ImageData Display | 지원 | 지원 | 미리보기 | 웹은 lazy 로딩을 지원합니다. Native는 source로 로컬 이미지 리소스를 받을 수 있습니다. 웹은 lazy 로딩을 지원합니다. Native는 source로 로컬 이미지 리소스를 받을 수 있습니다. |
| InputInputs | 지원 | 지원 | 미리보기 | Vue input·readonly·html 입력 속성, React onValueChange·readOnly, Native onChangeText·TextInput 속성을 구분합니다. Native의 키보드 종류만으로 값 검증을 보장하지 않습니다. Vue input·readonly·html 입력 속성, React onValueChange·readOnly, Native onChangeText·TextInput 속성을 구분합니다. Native의 키보드 종류만으로 값 검증을 보장하지 않습니다. |
| KpiHeroData Display | 지원 | 지원 | 미리보기 | Vue의 aside·secondary 슬롯은 React·Native의 aside·renderSecondary로 구성합니다. 숫자와 증감 포맷터는 별도로 연결합니다. Vue의 aside·secondary 슬롯은 React·Native의 aside·renderSecondary로 구성합니다. 숫자와 증감 포맷터는 별도로 연결합니다. |
| KpiRowData Display | 지원 | 지원 | 미리보기 | Vue 슬롯·item-click 이벤트에 대응해 React·Native는 renderValue·onItemClick을 제공합니다. 모바일 요약은 mobileSummary로 선택합니다. Vue 슬롯·item-click 이벤트에 대응해 React·Native는 renderValue·onItemClick을 제공합니다. 모바일 요약은 mobileSummary로 선택합니다. |
| ListRowData Display | 지원 | 지원 | 미리보기 | 웹은 li와 링크·버튼, Native는 접근성 목록 항목과 Pressable을 사용합니다. 웹은 li와 링크·버튼, Native는 접근성 목록 항목과 Pressable을 사용합니다. |
| ListSectionData Display | 지원 | 지원 | 미리보기 | 웹은 section과 ul, Native는 목록 의미를 가진 View로 구성합니다. 웹은 section과 ul, Native는 목록 의미를 가진 View로 구성합니다. |
| ListSkeletonFeedback | 지원 | 지원 | 미리보기 | 세 플랫폼에서 목록 구성은 같은 prop을 사용합니다. 별도 animated prop은 없으므로 이를 로딩 on/off 조절기로 사용하지 마세요. 세 플랫폼에서 목록 구성은 같은 prop을 사용합니다. 별도 animated prop은 없으므로 이를 로딩 on/off 조절기로 사용하지 마세요. |
| MarketCardsFinance | 지원 | 지원 | 미리보기 | Vue는 슬롯과 이벤트로, React·Native는 renderList·formatMetric·onSort 등으로 주입합니다. React·Native에는 storage 연동 prop도 있습니다. Vue는 슬롯과 이벤트로, React·Native는 renderList·formatMetric·onSort 등으로 주입합니다. React·Native에는 storage 연동 prop도 있습니다. |
| MarketListPanelFinance | 지원 | 지원 | 미리보기 | Vue controls·default 슬롯과 React·Native controls·children으로 두 영역을 구성합니다. Vue controls·default 슬롯과 React·Native controls·children으로 두 영역을 구성합니다. |
| MarketSimpleListFinance | 지원 | 지원 | 미리보기 | Vue 슬롯·이벤트에 대응해 React·Native는 행 렌더 함수와 onRowClick·onPageChange를 제공합니다. 통화·날짜 포맷은 소비자가 정합니다. Vue 슬롯·이벤트에 대응해 React·Native는 행 렌더 함수와 onRowClick·onPageChange를 제공합니다. 통화·날짜 포맷은 소비자가 정합니다. |
| MarketTableFinance | 지원 | 지원 | 미리보기 | Vue의 셀 슬롯·이벤트와 React·Native의 renderCell·onToggleInterest·onToggleFavorite를 구분합니다. Native의 셀 스타일은 Native 요소를 사용합니다. Vue의 셀 슬롯·이벤트와 React·Native의 renderCell·onToggleInterest·onToggleFavorite를 구분합니다. Native의 셀 스타일은 Native 요소를 사용합니다. |
| MarketTableSkeletonFinance | 지원 | 지원 | 미리보기 | 웹의 alignClass·widthClass는 Native에 없습니다. Native는 columns 구성과 자체 크기 규칙으로 배치합니다. 웹의 alignClass·widthClass는 Native에 없습니다. Native는 columns 구성과 자체 크기 규칙으로 배치합니다. |
| MenuButtonActions | 지원 | 지원 | 미리보기 | Vue default 슬롯과 React·Native children에 메뉴 항목을 넣습니다. Native 팝업은 Modal 기반이며 웹 도움말 배치와 기기 동작은 별도입니다. Vue default 슬롯과 React·Native children에 메뉴 항목을 넣습니다. Native 팝업은 Modal 기반이며 웹 도움말 배치와 기기 동작은 별도입니다. |
| ModalLayout | 지원 | 지원 | 미리보기 | Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 포커스 제한·복귀, Native는 Modal·뒤로 가기를 처리하며 HTML 폼 제출은 별도로 연결합니다. Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 포커스 제한·복귀, Native는 Modal·뒤로 가기를 처리하며 HTML 폼 제출은 별도로 연결합니다. |
| PaginationNavigation | 지원 | 지원 | 미리보기 | Vue 이벤트에 대응해 React·Native는 onPageChange·onChange·onPageSizeChange를 제공합니다. 정보 문구는 React·Native formatter 또는 Vue 포맷 설정을 사용합니다. Vue 이벤트에 대응해 React·Native는 onPageChange·onChange·onPageSizeChange를 제공합니다. 정보 문구는 React·Native formatter 또는 Vue 포맷 설정을 사용합니다. |
| PopoverLayout | 지원 | 지원 | 미리보기 | Vue는 value·input으로, React·Native는 open·onOpenChange로 연결합니다. Native 팝업은 Modal 기반이며 웹 배치 속성의 동작 범위는 API 타입을 따릅니다. Vue는 value·input으로, React·Native는 open·onOpenChange로 연결합니다. Native 팝업은 Modal 기반이며 웹 배치 속성의 동작 범위는 API 타입을 따릅니다. |
| PriceCellFinance | 지원 | 지원 | 미리보기 | 웹 flashClass는 전달된 강조 클래스를 적용하며 자체 가격 변화 감지기가 아닙니다. Native에는 flashClass prop이 없습니다. 웹 flashClass는 전달된 강조 클래스를 적용하며 자체 가격 변화 감지기가 아닙니다. Native에는 flashClass prop이 없습니다. |
| ProgressFeedback | 지원 | 지원 | 미리보기 | Vue는 showLabel이 켜져야 label도 표시합니다. React·Native는 label만으로도 제목을 표시할 수 있습니다. Vue sublabel 슬롯은 React·Native subLabel에 대응합니다. Vue는 showLabel이 켜져야 label도 표시합니다. React·Native는 label만으로도 제목을 표시할 수 있습니다. Vue sublabel 슬롯은 React·Native subLabel에 대응합니다. |
| ProgressCellData Display | 지원 | 지원 | 미리보기 | 세 플랫폼에서 color·customColor로 막대 색상을 선택합니다. Native의 customColor는 Native 색상 타입을 따릅니다. 세 플랫폼에서 color·customColor로 막대 색상을 선택합니다. Native의 customColor는 Native 색상 타입을 따릅니다. |
| QuantityStepperInputs | 지원 | 지원 | 미리보기 | 웹 한글 입력 조합 중에는 확정하지 않습니다. Native 키보드와 입력 방식은 실제 기기에서 별도 검증해야 합니다. 웹 한글 입력 조합 중에는 확정하지 않습니다. Native 키보드와 입력 방식은 실제 기기에서 별도 검증해야 합니다. |
| RadioInputs | 지원 | 지원 | 미리보기 | Vue input·change, React·Native onValueChange·onChange로 선택값을 전달합니다. 웹 name과 Native 접근성 선택 상태의 연결은 플랫폼 구현을 따릅니다. Vue input·change, React·Native onValueChange·onChange로 선택값을 전달합니다. 웹 name과 Native 접근성 선택 상태의 연결은 플랫폼 구현을 따릅니다. |
| RadioGroupInputs | 지원 | 지원 | 미리보기 | 그룹 disabled는 Vue에서만 제공합니다. React·Native는 options의 disabled 또는 자식 Radio의 disabled를 지정하세요. 그룹 disabled는 Vue에서만 제공합니다. React·Native는 options의 disabled 또는 자식 Radio의 disabled를 지정하세요. |
| RangeSliderInputs | 지원 | 지원 | 미리보기 | 각 손잡이는 별도의 접근성 이름과 일정한 Tab 순서를 유지합니다. 각 손잡이는 별도의 접근성 이름과 일정한 Tab 순서를 유지합니다. |
| RefreshButtonActions | 지원 | 지원 | 미리보기 | Vue refresh 이벤트와 React·Native onRefresh를 사용합니다. 웹 button과 Native Pressable의 이벤트 객체를 같은 것으로 가정하지 마세요. Vue refresh 이벤트와 React·Native onRefresh를 사용합니다. 웹 button과 Native Pressable의 이벤트 객체를 같은 것으로 가정하지 마세요. |
| ScrollFadeLayout | 지원 | 지원 | 미리보기 | 웹은 가장자리 페이드를 계산하고 Native는 가로 ScrollView·스크롤 표시기를 사용합니다. 웹의 페이드와 같은 그림을 Native에 보장하지 않습니다. 웹은 가장자리 페이드를 계산하고 Native는 가로 ScrollView·스크롤 표시기를 사용합니다. 웹의 페이드와 같은 그림을 Native에 보장하지 않습니다. |
| SearchInputInputs | 지원 | 지원 | 미리보기 | 자동 완성 지연은 세 플랫폼 모두 300ms이며 debounce는 일반 입력 모드의 통지 지연입니다. Vue item 슬롯은 React·Native renderOption에 대응하며 itemKey는 Vue만 소비합니다. 자동 완성 지연은 세 플랫폼 모두 300ms이며 debounce는 일반 입력 모드의 통지 지연입니다. Vue item 슬롯은 React·Native renderOption에 대응하며 itemKey는 Vue만 소비합니다. |
| SelectInputs | 지원 | 지원 | 미리보기 | Vue는 내부 열림과 open 입력을 동기화합니다. React·Native는 open을 주면 제어형이며 생략하면 내부 상태입니다. 선택 옵션 슬롯과 렌더 함수의 인자는 API에 설명합니다. Vue는 내부 열림과 open 입력을 동기화합니다. React·Native는 open을 주면 제어형이며 생략하면 내부 상태입니다. 선택 옵션 슬롯과 렌더 함수의 인자는 API에 설명합니다. |
| SignedValueFinance | 지원 | 지원 | 미리보기 | 세 플랫폼에서 format·isRaw·decimals의 단위 계약을 공유합니다. Vue 공통 formatters와 React·Native의 직접 formatter를 구분하세요. 세 플랫폼에서 format·isRaw·decimals의 단위 계약을 공유합니다. Vue 공통 formatters와 React·Native의 직접 formatter를 구분하세요. |
| SkeletonFeedback | 지원 | 지원 | 미리보기 | 웹의 width·height는 CSS 길이, Native는 Native 크기 타입을 따릅니다. 크기를 지정할 때 선택 플랫폼의 API를 확인하세요. 웹의 width·height는 CSS 길이, Native는 Native 크기 타입을 따릅니다. 크기를 지정할 때 선택 플랫폼의 API를 확인하세요. |
| SliderInputs | 지원 | 지원 | 미리보기 | 웹 키보드와 포인터, Native responder 및 접근성 증감 액션을 지원합니다. 웹 키보드와 포인터, Native responder 및 접근성 증감 액션을 지원합니다. |
| SparklineData Display | 지원 | 지원 | 미리보기 | React·Native는 ariaLabel로 설명을 제공할 수 있습니다. Vue에서는 바깥 설명이나 접근성 속성을 함께 구성하세요. Native는 SVG 기반으로 표시합니다. React·Native는 ariaLabel로 설명을 제공할 수 있습니다. Vue에서는 바깥 설명이나 접근성 속성을 함께 구성하세요. Native는 SVG 기반으로 표시합니다. |
| SpinnerFeedback | 지원 | 지원 | 미리보기 | 세 플랫폼 모두 size·text를 사용합니다. 웹과 Native의 회전 구현은 다르며 동작 줄이기 환경을 따릅니다. 세 플랫폼 모두 size·text를 사용합니다. 웹과 Native의 회전 구현은 다르며 동작 줄이기 환경을 따릅니다. |
| SwitchInputs | 지원 | 지원 | 미리보기 | Vue input·change와 React·Native onValueChange·onChange를 사용합니다. 웹 체크 동작과 Native 누름 동작은 동일한 boolean 값을 전달합니다. Vue input·change와 React·Native onValueChange·onChange를 사용합니다. 웹 체크 동작과 Native 누름 동작은 동일한 boolean 값을 전달합니다. |
| TableData Display | 지원 | 지원 | 미리보기 | Vue expandedRows=[]는 내부 확장 상태를 사용합니다. React·Native의 []는 모두 닫힌 제어 상태입니다. 동적 셀 슬롯과 렌더 함수의 데이터는 API에서 확인하세요. Vue expandedRows=[]는 내부 확장 상태를 사용합니다. React·Native의 []는 모두 닫힌 제어 상태입니다. 동적 셀 슬롯과 렌더 함수의 데이터는 API에서 확인하세요. |
| TabPaneNavigation | 지원 | 지원 | 미리보기 | Vue는 부모가 자식 메타데이터를 읽고 React·Native는 자식 props를 사용합니다. React·Native에는 badgeVariant가 추가로 있습니다. Vue는 부모가 자식 메타데이터를 읽고 React·Native는 자식 props를 사용합니다. React·Native에는 badgeVariant가 추가로 있습니다. |
| TabsNavigation | 지원 | 지원 | 미리보기 | Vue 슬롯·이벤트에 대응해 React·Native는 actions·children·onTabMenu를 제공합니다. 웹 키보드 이동과 Native 누름 조작을 구분합니다. Vue 슬롯·이벤트에 대응해 React·Native는 actions·children·onTabMenu를 제공합니다. 웹 키보드 이동과 Native 누름 조작을 구분합니다. |
| TextareaInputs | 지원 | 지원 | 미리보기 | Vue input·readonly, React onValueChange·readOnly, Native onChangeText·readOnly를 구분하세요. resize는 웹에서만 사용하고 Native rows는 초기 표시 높이에 반영합니다. Vue input·readonly, React onValueChange·readOnly, Native onChangeText·readOnly를 구분하세요. resize는 웹에서만 사용하고 Native rows는 초기 표시 높이에 반영합니다. |
| TimePickerInputs | 지원 | 지원 | 미리보기 | 기존 Select를 조합합니다. 플랫폼별 Select 레이어 동작을 유지하며 시스템 시간 선택기는 사용하지 않습니다. 기존 Select를 조합합니다. 플랫폼별 Select 레이어 동작을 유지하며 시스템 시간 선택기는 사용하지 않습니다. |
| TooltipFeedback | 지원 | 지원 | 미리보기 | 웹은 hover·focus, Native는 누름·포커스 경로로 표시합니다. Native에는 onPress·disabled가 있으며 기기 동작 검증은 별도입니다. 웹은 hover·focus, Native는 누름·포커스 경로로 표시합니다. Native에는 onPress·disabled가 있으며 기기 동작 검증은 별도입니다. |
| TopNavigationNavigation | 지원 | 지원 | 미리보기 | 웹 header와 Native View는 모두 일반 배치 흐름에 공간을 차지합니다. |
ButtonActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue htmlType·click, React type·onClick, Native onPress를 사용합니다. Native에는 HTML 폼 제출 동작이 없습니다.
Vue htmlType·click, React type·onClick, Native onPress를 사용합니다. Native에는 HTML 폼 제출 동작이 없습니다.
ButtonGroupActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 그룹 disabled만 적용하고 options의 disabled를 소비하지 않습니다. React·Native는 그룹과 옵션별 disabled를 모두 적용합니다.
Vue는 그룹 disabled만 적용하고 options의 disabled를 소비하지 않습니다. React·Native는 그룹과 옵션별 disabled를 모두 적용합니다.
ChipActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Native 삭제 버튼은 최소 44px 터치 영역을 확보합니다.
Native 삭제 버튼은 최소 44px 터치 영역을 확보합니다.
CopyButtonActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹은 기본 클립보드 경로가 있으며 Native는 copyText 함수를 필수로 제공합니다. 복사 결과는 Vue 이벤트와 React·Native 콜백으로 받습니다.
웹은 기본 클립보드 경로가 있으며 Native는 copyText 함수를 필수로 제공합니다. 복사 결과는 Vue 이벤트와 React·Native 콜백으로 받습니다.
DropdownActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue trigger 슬롯과 React·Native trigger prop을 사용합니다. 웹은 방향키·문자 탐색을 제공하고 Native는 Modal 메뉴를 사용합니다.
Vue trigger 슬롯과 React·Native trigger prop을 사용합니다. 웹은 방향키·문자 탐색을 제공하고 Native는 Modal 메뉴를 사용합니다.
DropdownDividerActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
React·Native의 공개 전용 prop은 없습니다. Vue의 공통 formatters도 이 장식선에 직접 사용하지 않습니다.
React·Native의 공개 전용 prop은 없습니다. Vue의 공통 formatters도 이 장식선에 직접 사용하지 않습니다.
DropdownItemActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue click, React onClick, Native onPress를 사용합니다. React textValue는 텍스트 탐색에 사용하며 Native에는 이 prop이 없습니다.
Vue click, React onClick, Native onPress를 사용합니다. React textValue는 텍스트 탐색에 사용하며 Native에는 이 prop이 없습니다.
FormActionsActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue confirm·cancel 이벤트와 React·Native onConfirm·onCancel을 연결합니다. loading은 확인 버튼에 적용하고 취소 비활성은 cancelDisabled로 별도 설정합니다.
Vue confirm·cancel 이벤트와 React·Native onConfirm·onCancel을 연결합니다. loading은 확인 버튼에 적용하고 취소 비활성은 cancelDisabled로 별도 설정합니다.
IconToggleActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹 activeColorClass·inactiveColorClass는 Native에 없습니다. Native는 activeColor·inactiveColor 값을 사용하며 누름 동작으로 토글을 요청합니다.
웹 activeColorClass·inactiveColorClass는 Native에 없습니다. Native는 activeColor·inactiveColor 값을 사용하며 누름 동작으로 토글을 요청합니다.
MenuButtonActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue default 슬롯과 React·Native children에 메뉴 항목을 넣습니다. Native 팝업은 Modal 기반이며 웹 도움말 배치와 기기 동작은 별도입니다.
Vue default 슬롯과 React·Native children에 메뉴 항목을 넣습니다. Native 팝업은 Modal 기반이며 웹 도움말 배치와 기기 동작은 별도입니다.
RefreshButtonActions
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue refresh 이벤트와 React·Native onRefresh를 사용합니다. 웹 button과 Native Pressable의 이벤트 객체를 같은 것으로 가정하지 마세요.
Vue refresh 이벤트와 React·Native onRefresh를 사용합니다. 웹 button과 Native Pressable의 이벤트 객체를 같은 것으로 가정하지 마세요.
CheckboxInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue input·change, React·Native onValueChange·onChange로 다음 값을 받습니다. 중간 선택을 지정하는 공개 prop은 없습니다.
Vue input·change, React·Native onValueChange·onChange로 다음 값을 받습니다. 중간 선택을 지정하는 공개 prop은 없습니다.
ComboboxInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue input·change·search와 React·Native의 해당 콜백을 연결합니다. Native에서는 팝업 내부 입력으로 검색을 이어갑니다.
Vue input·change·search와 React·Native의 해당 콜백을 연결합니다. Native에서는 팝업 내부 입력으로 검색을 이어갑니다.
DatePickerInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹은 날짜 input의 브라우저 선택기를 사용합니다. 평소에는 YYYY. MM. DD. 형식으로 표시하지만, 키보드로 편집하는 동안에는 브라우저 언어의 날짜 형식(예: 영어 브라우저의 MM/DD/YYYY)이 보입니다. Native는 달력 팝업에서 선택하며 React의 HTML type은 구현에서 date로 고정됩니다.
웹은 날짜 input의 브라우저 선택기를 사용합니다. 평소에는 YYYY. MM. DD. 형식으로 표시하지만, 키보드로 편집하는 동안에는 브라우저 언어의 날짜 형식(예: 영어 브라우저의 MM/DD/YYYY)이 보입니다. Native는 달력 팝업에서 선택하며 React의 HTML type은 구현에서 date로 고정됩니다.
FilterGroupInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue input·change와 React·Native onValueChange·onChange를 사용합니다. scroll은 필터의 가로 배치이며 데이터 요청과 무관합니다.
Vue input·change와 React·Native onValueChange·onChange를 사용합니다. scroll은 필터의 가로 배치이며 데이터 요청과 무관합니다.
FormGroupInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 명시적 id로 label의 for를 연결합니다. React는 생략한 id를 생성하고 Native는 필드 맥락을 접근성 이름·설명에 사용합니다. 자세한 연결 규칙은 API에서 확인하세요.
Vue는 명시적 id로 label의 for를 연결합니다. React는 생략한 id를 생성하고 Native는 필드 맥락을 접근성 이름·설명에 사용합니다. 자세한 연결 규칙은 API에서 확인하세요.
InputInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue input·readonly·html 입력 속성, React onValueChange·readOnly, Native onChangeText·TextInput 속성을 구분합니다. Native의 키보드 종류만으로 값 검증을 보장하지 않습니다.
Vue input·readonly·html 입력 속성, React onValueChange·readOnly, Native onChangeText·TextInput 속성을 구분합니다. Native의 키보드 종류만으로 값 검증을 보장하지 않습니다.
QuantityStepperInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹 한글 입력 조합 중에는 확정하지 않습니다. Native 키보드와 입력 방식은 실제 기기에서 별도 검증해야 합니다.
웹 한글 입력 조합 중에는 확정하지 않습니다. Native 키보드와 입력 방식은 실제 기기에서 별도 검증해야 합니다.
RadioInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue input·change, React·Native onValueChange·onChange로 선택값을 전달합니다. 웹 name과 Native 접근성 선택 상태의 연결은 플랫폼 구현을 따릅니다.
Vue input·change, React·Native onValueChange·onChange로 선택값을 전달합니다. 웹 name과 Native 접근성 선택 상태의 연결은 플랫폼 구현을 따릅니다.
RadioGroupInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
그룹 disabled는 Vue에서만 제공합니다. React·Native는 options의 disabled 또는 자식 Radio의 disabled를 지정하세요.
그룹 disabled는 Vue에서만 제공합니다. React·Native는 options의 disabled 또는 자식 Radio의 disabled를 지정하세요.
RangeSliderInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
각 손잡이는 별도의 접근성 이름과 일정한 Tab 순서를 유지합니다.
각 손잡이는 별도의 접근성 이름과 일정한 Tab 순서를 유지합니다.
SearchInputInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
자동 완성 지연은 세 플랫폼 모두 300ms이며 debounce는 일반 입력 모드의 통지 지연입니다. Vue item 슬롯은 React·Native renderOption에 대응하며 itemKey는 Vue만 소비합니다.
자동 완성 지연은 세 플랫폼 모두 300ms이며 debounce는 일반 입력 모드의 통지 지연입니다. Vue item 슬롯은 React·Native renderOption에 대응하며 itemKey는 Vue만 소비합니다.
SelectInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 내부 열림과 open 입력을 동기화합니다. React·Native는 open을 주면 제어형이며 생략하면 내부 상태입니다. 선택 옵션 슬롯과 렌더 함수의 인자는 API에 설명합니다.
Vue는 내부 열림과 open 입력을 동기화합니다. React·Native는 open을 주면 제어형이며 생략하면 내부 상태입니다. 선택 옵션 슬롯과 렌더 함수의 인자는 API에 설명합니다.
SliderInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹 키보드와 포인터, Native responder 및 접근성 증감 액션을 지원합니다.
웹 키보드와 포인터, Native responder 및 접근성 증감 액션을 지원합니다.
SwitchInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue input·change와 React·Native onValueChange·onChange를 사용합니다. 웹 체크 동작과 Native 누름 동작은 동일한 boolean 값을 전달합니다.
Vue input·change와 React·Native onValueChange·onChange를 사용합니다. 웹 체크 동작과 Native 누름 동작은 동일한 boolean 값을 전달합니다.
TextareaInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue input·readonly, React onValueChange·readOnly, Native onChangeText·readOnly를 구분하세요. resize는 웹에서만 사용하고 Native rows는 초기 표시 높이에 반영합니다.
Vue input·readonly, React onValueChange·readOnly, Native onChangeText·readOnly를 구분하세요. resize는 웹에서만 사용하고 Native rows는 초기 표시 높이에 반영합니다.
TimePickerInputs
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
기존 Select를 조합합니다. 플랫폼별 Select 레이어 동작을 유지하며 시스템 시간 선택기는 사용하지 않습니다.
기존 Select를 조합합니다. 플랫폼별 Select 레이어 동작을 유지하며 시스템 시간 선택기는 사용하지 않습니다.
BottomNavigationNavigation
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹의 href는 실제 링크입니다. Native는 이동 요청 콜백을 사용하며 Native Web에서는 href도 연결합니다.
BreadcrumbNavigation
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue to는 URL 문자열이며 navigate 이벤트를 제공합니다. React는 renderLink, Native는 renderLink·onNavigate로 라우팅을 주입합니다.
Vue to는 URL 문자열이며 navigate 이벤트를 제공합니다. React는 renderLink, Native는 renderLink·onNavigate로 라우팅을 주입합니다.
ExternalLinkNavigation
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹은 안전한 HTTP(S) 링크를 열고 Native는 주입한 openUrl을 사용합니다. Native 연동 없이 실제 기기 URL 열림을 보장하지 않습니다.
웹은 안전한 HTTP(S) 링크를 열고 Native는 주입한 openUrl을 사용합니다. Native 연동 없이 실제 기기 URL 열림을 보장하지 않습니다.
PaginationNavigation
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue 이벤트에 대응해 React·Native는 onPageChange·onChange·onPageSizeChange를 제공합니다. 정보 문구는 React·Native formatter 또는 Vue 포맷 설정을 사용합니다.
Vue 이벤트에 대응해 React·Native는 onPageChange·onChange·onPageSizeChange를 제공합니다. 정보 문구는 React·Native formatter 또는 Vue 포맷 설정을 사용합니다.
TabPaneNavigation
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 부모가 자식 메타데이터를 읽고 React·Native는 자식 props를 사용합니다. React·Native에는 badgeVariant가 추가로 있습니다.
Vue는 부모가 자식 메타데이터를 읽고 React·Native는 자식 props를 사용합니다. React·Native에는 badgeVariant가 추가로 있습니다.
TabsNavigation
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue 슬롯·이벤트에 대응해 React·Native는 actions·children·onTabMenu를 제공합니다. 웹 키보드 이동과 Native 누름 조작을 구분합니다.
Vue 슬롯·이벤트에 대응해 React·Native는 actions·children·onTabMenu를 제공합니다. 웹 키보드 이동과 Native 누름 조작을 구분합니다.
AccordionLayout
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue provide/inject와 React·Native Context가 부모 규칙을 전달합니다. Native도 헤더 누름으로 열고 닫으며 웹의 DOM 키보드 처리는 별도입니다.
Vue provide/inject와 React·Native Context가 부모 규칙을 전달합니다. Native도 헤더 누름으로 열고 닫으며 웹의 DOM 키보드 처리는 별도입니다.
AccordionItemLayout
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue header 슬롯과 React·Native header prop으로 제목 영역을 바꿉니다. disabled는 이 항목의 토글을 막고 부모 multiple 규칙은 유지합니다.
Vue header 슬롯과 React·Native header prop으로 제목 영역을 바꿉니다. disabled는 이 항목의 토글을 막고 부모 multiple 규칙은 유지합니다.
BottomActionBarLayout
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼 모두 일반 배치 흐름을 사용하며 키보드 위치 보정은 앱 화면이 담당합니다.
세 플랫폼 모두 일반 배치 흐름을 사용하며 키보드 위치 보정은 앱 화면이 담당합니다.
CardLayout
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue의 header·header-actions·footer 슬롯은 React·Native의 해당 콘텐츠 prop으로 구성합니다. 웹 CSS 길이와 Native style의 값 형식을 구분합니다.
Vue의 header·header-actions·footer 슬롯은 React·Native의 해당 콘텐츠 prop으로 구성합니다. 웹 CSS 길이와 Native style의 값 형식을 구분합니다.
DrawerLayout
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 레이어 포커스·스크롤을, Native는 Modal과 뒤로 가기 경로를 처리합니다.
Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 레이어 포커스·스크롤을, Native는 Modal과 뒤로 가기 경로를 처리합니다.
ModalLayout
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 포커스 제한·복귀, Native는 Modal·뒤로 가기를 처리하며 HTML 폼 제출은 별도로 연결합니다.
Vue value·input과 React·Native open·onOpenChange를 사용합니다. 웹은 포커스 제한·복귀, Native는 Modal·뒤로 가기를 처리하며 HTML 폼 제출은 별도로 연결합니다.
PopoverLayout
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 value·input으로, React·Native는 open·onOpenChange로 연결합니다. Native 팝업은 Modal 기반이며 웹 배치 속성의 동작 범위는 API 타입을 따릅니다.
Vue는 value·input으로, React·Native는 open·onOpenChange로 연결합니다. Native 팝업은 Modal 기반이며 웹 배치 속성의 동작 범위는 API 타입을 따릅니다.
ScrollFadeLayout
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹은 가장자리 페이드를 계산하고 Native는 가로 ScrollView·스크롤 표시기를 사용합니다. 웹의 페이드와 같은 그림을 Native에 보장하지 않습니다.
웹은 가장자리 페이드를 계산하고 Native는 가로 ScrollView·스크롤 표시기를 사용합니다. 웹의 페이드와 같은 그림을 Native에 보장하지 않습니다.
AlertFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue close 이벤트와 React·Native onClose로 내부 숨김 이후를 통지합니다. 다시 표시하려면 새 알림 인스턴스를 구성하세요. 외부 visible 제어 prop은 없습니다.
Vue close 이벤트와 React·Native onClose로 내부 숨김 이후를 통지합니다. 다시 표시하려면 새 알림 인스턴스를 구성하세요. 외부 visible 제어 prop은 없습니다.
ChartSkeletonFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼의 공개 조절기는 kind·height입니다. animated나 행 수를 직접 조절하는 prop은 없습니다.
세 플랫폼의 공개 조절기는 kind·height입니다. animated나 행 수를 직접 조절하는 prop은 없습니다.
DataStateFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼 모두 생략한 resultKey와 명시적 null을 구분합니다. Vue error 슬롯은 error·retry를 받으며 React·Native errorContent는 인자를 받는 함수가 아닌 요소입니다.
세 플랫폼 모두 생략한 resultKey와 명시적 null을 구분합니다. Vue error 슬롯은 error·retry를 받으며 React·Native errorContent는 인자를 받는 함수가 아닌 요소입니다.
ErrorBoundaryFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue errorCaptured와 React·Native 오류 경계의 포착 범위는 각 프레임워크를 따릅니다. React·Native는 fallback·onError·onReset으로 대체 화면과 보고를 연결합니다.
Vue errorCaptured와 React·Native 오류 경계의 포착 범위는 각 프레임워크를 따릅니다. React·Native는 fallback·onError·onReset으로 대체 화면과 보고를 연결합니다.
FormSkeletonFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼 모두 같은 필드 구성 prop을 사용합니다. 자체 animated 조절기는 없으며 기본 Skeleton 표현을 사용합니다.
세 플랫폼 모두 같은 필드 구성 prop을 사용합니다. 자체 animated 조절기는 없으며 기본 Skeleton 표현을 사용합니다.
ListSkeletonFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼에서 목록 구성은 같은 prop을 사용합니다. 별도 animated prop은 없으므로 이를 로딩 on/off 조절기로 사용하지 마세요.
세 플랫폼에서 목록 구성은 같은 prop을 사용합니다. 별도 animated prop은 없으므로 이를 로딩 on/off 조절기로 사용하지 마세요.
ProgressFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 showLabel이 켜져야 label도 표시합니다. React·Native는 label만으로도 제목을 표시할 수 있습니다. Vue sublabel 슬롯은 React·Native subLabel에 대응합니다.
Vue는 showLabel이 켜져야 label도 표시합니다. React·Native는 label만으로도 제목을 표시할 수 있습니다. Vue sublabel 슬롯은 React·Native subLabel에 대응합니다.
SkeletonFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹의 width·height는 CSS 길이, Native는 Native 크기 타입을 따릅니다. 크기를 지정할 때 선택 플랫폼의 API를 확인하세요.
웹의 width·height는 CSS 길이, Native는 Native 크기 타입을 따릅니다. 크기를 지정할 때 선택 플랫폼의 API를 확인하세요.
SpinnerFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼 모두 size·text를 사용합니다. 웹과 Native의 회전 구현은 다르며 동작 줄이기 환경을 따릅니다.
세 플랫폼 모두 size·text를 사용합니다. 웹과 Native의 회전 구현은 다르며 동작 줄이기 환경을 따릅니다.
TooltipFeedback
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹은 hover·focus, Native는 누름·포커스 경로로 표시합니다. Native에는 onPress·disabled가 있으며 기기 동작 검증은 별도입니다.
웹은 hover·focus, Native는 누름·포커스 경로로 표시합니다. Native에는 onPress·disabled가 있으며 기기 동작 검증은 별도입니다.
AnimatedNumberData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 formatters 주입도 사용할 수 있습니다. React는 className, Native는 style로 바깥 표시를 꾸밉니다.
Vue는 formatters 주입도 사용할 수 있습니다. React는 className, Native는 style로 바깥 표시를 꾸밉니다.
AvatarData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Native는 source로 로컬 리소스도 받습니다. 접근성 이름은 전체 이름을 유지합니다.
Native는 source로 로컬 리소스도 받습니다. 접근성 이름은 전체 이름을 유지합니다.
BadgeData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue default 슬롯, React·Native children으로 문구를 전달합니다. React HTML 속성과 Native style은 각 기본 요소에 적용됩니다.
Vue default 슬롯, React·Native children으로 문구를 전달합니다. React HTML 속성과 Native style은 각 기본 요소에 적용됩니다.
EmptyData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 슬롯, React·Native는 children으로 행동 영역을 구성합니다. Empty 자체에는 재시도 콜백이 없습니다.
Vue는 슬롯, React·Native는 children으로 행동 영역을 구성합니다. Empty 자체에는 재시도 콜백이 없습니다.
HeatmapCellData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue 슬롯과 React·Native children으로 셀 내용을 바꿉니다. Native color는 Native 색상 값 형식을 따릅니다.
Vue 슬롯과 React·Native children으로 셀 내용을 바꿉니다. Native color는 Native 색상 값 형식을 따릅니다.
IconData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue size는 문자열, React size는 웹 길이, Native size는 숫자입니다. Native는 color 값을, 웹은 기본 SVG 스타일·현재 색상을 사용합니다.
Vue size는 문자열, React size는 웹 길이, Native size는 숫자입니다. Native는 color 값을, 웹은 기본 SVG 스타일·현재 색상을 사용합니다.
ImageData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹은 lazy 로딩을 지원합니다. Native는 source로 로컬 이미지 리소스를 받을 수 있습니다.
웹은 lazy 로딩을 지원합니다. Native는 source로 로컬 이미지 리소스를 받을 수 있습니다.
KpiHeroData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue의 aside·secondary 슬롯은 React·Native의 aside·renderSecondary로 구성합니다. 숫자와 증감 포맷터는 별도로 연결합니다.
Vue의 aside·secondary 슬롯은 React·Native의 aside·renderSecondary로 구성합니다. 숫자와 증감 포맷터는 별도로 연결합니다.
KpiRowData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue 슬롯·item-click 이벤트에 대응해 React·Native는 renderValue·onItemClick을 제공합니다. 모바일 요약은 mobileSummary로 선택합니다.
Vue 슬롯·item-click 이벤트에 대응해 React·Native는 renderValue·onItemClick을 제공합니다. 모바일 요약은 mobileSummary로 선택합니다.
ListRowData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹은 li와 링크·버튼, Native는 접근성 목록 항목과 Pressable을 사용합니다.
웹은 li와 링크·버튼, Native는 접근성 목록 항목과 Pressable을 사용합니다.
ListSectionData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹은 section과 ul, Native는 목록 의미를 가진 View로 구성합니다.
웹은 section과 ul, Native는 목록 의미를 가진 View로 구성합니다.
ProgressCellData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼에서 color·customColor로 막대 색상을 선택합니다. Native의 customColor는 Native 색상 타입을 따릅니다.
세 플랫폼에서 color·customColor로 막대 색상을 선택합니다. Native의 customColor는 Native 색상 타입을 따릅니다.
SparklineData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
React·Native는 ariaLabel로 설명을 제공할 수 있습니다. Vue에서는 바깥 설명이나 접근성 속성을 함께 구성하세요. Native는 SVG 기반으로 표시합니다.
React·Native는 ariaLabel로 설명을 제공할 수 있습니다. Vue에서는 바깥 설명이나 접근성 속성을 함께 구성하세요. Native는 SVG 기반으로 표시합니다.
TableData Display
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue expandedRows=[]는 내부 확장 상태를 사용합니다. React·Native의 []는 모두 닫힌 제어 상태입니다. 동적 셀 슬롯과 렌더 함수의 데이터는 API에서 확인하세요.
Vue expandedRows=[]는 내부 확장 상태를 사용합니다. React·Native의 []는 모두 닫힌 제어 상태입니다. 동적 셀 슬롯과 렌더 함수의 데이터는 API에서 확인하세요.
CollectionMarkFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼 모두 kind·active·size를 받습니다. Vue 공통 formatters는 이 아이콘 표시에 직접 사용하지 않습니다.
세 플랫폼 모두 kind·active·size를 받습니다. Vue 공통 formatters는 이 아이콘 표시에 직접 사용하지 않습니다.
DeviationFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
React·Native는 formatter 함수를 직접 받을 수 있고 Vue는 주입된 formatters와 기본 포맷을 사용합니다.
React·Native는 formatter 함수를 직접 받을 수 있고 Vue는 주입된 formatters와 기본 포맷을 사용합니다.
ExecutionStatusBadgeFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼에서 status·label·size로 표시를 구성합니다. 상태를 변경하는 이벤트는 없습니다.
세 플랫폼에서 status·label·size로 표시를 구성합니다. 상태를 변경하는 이벤트는 없습니다.
FreshnessFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 주입된 시각 포맷을 사용하고 React·Native는 formatter를 받을 수 있습니다. 웹 title과 Native 접근성 설명의 표시 방식은 다릅니다.
Vue는 주입된 시각 포맷을 사용하고 React·Native는 formatter를 받을 수 있습니다. 웹 title과 Native 접근성 설명의 표시 방식은 다릅니다.
MarketCardsFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue는 슬롯과 이벤트로, React·Native는 renderList·formatMetric·onSort 등으로 주입합니다. React·Native에는 storage 연동 prop도 있습니다.
Vue는 슬롯과 이벤트로, React·Native는 renderList·formatMetric·onSort 등으로 주입합니다. React·Native에는 storage 연동 prop도 있습니다.
MarketListPanelFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue controls·default 슬롯과 React·Native controls·children으로 두 영역을 구성합니다.
Vue controls·default 슬롯과 React·Native controls·children으로 두 영역을 구성합니다.
MarketSimpleListFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue 슬롯·이벤트에 대응해 React·Native는 행 렌더 함수와 onRowClick·onPageChange를 제공합니다. 통화·날짜 포맷은 소비자가 정합니다.
Vue 슬롯·이벤트에 대응해 React·Native는 행 렌더 함수와 onRowClick·onPageChange를 제공합니다. 통화·날짜 포맷은 소비자가 정합니다.
MarketTableFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
Vue의 셀 슬롯·이벤트와 React·Native의 renderCell·onToggleInterest·onToggleFavorite를 구분합니다. Native의 셀 스타일은 Native 요소를 사용합니다.
Vue의 셀 슬롯·이벤트와 React·Native의 renderCell·onToggleInterest·onToggleFavorite를 구분합니다. Native의 셀 스타일은 Native 요소를 사용합니다.
MarketTableSkeletonFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹의 alignClass·widthClass는 Native에 없습니다. Native는 columns 구성과 자체 크기 규칙으로 배치합니다.
웹의 alignClass·widthClass는 Native에 없습니다. Native는 columns 구성과 자체 크기 규칙으로 배치합니다.
PriceCellFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
웹 flashClass는 전달된 강조 클래스를 적용하며 자체 가격 변화 감지기가 아닙니다. Native에는 flashClass prop이 없습니다.
웹 flashClass는 전달된 강조 클래스를 적용하며 자체 가격 변화 감지기가 아닙니다. Native에는 flashClass prop이 없습니다.
SignedValueFinance
- Vue 2
- 지원
- React
- 지원
- Native Web
- 미리보기
세 플랫폼에서 format·isRaw·decimals의 단위 계약을 공유합니다. Vue 공통 formatters와 React·Native의 직접 formatter를 구분하세요.
세 플랫폼에서 format·isRaw·decimals의 단위 계약을 공유합니다. Vue 공통 formatters와 React·Native의 직접 formatter를 구분하세요.
설정·피드백 서비스
패키지의 제공 여부입니다. 개별 테스트 통과를 의미하지 않으며, 공개 컴포넌트 77개 집계에서 제외합니다.
DsFormLayout
FormGroup을 복수로 배치할 때 자식의 기본 margin 대신 gap을 적용하는 Native 레이아웃입니다.
- Vue 2
- 미제공
- React
- 미제공
- Native Web
- 제공
검증 기록
기록일은 원문에 적힌 날짜이며 최종 검증일이 아닙니다. 연결 수는 현재 카탈로그의 공개 컴포넌트 기준입니다. 당시 범위와 제약은 원문에서 확인하세요.