React 버튼 그룹 개요

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

    React Button Example

    Usage

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

    npm install igniteui-react

    그 다음에는 다음과 같이 필요한 CSS를IgrButtonGroup 가져오면 됩니다:

    import { IgrButtonGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

    셀렉터를IgrButtonGroup 사용해 s를 감싸IgrToggleButton 서 버튼 그룹으로 표시하세요. 버튼을 기본적으로 선택하고 싶다면, 다음selected 속성을 사용하세요:

    <IgrButtonGroup>
    <IgrToggleButton value="left">
        <IgrIcon name="format_align_left" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="center">
        <IgrIcon name="format_align_center" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="right">
        <IgrIcon name="format_align_right" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="justify" selected={true}>
        <IgrIcon name="format_align_justify" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
</IgrButtonGroup>

    Examples

    Alignment

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

    선택

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

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

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

    AIgrToggleButton는 그selected 속성이나IgrButtonGroup selectedItems 속성:

    <IgrButtonGroup selectedItems={['bold']}>
    <IgrToggleButton value="bold">
        <IgrIcon name="bold" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
    <IgrToggleButton value="italic">
        <IgrIcon name="italic" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
    <IgrToggleButton value="underlined">
        <IgrIcon name="underlined" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
</IgrButtonGroup>

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

    크기

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

    Styling

    이 컴포넌트는IgrButtonGroup 버튼 그룹 컨테이너를 스타일링할 수 있게 해주는 CSS 파트를 노출합니다group. 또한 s는IgrToggleButton 버튼 요소를 스타일링하는 데 사용할 수 있는 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