[Ionic-React] input UI 구현하기

1. 개요

ionic-react로 inputUI를 만들어 보았다.

2. 코드 상세

<IonContent className="ion-padding">
        <IonItem>
          <IonInput
            placeholder="with placeholder, without label"
            onIonChange={(e) => setText(e.detail.value!)}
          ></IonInput>
        </IonItem>
        <IonItem>
          <IonInput
            type="number"
            value={number}
            placeholder="Enter Number"
            onIonChange={(e) => setNumber(parseInt(e.detail.value!, 10))}
          ></IonInput>
        </IonItem>
        <IonItem>
          <IonInput placeholder="disabled input" value={text} disabled></IonInput>
        </IonItem>
        <IonItem>
          <IonLabel position="stacked">clear Input</IonLabel>
          <IonInput onIonChange={(e: any) => setInput(e.target.value)} clearInput />
        </IonItem>
        <IonItem>
          <IonLabel position="stacked">stacked label</IonLabel>
          <IonInput onIonChange={(e: any) => setInput(e.target.value)} />
        </IonItem>
        <IonItem>
          <IonLabel position="floating">Floating Label</IonLabel>
          <IonInput value={text}></IonInput>
        </IonItem>
        <IonItem>
          <IonLabel position="fixed">Fixed Label</IonLabel>
          <IonInput value={text}></IonInput>
        </IonItem>
      </IonContent>

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

사진으로 표현이 힘든 부분에 대해 상세 설명하겠다.

number타입 input은 input요소안에 숫자 입력시 상하 버튼이 나타나고 1, -1씩 증감할 수 있다.

clear input은 input요소안에 내용을 입력한다면 x버튼이 나타나 입력내용을 한 번에 삭제할 수가 있다.

floatind label은 input요소 안에 label이 존재하다가, input요소를 클릭한다면 label이 상단으로 이동한다.