huir0 / Hexagonian

0 stars 0 forks source link

[UI] 컴포넌트 수정된 사항(button) #29

Closed Ko-Eunseo closed 9 months ago

Ko-Eunseo commented 9 months ago

chips로 되어있던 버튼들 디자인시스템이 수정되면서 buttons 폴더에 파일 이동 및 리팩토링 진행했습니다.

IconButton

SLRectIconButton(
      icon: 'assets/icons/log.svg',
      label: 'log',
      isActive: true,
    );

svg로 되어있는 아이콘과 label을 같이 보내야 합니다. isActive, onTap 속성을 추가로 받습니다. Active상태 여부를 isActive 속성에 전달하면 상태에 따라 primary - neutral 컬러가 됩니다.

TabButton

위의 버튼을 활용한 탭버튼입니다. Tabbutton type에 따라 컨텐츠 내용이 바뀝니다. isActive, onTap 속성을 추가로 받습니다.

SLMainTabButton(
          type: TabButtonType.log,
          isActive: _activeButton == TabButtonType.log,
          onTap: () {
            setState(() {
              _activeButton = TabButtonType.log;
            });
          },
        ),

ButtonSm

원리는 위 버튼들과 같습니다.

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,
      ),
    );
  }
}