React 아이콘 버튼 개요
Ignite UI for React Icon Button 구성 요소를 사용하면 개발자가 등록된 아이콘을 애플리케이션에서 버튼으로 사용할 수 있습니다. 그것은 의 모든 기능을 가지고 있습니다. 아이콘 구성 요소이지만 단추 구성 요소뿐만 아니라.
React Icon Button Example
용법
먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.
npm install igniteui-react
그 다음에는 필요한 CSS를 가져오IgrIconButton 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:
import { IgrIconButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
<IgrIconButton name="thumb-up" collection="material"></IgrIconButton>
예
변종
일반 버튼 구성 요소와 유사하게, 아이콘 버튼은 여러 변형을 지원합니다 -flat(기본값),contained 그리고outlined; 아이콘 버튼 타입을 변경하려면 아이콘 버튼의 속성을 설정variant 하세요.
<IgrIconButton name="search" variant="contained"></IgrIconButton>
크기
버튼 크기는 CSS 변수를--ig-size 사용해 지원되는 세 가지 크기 중 하나로 변경할 수 있습니다:--ig-size-small,--ig-size-medium (--ig-size-large기본값).
<IgrIconButton className="size-medium" name="thumb-up"></IgrIconButton>
.size-medium {
--ig-size: var(--ig-size-medium);
}
유형
아이콘 버튼 컴포넌트는 속성이<button> 설정되면 내부 구조가 타<a> 입 요소로href 변경됩니다. 이 경우 아이콘 버튼은 일반 링크로 생각할 수 있습니다. 속성 설정은href 아이콘 버튼의 속성도 설정할reltargetdownload 수 있게 해줍니다.
<IgrIconButton name="thumb-up" collection="material" href="https://duckduckgo.com" target="_blank">
</IgrIconButton>
미러링됨
일부 아이콘은 오른쪽에서 왼쪽(RTL) 모드에서 약간 다르게 보여야 합니다. 그래서 설정 시 아이콘 버튼을 수평으로 뒤집는 속성을 제공합니다mirrored.
<IgrIconButton name="thumb-up" mirrored={true}></IgrIconButton>
스타일링
컴포넌트는IgrIconButton 두 개의 CSS 파트baseicon를 노출시켜, 래핑 요소(<button>or<a>)와 랩된<igc-icon> 요소를 스타일링할 수 있게 해줍니다.
igc-icon-button[variant="contained"]:not([disabled])::part(base) {
padding: 12px;
background-color: var(--ig-success-500);
}
igc-icon-button::part(icon) {
--size: 22px;
color: var(--ig-success-500-contrast);
}