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>

    크기

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

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

    Type

    아이콘 버튼 구성 요소는 href 속성이 설정되면 내부 구조를 <button>에서 <a> 유형 요소로 변경합니다. 이 경우 아이콘 버튼은 일반 링크로 간주될 수 있습니다. 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 래핑 요소(<button> or <a>)와 래핑된 <igc-icon> 요소의 스타일을 지정할 수 있는 두 개의 CSS 부분을 base​ ​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