Blazor Text Area (テキスト エリア) の概要

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 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(IgbTextareaModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbTextarea Rows="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 ファイルに配置する必要があります:

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

<IgbTextarea Rows="5" Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>
razor

プレフィックス、サフィックス、ヘルパー テキスト

prefix スロットと suffix スロットを使用すると、テキスト エリアのメイン コンテンツの前後に異なるコンテンツを追加できます。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 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(IgbTextareaModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbTextarea Label="Your feedback">
       <IgbIcon @ref="RegisterIconRef" IconName="feedback" Collection="material" slot="prefix"></IgbIcon>
        <p slot="helper-text">Give us a short description of what you liked/disliked</p>
    </IgbTextarea>
</div>

@code {
    

    private IgbIcon RegisterIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.RegisterIconRef != null)
        {
            await this.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>";
            await this.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 には 3 つの異なるサイズ変更オプションがあります。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 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(IgbTextareaModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbTextarea Label="Resize: none" Resize="TextareaResize.None">
        <p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
    </IgbTextarea>
    <IgbTextarea Label="Resize: vertical (default)" Resize="TextareaResize.Vertical">
        <p slot="helper-text">This textarea lets the user resize vertically.</p>
    </IgbTextarea>
    <IgbTextarea Label="Resize: auto" Resize="TextareaResize.Auto">
        <p slot="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コピー

フォームの統合

以下のサンプルは、IgbTextarea をフォームに統合する方法を示しています。

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 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(IgbTextareaModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
.controls {
margin-top: 1rem;
}
</style>

<div class="container sample center">
    <form id="form" @onsubmit="Submit">
        <IgbTextarea Rows="3" Name="user_feedback" Label="Your review" Required="true"></IgbTextarea>
        <div class="controls">
            <IgbButton Type="submit">Submit review</IgbButton>
            <IgbButton Type="reset" Variant="ButtonVariant.Outlined">Reset</IgbButton>
        </div>
        <IgbToast Id="submitted" @ref="ToastRef" Position="BaseAlertLikePosition.Top" DisplayTime="1000">Your review was submitted</IgbToast>
    </form >
</div>

@code {
    

    public IgbToast ToastRef { get; set; }

    private void Submit()
    {
        this.ToastRef.Show();
    }

}razorコピー

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

スタイル設定

IgbTextarea コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します:

名前	説明
container	すべての主要な入力要素を保持するメイン ラッパー。
input	ネイティブ input 要素。
label	ネイティブ label 要素。
prefix	プレフィックス ラッパー。
suffix	サフィックス ラッパー。
helper-text	ヘルパー テキスト ラッパー。

igc-textarea::part(input) {
  background-color: var(--ig-info-100);
  border-color: var(--ig-primary-400);
}

igc-textarea::part(label) {
  color: var(--ig-gray-800);
}

igc-textarea::part(prefix),
igc-textarea::part(suffix) {
  color: var(--ig-primary-500-contrast);
  border-color: var(--ig-primary-500);
  background-color: var(--ig-primary-500);
}
css

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 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(IgbTextareaModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-textarea::part(input) {
background-color: rgb(169, 214, 229);
border-color: rgb(42, 111, 151);
}

igc-textarea::part(label) {
color: rgb(1, 42, 74);
}

igc-textarea::part(prefix),
igc-textarea::part(suffix) {
color: white;
border-color: rgb(42, 111, 151);
background-color: rgb(70, 143, 175);
}
</style>

<div class="container sample center">
    <IgbTextarea Label="Steps to reproduce">
       <IgbIcon @ref="RegisterIconRef" IconName="feedback" Collection="material" slot="prefix"></IgbIcon>
        <p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
    </IgbTextarea>
</div>

@code {
    

    private IgbIcon RegisterIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.RegisterIconRef != null)
        {
            await this.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>";
            await this.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コピー

API リファレンス

• IgbIcon
• IgbTextarea
• IgbToast
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)