Ignite UI for Blazor 텍스트 영역은 여러 줄로 된 일반 텍스트 편집 컨트롤을 나타내며, 사용자가 상당한 양의 자유형 텍스트(예: 검토 또는 피드백 양식에 대한 주석)를 입력할 수 있도록 허용하려는 경우에 유용합니다.
Blazor 텍스트 영역 예제
EXAMPLE
MODULES
RAZOR
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbTextareaModule));
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container sample center"><IgbTextareaRows="3"Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea></div>@code {}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule));
razor
IgbTextarea 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.
<IgbTextareaRows="5"Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>razor
접두사, 접미사 & 도우미 텍스트
및 suffix 슬롯을 사용하면 prefix 텍스트 영역의 기본 콘텐츠 앞뒤에 다른 콘텐츠를 추가할 수 있습니다. 슬롯은 helper-text 텍스트 영역 아래에 배치된 힌트를 제공합니다. 다음 샘플에서는 텍스트 접두사, 아이콘 접미사 및 도우미 텍스트를 힌트로 사용하여 새 텍스트 영역 필드를 만듭니다.
EXAMPLE
MODULES
RAZOR
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbTextareaModule));
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container sample center"><IgbTextareaLabel="Your feedback"><IgbIcon @ref="RegisterIconRef"IconName="feedback"Collection="material"slot="prefix"></IgbIcon><pslot="helper-text">Give us a short description of what you liked/disliked</p></IgbTextarea></div>@code {private IgbIcon RegisterIconRef { get; set; }
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && this.RegisterIconRef != null)
{
awaitthis.RegisterIconRef.EnsureReady();
string feedback = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z'/></svg>";
awaitthis.RegisterIconRef.RegisterIconFromTextAsync("feedback", feedback, "material");
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
텍스트 영역 크기 조정
세 가지 크기 조정 옵션이 IgbTextarea 있습니다. 로 none 설정하면 텍스트 영역의 크기가 조정되지 않고 스크롤 막대를 사용하여 오버플로 텍스트를 표시합니다. (기본 옵션)으로 vertical 설정하면 텍스트 영역을 통해 사용자가 세로로 크기를 조정할 수 있습니다. 로 auto 설정하면 텍스트 영역에 모든 사용자 입력이 한 번에 표시됩니다. 오버플로 텍스트는 새 줄로 줄 바꿈되고 텍스트 영역이 자동으로 확장됩니다.
EXAMPLE
MODULES
RAZOR
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbTextareaModule));
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container sample center"><IgbTextareaLabel="Resize: none"Resize="TextareaResize.None"><pslot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p></IgbTextarea><IgbTextareaLabel="Resize: vertical (default)"Resize="TextareaResize.Vertical"><pslot="helper-text">This textarea lets the user resize vertically.</p></IgbTextarea><IgbTextareaLabel="Resize: auto"Resize="TextareaResize.Auto"><pslot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p></IgbTextarea></div>@code {}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbTextareaModule));
await builder.Build().RunAsync();
}
}
}cs
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbTextareaModule));
await builder.Build().RunAsync();
}
}
}cs