<!DOCTYPE html><html><head><title>CardOverview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"style="align-items: center;"><divclass="card-wrapper"><igc-card><igc-card-media><imgsrc="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></igc-card-media><igc-card-header><h3slot="title">New York City</h3><h5slot="subtitle">City in New York</h5></igc-card-header><igc-card-content><p>New York City comprises 5 boroughs sitting where the
Hudson River meets the Atlantic Ocean. At its core is Manhattan,
a densely populated borough that’s among the world’s major commercial,
financial and cultural centers.</p></igc-card-content><igc-card-actions><igc-buttonslot="start"><igc-ripple></igc-ripple>
Read more
</igc-button><divslot="end"><igc-icon-buttonname="twitter"style="margin-right: 10px;"><igc-ripple></igc-ripple></igc-icon-button><igc-icon-buttonname="facebook"><igc-ripple></igc-ripple></igc-icon-button></div></igc-card-actions></igc-card></div></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
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
次に、デモのカード テンプレートを表すために、以下のコードを追加します:
<igc-card><igc-card-media><imgsrc="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></igc-card-media><igc-card-header><h3slot="title">New York</h3><h5slot="subtitle">City in New York</h5></igc-card-header><igc-card-content><p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers.</p></igc-card-content><igc-card-actions><igc-buttonslot="start"><igc-ripple></igc-ripple>
Read more
</igc-button><divslot="end"><igc-icon-buttonname="twitter"style="margin-right: 10px;"><igc-ripple></igc-ripple></igc-icon-button><igc-icon-buttonname="facebook"><igc-ripple></igc-ripple></igc-icon-button></div></igc-card-actions></igc-card>html
<igc-cardoutlined><divclass="card-horizontal"><div><igc-card-header><imgsrc="ROZES-Under-the-Grave.jpg"slot="thumbnail"><h5slot="title">Rozes</h5><h5slot="subtitle">Under the Grave (2016)</h5></igc-card-header><igc-card-content><p>As I have always said: I write what’s real and what’s true,
even if it means throwing myself under the bus.</p></igc-card-content></div><divclass="divider"></div><igc-card-actions><igc-icon-buttonname="previous"></igc-icon-button><igc-icon-buttonname="play"></igc-icon-button><igc-icon-buttonname="next"></igc-icon-button></igc-card-actions></div></igc-card>html
<!DOCTYPE html><html><head><title>Horizontal Card Layout</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"style="align-items: center;"><divclass="card-wrapper"><igc-card><divclass="card-horizontal"><div><igc-card-header><imgsrc="https://static.infragistics.com/xplatform/images/music/rozes.jpg"slot="thumbnail"><h5slot="title">Rozes</h5><h5slot="subtitle">Under the Grave (2016)</h5></igc-card-header><igc-card-content><p>As I have always said: I write what’s real and what’s true,
even if it means throwing myself under the bus.</p></igc-card-content></div><divclass="divider"></div><igc-card-actions><spanclass="material-icons">skip_previous</span><spanclass="material-icons">play_arrow</span><spanclass="material-icons">skip_next</span></igc-card-actions></div></igc-card></div></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
<igc-card><divclass="semi-horizontal"><div><igc-card-header><igc-avatarsrc="mellow_d.jpg"slot="thumbnail">MD</igc-avatar><h5slot="title">HERE</h5><h5slot="subtitle">by Mellow D</h5></igc-card-header><igc-card-content><p>Far far away, behind the word mountains,
far from the countries Vokalia and Consonantia,
there live the blind texts.</p></igc-card-content><igc-card-actions><igc-button>play album</igc-button></igc-card-actions></div><igc-card-mediaclass="card-media"><imgsrc="here_media.jpg"></igc-card-media></div></igc-card>html
<!DOCTYPE html><html><head><title>Card Semi-horizontal Layout</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"style="align-items: center;"><divclass="card-wrapper"><igc-card><divclass="semi-horizontal"><div><igc-card-header><igc-avatarsrc="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg"slot="thumbnail">MD</igc-avatar><h5slot="title">HERE</h5><h5slot="subtitle">by Mellow D</h5></igc-card-header><igc-card-content><p>Far far away, behind the word mountains,
far from the countries Vokalia and Consonantia,
there live the blind texts.</p></igc-card-content><igc-card-actions><igc-button>play album</igc-button></igc-card-actions></div><igc-card-mediaclass="card-media"><imgsrc="https://static.infragistics.com/xplatform/images/music/singer_female.jpg"></igc-card-media></div></igc-card></div></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-card-actions><igc-buttonslot="end"><igc-ripple></igc-ripple>
Read more
</igc-button><divslot="start"><igc-icon-buttonname="twitter"><igc-ripple></igc-ripple></igc-icon-button><igc-icon-buttonname="facebook"><igc-ripple></igc-ripple></igc-icon-button></div></igc-card-actions>html
<!DOCTYPE html><html><head><title>Card Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"style="align-items: center;"><divclass="card-wrapper"><igc-card><igc-card-mediaheight="180px"><imgsrc="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"></igc-card-media><igc-card-header><h3slot="title">Jane Doe</h3><h5slot="subtitle">Professional Photographer</h5></igc-card-header><igc-card-content><p>Hi! I'm Jane, photographer and filmmaker.
Photography is a way of feeling, of touching,
of loving. What you have caught on film is captured forever...
it remembers little things, long after you have
forgotten everything.</p></igc-card-content><igc-card-actions><divslot="end"><igc-icon-buttonname="twitter"><igc-ripple></igc-ripple></igc-icon-button><igc-icon-buttonname="facebook"><igc-ripple></igc-ripple></igc-icon-button><igc-icon-buttonname="instagram"><igc-ripple></igc-ripple></igc-icon-button></div></igc-card-actions></igc-card></div></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