React 아이콘 버튼 개요

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

React Icon Button Example

EXAMPLE

TSX

CSS

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

IgrIconButtonModule.register();

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

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

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton className="size-small" ref={this.smallRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-medium" ref={this.mediumRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-large" ref={this.largeRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.smallIcon = icon;
        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>';
        this.smallIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.mediumIcon = icon;
        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>';
        this.mediumIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.largeIcon = icon;
        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>';
        this.largeIcon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// 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コピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Usage

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

npm install igniteui-react
cmd

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

import { IgrIconButtonModule, IgrIconButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrIconButtonModule.register();
tsx

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

Examples

Variant

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

EXAMPLE

TSX

CSS

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

IgrIconButtonModule.register();

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

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

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton style={{margin: "10px"}} ref={this.smallRef} 
                        name="thumb-up" 
                        collection="material"
                        variant="flat">
                    </IgrIconButton>
                    <IgrIconButton style={{margin: "10px"}} ref={this.mediumRef} 
                        name="thumb-up" 
                        collection="material" 
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton style={{margin: "10px"}} ref={this.largeRef} 
                        name="thumb-up" 
                        collection="material" 
                        variant="outlined">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon1 = icon;
        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>';
        this.icon1.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon2 = icon;
        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>';
        this.icon2.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon3 = icon;
        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>';
        this.icon3.registerIconFromText("thumb-up", iconText, "material");
    }
}

// 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コピー

Edit in: Codesandbox

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

크기

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

EXAMPLE

TSX

CSS

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

IgrIconButtonModule.register();

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

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

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton className="size-small" ref={this.smallRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-medium" ref={this.mediumRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-large" ref={this.largeRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.smallIcon = icon;
        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>';
        this.smallIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.mediumIcon = icon;
        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>';
        this.mediumIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.largeIcon = icon;
        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>';
        this.largeIcon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// 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コピー

Edit in: Codesandbox

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

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

Type

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

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

Mirrored

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

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

Styling

구성 요소는 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

EXAMPLE

TSX

IconButtonStyling.css

index.css

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

IgrIconButtonModule.register();

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

    public icon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.iconRef = this.iconRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrIconButton style={{margin: "10px"}} ref={this.iconRef} 
                    name="thumb-up" 
                    collection="material"
                    variant="contained">
                </IgrIconButton>
            </div>
        );
    }
    
    public iconRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon = icon;
        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>';
        this.icon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// 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コピー

Edit in: Codesandbox

API References

• IgrButtonBase
• IgrButton
• IgrIconButton
• IgrIcon
• Styling & Themes

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub