Maak de Tabs Apple stijl met meerdere tabs. Het Apple stijl tabs blok is een blok dat niet echt herkenbaar is als ‘tabs’ in de traditionele zin. Natuurlijk is het technisch gezien gewoon een tab block, maar de manier waarop het nu is, creëert het een totaal andere look. Het is gemaakt met het normale tab blok van Kadence blocks.
Om eerlijk te zijn, het is vrij eenvoudig. Gewoon een standaard rij, één sectie en een tab block binnen die sectie. Ik heb gewoon wat CSS toegevoegd om de ondertitel te verbergen totdat het tabblad wordt geopend. De code is zichtbaar onder de showcase van de Tabs Apple stijl. Ook hieronder is een afbeelding met de ‘hoe de CSS te plaatsen’ van de Tabs Apple stijl.
CSS die je nodig hebt- Tabs Apple style
/* verberg de sub-titel */
selector .kt-tab-title-inactive span.kt-title-sub-text {
max-height: 0;
margin: 0px !important;
opacity: 0;
}Het tweede stukje CSS geeft een klein effect op tab verandering. Het is niet nodig voor deze tab-block lay-out ‘Tabs Apple style’.
/* Een klein effect op tab change*/
selector span.kt-title-sub-text {
transition: all 0.9s cubic-bezier(.4, .63, .57, 1), visibility .3s step-end;
}Plaats de CSS in de sectie Advanced, custom CSS. Zie de afbeelding op deze pagina.
