Tabs & Pills are quasi-navigation components which can highly improve website clarity and increase user experience.
Anim: 'FadeIn' | 'BounceIn' | 'ZoomIn'
Home Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Profile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Disabled Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<Tabs [ActiveTab]="'Profile'">
<TabPane [Label]="'Home'" [Anim]="'ZoomIn'">
<p><strong>Home</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
<TabPane [Label]="'Profile'" [Anim]="'BounceIn'">
<p><strong>Profile</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
<TabPane [Label]="'Contact'">
<p><strong>Contact</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
<TabPane [Label]="'Disabled'" [Disabled]="true">
<p><strong>Disabled</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
</Tabs>
LoremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
Home Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Profile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<Tabs [Design]="'Pill'">
<TabPane [Label]="'Home'">
<p><strong>Home</strong> {/{LoremIpsum}}</p>
</TabPane>
<TabPane [Label]="'Profile'">
<p><strong>Profile</strong> {/{LoremIpsum}}</p>
</TabPane>
<TabPane [Label]="'Contact'">
<p><strong>Contact</strong> {/{LoremIpsum}}</p>
</TabPane>
</Tabs>
Stack your navigation by changing the flex item direction with the [Vertical]="true" prop.
Home Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Profile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Home Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Profile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<Tabs [Vertical]="true" [Design]="'Tab'">
<TabPane [Label]="'Home'">
<p><strong>Home</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
<TabPane [Label]="'Profile'">
<p><strong>Profile</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
<TabPane [Label]="'Contact'">
<p><strong>Contact</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
</Tabs>
<hr>
<Tabs [Vertical]="true" [Design]="'Pill'">
<TabPane [Label]="'Home'">
<p><strong>Home</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
<TabPane [Label]="'Profile'">
<p><strong>Profile</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
<TabPane [Label]="'Contact'">
<p><strong>Contact</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</TabPane>
</Tabs>