45 Canonical Components
Strict Controlled Vocabulary
دليل ومواصفات المكونات المعمارية الـ 45
مكونات معمارية مبنية بعقود صارمة وتطابق دلالي كامل بين مختلف بيئات التشغيل.
1. ميثاق المفردات المحكومة
تمنع المنظومة اختراع أسماء عشوائية للخصائص. الجدول التالي يوضح الخصائص القياسية المعتمدة:
| الخاصية (Prop) | القيم المسموحة حصراً | القيم المحظورة (Prohibited Slop) |
|---|---|---|
| variant | primary, secondary, outline, ghost, link, destructive |
special, hero, action, blue, nice |
| size | xs, sm, md, lg, xl |
tiny, huge, normal, medium |
| tone | neutral, info, success, warning, danger |
alert-red, positive, error, good |
| state | default, hover, focus, disabled, loading |
busy, blocked, inactive |
2. مرجع مكون الزر القياسي
معاينة حية للمكون →عنصر الإجراء الأساسي في المنظومة، يدعم الأحجام المتعددة، الأيقونات بالاتجاهين، وحالات التحميل والتعطيل.
| الخاصية (Prop) | النوع (Type) | القيمة الافتراضية | الوصف المعماري |
|---|---|---|---|
| variant | string | 'primary' | النمط البصري للزر (primary, secondary, outline, ghost, link, destructive). |
| size | string | 'md' | الحجم والارتفاع والهوامش (xs, sm, md, lg, xl). |
| disabled | boolean | false | تعطيل الزر ومنع التفاعل ومطابقة معايير إتاحة APG. |
| loading | boolean | false | إظهار مؤشر المعالجة الدائري التلقائي وتعطيل الضغط المتكرر. |
أكواد الاستخدام حسب بيئة العمل:
React (0kb RSC)
\n );\n}')">
نسخ
import { Button } from '@/components/ui/button';
export default function Page() {
return (
<Button variant="primary" size="md">
بدء التجربة الآن
</Button>
);
}
HTML Native
')">
نسخ
<button type="button" class="qhr-btn qhr-btn--primary qhr-btn--md">
بدء التجربة الآن
</button>
PHP Monolith
<?= renderButton([
'variant' => 'primary',
'size' => 'md',
'label' => 'بدء التجربة الآن'
]); ?>