Blazor 버튼 그룹 개요

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

    Blazor Button Example

    Usage

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

    // in Program.cs file

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

    또한 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다 IgbButtonGroup. Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 다음을 배치해야 합니다.

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

    Ignite UI for Blazor UI에 대한 전체 소개는 시작 항목을 참조하세요.

    이제 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>

    Examples

    Alignment

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

    선택

    Ignite UI for Blazor IgbButtonGroup 선택을 구성하려면 해당 Selection 속성을 사용할 수 있습니다. 이 속성은 다음 세 가지 모드를 허용합니다.

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

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

    크기

    ​--ig-size CSS 사용자 정의 속성을 사용하여 버튼 그룹의 크기를 제어할 수 있습니다.

    Styling

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

    API Reference

    Additional Resources