3.6 KiB
| title | localeTitle |
|---|---|
| Semantic UI Buttons | أزرار واجهة المستخدم الدلالية |
أزرار واجهة المستخدم الدلالية
يشير الزر إلى إجراء محتمل للمستخدم. توفر واجهة المستخدم Semantic بناء جملة سهلة الاستخدام يبسط ليس فقط تصميم زر ، ولكن أيضا دلالات اللغة الطبيعية.
كيف تستعمل
تتم إضافة فئة واجهة المستخدم الدلالية ببساطة إلى عنصر زر ، تم إعطاء أمثلة مختلفة أدناه للإشارة إلى كيفية استخدامها.
أنواع
- زر قياسي
معيار واجهة المستخدم الدلالي زر
<button class="ui button">Standard Button</button>
- التركيز على زر
زر مع مستوى مختلف من التركيز
<button class="ui primary button">
تعتبر فئات التركيز الأخرى secondary positive negative
- زر متحرك
زر مع الرسوم المتحركة ، تظهر محتويات مخفية
`
خاصية tabindex="0" أعلاه تجعل لوحة مفاتيح الأزرار tabindex="0" ، حيث أن العلامة <button> لم يتم استخدامها.
- زر التسمية
زر بجانب علامة
`
يتم استخدام العنصر <i> لتحديد رمز ، هنا هو رمز قلب <i class="heart icon"></i> إلى جانب العلامة الأساسية <a class="ui basic label">2,048</a>
- أيقونة زر
يمكن أن يكون زر واجهة المستخدم الدلالية مجرد رمز
<button class="ui icon button"> <i class="camera icon"></i> </button>
ما سبق هو مجرد رمز الكاميرا
المجموعات
يمكن أن توجد أزرار واجهة المستخدم الدلالية في مجموعة
`
يحتوى
يمكن أن تحتوي أزرار واجهة المستخدم الدلالية على شرطية
`
تنص على
يمكن أن توجد أزرار واجهة المستخدم الدلالية في حالات مختلفة ، active ، disabled ، loading . ببساطة إضافة اسم الدولة إلى class سمة of `العنصر.
<button class="ui loading button">Loading</button>
الاختلافات
توجد أزرار UI الدلالي في مجموعة متنوعة من الأحجام، mini ، tiny ، small ، medium ، large ، big ، huge ، و massive .
<button class="ui massive button">Massive Button</button>
هناك الكثير حول أزرار UI الدلالية ، قم بزيارة الرابط المقدم في قسم "مزيد من المعلومات" لمعرفة المزيد.