Single & Multi-Choice Button Groups In Material3 Expressive
- Material 3 Expressive는 새로운 UI 컴포넌트인 버튼 그룹을 도입합니다. 🆕
- 버튼 그룹은 기존 버튼을 라디오 버튼(단일 선택) 또는 체크박스(다중 선택)처럼 작동하도록 변환합니다. 🔄
- 단일 선택 버튼 그룹은 항상 하나의 옵션만 선택 가능하며, 다중 선택 버튼 그룹은 여러 옵션을 선택할 수 있습니다. ☝️✌️
- 선택 시 바운시한 애니메이션과 함께 버튼의 모양이 동적으로 변경됩니다. ✨
- 버튼이 주어진 너비를 초과할 경우,
overflowIndicator를 통해 추가 옵션을 드롭다운 메뉴로 제공할 수 있습니다. 🔽
- 이 컴포넌트를 사용하려면 Material 3의 알파 버전(최소 1.5.0-alpha06 이상)이 필요하며,
@OptIn(ExperimentalMaterialApi::class) 어노테이션이 요구됩니다. 🧪
ButtonGroup 컴포저블 내에서는 ButtonGroupScope의 toggleableItem, clickableItem, customItem과 같은 비컴포저블 함수를 사용하여 버튼 콘텐츠를 정의합니다. 🛠️
- 현재(알파 버전 기준) 버튼 그룹은 애니메이션 시 텍스트 줄바꿈이나 너비 확장 문제 등 시각적인 버그가 있어 사용에 제약이 있습니다. 🐛
- 이러한 버그들로 인해 현재는 프로덕션 환경에서 사용하기 어렵지만, 향후 업데이트를 통해 개선될 것으로 기대됩니다. 🙏