React 버튼 개요

React Button 컴포넌트를 사용하면 React 앱에서 작업을 트리거하는 클릭 가능한 요소를 활성화할 수 있습니다. 버튼 변형을 설정하고, 래핑된 요소에 대한 스타일을 구성하고, 크기를 정의하는 방법을 완벽하게 제어할 수 있습니다. Button 컴포넌트는 또한 React Button 클릭 콜백, React 버튼 토글, React 버튼 비활성화 등을 통해 유연성을 제공합니다.

React 버튼 예제

EXAMPLE

TSX

ButtonOverviewStyle.css

index.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ButtonOverviewStyle.css';
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();

export default class ButtonOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="button-container">
                    <IgrButton variant="flat"><span>Flat</span></IgrButton>
                    <IgrButton variant="contained"><span>Contained</span></IgrButton>
                    <IgrButton variant="outlined"><span>Outlined</span></IgrButton>
                </div>
            </div>
        );
    }
}

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

.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}cssコピー

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

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

npm install igniteui-react
cmd

그런 다음 다음과 같이 와 필요한 CSS를 가져와야 IgrButton 합니다.

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

<IgrButton />
tsx

접두사 접미사

와 함께 prefix 그리고 suffix 슬롯 IgrButton 구성 요소를 사용하면 버튼의 기본 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다.

<IgrButton type="button" variant="contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgrButton>
tsx

유형

​href 속성이 설정되면 버튼 구성 요소의 내부 구조가 <button>에서 <a> 유형 요소로 변경됩니다. 이 경우 버튼은 일반 링크로 간주될 수 있습니다. href 속성을 설정하면 rel, target 및 download 속성도 설정할 수 있습니다. 버튼 구성 요소가 내부적으로 실제 <button> 요소를 사용하는 경우 속성을 다음 값 중 하나로 설정하여 해당 displayType 지정할 수 있습니다.

• Submit- 양식 데이터를 제출하려는 경우
• reset- 양식 데이터를 초기 값으로 재설정하려는 경우
• button- 웹페이지 어디든 맞춤 기능이 있는 버튼을 추가하고 싶을 때

버튼 변형

포함된 버튼

구성요소 템플릿에 간단한 포함된 버튼을 추가하려면 variant 속성을 사용하세요. 변형을 설정하지 않으면 기본적으로 포함됨으로 설정됩니다.

<IgrButton variant="contained"><span>Contained</span></IgrButton>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();

export default class ButtonContained extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="contained"><span>Contained</span></IgrButton>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

윤곽선 버튼

​outlined 버튼을 만들기 위해 해야 할 일은 variant 속성의 값을 변경하는 것뿐입니다.

<IgrButton variant="outlined"><span>Outlined</span></IgrButton>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();

export default class ButtonOutlined extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="outlined"><span>Outlined</span></IgrButton>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

플랫 버튼

유사하게 flat 변형으로 전환할 수 있습니다.

<IgrButton variant="flat"><span>Flat</span></IgrButton>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();

export default class ButtonFlat extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="flat"><span>Flat</span></IgrButton>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

플로팅 작업 버튼

​variant 속성을 fab로 설정하여 플로팅 작업 버튼을 만들 수 있습니다.

<IgrButton variant="fab"><span>Fab</span></IgrButton>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();

export default class ButtonFab extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="fab">
                    <span slot="prefix">+</span>
                    <span>Add</span>
                </IgrButton>                    
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

버튼 크기

사용자는--ig-size CSS 변수를 사용하여 button 구성 요소의 크기를 변경할 수 있습니다. 다음 예에서는 모든 크기 값을 표시하기 위해 일부 라디오 버튼을 추가합니다. 이렇게 하면 하나가 선택될 때마다 버튼의 크기가 변경됩니다.

import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react';

const [size, setSize] = useState("small");

const onRadioChange = (e: IgrRadioChangeEventArgs) => {
    setSize(e.detail.value);
};

