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

    Usage

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

    npm install igniteui-react

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

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

    <IgrButton />

    Prefix / Suffix

    ​prefix그리고suffix 슬롯IgrButton 컴포넌트에서는 버튼의 주요 콘텐츠 앞뒤에 다른 콘텐츠를 추가할 수 있습니다.

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

    Type

    속성이<button> 설정되면 버튼 컴포넌트는 내부 구조를 a<a>에서 타입 요소로href 변경합니다. 이 경우 버튼은 일반 링크로 생각할 수 있습니다. 속성을 설정하면href 그리고 속성도 설정할rel​target​download 수 있습니다. 버튼 컴포넌트가 내부적으로 실제<button> 요소를 사용할 경우, 속성 값을 다음 중 하나로 설정하여 지정할displayType 수 있습니다:

    • Submit- 양식 데이터를 제출할 때
    • reset- 폼 데이터를 초기 값으로 리셋하고 싶을 때
    • button- 웹페이지 어디에나 커스텀 기능이 있는 버튼을 추가하고 싶을 때

    Button Variants

    Contained Button

    속성 기능을variant 사용해 컴포넌트 템플릿에 간단한 포함된 버튼을 추가하세요. 변형을 설정하지 않으면 기본적으로 '포함된'으로 설정됩니다.

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

    Outlined Button

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

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

    Flat Button

    비유적으로 변이로 전환flat 할 수 있습니다.

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

    Floating Action Button

    속성 설정을variant​fab 통해 플로팅 액션 버튼을 만들 수 있습니다:

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

    Button Sizing

    사용자는IgrButton 사용--ig-size CSS 변수. 다음 예시에서는 모든 크기 값을 표시하는 라디오 버튼을 추가할 것입니다. 이렇게 하면 선택될 때마다 버튼 크기를 변경할 수 있습니다.

    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>

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

    Download

    속성을 설정하면download 사용자가 링크된 URL을 저장하라는 메시지가 나옵니다.

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

    Styling

    이 문서는IgrButton 스타일링에 사용할 수 있는 세 가지 CSS 부품을 공개합니다:

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

    CSS 부분은base 랩된 요소(or<button>)<a>를 스타일링할 수 있게 해줍니다.

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

    API References

    Additional Resources