Blazor Mask Input Overview

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

    Blazor Mask Input Example

    Usage

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

    // in Program.cs file

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

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbMaskInput. 다음 내용은 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 특정 마스크가 적용될 때 폼에서 어떤 입력값(포맷된 값인지 RAW)을 바인딩할지 설정할 수 있는 옵션들입니다. 기본적으로,ValueMode는 다음과 같이 설정되어 있습니다.raw. 아래 예에서 직접 시도해 보세요.

    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