Web Components 입력 개요

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

    Web Components Input Example

    To get started we need to import the IgcInputComponent in our typescript file and register the component by calling the defineComponents() function as follows:

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

defineComponents(IgcInputComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    After we import the IgcInputComponent component we are ready to start using it, so let's add our first Input.

    <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- 입력을 읽기(readonly) 표시하는 데 사용됩니다

    The full list of attributes can be found in IgcInputComponent API.

    Styling

    컴포넌트는IgcInputComponent 내부 요소의 거의 모든 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