Blazor 버튼 그룹 개요

Blazor Button Group 구성 요소는 수평/수직 정렬, 단일/다중 선택 및 토글을 통해 스타일이 지정된 버튼 그룹으로 구성하는 IgbToggleButton 데 사용됩니다.

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

@using IgniteUI.Blazor.Controls

<style>
igc-button-group {
max-width: 400px;
}

igc-ripple {
--color: gray;
}
</style>

<div class="container sample">
    <IgbButtonGroup>
        <IgbToggleButton Value="left">
            <IgbIcon @ref="iconRef" IconName="format_align_left" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="center">
            <IgbIcon IconName="format_align_center" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="right">
            <IgbIcon IconName="format_align_right" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="justify" Selected="true">
            <IgbIcon IconName="format_align_justify" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
    </IgbButtonGroup>
</div>

 @code {
    
    private string formatAlignLeft = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z'/></svg>";
    private string formatAlignCenter = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z'/></svg>";
    private string formatAlignRight = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z'/></svg>";
    private string formatAlignJustify = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z'/></svg>";

    private IgbIcon iconRef;

    protected override void OnAfterRender(bool firstRender)
    {
        if (this.iconRef != null && firstRender)
        {
            this.iconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.iconRef.RegisterIconFromText("format_align_left", formatAlignLeft, "material"); ;
                this.iconRef.RegisterIconFromText("format_align_center", formatAlignCenter, "material"); ;
                this.iconRef.RegisterIconFromText("format_align_right", formatAlignRight, "material"); ;
                this.iconRef.RegisterIconFromText("format_align_justify", formatAlignJustify, "material"); ;
            }));
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/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

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

// in Program.cs file

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

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

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

Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

이제 Ignite UI for Blazor 가져왔으므로 IgbButtonGroup과 해당 버튼의 기본 구성을 시작할 수 있습니다.

선택기를 IgbButtonGroup 사용하여 s를 IgbToggleButton 래핑하고 버튼 그룹에 표시합니다. 기본적으로 단추가 선택되도록 하려면 다음 속성을 사용합니다. Selected​

<IgbButtonGroup>
    <IgbToggleButton Value="left">
        <IgbIcon @ref="iconRef" IconName="format_align_left" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="center">
        <IgbIcon IconName="format_align_center" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="right">
        <IgbIcon IconName="format_align_right" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="justify" Selected="true">
        <IgbIcon IconName="format_align_justify" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
</IgbButtonGroup>
razor

Examples

Alignment

이 Alignment 속성을 사용하여 단추 그룹에 있는 단추의 방향을 설정할 수 있습니다.

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

@using IgniteUI.Blazor.Controls

<style>
igc-button-group {
width: 200px;
}

igc-ripple {
--color: gray;
}
</style>

<div class="container sample">
    <IgbButtonGroup Alignment="ButtonGroupAlignment.Vertical">
        <IgbToggleButton Value="sofia">
            Sofia
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="london">
            London
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="new york" Selected="true">
            New York
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="tokyo">
            Tokyo
            <IgbRipple />
        </IgbToggleButton>
    </IgbButtonGroup>
</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 구성하려면 IgbButtonGroup 선택, 당신은 그것을 사용할 수 있습니다 Selection 속성. 이 속성은 다음 세 가지 모드를 허용합니다.

• 단일- 버튼 그룹의 기본 선택 모드입니다. 사용자는 하나의 버튼을 선택/선택 취소할 수 있습니다.
• single-required- 라디오 그룹 동작을 모방합니다. 하나의 버튼만 선택할 수 있으며 초기 선택이 이루어지면 사용자 상호 작용을 통해 선택을 취소할 수 없습니다.
• 여러 - 그룹에서 여러 버튼을 선택하거나 선택 취소할 수 있습니다.

아래 샘플은 노출 IgbButtonGroup 된 선택 모드를 보여줍니다.

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

@using IgniteUI.Blazor.Controls

<style>
.radio-group-container {
width: 400px;
margin-bottom: 1rem;
}

igc-radio-group {
padding: 0.5rem;
}

igc-button-group {
width: 200px;
}

igc-ripple {
--color: gray;
}
</style>

