Web Components 버튼 그룹 개요

    The Web Components Button Group component is used to organize IgcToggleButtonComponent's into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

    Web Components Button Example

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

    npm install igniteui-webcomponents

    그 다음에는 필요한 CSS를 가져오IgcButtonGroupComponent 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { defineComponents, IgcButtonGroupComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonGroupComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    Now that you have the Ignite UI for Web Components Button Group imported, you can start with a basic configuration of the IgcButtonGroupComponent and its buttons.

    Use the IgcButtonGroupComponent selector to wrap your IgcToggleButtonComponents and display them into a button group. If you want a button to be selected by default, use the selected attribute:

     <igc-button-group>
    <igc-toggle-button value="left">
        <igc-icon name="format_align_left" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="center">
        <igc-icon name="format_align_center" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="right">
        <igc-icon name="format_align_right" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="justify" selected>
        <igc-icon name="format_align_justify" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>
</igc-button-group>

    Examples

    Alignment

    Use the alignment property to set the orientation of the buttons in the button group.

    선택

    In order to configure the Ignite UI for Web Components IgcButtonGroupComponent selection, you could use its selection property. This property accepts the following three modes:

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

    The sample below demonstrates the exposed IgcButtonGroupComponent selection modes:

    A IgcToggleButtonComponent could be marked as selected via its selected attribute or through the IgcButtonGroupComponent selectedItems attribute:

    <igc-button-group selected-items='["bold"]'>
    <igc-toggle-button value="bold">
        <igc-icon name="bold" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="italic">
        <igc-icon name="italic" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="underlined">
        <igc-icon name="underlined" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>
</igc-button-group>

    [!Note] Setting IgcToggleButtonComponent value attribute is mandatory for using the selectedItems property of the IgcButtonGroupComponent.

    크기

    The --ig-size CSS custom property can be used to control the size of the button group.

    Styling

    The IgcButtonGroupComponent component exposes group CSS part that allows us to style the button group container. Also, the IgcToggleButtonComponents provide toggle CSS part that could be used to style the button element.

    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