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 در هر صفحه نسازید