<!DOCTYPE html><html><head><title>Tabs 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-tabs><igc-tabpanel="home"><igc-iconname="home"></igc-icon></igc-tab><igc-tabpanel="search"><igc-iconname="search"></igc-icon></igc-tab><igc-tabpanel="favorite"><igc-iconname="favorite"></igc-icon></igc-tab><igc-tab-panelid="home">Home tab panel</igc-tab-panel><igc-tab-panelid="search">Search tab panel</igc-tab-panel><igc-tab-panelid="favorite">Favorite tab panel</igc-tab-panel></igc-tabs></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 でタブを使用する方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
<!DOCTYPE html><html><head><title>Tabs Alignment</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-radio-groupid="radio-group"alignment="horizontal"><igc-radioname="alignment"value="start"label-position="after"checked>Start</igc-radio><igc-radioname="alignment"value="center"label-position="after">Center</igc-radio><igc-radioname="alignment"value="end"label-position="after">End</igc-radio><igc-radioname="alignment"value="justify"label-position="after">Justify</igc-radio></igc-radio-group><igc-tabsid="tabs"><igc-tabpanel="basics">Basics</igc-tab><igc-tabpanel="details">Details</igc-tab><igc-tabpanel="custom">Custom</igc-tab><igc-tabpanel="disabled"disabled>Disabled</igc-tab><igc-tab-panelid="basics">Basics tab panel</igc-tab-panel><igc-tab-panelid="details">Details tab panel</igc-tab-panel><igc-tab-panelid="custom">Custom tab panel</igc-tab-panel><igc-tab-panelid="disabled">Disabled tab panel won't be displayed</igc-tab-panel></igc-tabs></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
スクローリング
スクロール ボタンは、利用可能なスペースがすべての Web Components タブを描画するのに十分でない場合に表示されます。最初のタブが表示されている場合、スクロール開始ボタンは無効になります。最後のタブが表示されている場合、スクロール終了ボタンは無効になります。スクロール ボタンの 1 つを押すと、その方向のタブが完全に表示されるようにタブがスクロールされます。または、既に表示されている場合は、その方向の前 / 次のタブが表示されます。
<!DOCTYPE html><html><head><title>Tabs Scrolling</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-tabsid="tabs"></igc-tabs></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>Tabs 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.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-tabs><igc-tabpanel="home"><igc-iconslot="prefix"name="home"></igc-icon><span>Home</span><igc-icon-buttonslot="suffix"name="close"variant="flat"></igc-icon-button></igc-tab><igc-tabpanel="search"><igc-iconslot="prefix"name="search"></igc-icon><span>Search</span><igc-icon-buttonslot="suffix"name="close"variant="flat"></igc-icon-button></igc-tab><igc-tabpanel="favorite"><igc-iconslot="prefix"name="favorite"></igc-icon><span>Favorite</span><igc-icon-buttonslot="suffix"name="close"variant="flat"></igc-icon-button></igc-tab><igc-tab-panelid="home">Home tab panel</igc-tab-panel><igc-tab-panelid="search">Search tab panel</igc-tab-panel><igc-tab-panelid="favorite">Favorite tab panel</igc-tab-panel></igc-tabs></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