Web Components 아이콘 버튼 개요

    Ignite UI for Web Components 하면 개발자가 등록된 아이콘을 응용 프로그램의 버튼으로 사용할 수 있습니다. 아이콘 구성 요소의 모든 기능을 제공하지만 버튼 구성 요소의 기능도 추가합니다.

    Web Components 아이콘 버튼 예

    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

    아이콘 버튼 구성 요소는 래핑 요소(<button> 또는 <a>)와 래핑된 <igc-icon> 요소의 스타일을 지정할 수 있는 base 및 icon 이라는 두 가지 CSS 부분을 노출합니다.

    igc-icon-button::part(base) {
  padding: 12px;
  color: olive;
}

igc-icon-button::part(icon) {
  --size: 32px;
}

    API References

    Additional Resources