Closed Ko-Eunseo closed 9 months ago
chips로 되어있던 버튼들 디자인시스템이 수정되면서 buttons 폴더에 파일 이동 및 리팩토링 진행했습니다.
SLRectIconButton( icon: 'assets/icons/log.svg', label: 'log', isActive: true, );
svg로 되어있는 아이콘과 label을 같이 보내야 합니다. isActive, onTap 속성을 추가로 받습니다. Active상태 여부를 isActive 속성에 전달하면 상태에 따라 primary - neutral 컬러가 됩니다.
위의 버튼을 활용한 탭버튼입니다. Tabbutton type에 따라 컨텐츠 내용이 바뀝니다. isActive, onTap 속성을 추가로 받습니다.
SLMainTabButton( type: TabButtonType.log, isActive: _activeButton == TabButtonType.log, onTap: () { setState(() { _activeButton = TabButtonType.log; }); }, ),
원리는 위 버튼들과 같습니다.
class _ButtonSmExampleState extends State<ButtonSmExample> { bool isFollow = false; void toggleFollow() { isFollow = !isFollow; setState(() {}); } @override Widget build(BuildContext context) { return Center( child: ButtonSm( text: isFollow ? '팔로잉' : '팔로우', isActive: isFollow, onTap: toggleFollow, ), ); } }
chips로 되어있던 버튼들 디자인시스템이 수정되면서 buttons 폴더에 파일 이동 및 리팩토링 진행했습니다.
IconButton
svg로 되어있는 아이콘과 label을 같이 보내야 합니다. isActive, onTap 속성을 추가로 받습니다. Active상태 여부를 isActive 속성에 전달하면 상태에 따라 primary - neutral 컬러가 됩니다.
TabButton
위의 버튼을 활용한 탭버튼입니다. Tabbutton type에 따라 컨텐츠 내용이 바뀝니다. isActive, onTap 속성을 추가로 받습니다.
ButtonSm
원리는 위 버튼들과 같습니다.