TaavUI Lab
Layout

TaavPageHeader

سرصفحه یکپارچه برای settings، detail، report و create/edit.

import { TaavPageHeader } from '@repo/ui/taav/layout';

استفاده پایه

RTL Preview
VahedYek

گزارش حضور و غیاب

گزارشفعال

خلاصه ماه جاری با فیلتر واحد سازمانی.

آخرین بروزرسانی: ۱۴۰۴/۰۳/۲۰

Variants

پیش‌نمایش

Compact header

برای صفحات فرم فشرده

Hero header

برای onboarding و setup

Plain header

Loading

پیش‌نمایش

Props

Propنوعپیش‌فرضتوضیح
title / eyebrow / descriptionReactNode—محتوای header
variant'default' | 'compact' | 'hero' | 'plain'defaultسبک header
size'sm' | 'md' | 'lg'mdاندازه عنوان
statusTaavStatus—نشان وضعیت استاندارد
actions / secondaryActions / backActionReactNode—اقدامات (TaavButton)
sticky / bordered / loadingboolean—حالت‌های header

دسترس‌پذیری

راهنمای استفاده در DastRanj / VahedYek

  • • title در h1 رندر می‌شود
  • • breadcrumbs در nav با aria-label="breadcrumb"
  • • actions را با TaavButton بدهید

Do / Don't

انجام دهید

  • ✓ status را با prop status بدهید تا TaavStatusBadge استاندارد رندر شود

انجام ندهید

  • ✕ header سفارشی با Tailwind arbitrary در هر صفحه نسازید