carbon-components-angular
Version:
Next generation components
867 lines (802 loc) • 41.8 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>carbon-components-angular documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
<style>
footer.carbon {
position: absolute;
bottom: 0;
width: 100%;
z-index: 9999;
}
#root > div {
/*
* Subtracting the height of the footer to prevent
* overlaying the footer ontop of content
*/
height: calc(100vh - 48px);
}
</style>
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="../" class="navbar-brand">carbon-components-angular documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content module">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Modules</li>
<li class="breadcrumb-item" >TabsModule</li>
</ol>
<div class="text-center module-graph-container">
<div id="module-graph-svg">
<!-- Generated by graphviz version 2.47.0 (20210316.0004)
-->
<!-- Title: dependencies Pages: 1 -->
<svg width="2948pt" height="349pt"
viewBox="0.00 0.00 2948.00 349.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 345)">
<title>dependencies</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-345 2944,-345 2944,4 -4,4"/>
<text text-anchor="start" x="1449.01" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="1236,-10 1236,-30 1256,-30 1256,-10 1236,-10"/>
<text text-anchor="start" x="1259.63" y="-15.4" font-family="Times-12" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="1349,-10 1349,-30 1369,-30 1369,-10 1349,-10"/>
<text text-anchor="start" x="1372.73" y="-15.4" font-family="Times-12" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="1435,-10 1435,-30 1455,-30 1455,-10 1435,-10"/>
<text text-anchor="start" x="1458.78" y="-15.4" font-family="Times-12" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="1532,-10 1532,-30 1552,-30 1552,-10 1532,-10"/>
<text text-anchor="start" x="1555.67" y="-15.4" font-family="Times-12" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="1628,-10 1628,-30 1648,-30 1648,-10 1628,-10"/>
<text text-anchor="start" x="1651.73" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_TabsModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-333 2932,-333 2932,-70 8,-70"/>
</g>
<g id="clust7" class="cluster">
<title>cluster_TabsModule_TabHeaderComponent_providers</title>
<polygon fill="none" stroke="black" points="2234,-78 2234,-195 2924,-195 2924,-78 2234,-78"/>
</g>
<g id="clust6" class="cluster">
<title>cluster_TabsModule_TabHeader_providers</title>
<polygon fill="none" stroke="black" points="1626,-78 1626,-195 2226,-195 2226,-78 1626,-78"/>
</g>
<g id="clust2" class="cluster">
<title>cluster_TabsModule_declarations</title>
<polygon fill="none" stroke="black" points="16,-143 16,-195 1285,-195 1285,-143 16,-143"/>
</g>
<g id="clust16" class="cluster">
<title>cluster_TabsModule_imports</title>
<polygon fill="none" stroke="black" points="1293,-143 1293,-195 1618,-195 1618,-143 1293,-143"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_TabsModule_IconTab_providers</title>
<polygon fill="none" stroke="black" points="879,-78 879,-130 1365,-130 1365,-78 879,-78"/>
</g>
<g id="clust17" class="cluster">
<title>cluster_TabsModule_exports</title>
<polygon fill="none" stroke="black" points="274,-273 274,-325 1712,-325 1712,-273 274,-273"/>
</g>
<!-- BaseTabHeader -->
<g id="node1" class="node">
<title>BaseTabHeader</title>
<polygon fill="#ffffb3" stroke="black" points="1276.89,-187 1171.11,-187 1171.11,-151 1276.89,-151 1276.89,-187"/>
<text text-anchor="middle" x="1224" y="-164.8" font-family="Times,serif" font-size="14.00">BaseTabHeader</text>
</g>
<!-- TabsModule -->
<g id="node14" class="node">
<title>TabsModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1038.26,-252 1035.26,-256 1014.26,-256 1011.26,-252 951.74,-252 951.74,-216 1038.26,-216 1038.26,-252"/>
<text text-anchor="middle" x="995" y="-229.8" font-family="Times,serif" font-size="14.00">TabsModule</text>
</g>
<!-- BaseTabHeader->TabsModule -->
<g id="edge1" class="edge">
<title>BaseTabHeader->TabsModule</title>
<path fill="none" stroke="black" d="M1241.56,-187.24C1241.56,-202.57 1241.56,-222 1241.56,-222 1241.56,-222 1048.51,-222 1048.51,-222"/>
<polygon fill="black" stroke="black" points="1048.51,-218.5 1038.51,-222 1048.51,-225.5 1048.51,-218.5"/>
</g>
<!-- IconTab -->
<g id="node2" class="node">
<title>IconTab</title>
<polygon fill="#ffffb3" stroke="black" points="1153.14,-187 1090.86,-187 1090.86,-151 1153.14,-151 1153.14,-187"/>
<text text-anchor="middle" x="1122" y="-164.8" font-family="Times,serif" font-size="14.00">IconTab</text>
</g>
<!-- IconTab->TabsModule -->
<g id="edge2" class="edge">
<title>IconTab->TabsModule</title>
<path fill="none" stroke="black" d="M1119.47,-187.05C1119.47,-201.37 1119.47,-219 1119.47,-219 1119.47,-219 1048.53,-219 1048.53,-219"/>
<polygon fill="black" stroke="black" points="1048.53,-215.5 1038.53,-219 1048.53,-222.5 1048.53,-215.5"/>
</g>
<!-- Tab -->
<g id="node3" class="node">
<title>Tab</title>
<polygon fill="#ffffb3" stroke="black" points="1073,-187 1019,-187 1019,-151 1073,-151 1073,-187"/>
<text text-anchor="middle" x="1046" y="-164.8" font-family="Times,serif" font-size="14.00">Tab</text>
</g>
<!-- Tab->TabsModule -->
<g id="edge4" class="edge">
<title>Tab->TabsModule</title>
<path fill="none" stroke="black" d="M1028.69,-187.11C1028.69,-187.11 1028.69,-205.99 1028.69,-205.99"/>
<polygon fill="black" stroke="black" points="1025.19,-205.99 1028.69,-215.99 1032.19,-205.99 1025.19,-205.99"/>
</g>
<!-- TabHeader -->
<g id="node4" class="node">
<title>TabHeader</title>
<polygon fill="#ffffb3" stroke="black" points="1838.18,-187 1759.82,-187 1759.82,-151 1838.18,-151 1838.18,-187"/>
<text text-anchor="middle" x="1799" y="-164.8" font-family="Times,serif" font-size="14.00">TabHeader</text>
</g>
<!-- TabHeader->TabsModule -->
<g id="edge5" class="edge">
<title>TabHeader->TabsModule</title>
<path fill="none" stroke="black" d="M1799,-187.17C1799,-206.09 1799,-233 1799,-233 1799,-233 1048.51,-233 1048.51,-233"/>
<polygon fill="black" stroke="black" points="1048.51,-229.5 1038.51,-233 1048.51,-236.5 1048.51,-229.5"/>
</g>
<!-- TabHeaderComponent -->
<g id="node5" class="node">
<title>TabHeaderComponent</title>
<polygon fill="#ffffb3" stroke="black" points="2517.51,-187 2374.49,-187 2374.49,-151 2517.51,-151 2517.51,-187"/>
<text text-anchor="middle" x="2446" y="-164.8" font-family="Times,serif" font-size="14.00">TabHeaderComponent</text>
</g>
<!-- TabHeaderComponent->TabsModule -->
<g id="edge7" class="edge">
<title>TabHeaderComponent->TabsModule</title>
<path fill="none" stroke="black" d="M2446,-187.31C2446,-207.15 2446,-236 2446,-236 2446,-236 1048.43,-236 1048.43,-236"/>
<polygon fill="black" stroke="black" points="1048.43,-232.5 1038.43,-236 1048.43,-239.5 1048.43,-232.5"/>
</g>
<!-- TabHeaderGroup -->
<g id="node6" class="node">
<title>TabHeaderGroup</title>
<polygon fill="#ffffb3" stroke="black" points="1000.95,-187 887.05,-187 887.05,-151 1000.95,-151 1000.95,-187"/>
<text text-anchor="middle" x="944" y="-164.8" font-family="Times,serif" font-size="14.00">TabHeaderGroup</text>
</g>
<!-- TabHeaderGroup->TabsModule -->
<g id="edge9" class="edge">
<title>TabHeaderGroup->TabsModule</title>
<path fill="none" stroke="black" d="M976.3,-187.11C976.3,-187.11 976.3,-205.99 976.3,-205.99"/>
<polygon fill="black" stroke="black" points="972.8,-205.99 976.3,-215.99 979.8,-205.99 972.8,-205.99"/>
</g>
<!-- TabHeaderGroupVertical -->
<g id="node7" class="node">
<title>TabHeaderGroupVertical</title>
<polygon fill="#ffffb3" stroke="black" points="869.53,-187 710.47,-187 710.47,-151 869.53,-151 869.53,-187"/>
<text text-anchor="middle" x="790" y="-164.8" font-family="Times,serif" font-size="14.00">TabHeaderGroupVertical</text>
</g>
<!-- TabHeaderGroupVertical->TabsModule -->
<g id="edge10" class="edge">
<title>TabHeaderGroupVertical->TabsModule</title>
<path fill="none" stroke="black" d="M865.81,-187.05C865.81,-201.37 865.81,-219 865.81,-219 865.81,-219 941.62,-219 941.62,-219"/>
<polygon fill="black" stroke="black" points="941.62,-222.5 951.62,-219 941.62,-215.5 941.62,-222.5"/>
</g>
<!-- TabHeaders -->
<g id="node8" class="node">
<title>TabHeaders</title>
<polygon fill="#ffffb3" stroke="black" points="692.62,-187 609.38,-187 609.38,-151 692.62,-151 692.62,-187"/>
<text text-anchor="middle" x="651" y="-164.8" font-family="Times,serif" font-size="14.00">TabHeaders</text>
</g>
<!-- TabHeaders->TabsModule -->
<g id="edge11" class="edge">
<title>TabHeaders->TabsModule</title>
<path fill="none" stroke="black" d="M657.34,-187.24C657.34,-202.57 657.34,-222 657.34,-222 657.34,-222 941.55,-222 941.55,-222"/>
<polygon fill="black" stroke="black" points="941.55,-225.5 951.55,-222 941.55,-218.5 941.55,-225.5"/>
</g>
<!-- TabHeadersVertical -->
<g id="node9" class="node">
<title>TabHeadersVertical</title>
<polygon fill="#ffffb3" stroke="black" points="591.21,-187 462.79,-187 462.79,-151 591.21,-151 591.21,-187"/>
<text text-anchor="middle" x="527" y="-164.8" font-family="Times,serif" font-size="14.00">TabHeadersVertical</text>
</g>
<!-- TabHeadersVertical->TabsModule -->
<g id="edge12" class="edge">
<title>TabHeadersVertical->TabsModule</title>
<path fill="none" stroke="black" d="M570.68,-187.03C570.68,-203.4 570.68,-225 570.68,-225 570.68,-225 941.58,-225 941.58,-225"/>
<polygon fill="black" stroke="black" points="941.58,-228.5 951.58,-225 941.58,-221.5 941.58,-228.5"/>
</g>
<!-- TabSkeleton -->
<g id="node10" class="node">
<title>TabSkeleton</title>
<polygon fill="#ffffb3" stroke="black" points="444.26,-187 357.74,-187 357.74,-151 444.26,-151 444.26,-187"/>
<text text-anchor="middle" x="401" y="-164.8" font-family="Times,serif" font-size="14.00">TabSkeleton</text>
</g>
<!-- TabSkeleton->TabsModule -->
<g id="edge13" class="edge">
<title>TabSkeleton->TabsModule</title>
<path fill="none" stroke="black" d="M431.25,-187.02C431.25,-204.37 431.25,-228 431.25,-228 431.25,-228 941.7,-228 941.7,-228"/>
<polygon fill="black" stroke="black" points="941.7,-231.5 951.7,-228 941.7,-224.5 941.7,-231.5"/>
</g>
<!-- Tabs -->
<g id="node11" class="node">
<title>Tabs</title>
<polygon fill="#ffffb3" stroke="black" points="340,-187 286,-187 286,-151 340,-151 340,-187"/>
<text text-anchor="middle" x="313" y="-164.8" font-family="Times,serif" font-size="14.00">Tabs</text>
</g>
<!-- Tabs->TabsModule -->
<g id="edge14" class="edge">
<title>Tabs->TabsModule</title>
<path fill="none" stroke="black" d="M313,-187.3C313,-205.27 313,-230 313,-230 313,-230 941.56,-230 941.56,-230"/>
<polygon fill="black" stroke="black" points="941.56,-233.5 951.56,-230 941.56,-226.5 941.56,-233.5"/>
</g>
<!-- TabsVertical -->
<g id="node12" class="node">
<title>TabsVertical</title>
<polygon fill="#ffffb3" stroke="black" points="268.3,-187 179.7,-187 179.7,-151 268.3,-151 268.3,-187"/>
<text text-anchor="middle" x="224" y="-164.8" font-family="Times,serif" font-size="14.00">TabsVertical</text>
</g>
<!-- TabsVertical->TabsModule -->
<g id="edge15" class="edge">
<title>TabsVertical->TabsModule</title>
<path fill="none" stroke="black" d="M224,-187.17C224,-206.09 224,-233 224,-233 224,-233 941.62,-233 941.62,-233"/>
<polygon fill="black" stroke="black" points="941.62,-236.5 951.62,-233 941.62,-229.5 941.62,-236.5"/>
</g>
<!-- TabsVerticalGrouped -->
<g id="node13" class="node">
<title>TabsVerticalGrouped</title>
<polygon fill="#ffffb3" stroke="black" points="161.78,-187 24.22,-187 24.22,-151 161.78,-151 161.78,-187"/>
<text text-anchor="middle" x="93" y="-164.8" font-family="Times,serif" font-size="14.00">TabsVerticalGrouped</text>
</g>
<!-- TabsVerticalGrouped->TabsModule -->
<g id="edge16" class="edge">
<title>TabsVerticalGrouped->TabsModule</title>
<path fill="none" stroke="black" d="M93,-187.31C93,-207.15 93,-236 93,-236 93,-236 941.49,-236 941.49,-236"/>
<polygon fill="black" stroke="black" points="941.49,-239.5 951.49,-236 941.49,-232.5 941.49,-239.5"/>
</g>
<!-- IconTab -->
<g id="node21" class="node">
<title>IconTab </title>
<polygon fill="#fb8072" stroke="black" points="1704.14,-317 1637.86,-317 1637.86,-281 1704.14,-281 1704.14,-317"/>
<text text-anchor="middle" x="1671" y="-294.8" font-family="Times,serif" font-size="14.00">IconTab </text>
</g>
<!-- TabsModule->IconTab -->
<g id="edge20" class="edge">
<title>TabsModule->IconTab </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1038.32,-239C1187.52,-239 1671,-239 1671,-239 1671,-239 1671,-271 1671,-271"/>
<polygon fill="black" stroke="black" points="1667.5,-271 1671,-281 1674.5,-271 1667.5,-271"/>
</g>
<!-- Tab -->
<g id="node22" class="node">
<title>Tab </title>
<polygon fill="#fb8072" stroke="black" points="1620,-317 1566,-317 1566,-281 1620,-281 1620,-317"/>
<text text-anchor="middle" x="1593" y="-294.8" font-family="Times,serif" font-size="14.00">Tab </text>
</g>
<!-- TabsModule->Tab -->
<g id="edge21" class="edge">
<title>TabsModule->Tab </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1038.59,-241C1175.49,-241 1587.8,-241 1587.8,-241 1587.8,-241 1587.8,-270.97 1587.8,-270.97"/>
<polygon fill="black" stroke="black" points="1584.3,-270.97 1587.8,-280.97 1591.3,-270.97 1584.3,-270.97"/>
</g>
<!-- TabHeader -->
<g id="node23" class="node">
<title>TabHeader </title>
<polygon fill="#fb8072" stroke="black" points="1547.68,-317 1466.32,-317 1466.32,-281 1547.68,-281 1547.68,-317"/>
<text text-anchor="middle" x="1507" y="-294.8" font-family="Times,serif" font-size="14.00">TabHeader </text>
</g>
<!-- TabsModule->TabHeader -->
<g id="edge22" class="edge">
<title>TabsModule->TabHeader </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1038.6,-244C1158.83,-244 1486.27,-244 1486.27,-244 1486.27,-244 1486.27,-270.99 1486.27,-270.99"/>
<polygon fill="black" stroke="black" points="1482.77,-270.99 1486.27,-280.99 1489.77,-270.99 1482.77,-270.99"/>
</g>
<!-- TabHeaderComponent -->
<g id="node24" class="node">
<title>TabHeaderComponent </title>
<polygon fill="#fb8072" stroke="black" points="1448.51,-317 1301.49,-317 1301.49,-281 1448.51,-281 1448.51,-317"/>
<text text-anchor="middle" x="1375" y="-294.8" font-family="Times,serif" font-size="14.00">TabHeaderComponent </text>
</g>
<!-- TabsModule->TabHeaderComponent -->
<g id="edge23" class="edge">
<title>TabsModule->TabHeaderComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1038.47,-247C1129.14,-247 1330.13,-247 1330.13,-247 1330.13,-247 1330.13,-270.81 1330.13,-270.81"/>
<polygon fill="black" stroke="black" points="1326.63,-270.81 1330.13,-280.81 1333.63,-270.81 1326.63,-270.81"/>
</g>
<!-- TabHeaderGroup -->
<g id="node25" class="node">
<title>TabHeaderGroup </title>
<polygon fill="#fb8072" stroke="black" points="1283.95,-317 1166.05,-317 1166.05,-281 1283.95,-281 1283.95,-317"/>
<text text-anchor="middle" x="1225" y="-294.8" font-family="Times,serif" font-size="14.00">TabHeaderGroup </text>
</g>
<!-- TabsModule->TabHeaderGroup -->
<g id="edge24" class="edge">
<title>TabsModule->TabHeaderGroup </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1038.3,-250C1100.16,-250 1206.44,-250 1206.44,-250 1206.44,-250 1206.44,-270.75 1206.44,-270.75"/>
<polygon fill="black" stroke="black" points="1202.94,-270.75 1206.44,-280.75 1209.94,-270.75 1202.94,-270.75"/>
</g>
<!-- TabHeaderGroupVertical -->
<g id="node26" class="node">
<title>TabHeaderGroupVertical </title>
<polygon fill="#fb8072" stroke="black" points="1148.03,-317 985.97,-317 985.97,-281 1148.03,-281 1148.03,-317"/>
<text text-anchor="middle" x="1067" y="-294.8" font-family="Times,serif" font-size="14.00">TabHeaderGroupVertical </text>
</g>
<!-- TabsModule->TabHeaderGroupVertical -->
<g id="edge25" class="edge">
<title>TabsModule->TabHeaderGroupVertical </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1012.06,-252.11C1012.06,-252.11 1012.06,-270.99 1012.06,-270.99"/>
<polygon fill="black" stroke="black" points="1008.56,-270.99 1012.06,-280.99 1015.56,-270.99 1008.56,-270.99"/>
</g>
<!-- TabHeaders -->
<g id="node27" class="node">
<title>TabHeaders </title>
<polygon fill="#fb8072" stroke="black" points="967.62,-317 880.38,-317 880.38,-281 967.62,-281 967.62,-317"/>
<text text-anchor="middle" x="924" y="-294.8" font-family="Times,serif" font-size="14.00">TabHeaders </text>
</g>
<!-- TabsModule->TabHeaders -->
<g id="edge26" class="edge">
<title>TabsModule->TabHeaders </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M959.59,-252.11C959.59,-252.11 959.59,-270.99 959.59,-270.99"/>
<polygon fill="black" stroke="black" points="956.09,-270.99 959.59,-280.99 963.09,-270.99 956.09,-270.99"/>
</g>
<!-- TabHeadersVertical -->
<g id="node28" class="node">
<title>TabHeadersVertical </title>
<polygon fill="#fb8072" stroke="black" points="862.21,-317 729.79,-317 729.79,-281 862.21,-281 862.21,-317"/>
<text text-anchor="middle" x="796" y="-294.8" font-family="Times,serif" font-size="14.00">TabHeadersVertical </text>
</g>
<!-- TabsModule->TabHeadersVertical -->
<g id="edge27" class="edge">
<title>TabsModule->TabHeadersVertical </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M951.33,-250C892.75,-250 796,-250 796,-250 796,-250 796,-270.75 796,-270.75"/>
<polygon fill="black" stroke="black" points="792.5,-270.75 796,-280.75 799.5,-270.75 792.5,-270.75"/>
</g>
<!-- TabSkeleton -->
<g id="node29" class="node">
<title>TabSkeleton </title>
<polygon fill="#fb8072" stroke="black" points="712.26,-317 621.74,-317 621.74,-281 712.26,-281 712.26,-317"/>
<text text-anchor="middle" x="667" y="-294.8" font-family="Times,serif" font-size="14.00">TabSkeleton </text>
</g>
<!-- TabsModule->TabSkeleton -->
<g id="edge28" class="edge">
<title>TabsModule->TabSkeleton </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M951.71,-247C870.11,-247 701.65,-247 701.65,-247 701.65,-247 701.65,-270.81 701.65,-270.81"/>
<polygon fill="black" stroke="black" points="698.15,-270.81 701.65,-280.81 705.15,-270.81 698.15,-270.81"/>
</g>
<!-- Tabs -->
<g id="node30" class="node">
<title>Tabs </title>
<polygon fill="#fb8072" stroke="black" points="604,-317 550,-317 550,-281 604,-281 604,-317"/>
<text text-anchor="middle" x="577" y="-294.8" font-family="Times,serif" font-size="14.00">Tabs </text>
</g>
<!-- TabsModule->Tabs -->
<g id="edge29" class="edge">
<title>TabsModule->Tabs </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M951.72,-244C848.75,-244 597.68,-244 597.68,-244 597.68,-244 597.68,-270.99 597.68,-270.99"/>
<polygon fill="black" stroke="black" points="594.18,-270.99 597.68,-280.99 601.18,-270.99 594.18,-270.99"/>
</g>
<!-- TabsVertical -->
<g id="node31" class="node">
<title>TabsVertical </title>
<polygon fill="#fb8072" stroke="black" points="531.79,-317 440.21,-317 440.21,-281 531.79,-281 531.79,-317"/>
<text text-anchor="middle" x="486" y="-294.8" font-family="Times,serif" font-size="14.00">TabsVertical </text>
</g>
<!-- TabsModule->TabsVertical -->
<g id="edge30" class="edge">
<title>TabsModule->TabsVertical </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M951.7,-241C830.61,-241 497.27,-241 497.27,-241 497.27,-241 497.27,-270.97 497.27,-270.97"/>
<polygon fill="black" stroke="black" points="493.77,-270.97 497.27,-280.97 500.77,-270.97 493.77,-270.97"/>
</g>
<!-- TabsVerticalGrouped -->
<g id="node32" class="node">
<title>TabsVerticalGrouped </title>
<polygon fill="#fb8072" stroke="black" points="422.28,-317 281.72,-317 281.72,-281 422.28,-281 422.28,-317"/>
<text text-anchor="middle" x="352" y="-294.8" font-family="Times,serif" font-size="14.00">TabsVerticalGrouped </text>
</g>
<!-- TabsModule->TabsVerticalGrouped -->
<g id="edge31" class="edge">
<title>TabsModule->TabsVerticalGrouped </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M951.49,-239C812.77,-239 390,-239 390,-239 390,-239 390,-271 390,-271"/>
<polygon fill="black" stroke="black" points="386.5,-271 390,-281 393.5,-271 386.5,-271"/>
</g>
<!-- { provide: Tab, useExisting: forwardRef(() => IconTab) } -->
<g id="node15" class="node">
<title>{ provide: Tab, useExisting: forwardRef(() => IconTab) }</title>
<ellipse fill="#fdb462" stroke="black" cx="1122" cy="-104" rx="234.97" ry="18"/>
<text text-anchor="middle" x="1122" y="-99.8" font-family="Times,serif" font-size="14.00">{ provide: Tab, useExisting: forwardRef(() => IconTab) }</text>
</g>
<!-- { provide: Tab, useExisting: forwardRef(() => IconTab) }->IconTab -->
<g id="edge3" class="edge">
<title>{ provide: Tab, useExisting: forwardRef(() => IconTab) }->IconTab</title>
<path fill="none" stroke="black" d="M1122,-122.11C1122,-122.11 1122,-140.99 1122,-140.99"/>
<polygon fill="black" stroke="black" points="1118.5,-140.99 1122,-150.99 1125.5,-140.99 1118.5,-140.99"/>
</g>
<!-- { provide: TabHeaderBase, useExisting: forwardRef(() => TabHeader) } -->
<g id="node16" class="node">
<title>{ provide: TabHeaderBase, useExisting: forwardRef(() => TabHeader) }</title>
<ellipse fill="#fdb462" stroke="black" cx="1926" cy="-104" rx="292.19" ry="18"/>
<text text-anchor="middle" x="1926" y="-99.8" font-family="Times,serif" font-size="14.00">{ provide: TabHeaderBase, useExisting: forwardRef(() => TabHeader) }</text>
</g>
<!-- { provide: TabHeaderBase, useExisting: forwardRef(() => TabHeader) }->TabHeader -->
<g id="edge6" class="edge">
<title>{ provide: TabHeaderBase, useExisting: forwardRef(() => TabHeader) }->TabHeader</title>
<path fill="none" stroke="black" d="M1799,-120.4C1799,-120.4 1799,-140.54 1799,-140.54"/>
<polygon fill="black" stroke="black" points="1795.5,-140.54 1799,-150.54 1802.5,-140.54 1795.5,-140.54"/>
</g>
<!-- { provide: TabHeaderBase, useExisting: forwardRef(() => TabHeaderComponent) } -->
<g id="node17" class="node">
<title>{ provide: TabHeaderBase, useExisting: forwardRef(() => TabHeaderComponent) }</title>
<ellipse fill="#fdb462" stroke="black" cx="2579" cy="-104" rx="337.32" ry="18"/>
<text text-anchor="middle" x="2579" y="-99.8" font-family="Times,serif" font-size="14.00">{ provide: TabHeaderBase, useExisting: forwardRef(() => TabHeaderComponent) }</text>
</g>
<!-- { provide: TabHeaderBase, useExisting: forwardRef(() => TabHeaderComponent) }->TabHeaderComponent -->
<g id="edge8" class="edge">
<title>{ provide: TabHeaderBase, useExisting: forwardRef(() => TabHeaderComponent) }->TabHeaderComponent</title>
<path fill="none" stroke="black" d="M2446,-120.74C2446,-120.74 2446,-140.72 2446,-140.72"/>
<polygon fill="black" stroke="black" points="2442.5,-140.72 2446,-150.72 2449.5,-140.72 2442.5,-140.72"/>
</g>
<!-- I18nModule -->
<g id="node18" class="node">
<title>I18nModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1609.71,-187 1606.71,-191 1585.71,-191 1582.71,-187 1524.29,-187 1524.29,-151 1609.71,-151 1609.71,-187"/>
<text text-anchor="middle" x="1567" y="-164.8" font-family="Times,serif" font-size="14.00">I18nModule</text>
</g>
<!-- I18nModule->TabsModule -->
<g id="edge17" class="edge">
<title>I18nModule->TabsModule</title>
<path fill="none" stroke="black" d="M1536.12,-187.3C1536.12,-205.27 1536.12,-230 1536.12,-230 1536.12,-230 1048.37,-230 1048.37,-230"/>
<polygon fill="black" stroke="black" points="1048.37,-226.5 1038.37,-230 1048.37,-233.5 1048.37,-226.5"/>
</g>
<!-- TooltipModule -->
<g id="node19" class="node">
<title>TooltipModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1506.27,-187 1503.27,-191 1482.27,-191 1479.27,-187 1405.73,-187 1405.73,-151 1506.27,-151 1506.27,-187"/>
<text text-anchor="middle" x="1456" y="-164.8" font-family="Times,serif" font-size="14.00">TooltipModule</text>
</g>
<!-- TooltipModule->TabsModule -->
<g id="edge18" class="edge">
<title>TooltipModule->TabsModule</title>
<path fill="none" stroke="black" d="M1427.06,-187.02C1427.06,-204.37 1427.06,-228 1427.06,-228 1427.06,-228 1048.41,-228 1048.41,-228"/>
<polygon fill="black" stroke="black" points="1048.41,-224.5 1038.41,-228 1048.41,-231.5 1048.41,-224.5"/>
</g>
<!-- UtilsModule -->
<g id="node20" class="node">
<title>UtilsModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1387.27,-187 1384.27,-191 1363.27,-191 1360.27,-187 1300.73,-187 1300.73,-151 1387.27,-151 1387.27,-187"/>
<text text-anchor="middle" x="1344" y="-164.8" font-family="Times,serif" font-size="14.00">UtilsModule</text>
</g>
<!-- UtilsModule->TabsModule -->
<g id="edge19" class="edge">
<title>UtilsModule->TabsModule</title>
<path fill="none" stroke="black" d="M1358.76,-187.03C1358.76,-203.4 1358.76,-225 1358.76,-225 1358.76,-225 1048.52,-225 1048.52,-225"/>
<polygon fill="black" stroke="black" points="1048.52,-221.5 1038.52,-225 1048.52,-228.5 1048.52,-221.5"/>
</g>
</g>
</svg>
</div>
<i id="fullscreen" class="icon ion-ios-resize module-graph-fullscreen-btn" aria-hidden="true"></i>
<div class="btn-group size-buttons">
<button id="zoom-in" class="btn btn-default btn-sm">Zoom in</button>
<button id="reset" class="btn btn-default btn-sm">Reset</button>
<button id="zoom-out" class="btn btn-default btn-sm">Zoom out</button>
</div>
</div>
<script src="../js/libs/svg-pan-zoom.min.js"></script>
<script src="../js/svg-pan-zoom.controls.js"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info"
class="nav-link"
class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source"
class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info">
<p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/tabs/tabs.module.ts</code>
</p>
<div class="container-fluid module">
<div class="row">
<div class="col-sm-3">
<h3>Declarations<a href="https://angular.io/api/core/NgModule#declarations" target="_blank" rel="noopener noreferrer"
title="Official documentation about module declarations"><span class="icon ion-ios-information-circle-outline"></span></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../components/BaseTabHeader.html">BaseTabHeader</a>
</li>
<li class="list-group-item">
<a href="../components/IconTab.html">IconTab</a>
</li>
<li class="list-group-item">
<a href="../components/Tab.html">Tab</a>
</li>
<li class="list-group-item">
<a href="../directives/TabHeader.html">TabHeader</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeaderComponent.html">TabHeaderComponent</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeaderGroup.html">TabHeaderGroup</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeaderGroupVertical.html">TabHeaderGroupVertical</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeaders.html">TabHeaders</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeadersVertical.html">TabHeadersVertical</a>
</li>
<li class="list-group-item">
<a href="../components/TabSkeleton.html">TabSkeleton</a>
</li>
<li class="list-group-item">
<a href="../components/Tabs.html">Tabs</a>
</li>
<li class="list-group-item">
<a href="../components/TabsVertical.html">TabsVertical</a>
</li>
<li class="list-group-item">
<a href="../components/TabsVerticalGrouped.html">TabsVerticalGrouped</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h3>Imports<a href="https://angular.io/api/core/NgModule#imports" target="_blank" rel="noopener noreferrer"
title="Official documentation about module imports"><span
class="icon ion-ios-information-circle-outline"></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../modules/I18nModule.html">I18nModule</a>
</li>
<li class="list-group-item">
<a href="../modules/TooltipModule.html">TooltipModule</a>
</li>
<li class="list-group-item">
<a href="../modules/UtilsModule.html">UtilsModule</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h3>Exports<a href="https://angular.io/api/core/NgModule#exports" target="_blank" rel="noopener noreferrer"
title="Official documentation about module exports"><span
class="icon ion-ios-information-circle-outline"></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../components/IconTab.html">IconTab</a>
</li>
<li class="list-group-item">
<a href="../components/Tab.html">Tab</a>
</li>
<li class="list-group-item">
<a href="../directives/TabHeader.html">TabHeader</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeaderComponent.html">TabHeaderComponent</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeaderGroup.html">TabHeaderGroup</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeaderGroupVertical.html">TabHeaderGroupVertical</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeaders.html">TabHeaders</a>
</li>
<li class="list-group-item">
<a href="../components/TabHeadersVertical.html">TabHeadersVertical</a>
</li>
<li class="list-group-item">
<a href="../components/TabSkeleton.html">TabSkeleton</a>
</li>
<li class="list-group-item">
<a href="../components/Tabs.html">Tabs</a>
</li>
<li class="list-group-item">
<a href="../components/TabsVertical.html">TabsVertical</a>
</li>
<li class="list-group-item">
<a href="../components/TabsVerticalGrouped.html">TabsVerticalGrouped</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { UtilsModule } from "carbon-components-angular/utils";
import { I18nModule } from "carbon-components-angular/i18n";
import { TooltipModule } from "carbon-components-angular/tooltip";
import { TabSkeleton } from "./tab-skeleton.component";
import { BaseTabHeader } from "./base-tab-header.component";
import { Tabs } from "./tabs.component";
import { TabsVertical } from "./tabs-vertical.component";
import { TabsVerticalGrouped } from "./tabs-vertical-grouped.component";
import { Tab } from "./tab.component";
import { IconTab } from "./icon-tab.component";
import { TabHeader } from "./tab-header.directive";
import { TabHeaderComponent } from "./tab-header.component";
import { TabHeaders } from "./tab-headers.component";
import { TabHeadersVertical } from "./tab-headers-vertical.component";
import { TabHeaderGroup } from "./tab-header-group.component";
import { TabHeaderGroupVertical } from "./tab-header-group-vertical.component";
@NgModule({
declarations: [
BaseTabHeader,
Tabs,
TabsVertical,
TabsVerticalGrouped,
Tab,
IconTab,
TabHeader,
TabHeaderComponent,
TabHeaders,
TabHeadersVertical,
TabHeaderGroup,
TabHeaderGroupVertical,
TabSkeleton
],
exports: [
Tabs,
TabsVertical,
TabsVerticalGrouped,
Tab,
IconTab,
TabHeader,
TabHeaderComponent,
TabHeaders,
TabHeadersVertical,
TabHeaderGroup,
TabHeaderGroupVertical,
TabSkeleton
],
imports: [
CommonModule,
UtilsModule,
I18nModule,
TooltipModule
]
})
export class TabsModule {}
</code></pre>
</div>
</div>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'module';
var COMPODOC_CURRENT_PAGE_URL = 'TabsModule.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<script src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
<footer class="carbon">
<dds-footer-container key="footer" disable-locale-button="true" size="micro" />
</footer>
<script
key="8"
type="module"
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js">
</script>
<!-- Storybook override -->
<script>
document.title = "Carbon Components Angular";
</script>
<script
src="//1.www.s81c.com/common/stats/ibm-common.js"
type="text/javascript"
async="async">
</script>
</body>
</html>