1
Ich möchte Tabs Layout innerhalb Tabs Layout verwenden. Ich verwende Material Design lite, das bereits Klassen für Tabs erstellt hat, daher versuche ich, dasselbe zu verwenden.Verwenden von Tabs innerhalb der Registerkarte funktioniert nicht - Material Design Lite
Die Registerkarte Nummer 1 - Horizontal Registerkarte funktioniert einzeln ohne Probleme. Die Registerkarte Nummer 2 - Vertical Tab funktioniert einzeln ohne Probleme.
Jetzt habe ich versucht, Registerkarte 2 innerhalb der Registerkarte Nummer 1 zu verwenden. Registerkarte Nummer eins bleibt gleich, aber Registerkarte Nummer 2 funktioniert nicht.
Bitte nehmen Sie sich einen Blick auf diese Plunker Link: https://plnkr.co/edit/LVPexb9akrRR2AoPGEGO?p=preview
-Code - HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="1.1.1" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link data-require="[email protected]" data-semver="1.1.1" rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css" />
<script data-require="[email protected]" data-semver="1.1.1" src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h4>Combined Tab 2 within Tab 1</h4>
<div class="mdl-tabs mdl-js-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#tab1" class="mdl-tabs__tab">Tab One</a>
<a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
<a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab1">
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span> General
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span> Bank
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span> Password
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--10-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
</div>
<div class="mdl-tabs__panel" id="tab2">
<p>Second tab's content.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<p>Third tab's content.</p>
</div>
</div>
<h4>Tab 1 Individual</h4>
<div class="mdl-tabs mdl-js-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#tab1" class="mdl-tabs__tab">Tab One</a>
<a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
<a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab1">
<p>First tab's content.</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<p>Second tab's content.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<p>Third tab's content.</p>
</div>
</div>
<h4>Tab 2 Individual</h4>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span> General
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span> Bank
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span> Password
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--10-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
</body>
</html>
Css
/*Vertical Tabs*/
.vertical-mdl-tabs {
margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 35px;
height: inherit;
border-bottom: none;
border-right: 1px solid #d9d9d9;
}
.vertical-mdl-tabs .mdl-tabs__tab {
width: 100%;
height: 35px;
line-height: 35px;
box-sizing: border-box;
letter-spacing: 2px;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
border-right: 2px solid #EF5350;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
content: inherit;
height: 0;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
padding: 0 30px;
}
.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
text-align: left;
}