Features — Vertical Tabs

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface VerticalFeature {
  id: string
  title: string
  summary: string
  body: string
  points: string[]
  rows: { name: string; detail: string }[]
}

Files installed (2)

• src/app/components/blocks/feature-vertical-tabs-pane/feature-vertical-tabs-pane.component.ts7 kB

  Copy

  // Vertical feature tabs where each trigger carries a title and one-line summary,
  // swapping a wide preview pane built from primitives without changing the panel
  // height. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'
  import { Check, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  import {
    UiTabsComponent,
    UiTabsContentComponent,
    UiTabsListComponent,
    UiTabsTriggerComponent,
  } from '@/ui/tabs/tabs.component'
  
  export interface VerticalFeature {
    id: string
    title: string
    summary: string
    body: string
    points: string[]
    rows: { name: string; detail: string }[]
  }
  
  const features: VerticalFeature[] = [
    {
      id: 'definitions',
      title: 'Versioned definitions',
      summary: 'Reviewed like code',
      body: 'Every metric is a file with an owner. Changing one opens a pull request carrying a diff, a reviewer, and a revert path — the same workflow the rest of your repo already uses.',
      points: ['Branch per change', 'Required review', 'One-click revert'],
      rows: [
        { name: 'revenue_net', detail: 'v128 · finance' },
        { name: 'margin_by_channel', detail: 'v41 · finance' },
        { name: 'pipeline_weighted', detail: 'v12 · revops' },
      ],
    },
    {
      id: 'access',
      title: 'Query-time access',
      summary: 'Scope per identity',
      body: 'Row-level scope resolves from your identity provider on every query. A dashboard link shared outside its audience renders the sender’s scope, never the recipient’s.',
      points: ['SCIM group sync', 'Per-query evaluation', 'Audited'],
      rows: [
        { name: 'EMEA analyst', detail: 'region-scoped' },
        { name: 'Finance lead', detail: 'full ledger' },
        { name: 'Contractor', detail: 'no payroll' },
      ],
    },
    {
      id: 'cost',
      title: 'Budgeted queries',
      summary: 'Capped at run time',
      body: 'Each team gets a budget the query planner enforces before execution, so warehouse spend is bounded rather than explained after the invoice arrives.',
      points: ['Per-team ceilings', 'Materialised hot paths', 'Cost per dashboard'],
      rows: [
        { name: 'Finance', detail: '62% of budget' },
        { name: 'RevOps', detail: '38% of budget' },
        { name: 'Product', detail: '81% of budget' },
      ],
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-feature-vertical-tabs-pane, [ui-feature-vertical-tabs-pane]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiSeparatorComponent,
      UiTabsComponent,
      UiTabsContentComponent,
      UiTabsListComponent,
      UiTabsTriggerComponent,
    ],
    template: `
      <section data-slot="feature-vertical-tabs-pane" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
          <div class="max-w-2xl">
            <span ui-badge variant="secondary">Platform</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">Three things worth the detail</h2>
          </div>
  
          <ui-tabs [value]="activeTab()" (valueChange)="setActiveTab($event)" orientation="vertical" class="mt-10">
            <div class="grid gap-8 lg:grid-cols-[20rem_1fr] lg:gap-12">
              <ui-tabs-list variant="underline" orientation="vertical" class="h-auto w-full flex-col items-stretch">
                @for (feature of allFeatures; track feature.id) {
                  <button
                    ui-tabs-trigger
                    [value]="feature.id"
                    variant="underline"
                    orientation="vertical"
                    class="h-auto flex-col items-start gap-0.5 py-3 text-left"
                  >
                    <span class="text-sm font-medium">{{ feature.title }}</span>
                    <span class="text-muted-foreground text-xs">{{ feature.summary }}</span>
                  </button>
                }
              </ui-tabs-list>
  
              @for (feature of allFeatures; track feature.id) {
                <ui-tabs-content [value]="feature.id" class="mt-0">
                  <!-- min-h holds the pane at the tallest panel so switching tabs
                       never resizes the section. -->
                  <div class="grid min-h-[19rem] gap-6 sm:grid-cols-[1.2fr_1fr]">
                    <div>
                      <h3 class="text-xl font-semibold tracking-tight">{{ feature.title }}</h3>
                      <p class="text-muted-foreground mt-3 leading-relaxed">{{ feature.body }}</p>
                      <ul class="mt-5 space-y-2">
                        @for (point of feature.points; track point) {
                          <li class="flex items-start gap-2.5 text-sm">
                            <lucide-icon [img]="Check" class="text-primary mt-0.5 size-4 shrink-0" aria-hidden="true" />
                            <span>{{ point }}</span>
                          </li>
                        }
                      </ul>
                      <button ui-button variant="link" class="mt-5 h-auto p-0">Read the reference</button>
                    </div>
  
                    <div ui-card class="self-start">
                      <div ui-card-content class="p-0">
                        <div class="border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs">
                          {{ feature.summary }}
                        </div>
                        <ul class="divide-border divide-y">
                          @for (row of feature.rows; track row.name) {
                            <li class="flex items-center justify-between gap-3 px-4 py-2.5">
                              <span class="min-w-0 truncate font-mono text-xs">{{ row.name }}</span>
                              <span class="text-muted-foreground shrink-0 text-xs">{{ row.detail }}</span>
                            </li>
                          }
                        </ul>
                        <ui-separator />
                        <p class="text-muted-foreground px-4 py-2.5 text-xs">Live values from your workspace.</p>
                      </div>
                    </div>
                  </div>
                </ui-tabs-content>
              }
            </div>
          </ui-tabs>
        </div>
      </section>
    `,
  })
  export class UiFeatureVerticalTabsPaneComponent {
    protected readonly Check = Check
    protected readonly allFeatures = features
  
    @Input() set defaultTab(v: string) {
      if (features.some((f) => f.id === v)) this.activeTab.set(v)
    }
    @Input('class') className?: string
  
    readonly activeTab = signal('definitions')
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  
    setActiveTab(value: string): void {
      if (features.some((f) => f.id === value)) this.activeTab.set(value)
    }
  }
  

• src/app/components/blocks/feature-vertical-tabs-pane/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/feature-vertical-tabs-pane.json