Blazor 입력 개요

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

Blazor Input Example

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <h1>Greetings, @userName</h1>
    <IgbInput @bind-value="userName" Label="Input Name" Placeholder="eg. John Doe">
        <span slot="prefix">User</span>
    </IgbInput>
</div>

@code {
    

    string userName = "Bradley";

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Dependencies

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

// in Program.cs file

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

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

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

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

Prefix & Suffix

prefix 및 suffix 슬롯을 사용하면 입력의 기본 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다. 다음 샘플에서는 텍스트 접두사와 아이콘 접미사가 있는 새 입력 필드를 만듭니다.

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbIconModule),
                typeof(IgbInputModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbInput DisplayType="@InputType.Tel" Label="Phone" Placeholder="888 123 4567">
        <span slot="prefix">+359</span>
        <IgbIcon @ref="IconRef" slot="suffix" IconName="phone" Collection="material"/>
    </IgbInput>
</div>

@code {
    

    private IgbIcon IconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            string phoneIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>";
            await this.IconRef.RegisterIconFromTextAsync("phone", phoneIcon, "material");
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Helper Text

helper-text 슬롯은 입력 아래에 배치된 힌트를 제공합니다. 전화기 입력에 도우미 텍스트를 추가해 보겠습니다.

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbIconModule),
                typeof(IgbInputModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbInput DisplayType="@InputType.Tel" Label="Phone">
        <span slot="prefix">+359</span>
        <IgbIcon @ref="IconRef" slot="suffix" IconName="phone" Collection="material"/>
        <span slot="helper-text">Ex.: +359 888 123 456</span>
    </IgbInput>
</div>

@code {
    

    private IgbIcon IconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            string phoneIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>";
            await this.IconRef.RegisterIconFromTextAsync("phone", phoneIcon, "material");
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Input Sizing

사용자가 크기를 변경하도록 허용할 수 있습니다. IgbInput 사용하여--ig-size CSS 변수. 이를 위해 모든 크기 값을 표시하는 라디오 버튼을 추가하겠습니다. 이렇게 하면 하나가 선택될 때마다 입력 크기가 변경됩니다.

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
);
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}
</style>
<div class="container sample center">

    <style>
        #radioGroup {
            display: flex;
            margin: 0 auto;
            width: 15%;
        }
    </style>

    <IgbRadioGroup id="radioGroup" Alignment="@RadioGroupAlignment.Horizontal">
        <IgbRadio name="size" Value="Small" LabelPosition="@RadioLabelPosition.After" Change="@OnRadioOptionClick">Small</IgbRadio>
        <IgbRadio name="size" Value="Medium" LabelPosition="@RadioLabelPosition.After" Checked="true" Change="@OnRadioOptionClick">Medium</IgbRadio>
        <IgbRadio name="size" Value="Large" LabelPosition="@RadioLabelPosition.After" Change="@OnRadioOptionClick">Large</IgbRadio>
    </IgbRadioGroup>

    <IgbInput class="@InputSize" DisplayType="@InputType.Text" Label="Required" Value="This input is required" Required="true" />
    <IgbInput class="@InputSize" DisplayType="@InputType.Text" Label="Disabled" Value="This input is disabled" Disabled="true" />
    <IgbInput class="@InputSize" DisplayType="@InputType.Text" Label="Readonly" Value="This input is readonly" ReadOnly="true" />
</div>

@code {
    

    private string InputSize { get; set; } = "size-medium";

    public void OnRadioOptionClick(IgbRadioChangeEventArgs e)
    {
        this.InputSize = $"size-{e.Detail.Value.ToLower()}";
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}css

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

required- 입력을 필수로 표시하는 데 사용됩니다.
disabled- 입력을 비활성화하는 데 사용됩니다.
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);
}
scss

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbIconModule),
                typeof(IgbInputModule)
  );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <style>
        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);
        }
    </style>

    <IgbInput DisplayType="@InputType.Tel" Label="Phone" Placeholder="888 123 4567">
        <span slot="prefix">+359</span>
        <IgbIcon @ref="IconRef" slot="suffix" IconName="phone" Collection="material"/>
    </IgbInput>
</div>

@code {
    

    private IgbIcon IconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            string phoneIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>";
            await this.IconRef.RegisterIconFromTextAsync("phone", phoneIcon, "material");
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css