<!DOCTYPE html><html><head><title>Input 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.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-inputtype="email"label="Subscribe"placeholder="john.doe@mail.com"><spanslot="prefix">Email</span></igc-input></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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
<!DOCTYPE html><html><head><title>Input Prefix & Suffix</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.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-inputtype="tel"label="Phone"placeholder="888 123456"><spanslot="prefix">+359</span><igc-iconname="phone"slot="suffix"></igc-icon></igc-input></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>Input Helper Text</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.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-inputtype="tel"label="Phone"><spanslot="prefix">+359</span><igc-iconname="phone"slot="suffix"></igc-icon><spanslot="helper-text">Ex.: +359 888 123 456</span></igc-input></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>Input Size</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.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-radio-groupid="radio-group"alignment="horizontal"><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-inputid="input-required"type="text"label="Required"value="This input is required"required></igc-input><igc-inputid="input-disabled"type="text"label="Disabled"value="This input is disabled"disabled></igc-input><igc-inputid="input-readonly"type="text"label="Readonly"value="This input is readonly"readonly></igc-input></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>Input 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.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-inputtype="tel"label="Phone"placeholder="888 123456"><spanslot="prefix">+359</span><igc-iconname="phone"slot="suffix"></igc-icon></igc-input></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