RadixUI

Radix UI

• 공식 사이트 링크
• Vercel 과 CodeSandbox 등에서 사용하는 UI 컴포넌트

특징

• 메뉴를 사용 할 때 엔터키,백스페이스키,방향키등으로 제어 가능
• 키보드 타이핑 문자열 그대로 자동완성 선택 기능 사용 (Typeahead support)
• 각각의 컴포넌트를 개별로 설치 가능
• 스타일링 요소가 포함되어 있지 않음

다른 라이브러리와 비교

Slider

• 공통 속성
  • min , max 값 설정
  • RTL LTR 변경 지원
  • Step (단계별 value 설정)
  • 텍스트필드 (툴팁)
  • 좌우 방향키 지원

---

Vuexy

• 컬러
• 사이즈 조절
• Ticks
  • 구간단위로 슬라이더가 이동되도록 지정 가능
• Icon
  • Google Material Icons 을 사용해 툴팁에 아이콘 추가 가능
• 마우스 휠 지원

DevExtreme

• 사이즈 조절
• PageUp, PageDown 으로 Step 이동

Radix-UI

• orientation
  • 수평, 수직 슬라이드 표기방식 수정
• 방향키 위, 아래 추가지원
• Shift + 방향키 , PageUp , PageDown 으로 Step 이동
• Home , End 버튼으로 max, min 값 바로설정

 

Dropdown

• 공통속성
  • 그룹설정
  • 방향키 이동

---

Vuexy

• 컬러, 사이즈등 기본적인 스타일요소 제공
• 드롭다운이 펼쳐지는 방향

DevExtreme

• 싱글 선택, 멀티 선택 (selectionMode)
• 서브 메뉴 추가
• 데이터 그리드 요소 삽입 가능

Radix-UI

• 서브 메뉴 추가
• 위 Slider 처럼 다양한 키보드 입력 제공