البناء · جديد
شارات المتاجر
شارات متاجر التطبيقات الرسمية كروابط إلى صفحة تطبيقك، كما يقدّمها كل متجر: لا تُلوَّن ولا تُقص ولا تُترجم.
المعاينة
المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.
npx shadcn@latest add @ritla/store-badgeالاستخدام
import { StoreBadge } from "@/components/ui/store-badge";<StoreBadge store="app-store" href="https://apps.apple.com/app/id…" />
<StoreBadge store="google-play" href="https://play.google.com/store/apps/details?id=…" />أمثلة
المتاجر والأنماط
brand بالأسود على أي سطح، وoutline على الأسطح الفاتحة فقط. شارة Galaxy Store تأتي حين تصل نسختها الرسمية.
الأحجام
lg بارتفاع 44 بكسل (الافتراضي) وmd بارتفاع 40، والعرض يتبع كل شارة.
مرجع الخصائص
StoreBadge
أي خاصية أخرى لعنصر <a> تمر كما هي (target، rel…).
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
store | "app-store" | "google-play" | "mac-app-store" | "appgallery" | "microsoft" | "amazon-store" | "f-droid" | خاصية Store. | |
href | string | مطلوب. صفحة تطبيقك في المتجر. | |
variant | "brand" | "outline" | "brand" | خاصية Style. |
size | "md" | "lg" | "lg" | خاصية Size: 40 و44 بكسل. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| TabEnter | رابط عادي: ينتقل إليه Tab ويفتحه Enter. |
ARIA
- اسم الرابط هو نص الشارة بالإنجليزية («Download on the App Store»)، في صورة لها
lang="en"فتقرؤه قارئات الشاشة بالإنجليزية حتى في صفحة عربية.
ملاحظات العربية والاتجاه
ينعكس
- ترتيب الشارات في الصف يتبع اتجاه الصفحة.
لا ينعكس
- الشارة نفسها لا تنعكس ولا تُترجم: الشارات العربية تأتي من المتاجر حين تتوفر (Figma لم يستلمها بعد).
- الأرقام
- لا أرقام في الشارات.
- الخط العربي
- النص جزء من الصورة الرسمية، فلا يتغير بخط كنز.
- النص ثنائي الاتجاه
- الشارة صورة، فلا تتأثر بالاتجاه؛ ضعها في صف مرن ليتبع الترتيب اللغة.