버튼 그룹

Button Group Component를 사용하여 몇 가지 관련 기능에 대한 트리거를 하나의 인터페이스 요소로 결합합니다. Button Group은 Ignite UI for Angular와 시각적으로 동일합니다.

Button Group Demo

Layout

버튼 그룹은 항목이 왼쪽에서 오른쪽으로 배치되는 수평과 위에서 아래로 순서가 배치되는 수직의 두 가지 레이아웃 방향을 지원합니다.

Buttons Amount

Figma에서 버튼 그룹은 자동 레이아웃을 사용하여 필요한 버튼의 정확한 수를 선택하고 레이어 패널에서 추가로 중첩된 버튼을 숨길 때 그에 따라 조정할 수 있습니다. Sketch에서 버튼 그룹은 Figma와 유사한 스마트 레이아웃을 사용하며, 오버라이드 패널에서 불필요한 버튼을 ~기호 없음으로 설정하여 숨길 수 있습니다. Adobe XD에서 버튼이 있는 불필요한 레이어를 삭제하여 동일한 작업을 수행할 수 있으며, 이렇게 하면 레이아웃이 자동으로 조정됩니다.

Button Layout Template

버튼 그룹의 각 버튼은 플랫 버튼이며 동일한 수준의 템플릿을 허용합니다.

스타일링

버튼 그룹에는 테두리 및 배경 색상은 물론 개별 버튼의 윤곽선, 배경, 텍스트 및 아이콘 색상에 대한 다양한 옵션을 통해 스타일링 유연성이 제공됩니다.

Usage

항상 일관된 스타일의 버튼을 사용하고 동일한 버튼 그룹 내에서 텍스트 버튼과 아이콘 버튼을 결합하지 마십시오. 버튼에 빈 공간이 너무 많이 남지 않도록 콘텐츠에 따라 버튼 그룹의 크기를 조정하세요. 버튼 그룹은 단순한 탐색에도 적합하지 않으므로 단순하고 관련된 동작만 표시하는 데 사용하십시오. 이러한 작업 너머를 보고 있다면 탭이 훨씬 더 적합합니다.

하다	하지 않다