하단 탐색

    하단 탐색 구성 요소를 사용하면 관련 보기 사이를 탐색할 수 있는 최대 5개의 항목과 함께 화면 하단에 배치하여 애플리케이션 수준 탐색을 구현할 수 있습니다. 하단 탐색은 Ignite UI for Angular와 시각적으로 동일합니다.

    Bottom Navigation Demo

    Items Amount

    Figma에서 하단 탐색은 자동 레이아웃을 사용하여 하나 이상의 항목이 레이어 패널에서 숨겨질 때 그에 따라 조정할 수 있습니다. Sketch에서 하단 탐색은 하나 이상의 항목이 ~No Symbol로 설정된 경우 그에 따라 조정할 수 있는 스마트 레이아웃을 사용합니다. Adobe XD에서는 사용하지 않는 항목을 삭제할 수 있으며 스택을 사용하여 레이아웃이 조정됩니다. 최대 항목 수는 5개로 제한되어 있으며 더 많은 항목이나 보기가 포함된 애플리케이션 수준 탐색을 디자인해야 하는 경우 탐색 창을 대신 사용하는 것이 좋습니다.

    Item State

    하단 탐색은 활성, 비활성 및 비활성화 상태를 지원하는 항목으로 구성됩니다. Figma에서 이러한 항목은 기본 하단 탐색 구성 요소 내부에 중첩된.Base components 입니다. 변경하려면 하나 이상의 항목을 선택하고 속성 패널을 통해 해당 State 수정해야 합니다. Sketch 에서는 Symbol Overrides 통해 이를 달성하는 반면, Adobe XD에서는 Component States 패러다임을 사용하여 상태 간을 쉽게 전환할 수 있습니다. 하단 탐색에는 항상 하나의 활성 항목이 있고 임의의 수의 비활성 및 비활성화 항목이 있습니다.

    Item Content Template

    하단 탐색 항목은 기본적으로 아이콘과 텍스트의 조합으로 제공됩니다. Figma 에서는 하나 이상의 항목을 선택한 후 속성 패널의 부울 연산을 사용하여 레이블을 켜거나 끌 수 있습니다. Sketch에서 항목 콘텐츠 템플릿에 적용된 스마트 레이아웃 규칙을 사용하면 레이블을 ~No Symbol로 설정할 때 텍스트 레이블을 제거하고 아이콘 전용 항목을 가질 수 있습니다. Adobe XD에서는 콘텐츠가 스택에 있으며 필요하지 않은 경우 레이블 레이어를 삭제하여 동일한 결과를 얻을 수 있습니다.

    스타일링

    하단 탐색에는 배경색, 항목 레이블 및 아이콘 색상에 대한 다양한 옵션을 통해 스타일링 유연성이 제공됩니다.

    Usage

    하단 내비게이션은 항상 다른 콘텐츠 위에 표시되며, 이 내비게이션이 드리우는 그림자는 중요한 시각적 요소입니다. 항상 화면 콘텐츠를 나타내는 레이어 위에 레이어를 배치하고 어떤 상황에서도 레이어가 투사하는 그림자를 제거해서는 안 됩니다.

    하다 하지 않다

    Additional Resources

    관련 주제:

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.