Blazor 입력 개요

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

    Blazor Input Example

    Dependencies

    입력 구성 요소를 시작하려면 먼저 해당 모듈을 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbInput. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbInput DisplayType="@InputType.Email" Label="Subscribe" Placeholder="john.doe@mail.com" />

    Prefix & Suffix

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

    Helper Text

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

    Input Sizing

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

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

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

    Styling

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