Ignite UI for Web Components List 要素は、項目のグループを番号の付いた形式または黒丸の付いた形式のいずれかで提示する時に非常に役に立ちます。さまざまなレイアウト要素の配列を含むテキスト アイテムの単純なリスト、またはより複雑なリストを作成できます。IgcListComponent コンポーネントは項目の行を表示し、1 つ以上のヘッダーもサポートします。各リスト項目は完全にテンプレート化可能であり、有効な HTML またはその他のコンポーネントをサポートします。
<!DOCTYPE html><html><head><title>List Overview</title><metacharset="UTF-8" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /><linkhref="https://static.infragistics.com/xplatform/css/samples/custom-legend.css"rel="stylesheet"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radio-groupid="radio-group"alignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="size"value="small"label-position="after">Small</igc-radio><igc-radioname="size"value="medium"label-position="after"checked >Medium</igc-radio><igc-radioname="size"value="large"label-position="after">Large</igc-radio></igc-radio-group><igc-listid="list"><igc-list-header><h1>Contacts</h1></igc-list-header><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/8.jpg"shape="circle">AA</igc-avatar><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/17.jpg"shape="circle">AA</igc-avatar><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/9.jpg"shape="circle">AA</igc-avatar><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item></igc-list></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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
List Web コンポーネントは、項目の垂直リストを簡単に表示できます。
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。
<!DOCTYPE html><html><head><title>Add List Items</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.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-listid="list"><igc-list-header>Header</igc-list-header><igc-list-item><h2slot="title">Item 1</h2></igc-list-item><igc-list-item><h2slot="title">Item 2</h2></igc-list-item><igc-list-item><h2slot="title">Item 3</h2></igc-list-item></igc-list></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>List Item Content</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.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-list><igc-list-header><h1>Contacts</h1></igc-list-header><igc-list-item><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span></igc-list-item><igc-list-item><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span></igc-list-item><igc-list-item><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span></igc-list-item></igc-list></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-list><igc-list-header><h1>Job Positions</h1></igc-list-header><igc-list-item><igc-avatarslot="start"src="https://randomuser.me/api/portraits/men/27.jpg"shape="circle">
AA
</igc-avatar><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://randomuser.me/api/portraits/men/1.jpg"shape="circle">
AA
</igc-avatar><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://randomuser.me/api/portraits/women/50.jpg"shape="circle">
AA
</igc-avatar><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item></igc-list>html
<!DOCTYPE html><html><head><title>List Overview</title><metacharset="UTF-8" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /><linkhref="https://static.infragistics.com/xplatform/css/samples/custom-legend.css"rel="stylesheet"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radio-groupid="radio-group"alignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="size"value="small"label-position="after">Small</igc-radio><igc-radioname="size"value="medium"label-position="after"checked >Medium</igc-radio><igc-radioname="size"value="large"label-position="after">Large</igc-radio></igc-radio-group><igc-listid="list"><igc-list-header><h1>Contacts</h1></igc-list-header><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/8.jpg"shape="circle">AA</igc-avatar><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/17.jpg"shape="circle">AA</igc-avatar><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/9.jpg"shape="circle">AA</igc-avatar><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span><igc-buttonslot="end"variant="outlined">
Text
</igc-button><igc-buttonslot="end"variant="outlined">
Call
</igc-button></igc-list-item></igc-list></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>List Styling</title><metacharset="UTF-8" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /><linkhref="https://static.infragistics.com/xplatform/css/samples/custom-legend.css"rel="stylesheet"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-list><igc-list-header><h1>Contacts</h1></igc-list-header><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/8.jpg"shape="circle">AA</igc-avatar><h2slot="title">Terrance Orta</h2><spanslot="subtitle">770-504-2217</span><igc-buttonslot="end"variant="contained">
Text
</igc-button><igc-buttonslot="end"variant="contained">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/17.jpg"shape="circle">AA</igc-avatar><h2slot="title">Richard Mahoney</h2><spanslot="subtitle">423-676-2869</span><igc-buttonslot="end"variant="contained">
Text
</igc-button><igc-buttonslot="end"variant="contained">
Call
</igc-button></igc-list-item><igc-list-item><igc-avatarslot="start"src="https://static.infragistics.com/xplatform/images/avatars/9.jpg"shape="circle">AA</igc-avatar><h2slot="title">Donna Price</h2><spanslot="subtitle">859-496-2817</span><igc-buttonslot="end"variant="contained">
Text
</igc-button><igc-buttonslot="end"variant="contained">
Call
</igc-button></igc-list-item></igc-list></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