React 입력 개요

    Ignite UI for React 입력은 사용자가 데이터를 입력할 수 있는 구성 요소입니다.

    React Input Example

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그 다음에는 필요한 CSS를 가져오IgrInput 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { IgrInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrInput type="email" label="Subscribe"></IgrInput>

    Prefix & Suffix

    슬롯prefix을 통해suffix 입력의 주요 콘텐츠 앞뒤에 다른 콘텐츠를 추가할 수 있습니다. 다음 샘플에서는 텍스트 접두사와 아이콘 접미사가 포함된 새로운 입력 필드를 만들 것입니다:

    Helper Text

    슬롯은helper-text 입력 아래에 힌트를 제공합니다. 휴대폰에 보조 텍스트를 추가해 봅시다 입력:

    Input Sizing

    사용자가 크기를 변경할 수 있도록 허용할 수 있습니다.IgrInput 사용--ig-size CSS 변수. 이렇게 하면, 모든 크기 값을 표시할 수 있는 라디오 버튼을 추가할 예정입니다. 이렇게 하면 선택될 때마다 입력의 크기를 바꿀 수 있습니다:

    위 샘플에서는 다음 속성의 사용을 보여주었습니다.

    • required- 입력을 필요로 표시하는 데 사용됩니다
    • disabled- 입력을 비활성화하는 데 사용됨
    • readonly- 입력을 읽기(readonly) 표시하는 데 사용됩니다

    Styling

    컴포넌트는IgrInput 내부 요소의 거의 모든 CSS 파트를 노출합니다. 다음 표는 노출된 모든 CSS 부품을 나열합니다:

    이름 설명
    container 모든 기본 입력 요소를 보유하는 기본 래퍼입니다.
    input 기본 입력 요소입니다.
    label 기본 레이블 요소입니다.
    prefix 접두사 래퍼.
    suffix 접미사 래퍼.
    helper-text 도우미 텍스트 래퍼입니다. 
    igc-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}

    API References

    Additional Resources