React 아이콘 버튼 개요

Ignite UI for React Icon Button 구성 요소를 사용하면 개발자가 등록된 아이콘을 애플리케이션에서 버튼으로 사용할 수 있습니다. 그것은 의 모든 기능을 가지고 있습니다. 아이콘 구성 요소이지만 단추 구성 요소뿐만 아니라.

React 아이콘 버튼 예제

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

export default class IconButtonSize extends React.Component<any, any> {

    public smallIcon: IgrIconButton;
    public mediumIcon: IgrIconButton;
    public largeIcon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        registerIconFromText("thumb-up", iconText, "material");
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton className="size-small"
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-medium"
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-large"
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonSize/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.size-small {
    margin: 10px;
    --ig-size: var(--ig-size-small);
}

.size-medium {
    margin: 10px;
    --ig-size: var(--ig-size-medium);
}

.size-large {
    margin: 10px;
    --ig-size: var(--ig-size-large);
}css

용법

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

npm install igniteui-react
cmd

그런 다음 다음과 같이 필요한 CSS인 IgrIconButton 가져오고 해당 모듈을 등록해야 합니다.

import { IgrIconButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
tsx

<IgrIconButton name="thumb-up" collection="material"></IgrIconButton>
tsx

예

변종

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

export default class IconButtonVariant extends React.Component<any, any> {

    public icon1: IgrIconButton;
    public icon2: IgrIconButton;
    public icon3: IgrIconButton;

    constructor(props: any) {
        super(props); 
        registerIconFromText("thumb-up", iconText, "material");
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton style={{margin: "10px"}}
                        name="thumb-up" 
                        collection="material"
                        variant="flat">
                    </IgrIconButton>
                    <IgrIconButton style={{margin: "10px"}}
                        name="thumb-up" 
                        collection="material" 
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton style={{margin: "10px"}}
                        name="thumb-up" 
                        collection="material" 
                        variant="outlined">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonVariant/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

<IgrIconButton name="search" variant="contained"></IgrIconButton>
tsx

크기

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

export default class IconButtonSize extends React.Component<any, any> {

    public smallIcon: IgrIconButton;
    public mediumIcon: IgrIconButton;
    public largeIcon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        registerIconFromText("thumb-up", iconText, "material");
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton className="size-small"
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-medium"
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-large"
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonSize/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.size-small {
    margin: 10px;
    --ig-size: var(--ig-size-small);
}

.size-medium {
    margin: 10px;
    --ig-size: var(--ig-size-medium);
}

.size-large {
    margin: 10px;
    --ig-size: var(--ig-size-large);
}css

<IgrIconButton className="size-medium" name="thumb-up"></IgrIconButton>
tsx

.size-medium {
    --ig-size: var(--ig-size-medium);
}
css

유형

아이콘 버튼 구성 요소는 href 속성이 설정되면 내부 구조를 <button>에서 <a> 유형 요소로 변경합니다. 이 경우 아이콘 버튼은 일반 링크로 간주될 수 있습니다. href 속성을 설정하면 아이콘 버튼의 rel, target 및 download 속성도 설정할 수 있습니다.

<IgrIconButton name="thumb-up" collection="material" href="https://duckduckgo.com" target="_blank">
</IgrIconButton>
tsx

미러링됨

일부 아이콘은 오른쪽에서 왼쪽(RTL) 모드에서 사용될 때 약간 다르게 표시되어야 합니다. 이러한 이유로 우리는 설정 시 아이콘 버튼을 수평으로 뒤집는 mirrored 속성을 제공합니다.

<IgrIconButton name="thumb-up" mirrored={true}></IgrIconButton>
tsx

스타일링

구성 요소는 IgrIconButton 래핑 요소(<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);
}
css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, registerIconFromText } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./IconButtonStyling.css";

const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

export default class IconButtonStyling extends React.Component<any, any> {

    public icon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        registerIconFromText("thumb-up", iconText, "material");
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrIconButton style={{margin: "10px"}}
                    name="thumb-up" 
                    collection="material"
                    variant="contained">
                </IgrIconButton>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonStyling/>);
tsx


igc-icon-button[variant=contained]:not([disabled])::part(base) {
    padding: 12px;
    color: olive;
    background-color: lightgray;
    --ig-size: var(--ig-size-small);
  }
  
igc-icon-button::part(icon) {
  --size: 32px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

React 아이콘 버튼 개요

React 아이콘 버튼 예제

용법

예

변종

크기

유형

미러링됨

스타일링

API 참조

추가 리소스