نمط معماري تفاعلي
UX Pattern
WCAG 2.1 AA
100% Logical CSS
شريط إجراءات النماذج Form Actions
مكون عالي الأداء مبني وفق ميثاق قاهرة الموحد مع التزام تام بالوصولية والأداء.
renderers/html/native/patterns/FormActions.html
المتغيرات:
default, primary, secondary
renderers/html/native/patterns/FormActions.html · HTML5 Strict Markup
<!-- Qahera UI Kit - Form Actions Pattern (Native HTML) -->
<div class="qhr-form-actions" style="display: flex; justify-content: flex-end; align-items: center; gap: var(--qhr-space-3); padding-top: var(--qhr-space-4); border-top: 1px solid var(--qhr-color-border);">
<button type="button" class="qhr-btn qhr-btn--secondary qhr-btn--md">
<span>إلغاء الأمر</span>
</button>
<button type="submit" class="qhr-btn qhr-btn--primary qhr-btn--md">
<svg class="qhr-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
<polyline points="17 21 17 13 7 13 7 21" />
<polyline points="7 3 7 8 15 8" />
</svg>
<span>حفظ التغييرات</span>
</button>
</div>
مواصفات الميثاق المعماري (Architectural Contract)
التصنيف والهدف (Role & Category)
التصنيف: نمط معماري تفاعلي
الغرض: مكون عالي الأداء مبني وفق ميثاق قاهرة الموحد مع التزام تام بالوصولية والأداء.
المتغيرات المدعومة (Variants)
default, primary, secondary
تعتمد كلياً على فئات CSS المعيارية --qhr-* دون انحراف مفرداتي.
المقاسات المعيارية (Sizes)
sm, md, lg
متناسقة بصرياً وتدعم التكبير الهرمي المتوازن.
إمكانية الوصول (A11y Standards)
متوافق مع WCAG 2.1 AA بنسبة تباين تتجاوز 4.5:1.
دعم كامل للوحة المفاتيح ومؤشرات التركيز focus-visible.