시간 선택기

시간 선택기 구성 요소를 사용하여 날짜의 시간 부분(시, 분, 초)을 시각적으로 표현하고 양식에 표시하고 드롭다운 또는 대화 상자에서 선택하기 위한 적절한 수단을 제공합니다. 시간 선택기는 Ignite UI for Angular와 시각적으로 동일합니다.

Time Picker Demo

Time Picker Input

날짜의 시간 부분만 선택하기 위한 필드를 표시하기 위해 양식에 시간 선택기 입력을 삽입할 수 있습니다. 활성화 및 비활성화 대화형 상태뿐만 아니라 사용자 상호 작용 시 표시되는 대화 상자 및 드롭다운의 변형도 지원합니다.

Picker Layout

시간 선택기는 가로 및 세로 방향의 대화 상자 레이아웃과 다양한 시간 선택 모드를 지원하는 드롭다운 레이아웃을 지원하고 서로 더 쉽게 구별할 수 있도록 다양한 그림자를 표시합니다. 대화 상자 레이아웃에는 부울 Header 속성을 꺼서 Figma에서 숨길 수 있는 헤더가 함께 제공되며 추가된 자동 레이아웃 덕분에 레이아웃이 그에 따라 자동으로 조정됩니다. Sketch 에서는 헤더의 재정의를 ~No Symbol로 설정하여 이를 달성할 수 있으며, 스마트 레이아웃을 사용하면 모든 것이 그에 따라 조정됩니다. Adobe XD에서는 헤더 레이어를 삭제해야 하며 스택을 사용하여 레이아웃이 조정됩니다.

Content

Time Picker는 두 가지 고유한 콘텐츠 모드를 통해 12시간 및 24시간 형식을 지원합니다. 12시간 콘텐츠 모드에서는 시, 분, 초 부분 외에 오전과 오후 선택이 가능한 메리디엄 부분도 제공됩니다.

Buttons

시간 선택기에는 두 개의 버튼이 있습니다. 하나는 선택을 취소하여 시간을 원래 시간으로 되돌리고, 다른 하나는 선택을 확인하여 변경 사항을 저장합니다.

버튼 영역은 템플릿으로 구성할 수 있으므로 필요에 따라 버튼을 쉽게 숨길 수 있습니다. Figma 에서는 레이어 패널에서 인스턴스를 숨겨 버튼을 숨길 수 있습니다. 마찬가지로 Sketch 에서는 버튼의 재정의를 ~No Symbol로 설정하여 숨길 수 있습니다. Adobe XD에서는 불필요한 버튼을 모두 삭제할 수 있습니다. Sketch 및 Figma와 달리 Adobe XD를 사용하면 라이브러리 패널의 버튼 영역에 사용자 정의 작업 등을 위한 더 많은 버튼을 추가할 수 있습니다. 버튼을 제거하거나 추가하면 적용된 스택이 자동으로 레이아웃을 조정합니다. Figma 및 Sketch에서 이를 달성하려면 먼저 구성 요소 인스턴스를 분리한 다음 원하는 변경 사항을 적용해야 합니다.

스타일링

시간 선택기는 헤더 배경 및 제목 색상에 대한 다양한 옵션은 물론 선택한 시간, 분, 초 및 자오선(AM/PM)에 대한 텍스트 색상에 대한 다양한 옵션을 통해 스타일링 유연성을 제공합니다. 취소 및 확인 버튼은 플랫 버튼 이며 이에 따라 스타일을 지정할 수 있습니다.

Usage

시간 선택기를 대화 상자로 표시하는 경우 UI의 나머지 부분을 어둡게 하는 레이어를 추가하고, 드롭다운 위치로 표시하는 경우 드롭다운 구성을 사용하여 시간 선택기 입력 바로 아래에 표시합니다. 긍정적인 조치가 없으면 구성 요소의 유용성이 저하되므로 대화 상자로 표시될 때 시간 선택기의 모든 버튼을 숨기지 마십시오.

하다	하지 않다