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 الدلالية ، قم بزيارة الرابط المقدم في قسم "مزيد من المعلومات" لمعرفة المزيد.