Blazor 버튼 개요

Blazor Button Component를 사용하면 Blazor 앱에서 작업을 트리거하는 클릭 가능한 요소를 활성화할 수 있습니다. 버튼 변형을 설정하고, 래핑된 요소에 대한 스타일을 구성하고, 크기를 정의하는 방법을 완벽하게 제어할 수 있습니다. Button Component는 또한 Blazor Button OnClick 이벤트를 통해 유연성을 제공하고, Blazor 버튼을 토글하고, Blazor 버튼을 비활성화하는 등의 작업을 할 수 있습니다.

Blazor 버튼 예제

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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        .buttonContainer {
            display: flex;
            justify-content: space-evenly;
            margin-top: 20px;
        }
    </style>

    <div class="buttonContainer">
        <IgbButton style="margin:5px" Variant="ButtonVariant.Flat">Flat</IgbButton>
        <IgbButton style="margin:5px" Variant="ButtonVariant.Contained">Contained</IgbButton>
        <IgbButton style="margin:5px" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
    </div>
</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에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

// in Program.cs file

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

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

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

<IgbButton />
razor

접두사 접미사

와 함께 prefix 그리고 suffix 슬롯 IgbButton 구성 요소를 사용하면 버튼의 기본 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다.

<IgbButton Variant="@ButtonVariant.Contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgbButton>
razor

유형

Href 속성이 설정되면 버튼 구성 요소의 내부 구조가 <button>에서 <a> 유형 요소로 변경됩니다. 이 경우 버튼은 일반 링크로 간주될 수 있습니다. Href 속성을 설정하면 Rel, Target 및 Download 속성도 설정할 수 있습니다. 버튼 구성 요소가 내부적으로 실제 <button> 요소를 사용하는 경우 속성을 다음 값 중 하나로 설정하여 DisplayType 지정할 수 있습니다.

Submit- 양식 데이터를 제출하려는 경우
reset- 양식 데이터를 초기 값으로 재설정하려는 경우
button- 웹페이지 어디든 맞춤 기능이 있는 버튼을 추가하고 싶을 때

버튼 변형

포함된 버튼

구성요소 템플릿에 간단한 포함된 버튼을 추가하려면 variant 속성을 사용하세요. 변형을 설정하지 않으면 기본적으로 포함됨으로 설정됩니다.

<IgbButton Variant="@ButtonVariant.Contained" />
razor

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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
</div>

@code {
    

}razor

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

윤곽선 버튼

outlined 버튼을 만들기 위해 해야 할 일은 variant 속성의 값을 변경하는 것뿐입니다.

<IgbButton Variant="@ButtonVariant.Outlined" />
razor

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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton style="margin:5px" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
</div>

@code {
    

}razor

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

플랫 버튼

유사하게 flat 변형으로 전환할 수 있습니다.

<IgbButton Variant="@ButtonVariant.Flat" />
razor

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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Flat">Flat</IgbButton>
</div>

@code {
    

}razor

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

플로팅 작업 버튼

variant 속성을 fab로 설정하여 플로팅 작업 버튼을 만들 수 있습니다.

<IgbButton Variant="@ButtonVariant.Fab" />
razor

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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Fab">
        <span slot="prefix">+</span>
        Add
    </IgbButton>
</div>

@code {
    

}razor

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

버튼 크기

사용자는--ig-size CSS 변수를 사용하여 button 구성 요소의 크기를 변경할 수 있습니다. 다음 예에서는 모든 크기 값을 표시하기 위해 일부 라디오 버튼을 추가합니다. 이렇게 하면 하나가 선택될 때마다 버튼의 크기가 변경됩니다.

<IgbRadioGroup id="radioGroup" Alignment="RadioGroupAlignment.Horizontal" >
    <IgbRadio Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
    <IgbRadio Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
    <IgbRadio Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
</IgbRadioGroup>

@code {
    private SizableComponentSize SizableComponentSize = SizableComponentSize.Large;

    protected override void OnInitialized()
    {
    }

    public void OnSmallClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Small;
    }

    public void OnMediumClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Medium;
    }

    public void OnLargeClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Large;
    }
}
razor

위 코드를 구현한 결과는 다음과 같아야 합니다.

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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
.buttonContainer {
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}

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

<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">
    <IgbRadioGroup id="radioGroup" Alignment="RadioGroupAlignment.Horizontal" >
        <IgbRadio name="size" Value="small" LabelPosition="RadioLabelPosition.After" Change="OnRadioSizeClick">Small</IgbRadio>
        <IgbRadio name="size" Value="medium" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioSizeClick">Medium</IgbRadio>
        <IgbRadio name="size" Value="large" LabelPosition="RadioLabelPosition.After" Change="OnRadioSizeClick">Large</IgbRadio>
    </IgbRadioGroup>

    <div class="buttonContainer">
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Flat">Flat</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Contained">Contained</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Fab">Like</IgbButton>
    </div>
</div>

@code {
    

    private string ButtonsSize = "size-medium";

    public void OnRadioSizeClick(IgbRadioChangeEventArgs e)
    {
        this.ButtonsSize = $"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

다운로드

download 속성을 설정하면 사용자에게 링크된 URL로 이동하는 대신 링크된 URL을 저장하라는 메시지가 표시됩니다.

<IgbButton Variant="@ButtonVariant.Contained" Download="Url" Href="https://ko.infragistics.com/" Target="@ButtonBaseTarget._blank">
    Download
</IgbButton>
razor

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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Contained" Download="Url" Href="https://www.infragistics.com/" Target="ButtonBaseTarget._blank">
        Download
    </IgbButton>
</div>

@code {
    

}razor

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

스타일링

이 컴포넌트는 IgbButton 스타일링에 사용할 수 있는 세 가지 CSS 부분을 노출합니다.

이름	설명
`base`	igc-button 구성 요소의 기본 button 요소입니다.
`prefix`	igc-button 구성 요소의 접두사 컨테이너입니다.
`suffix`	igc-button 구성 요소의 접미사 컨테이너입니다.

CSS 부분을 사용하면 base 래핑된 요소(<button> or <a>)의 스타일을 지정할 수 있습니다.

igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}
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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        igc-button::part(base) {
            background-color: #e99221;
            color: #011627;
            padding: 18px;
        }
    </style>
    <div>
        <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
    </div>

</div>

@code {
    

}razor

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