<IgrRadioGroup alignment="horizontal" style={{ display: "flex", margin: "0 auto", width: "15%" }}>
    <IgrRadio name="size" value="small" labelPosition="after" checked={size === "small"} onChange={onRadioChange}>
        <span>Small</span>
    </IgrRadio>
    <IgrRadio name="size" value="medium" labelPosition="after" onChange={onRadioChange}>
        <span>Medium</span>
    </IgrRadio>
    <IgrRadio name="size" value="large" labelPosition="after" onChange={onRadioChange}>
        <span>Large</span>
    </IgrRadio>
</IgrRadioGroup>

<div className="button-container">
    <IgrButton className={"size-" + size} variant="flat">
        <span>Flat</span>
    </IgrButton>
    <IgrButton className={"size-" + size} variant="contained">
        <span>Contained</span>
    </IgrButton>
    <IgrButton className={"size-" + size} variant="outlined">
        <span>Outlined</span>
    </IgrButton>
    <IgrButton className={"size-" + size} variant="fab">
        <span>Like</span>
    </IgrButton>
</div>
tsx

위 코드를 구현한 결과는 다음과 같아야 합니다.

EXAMPLE

TSX

ButtonSizingStyle.css

index.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ButtonSizingStyle.css';
import { IgrButton, IgrRadio, IgrRadioGroup, IgrButtonModule, IgrRadioModule, IgrRadioGroupModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();

export default class ButtonSize extends React.Component<any, any> {

    constructor(props: any) {
        super(props);        
        this.onRadioChange = this.onRadioChange.bind(this);
        this.state = { size: "medium"};     
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrRadioGroup alignment="horizontal" style={{display: 'flex', margin: '0 auto', width: '15%'}}>
                    <IgrRadio name="size" value="small" labelPosition="after" checked={true} onChange={this.onRadioChange}>
                        <span>Small</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="medium" labelPosition="after" onChange={this.onRadioChange}>
                        <span>Medium</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="large" labelPosition="after" onChange={this.onRadioChange}>
                        <span>Large</span>
                    </IgrRadio>
                </IgrRadioGroup>

                <div className="button-container">
                    <IgrButton className={'size-' + this.state.size} variant="flat"><span>Flat</span></IgrButton>
                    <IgrButton className={'size-' + this.state.size} variant="contained"><span>Contained</span></IgrButton>
                    <IgrButton className={'size-' + this.state.size} variant="outlined"><span>Outlined</span></IgrButton>
                    <IgrButton className={'size-' + this.state.size} variant="fab"><span>Like</span></IgrButton>
                </div>
            </div>
        );
    }

    public onRadioChange(e: any) {
        if (e.detail.checked == true) {
            this.setState({ size: e.detail.value });
        }
    }
}


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

.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}cssコピー

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

Edit in: Codesandbox

다운로드

​download 속성을 설정하면 사용자에게 링크된 URL로 이동하는 대신 링크된 URL을 저장하라는 메시지가 표시됩니다.

<IgrButton
    href=""
    variant="contained"
    download="url"
    target="_blank" >
    <span>Download</span>
</IgrButton>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();

export default class ButtonDownload extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                 <IgrButton href="" variant="contained" download="url" target="_blank" ><span>Download</span></IgrButton>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

스타일링

이 컴포넌트는 IgrButton 스타일링에 사용할 수 있는 세 가지 CSS 부분을 노출합니다.

이름	설명
base	igc-button 구성 요소의 기본 button 요소입니다.
prefix	igc-button 구성 요소의 접두사 컨테이너입니다.
suffix	igc-button 구성 요소의 접미사 컨테이너입니다.

CSS 부분을 사용하면 base 래핑된 요소(<button> or <a>)의 스타일을 지정할 수 있습니다.

igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}
css

EXAMPLE

TSX

ButtonStyle.css

index.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ButtonStyle.css';
import { IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();

export default class ButtonStyling extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="contained"><span>Contained</span></IgrButton>
            </div>
        );
    }
}

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

igc-button::part(base) {
    color: #011627;
}

igc-button::part(base)::before {
    background-color: #e99221;
    padding: 18px;
}
cssコピー

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

Edit in: Codesandbox

API 참조

• IgrButtonBase
• IgrButton
• displayType
• download
• href
• IgrRadioGroup
• IgrRadio
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub