Web Components Chip (チップ) の概要
Ignite UI for Web Components Chip は、ユーザーが情報を入力したり、選択したり、コンテンツをフィルタリングしたり、アクションをトリガーしたりするのに役立ちます。
Web Components Chip の例
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
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
npm install igniteui-webcomponents
cmd
次に、以下のように、IgcChipComponent
とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
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
選択可能な Chip を表示するには、Chip の selectable
プロパティを使用できます。
<igc-chip selectable></igc-chip>
html
削除可能可能な Chip を表示するには、Chip の removable
プロパティを使用できます。
<igc-chip removable></igc-chip>
html
コード例
バリアント
Ignite UI for Web Components Chip は、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値の 1 つ (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
無効
Ignite UI for Web Components Chip は、disabled
プロパティを使用して無効にできます。
<igc-chip disabled></igc-chip>
html
Prefix / Suffix (プレフィックス / サフィックス)
IgcChipComponent
コンポーネントの Prefix
と Suffix
の部分とそれらのスロットを使用して、Chip のメイン コンテンツの前後に異なるコンテンツを追加できます。デフォルトの選択アイコンと削除アイコンが用意されていますが、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
Size (サイズ)
ユーザーが --ig-size
CSS 変数を利用して IgcChipComponent
のサイズを選択できるようにします。
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
スタイル設定
Chip コンポーネントは、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