Web Components 입력 개요

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

    Web Components Input Example

    시작하려면 TypeScript 파일에서 IgcInputComponent 가져오고 다음과 같이 DefineComponents() 함수를 호출하여 구성 요소를 등록해야 합니다.

    import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcInputComponent);

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

    컴포넌트를 IgcInputComponent 임포트한 후 사용할 준비가 되었으니 첫 번째 입력을 추가해 보겠습니다.

    <igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com"></igc-input>

    Prefix & Suffix

    ​prefix 및 suffix 슬롯을 사용하면 입력의 기본 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다. 다음 샘플에서는 텍스트 접두사와 아이콘 접미사가 있는 새 입력 필드를 만듭니다.

    Helper Text

    ​helper-text 슬롯은 입력 아래에 배치된 힌트를 제공합니다. 전화기 입력에 도우미 텍스트를 추가해 보겠습니다.

    Input Sizing

    사용자가 크기를 변경하도록 허용할 수 있습니다. IgcInputComponent 사용하여--ig-size CSS 변수. 이를 위해 모든 크기 값을 표시하는 라디오 버튼을 추가하겠습니다. 이렇게 하면 하나가 선택될 때마다 입력 크기가 변경됩니다.

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

    • required- 입력을 필수로 표시하는 데 사용됩니다.
    • disabled- 입력을 비활성화하는 데 사용됩니다.
    • readonly- 입력을 읽기 전용으로 표시하는 데 사용됩니다.

    전체 속성 목록은 IgcInputComponent API에서 찾을 수 있습니다.

    Styling

    입력 구성 요소는 거의 모든 내부 요소에 대한 CSS 부분을 노출합니다. 다음 표에는 입력에 의해 노출되는 모든 CSS 부분이 나열되어 있습니다.

    이름 설명
    컨테이너 모든 기본 입력 요소를 보유하는 기본 래퍼입니다.
    입력 기본 입력 요소입니다.
    상표 기본 레이블 요소입니다.
    접두사 접두사 래퍼.
    접미사 접미사 래퍼.
    도우미 텍스트 도우미 텍스트 래퍼입니다. 
    igc-input::part(input) {
    background-color: rgb(169, 214, 229);
    border-color: rgb(42, 111, 151);
}

igc-input::part(label) {
    color: rgb(1, 42, 74);
}

igc-input::part(prefix),
igc-input::part(suffix) {
    color: white;
    border-color: rgb(42, 111, 151);
    background-color: rgb(70, 143, 175);
}

    API References

    Additional Resources