<!DOCTYPE html><html><head><title>Select Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-itemvalue="Orange">Orange</igc-select-item><igc-select-itemvalue="Apple">Apple</igc-select-item><igc-select-itemvalue="Banana">Banana</igc-select-item><igc-select-itemvalue="Mango">Mango</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="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 をインストールする必要があります:
<!DOCTYPE html><html><head><title>Select Item</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-item><igc-iconslot="prefix"name="hotel"collection="material"></igc-icon>
Hotel
</igc-select-item><igc-select-itemdisabled><igc-iconslot="prefix"name="grocery"collection="material"></igc-icon>
Grocery
</igc-select-item><igc-select-itemselected><igc-iconslot="prefix"name="restaurant"collection="material"></igc-icon>
Restaurant
</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Select Header</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-header>Tasks</igc-select-header><igc-select-itemvalue="spec"selected>Specification</igc-select-item><igc-select-itemvalue="implement">Implementation</igc-select-item><igc-select-itemvalue="test"disabled>Testing</igc-select-item><igc-select-itemvalue="docs">Documentation</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Select Group</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-group><spanslot="label">Europe</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group><igc-select-groupdisabled><spanslot="label">Asia</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
China
<spanslot="suffix">CN</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Japan
<spanslot="suffix">JP</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
India
<spanslot="suffix">IN</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Thailand
<spanslot="suffix">TH</span></igc-select-item></igc-select-group><igc-select-group><spanslot="label">North America</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
USA
<spanslot="suffix">US</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Canada
<spanslot="suffix">CA</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Mexico
<spanslot="suffix">MX</span></igc-select-item></igc-select-group></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<igc-select><igc-select-group><spanslot="label">Europe</span><igc-select-item><igc-icon @ref="IconRef"slot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group></igc-select>html
<!DOCTYPE html><html><head><title>Select Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-selectlabel="Destinations:"><igc-iconslot="prefix"name="place"collection="material"></igc-icon><spanslot="helper-text">Choose the desired place</span><igc-select-groupdisabled><spanslot="label">Europe</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-itemselected><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group><igc-select-group><spanslot="label">North America</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
USA
<spanslot="suffix">US</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Canada
<spanslot="suffix">CA</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Mexico
<spanslot="suffix">MX</span></igc-select-item></igc-select-group></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css