التذييل
تذييل الصفحة متوفّر بتخطيطات كبيرة ومتوسطة وصغيرة، مع نقاط توقّف للجوّال ودعم RTL.
التثبيت
npx sdaia-ui@latest add footer
الاستخدام
import { Footer } from "@/components/ui/footer"<Footer type="large-1" />الأمثلة
كبير
التذييل بالتخطيط الكبير مع أقسام التنقّل والمحتوى الكاملة.
Loading demo: footer-large-1
متوسط
التذييل بالتخطيط المتوسط.
Loading demo: footer-medium
صغير
تذييل مدمج بالتخطيط الصغير.
Loading demo: footer-small
الجوال
تخطيط التذييل المُحسَّن لشاشات الجوّال.
Loading demo: footer-mobile
مرجع الواجهة البرمجية
FooterProps
خصائص مكوّن Footer.
Prop | Type | Default | Required |
|---|---|---|---|
dir | 'ltr' | 'rtl' | - | optional |
rtl | boolean | false (deprecated) | optional |
compact | boolean | false | optional |
children | ReactNode | - | optional |
FooterLinkColumnsProps
خصائص مكوّن Footer.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
FooterNewsletterProps
خصائص مكوّن Footer.
Prop | Type | Default | Required |
|---|---|---|---|
heading | ReactNode | - | optional |
description | ReactNode | - | optional |
inputPlaceholder | string | 'name@example.com' | optional |
submitLabel | ReactNode | 'Subscribe' | optional |
inputLabel | string | 'Email address' | optional |
inputName | string | 'email' | optional |
onSubmit | (value: string, event: React.FormEvent<HTMLFormElement>) => void | - | optional |
dir | 'ltr' | 'rtl' | - | optional |
FooterAppStoresProps
خصائص مكوّن Footer.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
FooterSocialLinksProps
خصائص مكوّن Footer.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
FooterBottomBarProps
خصائص مكوّن Footer.
Prop | Type | Default | Required |
|---|---|---|---|
logo | ReactNode | - | optional |
copyright | ReactNode | - | optional |
extraLinks | FooterBottomBarExtraLink[] | - | optional |
divider | boolean | true | optional |
dir | 'ltr' | 'rtl' | - | optional |
FooterInlineBarProps
خصائص مكوّن Footer.
Prop | Type | Default | Required |
|---|---|---|---|
logo | ReactNode | - | optional |
links | FooterBottomBarExtraLink[] | - | optional |
extraLinks | FooterBottomBarExtraLink[] | - | optional |
copyright | ReactNode | - | optional |
dir | 'ltr' | 'rtl' | - | optional |