Web Components Icon Button 개요

    Ignite UI for Web Components Icon Button 구성 요소를 사용하면 개발자가 등록된 아이콘을 애플리케이션에서 버튼으로 사용할 수 있습니다. 아이콘 구성 요소의 모든 기능을 제공하지만 버튼 구성 요소의 기능도 추가합니다.

    Web Components Icon Button Example

    Usage

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

    npm install igniteui-webcomponents

    사용하기IgcIconButtonComponent 전에 다음과 같이 등록해야 합니다:

    import { defineComponents, IgcIconButtonComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconButtonComponent);

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    사용하기 가장 간단한 방법은IgcIconButtonComponent 다음과 같습니다:

    <igc-icon-button name="thumb-up" collection="material"></igc-icon-button>

    Examples

    Variant

    일반 버튼 구성 요소와 유사하게, 아이콘 버튼은 여러 변형을 지원합니다 -flat(기본값),contained 그리고outlined; 아이콘 버튼 타입을 변경하려면 아이콘 버튼의 속성을 설정variant 하세요.

    <igc-icon-button name="search" variant="contained"></igc-icon-button>

    크기

    버튼 크기는 CSS 변수를--ig-size 사용해 지원되는 세 가지 크기 중 하나로 변경할 수 있습니다:--ig-size-small,--ig-size-medium (--ig-size-large기본값).

    igc-icon-button {
    --ig-size: var(--ig-size-medium);
}

    Type

    아이콘 버튼 컴포넌트는 속성이<button> 설정되면 내부 구조가 타<a> 입 요소로href 변경됩니다. 이 경우 아이콘 버튼은 일반 링크로 생각할 수 있습니다. 속성 설정은href 아이콘 버튼의 속성도 설정할rel​target​download 수 있게 해줍니다.

    <igc-icon-button
  name="thumb-up"
  collection="material"
  href="https://duckduckgo.com"
  target="_blank">
</igc-icon-button>

    Mirrored

    일부 아이콘은 오른쪽에서 왼쪽(RTL) 모드에서 약간 다르게 보여야 합니다. 그래서 설정 시 아이콘 버튼을 수평으로 뒤집는 속성을 제공합니다mirrored.

    <igc-icon-button name="thumb-up" mirrored></igc-icon-button>

    Styling

    컴포넌트는IgcIconButtonComponent 두 개의 CSS 파트base​icon를 노출시켜, 래핑 요소(<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);
}

    API References

    Additional Resources