React 버튼 개요

The React Button Component lets you enable clickable elements that trigger actions in your React app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the React Button clicked callback, toggle the React button, disable the React button, and more.

React Button Example

용법

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

npm install igniteui-react

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

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

<IgrButton />

접두사 접미사

With prefix and suffix slots of the IgrButton component, we can add different content before and after the main content of the button.

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

유형

The button component will change its internal structure from a <button> to an <a> type element when the href attribute is set. In that case the button can be thought of as a regular link. Setting the href attribute will allow you to also set the rel, target and download attributes. In the case when the button component uses an actual <button> element internally, we can specify its displayType by setting the property to any of the following values:

Submit - when we want to submit the form data
reset - when we want to reset form data to its initial values
button - when we want to add button with a custom functionality anywhere on a webpage

버튼 변형

포함된 버튼

Use the variant attribute to add a simple contained button in your component template. Note that if you do not set variant, by default it will be set to contained.

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

윤곽선 버튼

All you have to do to create an outlined button is to change the value of the variant property:

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

플랫 버튼

Analogically, we can switch to flat variant.

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

플로팅 작업 버튼

We can create a floating action button by setting the variant property to fab:

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

버튼 크기

Users can change the size of the IgrButton using the --ig-size CSS variable. In the following example, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the 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>

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

다운로드

Setting the download property will prompt the user to save the linked URL instead of navigating to it.

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

스타일링

The IgrButton exposes three CSS parts which we can use for styling:

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

The base CSS part allows us to style the wrapped element (<button> or <a>).

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