Blazor 버튼 그룹 개요

    Blazor 버튼 그룹 컴포넌트는 수평/수직 정렬, 단일 및 다중 선택 및 토글이 가능한 스타일 버튼 그룹으로 조직IgbToggleButton 하는 데 사용됩니다.

    Blazor Button Example

    Usage

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

    // in Program.cs file

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

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbButtonGroup. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

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

    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>

    Examples

    Alignment

    이 속성을 사용Alignment 해 버튼 그룹 내 버튼의 방향을 설정하세요.

    선택

    Ignite UI for BlazorIgbButtonGroup 선택을 설정하려면 그Selection 특성 자체를 사용할 수 있습니다. 이 성질은 다음 세 가지 모드를 수용합니다:

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

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

    AIgbToggleButton는 그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>

    [!Note] Setting IgbToggleButton Value attribute is mandatory for using the SelectedItems property of the IgbButtonGroup.

    크기

    CSS 커스텀 속성은--ig-size 버튼 그룹 크기를 제어하는 데 사용할 수 있습니다.

    Styling

    이 컴포넌트는IgbButtonGroup 버튼 그룹 컨테이너를 스타일링할 수 있게 해주는 CSS 파트를 노출합니다group. 또한 s는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);
}

    API Reference

    Additional Resources