Prev
Next
Back
검색 결과가 페이지 이동으로 보여지는 검색 탭을 정의합니다.
Icon Header 에 Search Icon이 활용될 경우 적용할 수 있는 Icon Dropdown 검색 탭과, 컨텐츠 영역 하위에서 활용할 수 있는 Text Contents 검색 탭이 포함됩니다.
각 메뉴탭에는 반응형 정책에 따른 Text Size를 적용합니다.
Icon Header 에 Search Icon이 활용될 경우 적용할 수 있습니다.
Search Icon을 탭할 시 Dim 20% 와 함께 Dropdown 형태로 검색 영역이 내려옵니다.
검색 결과는 3) Results Page 화면 이동으로 구성합니다.
컨텐츠 영역 내부에서 하위 탭으로 활용할 수 있습니다.
검색 결과는 3) Results Page 화면 이동으로 구성합니다.
결과 페이지는 1), 2) 동일하게 화면 이동으로 구성합니다.
검색결과 하단에는 다양한 List를 활용할 수 있습니다.
검색 결과가 검색 바 하단으로 미리 보여지는 검색 탭을 정의합니다.
각 메뉴탭에는 반응형 정책에 따른 Text Size를 적용합니다.
검색결과 페이지는 팝업 형태로 페이지 이동을 적용할 수 있습니다.
주로 메인 컨텐츠 영역에서 활용되며 자동완성 기능을 포함할 수 있습니다.
검색 바 영역에 타이핑 후 자동완성 키워드를 탭해야만 결과 페이지로 이동하게 됩니다.
검색 바 영역을 탭할 시 Input Field가 활성화됩니다.
하단으로 보여지는 해당 키워드를 탭해야만 결과 페이지로 이동합니다.
우측의 System X Icon 은 타이핑 중이던 내역과, 아코디언 형태로 펼쳐진 검색 바를 닫는 역할을 수행합니다.
키워드는 최대 5개까지 보여주며, 수가 늘어날 경우 내부 스크롤 형태를 적용합니다.
자동완성 기능으로 키워드 및 결과가 하단에서 미리 보여집니다.
Text Enter 등으로 검색 기능을 계속 수행할 시, 동일하게 팝업 결과 페이지로 이동합니다.
검색결과 페이지는 팝업 형태로 페이지 이동합니다.
검색 키워드는 Primary 색상의 하단바 형태로 강조 표시 할 수 있습니다.
검색결과 하단에는 다양한 List를 활용할 수 있습니다.
