[Ionic-React] button UI 구현하기

1. 개요

ionic-react로 버튼을 만들었는데, 버튼ui의 속성들을 하나하나 구현하고 어떤 모양을 가지고 있는지 확인해 보았다.

2. 코드 상세

<IonContent className="ion-padding">
        <IonText>
          <h3>1. expand 속성</h3>
        </IonText>
        <IonButton color="primary">expand="default"</IonButton>
        <IonButton expand="full" color="primary">
          expand="full"
        </IonButton>
        <IonButton expand="block" color="primary">
          expand="block"
        </IonButton>

        <IonText>
          <h3>2. fill 속성</h3>
        </IonText>
        <IonButton color="primary">fill="default"</IonButton>
        <IonButton fill="clear" color="primary">
          fill="clear"
        </IonButton>
        <IonButton fill="outline" color="primary">
          fill="outline"
        </IonButton>
        <IonButton fill="solid" color="primary">
          fill="solid"
        </IonButton>

        <IonText>
          <h3>3. size 속성</h3>
        </IonText>
        <IonButton color="primary" size="small">
          size="small"
        </IonButton>
        <IonButton color="primary" size="default">
          size="default"
        </IonButton>
        <IonButton color="primary" size="large">
          size="large"
        </IonButton>

        <IonText>
          <h3>4. disabled 속성</h3>
        </IonText>
        <IonButton color="primary" disabled>
          disabled
        </IonButton>

        <IonText>
          <h3>5. mode 속성</h3>
        </IonText>
        <IonButton color="primary" mode="ios">
          mode="ios"
        </IonButton>
        <IonButton color="primary" mode="md">
          mode="md"
        </IonButton>

        <IonText>
          <h3>6. shape 속성</h3>
        </IonText>
        <IonButton color="primary" shape="round">
          shape="round"
        </IonButton>

        <IonText>
          <h3>7. strong 속성</h3>
        </IonText>
        <IonButton color="primary" strong>
          strong
        </IonButton>

        <IonText>
          <h3>8. slot 속성</h3>
        </IonText>
        <IonButton color="primary">
          <IonIcon slot="" icon={star}></IonIcon>
          slot=""
        </IonButton>
        <IonButton color="primary">
          <IonIcon slot="end" icon={star}></IonIcon>
          slot="end"
        </IonButton>
        <IonButton color="primary">
          <IonIcon slot="icon-only" icon={star}></IonIcon>
          slot="icon-only"
        </IonButton>
        <IonButton color="primary">
          <IonIcon slot="start" icon={star}></IonIcon>
          slot="start"
        </IonButton>
      </IonContent>

아래는 코드의 결과물이다.

구현하면서 느꼈던 점은 ionic-react의 ui 구성은 MUI와 비슷하게 사용이 가능하다는 점이다.

스타일부분도 글로벌로 선언해 사용이 가능한데 좀 더 파고들 여지가 있어 보인다. 공부하자.