Blazor 입력 개요
Ignite UI for Blazor 사용자가 데이터를 입력할 수 있는 구성 요소입니다.
Blazor Input Example
Dependencies
입력 구성 요소를 시작하려면 먼저 해당 모듈을 등록해야 합니다.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
또한 IgbInput
구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 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
- 입력을 읽기 전용으로 표시하는 데 사용됩니다.
Styling
입력 구성 요소는 거의 모든 내부 요소에 대한 CSS 부분을 노출합니다. 다음 표에는 입력에 의해 노출되는 모든 CSS 부분이 나열되어 있습니다.
이름 | 설명 |
---|---|
컨테이너 | 모든 기본 입력 요소를 보유하는 기본 래퍼입니다. |
입력 | 기본 입력 요소입니다. |
상표 | 기본 레이블 요소입니다. |
접두사 | 접두사 래퍼. |
접미사 | 접미사 래퍼. |
도우미 텍스트 | 도우미 텍스트 래퍼입니다. |
igc-input::part(input) {
background-color: rgb(169, 214, 229);
border-color: rgb(42, 111, 151);
}
igc-input::part(label) {
color: rgb(1, 42, 74);
}
igc-input::part(prefix),
igc-input::part(suffix) {
color: white;
border-color: rgb(42, 111, 151);
background-color: rgb(70, 143, 175);
}