React 버튼 개요
React Button 컴포넌트를 사용하면 React 앱에서 작업을 트리거하는 클릭 가능한 요소를 활성화할 수 있습니다. 버튼 변형을 설정하고, 래핑된 요소에 대한 스타일을 구성하고, 크기를 정의하는 방법을 완벽하게 제어할 수 있습니다. Button 컴포넌트는 또한 React Button 클릭 콜백, React 버튼 토글, React 버튼 비활성화 등을 통해 유연성을 제공합니다.
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
href
속성이 설정되면 버튼 구성 요소의 내부 구조가 <button>
에서 <a>
유형 요소로 변경됩니다. 이 경우 버튼은 일반 링크로 간주될 수 있습니다. href
속성을 설정하면 rel
, target
및 download
속성도 설정할 수 있습니다. 버튼 구성 요소가 내부적으로 실제 <button>
요소를 사용하는 경우 속성을 다음 값 중 하나로 설정하여 해당 displayType
지정할 수 있습니다.
Submit
- 양식 데이터를 제출하려는 경우reset
- 양식 데이터를 초기 값으로 재설정하려는 경우button
- 웹페이지 어디든 맞춤 기능이 있는 버튼을 추가하고 싶을 때
Button Variants
Contained Button
속성을 사용하여 variant
구성 요소 템플릿에 간단한 포함 단추를 추가합니다. 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
래핑된 요소(<button>
or <a>
)의 스타일을 지정할 수 있습니다.
igc-button::part(base) {
background-color: var(--ig-primary-500);
color: var(--ig-primary-500-contrast);
padding: 18px;
}