Blazor Mask Input Overview

    Ignite UI for Blazor 마스크 입력은 개발자가 구성 가능한 규칙에 따라 사용자 입력을 제어하고 표시되는 값의 형식을 지정할 수 있는 입력 필드입니다. 다양한 입력 옵션과 사용 및 구성 용이성을 제공합니다.

    Blazor Mask Input Example

    Usage

    사용하기 IgbMaskInput 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

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

    또한 구성 요소에 IgbMaskInput 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

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

    Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    Mask Rules

    아래 표에는 지원되는 기본 제공 마스크 규칙이 나와 있습니다.

    마스크 캐릭터 설명
    0 숫자 [0-9]. 입력이 필요합니다.
    9 숫자 [0-9]. 입력은 선택사항입니다.
    # 숫자 [0-9], 더하기(+) 또는 빼기(-) 기호입니다. 입력이 필요합니다.
    엘 편지 문자. 입력이 필요합니다.
    ? 편지 문자. 입력은 선택사항입니다.
    ㅏ 영숫자(문자 또는 숫자) 문자입니다. 입력이 필요합니다.
    ㅏ 영숫자(문자 또는 숫자) 문자입니다. 입력은 선택사항입니다.
    & 모든 키보드 문자. 입력이 필요합니다.
    씨 모든 키보드 문자. 입력은 선택사항입니다.
    \ 마스크 플래그를 이스케이프하여 리터럴로 바꿉니다.

    이러한 플래그는 구성 요소 유효성 검사에도 참여합니다. 즉, 필수 위치 중 일부가 채워지지 않은 경우 입력이 유효하지 않게 됩니다(채워진 위치가 없거나 비어 있는 값은 여전히 required의 책임입니다). 이는 독립 실행형 입력과 양식에 포함된 경우 모두에 적용됩니다.

    Applying Mask

    마스크를 바르는 것은 매우 간단합니다. 입력의 속성에 미리 Mask 결정된 패턴을 제공하기만 하면 됩니다.

    아래 예에서는 내선 코드가 포함된 전화번호에 마스크를 적용하겠습니다.

    <IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999">
    <IgbIcon IconName="phone" Collection="material" slot="prefix"></IgbIcon>
    <span slot="helper-text">Phone number</span>
</IgbMaskInput>

    그 후에는 브라우저에 다음이 표시되어야 합니다.

    Prompt Character

    개발자는 마스크의 채워지지 않은 부분에 사용되는 프롬프트 기호를 사용자 정의할 수 있습니다. 이렇게 하려면 속성에 문자를 제공하기만 하면 됩니다. Prompt​

    <IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999" Prompt="-"></IgbMaskInput>

    기본적으로 prompt 문자는 밑줄 입니다.

    Placeholder

    개발자는 네이티브 입력 자리 표시자 속성의 용도로 사용되는 속성을 활용 Placeholder 할 수도 있습니다. 자리 표시자에 대한 값이 제공되지 않으면 마스크 값이 그대로 사용됩니다.

    <IgbMaskInput @ref="MaskInputRef" Mask="00/00/0000" Placeholder="dd/MM/yyyy"></IgbMaskInput>

    Value Modes

    이 IgbMaskInput 노출 ValueMode 다음 중에서 선택할 수 있는 속성 raw 그리고 withFormatting 특정 마스크가 적용될 때 양식에 바인딩할 입력 값(형식이 지정된 또는 원시)을 구성하는 옵션입니다. 기본적으로 ValueMode로 설정됨 날것의. 아래 예에서 직접 시도해 보세요.

    Styling

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

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

igc-mask-input::part(input)::placeholder {
  color: var(--ig-primary-100-contrast);
}

    Assumptions and limitations

    • 마스킹된 입력은 유형 속성은 항상 유형의 입력이므로 텍스트.
    • 실행 취소/다시 실행 동작은 현재 지원되지 않습니다.

    API References

    Additional Resources