Blazor 버튼 그룹 개요

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

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(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コピー

이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

無料で試してみる

용법

사용하기 전에 다음과 같이 등록해야 합니다. 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

예

조정

이 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

IgbButtonGroup의 SelectedItems 속성을 사용하려면 IgbToggleButton Value 특성을 설정해야 합니다.

크기

​--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コピー

스타일링

구성 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 참조

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

추가 리소스

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