<div class="container sample">
    <div class="radio-group-container">
        <label>Selection Mode</label>
        <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal">
            <IgbRadio Name="mode" Value="single" Checked @onclick="OnSingleClick">Single</IgbRadio>
            <IgbRadio Name="mode" Value="single-required" @onclick="OnSingleRequiredClick">Single-Required</IgbRadio>
            <IgbRadio Name="mode" Value="Multiple" @onclick="OnMultipleClick">Multiple</IgbRadio>
        </IgbRadioGroup>
    </div>
    <IgbButtonGroup @ref="buttonGroupRef">
        <IgbToggleButton Value="bold">
            <IgbIcon @ref="iconRef" IconName="bold" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="italic">
            <IgbIcon IconName="italic" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="underlined">
            <IgbIcon IconName="underlined" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
    </IgbButtonGroup>
</div>

 @code {
    
    private string boldIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z'/></svg>";
    private string italicIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z'/></svg>";
    private string underlinedIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/></svg>";

    private IgbIcon iconRef;
    private IgbButtonGroup buttonGroupRef;

    protected override void OnAfterRender(bool firstRender)
    {
        if (this.iconRef != null && firstRender)
        {
            this.iconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.iconRef.RegisterIconFromText("bold", boldIcon, "material");
                this.iconRef.RegisterIconFromText("italic", italicIcon, "material"); ;
                this.iconRef.RegisterIconFromText("underlined", underlinedIcon, "material"); ;
            }));
        }
    }

    private void OnSingleClick()
    {
        this.buttonGroupRef.Selection = ButtonGroupSelection.Single;
    }

    private void OnSingleRequiredClick()
    {
        this.buttonGroupRef.Selection = ButtonGroupSelection.SingleRequired;
    }

    private void OnMultipleClick()
    {
        this.buttonGroupRef.Selection = ButtonGroupSelection.Multiple;
    }
}razorコピー

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

A IgbToggleButton는 해당 Selected 속성 또는 다음을 통해 선택된 것으로 표시될 수 있습니다. IgbButtonGroup SelectedItems 속성:

<IgbButtonGroup SelectedItems='["bold"]'>
    <IgbToggleButton Value="bold">
        <IgbIcon @ref="iconRef" IconName="bold" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="italic">
        <IgbIcon IconName="italic" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="underlined">
        <IgbIcon IconName="underlined" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
</IgbButtonGroup>
razor

Setting IgbToggleButton Value attribute is mandatory for using the SelectedItems property of the IgbButtonGroup.

크기

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

@using IgniteUI.Blazor.Controls

<div class="container sample">
    <IgbButtonGroup style="@style" Select="OnSelect">
        <IgbToggleButton Value="small">
            Small
        </IgbToggleButton>
        <IgbToggleButton Value="medium">
            Medium
        </IgbToggleButton>
        <IgbToggleButton Value="large" Selected="true">
            Large
        </IgbToggleButton>
    </IgbButtonGroup>
</div>

@code {
    
    private string style = "--ig-size: var(--ig-size-large)";

    private void OnSelect(IgbComponentValueChangedEventArgs args)
    {
        this.style = $"--ig-size: var(--ig-size-{args.Detail})";
    }
}razorコピー

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

Styling

구성 IgbButtonGroup 요소는 버튼 그룹 컨테이너의 스타일을 지정할 수 있는 CSS 부분을 노출 group 합니다. IgbToggleButton 또한 단추 요소의 스타일을 지정하는 데 사용할 수 있는 CSS 부분을 제공합니다 toggle.

igc-button-group::part(group) {
  background-color: var(--ig-primary-500);
  padding: 8px;
}

igc-toggle-button::part(toggle) {
  color: var(--ig-secondary-300);
}
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(IgbButtonGroupModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-button-group {
width: 200px;
}

igc-ripple {
--color: gray;
}

igc-toggle-button::part(toggle) {
color: #fdfdfd;
background: #2f4d6a;
}

igc-toggle-button::part(toggle):hover {
color: #fdfdfd;
background: #1f3347;
}

igc-toggle-button[disabled]::part(toggle) {
color: gray;
background: lightgray;
}

igc-toggle-button[selected]::part(toggle) {
color: #fdfdfd;
background: #1f3347;
}
</style>

<div class="container sample">
    <IgbButtonGroup Alignment="ButtonGroupAlignment.Vertical">
        <IgbToggleButton Value="sofia">
            Sofia
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="london">
            London
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="new york">
            New York
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="tokyo" Disabled="true">
            Tokyo
            <IgbRipple />
        </IgbToggleButton>
    </IgbButtonGroup>
</div>

 @code {
    

}razorコピー

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

API Reference

• IgbButtonGroup
• IgbToggleButton
• IgbRipple
• IgbIcon
• Styling & Themes

Additional Resources

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