La Ignite UI for Blazor representa un control de edición de texto simple de varias líneas, útil cuando desea permitir que los usuarios ingresen una cantidad considerable de texto de formato libre, por ejemplo, un comentario en un formulario de revisión o comentarios.
Ejemplo de área de texto 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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
Para empezar a utilizar el componente Área de texto, primero debe registrar su módulo.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule));
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbTextarea. Lo siguiente debe colocarse en el archivo wwwroot/index.html en un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml en un proyecto Blazor Server:
<IgbTextareaRows="5"Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>razor
Prefijo, sufijo y texto auxiliar
Con prefix las ranuras y suffix podemos añadir diferentes contenidos antes y después del contenido principal del Área de Texto. La helper-text ranura proporciona una pista colocada debajo del área de texto. En el siguiente ejemplo, crearemos un nuevo campo Área de texto con un prefijo de texto, un sufijo de icono y un texto auxiliar como sugerencia:
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
Cambio de tamaño del área de texto
Hay tres opciones diferentes de cambio de tamaño de la IgbTextarea. Cuando se establece en none, el área de texto no cambia de tamaño y utiliza una barra de desplazamiento para mostrar el texto desbordado. Cuando se establece en vertical (la opción predeterminada), el área de texto permite al usuario cambiar su tamaño verticalmente. Cuando se establece en auto, el área de texto muestra todas las entradas del usuario a la vez. El texto de desbordamiento se ajusta a una nueva línea y expande el área de texto automáticamente.
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
Integración de formularios
En el ejemplo siguiente se muestra cómo se puede integrar a IgbTextarea en un formulario.
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
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Estilo
El componente Área de texto expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran todas las partes CSS expuestas por la entrada:
Nombre
Descripción
envase
El contenedor principal que contiene todos los elementos de entrada principales.
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