Components
SAIGE 제품의 일관된 사용자 경험을 위한 UI 컴포넌트 가이드라인입니다. 카테고리별로 정리된 컴포넌트를 살펴보고 각 컴포넌트의 사용 방법, 스펙, 라이브 데모를 확인할 수 있습니다.
Actions
Containers
Action Bar
다른 데이터 단위로 이동할 수 있는 기능을 제공하거나 페이지 단위의 액션을 제공합니다.
App Bar
화면 최상단에 위치하여 현재 페이지 이름을 보여주어 사용자가 앱 어디에 위치해 있는지 파악할 수 있도록 돕습니다.
Bottom Sheet
이전 화면과 관련된 콘텐츠를 포함하며, 사용자가 상세 정보를 확인하거나 액션에 집중할 수 있도록 돕습니다.
Card
특정 주제에 대한 정보를 담고 있으며 사용자가 세부 페이지로 진입해 작업을 수행할 수 있도록 합니다.
Dialog
사용자에게 정보를 제공하거나 필드를 동반한 정보 요구, 또는 특정 액션에 대한 사용자의 의사를 확인합니다.
Image Viewer
사용자에게 이미지 및 이미지 정보를 제공합니다. 또한, 이미지 확대/축소 및 각종 설정이 가능한 액션을 제공합니다.
Split
화면을 분할하여 사용자에게 구분된 영역을 제공합니다.
Communication
Badge
다른 컴포넌트에 붙어 알림, 항목의 개수, 상태를 나타냅니다.
Banner
사용자에게 상황에 맞는 정보나 알림을 제공합니다.
Color Marker
항목의 색상 데이터를 시각적으로 표현합니다.
Counter Label
알림, 항목의 개수, 상태를 나타냅니다.
Popover
사용자가 작업 도중 즉각적인 액션을 취할 수 있는 옵션을 제공합니다.
Progress Bar
처리 중인 항목의 진행 상황을 시각적으로 보여줍니다.
Progress Indicator
처리 중인 항목의 진행 상황을 시각적으로 보여줍니다.
Toast
사용자가 취한 액션에 대한 즉각적인 피드백을 간결한 메시지로 알려줍니다.
Tooltip
사용자가 특정 요소에 커서를 올릴 때 추가적인 정보나 컨텍스트를 제공합니다.
Tooltip Icon
사용자가 아이콘에 커서를 올릴 때 tooltip이 나타나는 인터랙션이 보여집니다.
Validation Message
사용자의 입력에 대한 검증 피드백을 제공합니다.
Data Display
Navigation
Select / Input
Checkbox
리스트의 항목을 다중 선택하거나 개별 항목을 활성화 시킬 수 있습니다.
Chip
짧은 텍스트, 속성, 상태를 시각적으로 표현하기 위해 사용됩니다.
Color Picker
사용자가 색상 값을 입력할 수 있도록 돕습니다.
Combo Box
텍스트 필드와 그 아래에 나타나는 선택지 메뉴로 구성되어 있습니다. 사용자가 원하는 선택지를 검색하고 선택할 수 있도록 합니다.
Date Picker
사용자가 캘린더를 활용해 특정 날짜를 선택할 수 있도록 합니다.
Filter
사용자가 조건을 설정해 원하는 정보만 볼 수 있도록 합니다.
Number Input
사용자가 숫자 입력을 할 수 있도록 돕습니다.
Radio Button
리스트 중 한 항목을 선택할 수 있습니다.
Search Bar
사용자가 특정 검색어를 입력해 검색어를 포함하는 콘텐츠를 선별하여 볼 수 있도록 합니다.
Select
여러 선택 항목 중 개별 혹은 복수 선택지에 대한 단순 선택을 지원합니다.
Slider
사용자가 특정 범위 안에서의 값을 선택할 수 있도록 합니다.
Switch
개별 설정을 켜고 끌 수 있으며, 변경 사항을 즉시 반영합니다.
Text Area
사용자가 인풋을 입력할 수 있도록 필드를 제공합니다. 예상되는 응답이 두 줄 이상으로 길 경우에 적합합니다.
Text Field
사용자가 인풋을 입력할 수 있도록 필드를 제공합니다. 예상되는 응답이 한 줄 이내로 짧을 경우에 적합합니다.
Toggle Button
사용자가 클릭 한 번으로 항목을 선택하거나 선택 취소할 수 있습니다.