Blazor 아이콘 버튼 개요

Ignite UI for Blazor Icon Button 구성 요소를 사용하면 개발자가 등록된 아이콘을 애플리케이션의 버튼으로 사용할 수 있습니다. 아이콘 구성 요소의 모든 기능을 제공하지만 버튼 구성 요소의 기능도 추가합니다.

Blazor Icon Button Example

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(IgbIconButtonModule),
                typeof(IgbIconModule)
   );
            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 vertical" style="display: list-item">

    <style>
        igc-icon{
            height: 0rem;
            width: 0rem;
        }
    </style>

    <IgbIcon @ref="RegisterIconRef" />
    <IgbIconButton class="size-small" IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Contained" />
    <IgbIconButton class="size-medium" IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Contained" />
    <IgbIconButton class="size-large" IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Contained" />
</div>

@code {
    

    public IgbIcon RegisterIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.RegisterIconRef != null)
        {
            await this.RegisterIconRef.EnsureReady();
            string thumbUpIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z'></path></svg>";
            await this.RegisterIconRef.RegisterIconFromTextAsync("thumb-up", thumbUpIcon, "material");
        }
    }
}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コピー

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.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Usage

​IgbIconButton 사용하기 전에 다음과 같이 등록해야 합니다.

// in Program.cs file

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

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

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

<IgbIconButton IconName="thumb-up" Collection="material" />
razor

Examples

Variant

일반 버튼 구성 요소와 유사하게 아이콘 버튼은 flat (기본값), contained 및 outlined 등 여러 변형을 지원합니다. 아이콘 버튼 유형을 변경하려면 아이콘 버튼의 variant 속성을 설정하세요.

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

@using IgniteUI.Blazor.Controls

<div class="container vertical" style="display: list-item">
    <style>
        igc-icon{
            height: 0rem;
            width: 0rem;
        }
    </style>

    <IgbIcon @ref="@RegisterIconRef"/>
    <IgbIconButton IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Flat" />
    <IgbIconButton IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Contained" />
    <IgbIconButton IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Outlined" />
</div>

@code {
    

    private IgbIcon RegisterIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.RegisterIconRef != null)
        {
            await this.RegisterIconRef.EnsureReady();
            string thumbUpIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z'></path></svg>";
            await this.RegisterIconRef.RegisterIconFromTextAsync("thumb-up", thumbUpIcon, "material");
        }
    }
}razorコピー

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

<IgbIconButton IconName="search" Variant="@IconButtonVariant.Contained" Collection="material" />
razor

크기

버튼의 크기는--ig-size CSS 변수를 사용하여 지원되는 세 가지 크기(--ig-size-small,--ig-size-medium,--ig-size-large 중 하나로 변경할 수 있습니다( 기본).

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(IgbIconButtonModule),
                typeof(IgbIconModule)
   );
            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 vertical" style="display: list-item">

    <style>
        igc-icon{
            height: 0rem;
            width: 0rem;
        }
    </style>

    <IgbIcon @ref="RegisterIconRef" />
    <IgbIconButton class="size-small" IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Contained" />
    <IgbIconButton class="size-medium" IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Contained" />
    <IgbIconButton class="size-large" IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Contained" />
</div>

@code {
    

    public IgbIcon RegisterIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.RegisterIconRef != null)
        {
            await this.RegisterIconRef.EnsureReady();
            string thumbUpIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z'></path></svg>";
            await this.RegisterIconRef.RegisterIconFromTextAsync("thumb-up", thumbUpIcon, "material");
        }
    }
}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コピー

igc-icon-button {
    --ig-size: var(--ig-size-medium);
}
css

<IgbIconButton IconName="thumb-up" Collection="material" Size="@SizableComponentSize.Medium" />
razor

Type

아이콘 버튼 구성 요소는 href 속성이 설정되면 내부 구조를 <button>에서 <a> 유형 요소로 변경합니다. 이 경우 아이콘 버튼은 일반 링크로 간주될 수 있습니다. href 속성을 설정하면 아이콘 버튼의 rel, target 및 download 속성도 설정할 수 있습니다.

<IgbIconButton IconName="thumb-up" Collection="material" Href="https://duckduckgo.com" Target="_blank" />
razor

Mirrored

일부 아이콘은 오른쪽에서 왼쪽(RTL) 모드에서 사용될 때 약간 다르게 표시되어야 합니다. 이러한 이유로 우리는 설정 시 아이콘 버튼을 수평으로 뒤집는 mirrored 속성을 제공합니다.

<IgbIconButton IconName="thumb-up" Collection="material" Mirrored="true" />
razor

Styling

구성 요소는 IgbIconButton 래핑 요소(<button> or <a>)와 래핑된 <igc-icon> 요소의 스타일을 지정할 수 있는 두 개의 CSS 부분을 base​ ​icon 노출합니다.

igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}
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(IgbIconButtonModule),
                typeof(IgbIconModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        igc-icon-button[variant=contained]:not([disabled])::part(base) {
            padding: 0.75rem;
            color: olive;
            background-color: lightgray;
        }

        igc-icon-button::part(icon) {
            --size: 2rem;
        }

        igc-icon{
            height: 0rem;
            width: 0rem;
        }
    </style>

    <IgbIcon @ref="@RegisterIconRef" />
    <IgbIconButton IconName="thumb-up" Collection="material" Variant="@IconButtonVariant.Contained"/>
</div>

@code {
    

    private IgbIcon RegisterIconRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.RegisterIconRef != null)
        {
            await this.RegisterIconRef.EnsureReady();
            string thumbUpIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z'></path></svg>";
            await this.RegisterIconRef.RegisterIconFromTextAsync("thumb-up", thumbUpIcon, "material");
        }
    }
}razorコピー

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

API References

• IgbButtonBase
• IgbButton
• IgbIconButton
• IgbIcon
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브