عارض PDF
يعرض عارض PDF مستندات PDF مع شريط أدوات ترويسة اختياري عبر نقاط قطع سطح المكتب واللوحي والجوّال مع دعم RTL.
Loading demo: pdf-viewer-real-world
التثبيت
npx sdaia-ui@latest add pdf-viewer
الاستخدام
import { PDFViewer } from "@/components/ui/pdf-viewer"<PDFViewer src="..." pdfHeader={true} breakpoint="desktop" />الأمثلة
سطح المكتب
عارض PDF كامل المزايا لشاشات سطح المكتب.
Loading demo: pdf-viewer-desktop
اللوحي
عارض PDF مهيَّأ لأحجام شاشات الجهاز اللوحي.
Loading demo: pdf-viewer-tablet
الجوال
عارض PDF محسَّن لشاشات الجوّال.
Loading demo: pdf-viewer-mobile
مع الترويسة
عارض PDF مع لوحة ترويسة المستند مرئية.
Loading demo: pdf-viewer-with-header
مرجع الواجهة البرمجية
PdfViewerProps
خصائص مكوّن MediaViewer.
Prop | Type | Default | Required |
|---|---|---|---|
breakpoint | 'desktop' | 'tablet' | 'mobile' | — | optional |
dir | 'ltr' | 'rtl' | — | optional |
showHeader | boolean | — | optional |
headerTitle | ReactNode | — | optional |
headerSubtitle | ReactNode | — | optional |
infoItems | PdfViewerInfoItem[] | — | optional |
showCloseButton | boolean | — | optional |
onClose | () => void | — | optional |
closeLabel | string | — | optional |
showPrimaryAction | boolean | — | optional |
primaryActionLabel | ReactNode | — | optional |
onPrimaryAction | () => void | — | optional |
showZoomControls | boolean | — | optional |
zoom | number | — | optional |
defaultZoom | number | — | optional |
minZoom | number | — | optional |
maxZoom | number | — | optional |
zoomStep | number | — | optional |
onZoomChange | (zoom: number) => void | — | optional |
zoomLabel | ReactNode | — | optional |
onZoomOut | () => void | — | optional |
onZoomIn | () => void | — | optional |
onZoomFit | () => void | — | optional |
onZoomMenu | () => void | — | optional |
children | ReactNode | — | optional |