Web Components 파일 입력 개요

    Ignite UI for Web Components 파일 입력 구성 요소는 사용자가 파일을 선택하고 업로드할 수 있는 인터랙티브 방식을 제공합니다. 파일 선택, 선택된 파일 이름 표시, 다중 파일 업로드 지원 등 파일별 기능을 추가하여 기본IgcInputComponent 기능을 확장합니다.

    Web Components File Input Example

    Usage

    이 컴포넌트는IgcFileInputComponent 사용자가 장치에서 파일을 선택하여 웹 애플리케이션에 업로드할 수 있게 합니다. 선택한 파일 이름을 표시하고, 탐색 버튼과 "파일 선택되지 않음" 텍스트에 대한 사용자 지정 옵션을 제공합니다. 컴포넌트는 또한 사용자의 필요에 맞게 동작을 추가로 구성할 수 있는 속성, 메서드, 슬롯을 제공합니다.

    시작하기

    사용하기IgcFileInputComponent 시작하려면, 먼저 다음 명령을 실행하여 Ignite UI for Web Components를 설치해야 합니다:

    npm install igniteui-webcomponents

    그 다음에는 다음과 같이 임포트IgcFileInputComponent 해야 합니다:

    import { defineComponents, IgcFileInputComponent } from 'igniteui-webcomponents';

defineComponents(IgcFileInputComponent);

    이제 Web ComponentsIgcFileInputComponent의 기본 구성부터 시작할 수 있습니다.

    <igc-file-input label="File Input" required=true></igc-file-input>

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

    구성

    Properties

    이 컴포넌트는IgcFileInputComponent 특정 요구사항에 따라 동작을 구성할 수 있는 다양한 속성을 제공합니다. 이 속성들은 입력의 기능, 외관, 검증 방식을 제어할 수 있게 해줍니다.

    • value- 파일 입력 필드의 현재 값을 설정합니다.
    • disabled- 파일 입력을 비활성화하여 사용자 상호작용을 방지합니다.
    • required- 입력을 필수로 표시합니다. 파일이 선택되지 않으면 양식 제출이 차단됩니다.
    • invalid- 입력값이 유효하지 않음을 나타내며, 시각적 오류 상태를 유발하는 데 사용됩니다.
    • multiple- 여러 파일을 선택할 수 있습니다.
    • accept- 선택할 수 있는 파일 유형을 정의합니다. 이 속성의 값은 파일 형식의 쉼표로 구분된 목록이어야 합니다(예: .jpg, .png, .gif).
    • autofocus- 페이지가 로드될 때 파일 입력 필드를 자동으로 집중합니다.
    • label- 파일 입력 요소와 연관된 라벨 텍스트를 설정합니다.
    • placeholder- 파일이 선택되지 않았을 때 자리 표시자 텍스트를 제공합니다.
    <igc-file-input
  label="Files Input"
  accept=".jpg, .png, .gif"
  placeholder="Files missing"
  required
  multiple>
</igc-file-input>

    Methods

    구성 가능한 속성 외에도, 컴포넌트IgcInputComponent에서 유IgcFileInputComponent 래한 네 가지 유용한 메서드가 있습니다:

    • focus- 파일 입력 요소에 초점을 맞춥니다.
    • blur- 파일 입력 요소에서 초점을 제거합니다.
    • reportValidity- 입력의 유효성을 확인하고, 입력이 유효하지 않을 경우 검증 메시지를 표시합니다.
    • setCustomValidity- 사용자 정의 검증 메시지를 설정합니다. 제공된 메시지가 비어 있지 않으면 입력이 유효하지 않다고 표시됩니다.

    Slots

    ​IgcFileInputComponent또한 이 컴포넌트는 외관과 동작을 커스터마이즈할 수 있는 여러 슬롯을 노출합니다.

    • prefix&suffix- 메인 입력 영역 앞이나 후에 콘텐츠를 삽입할 수 있게 합니다.
    • helper-text- 입력 아래에 힌트 또는 안내 메시지를 표시합니다. 형식 정리 팁이나 필드 요구사항 등 추가 지침을 제공하는 데 유용합니다.
    • file-selector-text- 파일 선택 버튼에 표시되는 텍스트를 사용자 맞춤 설정할 수 있습니다.
    • file-missing-text- 파일이 선택되지 않았을 때 입력 필드에 표시되는 텍스트를 설정합니다.
    • value-missing- 필요한 필드 검증이 실패할 때 사용자 지정 콘텐츠를 렌더링합니다. (즉, 파일이 필요하지만 제공되지 않은 경우).
    • invalid– 입력이 유효하지 않은 상태일 때 맞춤 콘텐츠를 렌더링할 수 있게 해줍니다.
    • custom-error- 메서드를 사용하여setCustomValidity() 사용자 정의 검증 메시지가 설정될 때 콘텐츠를 표시합니다.

    Integration

    이 컴포넌트는IgcFileInputComponent HTML 폼 요소와 원활하게 통합됩니다. 위에서 설명한 방법과 속성을 사용하면 표준 HTML 폼 내에서 동작과 검증을 효과적으로 관리할 수 있습니다.

    Limitations

    현재 이 구성 요소에는IgcFileInputComponent 다음과 같은 제한 사항이 있습니다:

    • "찾아보기" 단추 및 "선택한 파일 없음" 메시지의 기본 문자열은 자동으로 지역화되지 않습니다. 이러한 문자열은 모든 로케일에서 동일하게 유지되지만 적절한 슬롯 또는 플레이스홀더 바인딩을 사용하여 수동으로 사용자 지정할 수 있습니다.
    • 파일은 속성에서value 수동으로 설정할 수 없습니다. 파일 선택은 오직 파일 선택기를 통해서만 가능합니다. 하지만 빈 문자열''을 전달하면 필드를 초기화할 수 있습니다.

    Accessibility & ARIA Support

    이 컴포넌IgcFileInputComponent 트는 초점이 맞춰지면서 상호작용이 가능하여 키보드와 화면 읽기 모두에 접근할 수 있도록 보장합니다. 컴포넌트는 속성 를label 사용하여 라벨링할 수 있으며, 이는 네이티브<label> 요소를 활용해 의미적으로 올바르고 접근 가능한 라벨을 제공합니다.

    접근성 권장사항을 지원하기 위해 구성요소는 관련 ARIA 속성도 적용합니다.

    • aria-invalid- 입력이 유효하지 않은 상태일 때 "true"로 설정.
    • aria-describedby- 보조 텍스트 요소가 있을 때 자동으로 연결되어, 보조 기술이 추가 정보를 알릴 수 있게 합니다.

    Styling

    컴포넌트는IgcFileInputComponent 스타일링에 사용할 수 있는 CSS 부품을 노출합니다. 다음 표는 노출된 모든 CSS 부품을 나열합니다:

    이름 설명
    container 모든 기본 입력 요소를 보유하는 기본 래퍼입니다.
    input 기본 입력 요소입니다.
    label 기본 레이블 요소입니다.
    file-names 파일 이름 래퍼입니다.
    file-selector-button 찾아보기 단추입니다.
    prefix 접두사 래퍼.
    suffix 접미사 래퍼.
    helper-text 도우미 텍스트 래퍼입니다. 
    igc-file-input::part(file-names) {
  background-color: var(--ig-primary-50);
  color: var(--ig-gray-400);
}

igc-file-input::part(suffix) {
  color: var(--ig-primary-700-contrast);
  background-color: var(--ig-primary-700);
}

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

    API References

    Additional Resources