React 버튼 그룹 개요

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

React Button Example

EXAMPLE

TSX

ButtonGroupOverview.css

index.css

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import {
    IgrButtonGroup,
    IgrButtonGroupModule,
    IgrIcon,
    IgrIconModule,
    IgrRipple,
    IgrRippleModule,
    IgrToggleButton,
  } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupOverview.css';
import './index.css';
import { registerIconFromText } from 'igniteui-webcomponents'

IgrButtonGroupModule.register();
IgrIconModule.register();
IgrRippleModule.register();

const icons = [
    {
        name: 'format_align_left',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"/></svg>',
    },
    {
        name: 'format_align_center',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg>',
    },
    {
        name: 'format_align_right',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"/></svg>',
    },
    {
        name: 'format_align_justify',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"/></svg>',
    },
];

export default function ButtonGroupOverview() {
    useEffect(() => {
        icons.forEach((icon) => {
            registerIconFromText(icon.name, icon.iconText, 'material');
        });
    }, [])

    return (
        <div className="container sample">
            <IgrButtonGroup>
                <IgrToggleButton value="left" key="button-left">
                    <IgrIcon name="format_align_left" collection="material" key="icon-left" />
                    <IgrRipple key="ripple-left" />
                </IgrToggleButton>
                <IgrToggleButton value="center" key="button-center">
                    <IgrIcon name="format_align_center" collection="material" key="icon-center" />
                    <IgrRipple key="ripple-center" />
                </IgrToggleButton>
                <IgrToggleButton value="right" key="button-right">
                    <IgrIcon name="format_align_right" collection="material" key="icon-right" />
                    <IgrRipple key="ripple-right" />
                </IgrToggleButton>
                <IgrToggleButton value="justify" selected={true} key="button-justify">
                    <IgrIcon name="format_align_justify" collection="material" key="icon-justify" />
                    <IgrRipple key="ripple-justify" />
                </IgrToggleButton>
            </IgrButtonGroup>
      </div>
    );
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ButtonGroupOverview/>);
tsxコピー

igc-button-group {
    max-width: 400px;
}

igc-ripple {
    --color: gray;
}cssコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Usage

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

npm install igniteui-react
cmd

그런 다음 필요한 CSS를 IgrButtonGroup 가져 와서 다음과 같이 모듈을 등록해야합니다.

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

IgrButtonModule.register();
tsx

Ignite UI for React에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

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

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

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

Examples

Alignment

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

EXAMPLE

TSX

ButtonGroupAlignment.css

index.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
    IgrButtonGroup,
    IgrButtonGroupModule,
    IgrRipple,
    IgrRippleModule,
    IgrToggleButton,
  } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupAlignment.css';
import './index.css';

IgrButtonGroupModule.register();
IgrRippleModule.register();

export default function ButtonGroupAlignment() {
    return (
        <div className="container sample">
            <IgrButtonGroup alignment="vertical">
                <IgrToggleButton value="sofia" key="button-sofia">
                    <span key="text-sofia">Sofia</span>
                    <IgrRipple key="ripple-sofia" />
                </IgrToggleButton>
                <IgrToggleButton value="london" key="button-london">
                    <span key="text-london">London</span>
                    <IgrRipple key="ripple-london" />
                </IgrToggleButton>
                <IgrToggleButton value="new york" selected={true} key="button-new-york">
                    <span key="text-new-york">New York</span>
                    <IgrRipple key="ripple-new-york" />
                </IgrToggleButton>
                <IgrToggleButton value="tokyo" key="button-tokyo">
                    <span key="text-tokyo">Tokio</span>
                    <IgrRipple key="ripple-tokyo" />
                </IgrToggleButton>
            </IgrButtonGroup>
      </div>
    );
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ButtonGroupAlignment/>);
tsxコピー

igc-button-group {
    width: 200px;
}

igc-ripple {
    --color: gray;
}cssコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

선택

