Web Components 버튼 그룹 개요

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

    Web Components 버튼 예시

    용법

    먼저 다음 명령을 실행하여 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에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    이제 Ignite UI for Web Components Button Group을 가져왔으므로 의 기본 구성으로 시작할 수 있습니다. IgcButtonGroupComponent 그리고 그 버튼.

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

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

    예

    조정

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

    선택

    Ignite UI for Web Components IgcButtonGroupComponent 선택을 구성하려면 해당 selection 속성을 사용할 수 있습니다. 이 속성은 다음과 같은 세 가지 모드를 허용합니다.

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

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

    A IgcToggleButtonComponent는 해당 selected 속성 또는 IgcButtonGroupComponent selectedItems 속성:

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

    [! 참고] 설정 IgcToggleButtonComponent value 속성은 의 IgcButtonGroupComponent 속성을 사용하는 selectedItems 데 필수입니다.

    크기

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

    스타일링

    구성 IgcButtonGroupComponent 요소는 버튼 그룹 컨테이너의 스타일을 지정할 수 있는 CSS 부분을 노출 group 합니다. IgcToggleButtonComponent 또한 단추 요소의 스타일을 지정하는 데 사용할 수 있는 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 참조

    추가 리소스