Web Components Chip 개요
Ignite UI for Web Components 칩은 사람들이 정보를 입력하거나, 선택하거나, 콘텐츠를 필터링하거나, 작업을 트리거하는 데 도움이 됩니다.
Web Components Chip Example
import { defineComponents, IgcChipComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcIconComponent, IgcChipComponent);
export class ChipOverview {
constructor() {
registerIconFromText(
'cancel',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
);
registerIconFromText(
'select',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
);
}
}
new ChipOverview();
ts<!DOCTYPE html>
<html>
<head>
<title>Default Chip</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample center">
<igc-chip selectable removable>
Chip
</igc-chip>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Usage
먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.
npm install igniteui-webcomponents
cmd
그런 다음 다음과 같이 필요한 CSS인 IgcChipComponent
를 가져오고 해당 모듈을 등록해야 합니다.
import { defineComponents, IgcChipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcChipComponent);
ts
Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.
사용을 IgcChipComponent
시작하는 가장 간단한 방법은 다음과 같습니다.
<igc-chip></igc-chip>
html
선택 가능한 칩을 표시하려면 칩의 selectable
속성을 사용할 수 있습니다.
<igc-chip selectable></igc-chip>
html
이동식 칩을 표시하려면 칩의 removable
속성을 사용할 수 있습니다.
<igc-chip removable></igc-chip>
html
Examples
Variants
Ignite UI for Web Components 칩은 사전 정의된 여러 스타일 변형을 지원합니다. 지원되는 값 중 하나를 할당하여 변형을 변경할 수 있습니다. Primary
, Info
, Success
, Warning
또는 Danger
에 variant
재산.
<igc-chip variant="success"></igc-chip>
html
import { defineComponents, IgcChipComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcIconComponent, IgcChipComponent);
export class ChipVariants {
constructor() {
registerIconFromText(
'cancel',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
);
registerIconFromText(
'select',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
);
}
}
new ChipVariants();
ts<!DOCTYPE html>
<html>
<head>
<title>Default Chip</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample center" style="flex-direction: row; gap: 8px;">
<igc-chip variant="primary" selectable removable>
Primary
</igc-chip>
<igc-chip variant="info" selectable removable>
Info
</igc-chip>
<igc-chip variant="success" selectable removable>
Success
</igc-chip>
<igc-chip variant="warning" selectable removable>
Warning
</igc-chip>
<igc-chip variant="danger" selectable removable>
Danger
</igc-chip>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Disabled
Ignite UI for Web Components 칩은 속성을 사용하여 사용하지 않도록 설정할 수 있습니다 disabled
.
<igc-chip disabled></igc-chip>
html
Prefix / Suffix
와 더불어 Prefix
그리고 Suffix
일부 IgcChipComponent
구성 요소와 해당 슬롯을 사용하여 칩의 주요 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다. 기본 선택 및 제거 아이콘을 제공하지만 다음을 사용하여 사용자 정의할 수 있습니다. IgcSelectComponent
그리고 Remove
슬롯. 다음을 사용하여 기본 콘텐츠 앞이나 뒤에 추가 콘텐츠를 추가할 수 있습니다. Start
그리고 End
슬롯.
<igc-chip selectable removable>
<span slot="select"><igc-icon name="verified-account"></igc-icon></span>
<span slot="start"><igc-icon name="brush"></igc-icon></span>
Chip
<span slot="end"><igc-icon name="blood"></igc-icon></span>
<span slot="remove"><igc-icon name="pacifier"></igc-icon></span>
</igc-chip>
html
import { defineComponents, IgcChipComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcIconComponent, IgcChipComponent);
export class ChipMultiple {
constructor() {
registerIconFromText(
'cancel',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
);
registerIconFromText(
'select',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
);
registerIconFromText(
'brick-wall',
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bpbrick-wall-desc bpbrick-wall-title"><title id="bpbrick-wall-title">Brick Wall Icon</title><desc id="bpbrick-wall-desc">A picture depicting a wall made of bricks.</desc><path d="M6 5H2V1h4zm10-4H8v4h8zM2 11h8V7H2zm10 0h8V7h-8zM22 1h-4v4h4zM6 13H2v4h4zm10 0H8v4h8zM2 23h8v-4H2zm10 0h8v-4h-8zm10-10h-4v4h4z"/></svg>'
);
registerIconFromText(
'brush',
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bqbrush-desc bqbrush-title"><title id="bqbrush-title">Brush Icon</title><desc id="bqbrush-desc">A picture showing a painting brush.</desc><path d="M13.093 6.743a1.074 1.074 0 011.306.251l.237.237-6.4 6.4-.242-.231a1.074 1.074 0 01-.251-1.306c.446-.693 1.553-2.516.515-3.554-1.584-1.585-2.225-.94-3.809-2.528S2.714 3 3.354 2.354s2.073-.489 3.658 1.095.943 2.225 2.527 3.809c1.038 1.042 2.861-.069 3.554-.515zm6.93 5.874L15.31 7.9 8.9 14.31l4.433 4.433c-.039.159-.084.327-.137.508 0 0-.8 2.749.8 2.749s.8-2.749.8-2.749a10.75 10.75 0 01-.272-1.14L16.2 16.44a8.944 8.944 0 00-2.072-3.314s.555-.545 3.323 2.063l.811-.811-1.54-2.5 2.5 1.539z"/></svg>'
);
registerIconFromText(
'custom-remove',
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" /> </svg>'
);
registerIconFromText(
'custom-select',
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z" /></svg>'
);
registerIconFromText(
'dog-icon',
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M18,4C16.29,4 15.25,4.33 14.65,4.61C13.88,4.23 13,4 12,4C11,4 10.12,4.23 9.35,4.61C8.75,4.33 7.71,4 6,4C3,4 1,12 1,14C1,14.83 2.32,15.59 4.14,15.9C4.78,18.14 7.8,19.85 11.5,20V15.72C10.91,15.35 10,14.68 10,14C10,13 12,13 12,13C12,13 14,13 14,14C14,14.68 13.09,15.35 12.5,15.72V20C16.2,19.85 19.22,18.14 19.86,15.9C21.68,15.59 23,14.83 23,14C23,12 21,4 18,4M4.15,13.87C3.65,13.75 3.26,13.61 3,13.5C3.25,10.73 5.2,6.4 6.05,6C6.59,6 7,6.06 7.37,6.11C5.27,8.42 4.44,12.04 4.15,13.87M9,12A1,1 0 0,1 8,11C8,10.46 8.45,10 9,10A1,1 0 0,1 10,11C10,11.56 9.55,12 9,12M15,12A1,1 0 0,1 14,11C14,10.46 14.45,10 15,10A1,1 0 0,1 16,11C16,11.56 15.55,12 15,12M19.85,13.87C19.56,12.04 18.73,8.42 16.63,6.11C17,6.06 17.41,6 17.95,6C18.8,6.4 20.75,10.73 21,13.5C20.75,13.61 20.36,13.75 19.85,13.87Z" /> </svg>'
);
}
}
new ChipMultiple();
ts<!DOCTYPE html>
<html>
<head>
<title>Default Chip</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample center" style="flex-direction: row; gap: 8px">
<igc-chip selectable removable>
<span slot="select"><igc-icon name="custom-select"></igc-icon></span>
Custom Icons
<span slot="remove"><igc-icon name="custom-remove"></igc-icon></span>
</igc-chip>
<igc-chip removable>
<span slot="start"><igc-icon name="brush"></igc-icon></span>
Start Slot
</igc-chip>
<igc-chip selectable>
End Slot
<span slot="end"><igc-icon name="brick-wall"></igc-icon></span>
</igc-chip>
<igc-chip disabled>
Disabled Chip
<span slot="end"><igc-icon name="dog-icon"></igc-icon></span>
</igc-chip>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
크기
우리는 사용자가 크기를 선택할 수 있도록 허용합니다. IgcChipComponent
을 활용하여--ig-size
CSS 변수:
igc-chip {
--ig-size: var(--ig-size-large);
}
css
import { defineComponents, IgcChipComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ChipSize.css';
defineComponents(IgcIconComponent, IgcChipComponent);
export class ChipSize {
constructor() {
registerIconFromText(
'cancel',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
);
registerIconFromText(
'select',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
);
}
}
new ChipSize();
ts<!DOCTYPE html>
<html>
<head>
<title>Default Chip</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample center" style="flex-direction: row; gap: 8px; align-items: baseline;">
<igc-chip class="small" selectable removable>
Chip
</igc-chip>
<igc-chip class="medium" selectable removable>
Chip
</igc-chip>
<igc-chip class="large" selectable removable>
Chip
</igc-chip>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>
</body>
</html>
html.container {
align-items: flex-start !important;
}
.small {
--ig-size: var(--ig-size-small);
}
.medium {
--ig-size: var(--ig-size-medium);
}
.large {
--ig-size: var(--ig-size-large);
}
css/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Styling
칩 구성 요소는 모든 스타일 속성을 변경하는 데 사용할 수 있는 Base
, Prefix
, Sufix
부분 및 여러 슬롯을 노출합니다.
igc-chip::part(base) {
background: #011627;
color: #ECAA53;
}
igc-chip::part(suffix) {
color: #B7B6C2;
}
css
import { defineComponents, IgcChipComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ChipStyle.css';
defineComponents(IgcIconComponent, IgcChipComponent);
export class ChipStyling {
constructor() {
registerIconFromText(
'cancel',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
);
registerIconFromText(
'select',
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
);
}
}
new ChipStyling();
ts<!DOCTYPE html>
<html>
<head>
<title>Styled Chip</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample center" style="flex-direction: row; gap: 8px;">
<igc-chip selectable removable>
Chip
</igc-chip>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>
</body>
</html>
htmligc-chip::part(base) {
background: #011627;
color: #ECAA53;
}
igc-chip::part(suffix) {
color: #B7B6C2;
}
css/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css