Ignite UI for React 구성하려면 IgrButtonGroup 선택, 당신은 그것을 사용할 수 있습니다 selection 재산. 이 속성은 다음과 같은 세 가지 모드를 허용합니다.

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

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

EXAMPLE

TSX

ButtonGroupSelection.css

index.css

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import {
    ButtonGroupSelection,
    IgrButtonGroup,
    IgrButtonGroupModule,
    IgrIcon,
    IgrIconModule,
    IgrRadio,
    IgrRadioGroup,
    IgrRadioGroupModule,
    IgrRipple,
    IgrRippleModule,
    IgrToggleButton,
  } from "@infragistics/igniteui-react";
import { registerIconFromText } from 'igniteui-webcomponents'
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupSelection.css';
import './index.css';

IgrButtonGroupModule.register();
IgrRadioGroupModule.register();
IgrIconModule.register();
IgrRippleModule.register();

const icons = [
    {
        name: 'bold',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg>',
    },
    {
        name: 'italic',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/></svg>',
    },
    {
        name: 'underlined',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/></svg>',
    },
];

export default function ButtonGroupSelectionSample() {
    useEffect(() => {
        icons.forEach((icon) => {
            registerIconFromText(icon.name, icon.iconText, 'material');
        });
    }, [])

    const buttonGroupRef = useRef<IgrButtonGroup>(null);

    function onRadioChange(radio: IgrRadio) {
        switch (radio.value) {
            case 'single':
                buttonGroupRef.current.selection = ButtonGroupSelection.Single;
                break;
            case 'single-required':
                buttonGroupRef.current.selection = ButtonGroupSelection.SingleRequired;
                break;
            default:
                buttonGroupRef.current.selection = ButtonGroupSelection.Multiple;
                break;
        }
    }

    return (
        <div className="container sample">
            <div className="radio-group-container">
                <label>Selection Mode</label>
                <IgrRadioGroup alignment="horizontal">
                    <IgrRadio name="mode" value="single" checked change={onRadioChange} key="radio-single">
                        <span key="text-single">Single</span>
                    </IgrRadio>
                    <IgrRadio name="mode" value="single-required" change={onRadioChange} key="radio-single-required">
                        <span key="text-single-required">Single-Required</span>
                    </IgrRadio>
                    <IgrRadio name="mode" value="multiple" change={onRadioChange} key="radio-multiple">
                        <span key="text-multiple">Multiple</span>
                    </IgrRadio>
                </IgrRadioGroup>
            </div>
            <IgrButtonGroup ref={buttonGroupRef}>
                <IgrToggleButton value="bold" key="button-bold">
                    <IgrIcon name="bold" collection="material" key="icon-bold" />
                    <IgrRipple key="ripple-bold" />
                </IgrToggleButton>
                <IgrToggleButton value="italic" key="button-italic">
                    <IgrIcon name="italic" collection="material" key="icon-italic" />
                    <IgrRipple key="ripple-italic" />
                </IgrToggleButton>
                <IgrToggleButton value="underlined" key="button-underlined">
                    <IgrIcon name="underlined" collection="material" key="icon-underlined" />
                    <IgrRipple key="ripple-underlined" />
                </IgrToggleButton>
            </IgrButtonGroup>
      </div>
    );
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ButtonGroupSelectionSample/>);
tsxコピー

.radio-group-container {
    width: 400px;
    margin-bottom: 1rem;
}

igc-radio-group {
    padding: 0.5rem;
}

igc-button-group {
    width: 200px;
}

igc-ripple {
    --color: gray;
}cssコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

A IgrToggleButton는 해당 selected 속성 또는 다음을 통해 선택된 것으로 표시될 수 있습니다. IgrButtonGroup selectedItems 속성:

<IgrButtonGroup selectedItems={['bold']}>
    <IgrToggleButton value="bold" key="button-bold">
        <IgrIcon name="bold" collection="material" key="icon-bold" />
        <IgrRipple key="ripple-bold" />
    </IgrToggleButton>
    <IgrToggleButton value="italic" key="button-italic">
        <IgrIcon name="italic" collection="material" key="icon-italic" />
        <IgrRipple key="ripple-italic" />
    </IgrToggleButton>
    <IgrToggleButton value="underlined" key="button-underlined">
        <IgrIcon name="underlined" collection="material" key="icon-underlined" />
        <IgrRipple key="ripple-underlined" />
    </IgrToggleButton>
</IgrButtonGroup>
tsx

Setting IgrToggleButton value attribute is mandatory for using the selectedItems property of the IgrButtonGroup.

크기

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

EXAMPLE

TSX

CSS

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import {
    IgrButtonGroup,
    IgrButtonGroupModule,
    IgrComponentValueChangedEventArgs,
    IgrToggleButton,
  } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/material.css';
import './index.css';

IgrButtonGroupModule.register();

export default function ButtonGroupSize() {
    const [style, setStyle] = useState({ '--ig-size': 'var(--ig-size-large)' } as React.CSSProperties)

    function onSelect(buttonGroup: IgrButtonGroup, args: IgrComponentValueChangedEventArgs) {
        setStyle({
            '--ig-size': `var(--ig-size-${args.detail})`
        } as React.CSSProperties)
    }

    return (
        <div className="container sample">
            <IgrButtonGroup select={onSelect} style={style}>
                <IgrToggleButton value="small" key="button-small">
                    <span key="text-small">Small</span>
                </IgrToggleButton>
                <IgrToggleButton value="medium" key="button-medium">
                    <span key="text-medium">Medium</span>
                </IgrToggleButton>
                <IgrToggleButton value="large" selected={true} key="button-large">
                    <span key="text-large">Large</span>
                </IgrToggleButton>
            </IgrButtonGroup>
      </div>
    );
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ButtonGroupSize/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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);
}
css

EXAMPLE

TSX

ButtonGroupStyling.css

index.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
    IgrButtonGroup,
    IgrButtonGroupModule,
    IgrRipple,
    IgrRippleModule,
    IgrToggleButton,
  } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupStyling.css';
import './index.css';

IgrButtonGroupModule.register();
IgrRippleModule.register();

export default function ButtonGroupStyling() {
    return (
        <div className="container sample">
            <IgrButtonGroup alignment="vertical">
                <IgrToggleButton value="sofia" key="button-sofia">
                    <span key="text-sofia">Sofia</span>
                    <IgrRipple key="ripple-sofia" />
                </IgrToggleButton>
                <IgrToggleButton value="london" key="button-london">
                    <span key="text-london">London</span>
                    <IgrRipple key="ripple-london" />
                </IgrToggleButton>
                <IgrToggleButton value="new york" key="button-new-york">
                    <span key="text-new-york">New York</span>
                    <IgrRipple key="ripple-new-york" />
                </IgrToggleButton>
                <IgrToggleButton value="tokyo" disabled={true} key="button-tokyo">
                    <span key="text-tokyo">Tokio</span>
                    <IgrRipple key="ripple-tokyo" />
                </IgrToggleButton>
            </IgrButtonGroup>
      </div>
    );
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ButtonGroupStyling/>);
tsxコピー

igc-button-group {
    width: 200px;
}

igc-ripple {
    --color: gray;
}

igc-toggle-button::part(toggle) {
    color: #fdfdfd;
    background: #2f4d6a;
}

igc-toggle-button::part(toggle):hover {
    color: #fdfdfd;
    background: #1f3347;
}

igc-toggle-button[disabled]::part(toggle) {
    color: gray;
    background: lightgray;
}

igc-toggle-button[selected]::part(toggle) {
    color: #fdfdfd;
    background: #1f3347;
}cssコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

API Reference

• IgrButtonGroup
• IgrToggleButton
• IgrRipple
• IgrIcon
• Styling & Themes

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub