Tabs

A tabbed interface component supporting horizontal and vertical orientations.

Examples

Horizontal Tabs

Tabs with horizontal orientation

Vertical Tabs

Tabs with vertical orientation

Code

<wdc-tabs>
  <wdc-tab
    [active]="true"
    [headerTemplate]="accountTabHeader"
    [contentTemplate]="accountTabContent"
  >
    <ng-template #accountTabHeader> Account </ng-template>
    <ng-template #accountTabContent>
      <div class="animate-in fade-in slide-in-from-bottom-2 duration-300">
        <div class="p-4 bg-gray-50 rounded-lg">
          <h4 class="font-medium text-gray-900">Account Content</h4>
          <p class="text-sm text-gray-500 mt-1">Manage your account details here.</p>
        </div>
      </div>
    </ng-template>
  </wdc-tab>
  <wdc-tab label="Password" [contentTemplate]="passTabContent">
    <ng-template #passTabContent>
      <div class="animate-in fade-in slide-in-from-bottom-2 duration-300">
        <div class="p-4 bg-gray-50 rounded-lg">
          <h4 class="font-medium text-gray-900">Password Content</h4>
          <p class="text-sm text-gray-500 mt-1">Change your password here.</p>
        </div>
      </div>
    </ng-template>
  </wdc-tab>
</wdc-tabs>