مكون التكوين

نوافذ التبويب

يأخذ التنقل الأساسي ويضيف امتداد .tabs-nav فئة لتوليد واجهة مبوبة. استخدمها لإنشاء مناطق قابلة للجدولة.

علامة تبويب المثال

Test1 Test2 Test3

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test1. النقر ستقوم علامة تبويب أخرى بتبديل رؤية هذا في المرحلة التالية.

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test2. النقر ستقوم علامة تبويب أخرى بتبديل رؤية هذا في المرحلة التالية.

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test3. النقر ستقوم علامة تبويب أخرى بتبديل رؤية هذا في المرحلة التالية.

<div class="tabs">
 <div class="tabs-nav">
  <a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
  <a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
  <a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
 </div>
 <div class="tabs-content">
  <div id="test1">...</div>
  <div id="test2">...</div>
  <div id="test3">...</div>
 </div>
</div>

علامة تبويب بلون علامات التبويب النشطة

Test1 Test2 Test3

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test1. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب بيضاء اللون.

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test2. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب بيضاء اللون.

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test3. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب بيضاء اللون.

<div class="tabs colored-1">
 <div class="tabs-nav">
  <a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
  <a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
  <a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
 </div>
 <div class="tabs-content">
  <div id="test1">...</div>
  <div id="test2">...</div>
  <div id="test3">...</div>
 </div>
</div>

علامة تبويب مع لون علامات التبويب النشطة ولون الخلفية

Test1 Test2 Test3

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test1. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب ألوان الخلفية النشطة.

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test2. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب ألوان الخلفية النشطة.

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test3. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب ألوان الخلفية النشطة.

<div class="tabs colored-2">
 <div class="tabs-nav">
  <a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
  <a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
  <a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
 </div>
 <div class="tabs-content">
  <div id="test1">...</div>
  <div id="test2">...</div>
  <div id="test3">...</div>
 </div>
</div>

صرخ

قم بتوفير رسائل ملاحظات سياقية لإجراءات المستخدم النموذجية مع حفنة من الرسائل المتاحة والمرنة.

هذا هو وسيلة الشرح الافتراضية

وسيلة شرح بسيطة - تحقق من ذلك!

<div class="callout">
 <p class="callout-title">This is default callout</p>
 <p>...</p>
</div>

هذه وسيلة شرح متقطعة

هذه وسيلة شرح متقطعة

<div class="callout callout--dashed">
 <p class="callout-title">This is dashed callout</p>
 <p>...</p>
</div>

هذه وسيلة شرح شفافة

وسيلة شرح شفافة بسيطة - تحقق من ذلك!

<div class="callout callout--transparent">
 <p class="callout-title">This is transparent callout</p>
 <p>...</p>
</div>

هذه وسيلة شرح معلومات

وسيلة معلومات بسيطة - تحقق من ذلك!

<div class="callout callout--info">
 <p class="callout-title">This is info callout</p>
 <p>...</p>
</div>

هذا هو وسيلة شرح النجاح

وسيلة شرح بسيطة للنجاح - تحقق من ذلك!

<div class="callout callout--success">
 <p class="callout-title">This is success callout</p>
 <p>...</p>
</div>

هذه وسيلة شرح تحذيرية

وسيلة شرح تحذيرية بسيطة - تحقق من ذلك!

<div class="callout callout--warning">
 <p class="callout-title">This is warning callout</p>
 <p>...</p>
</div>

هذه وسيلة شرح تنبيه

وسيلة شرح تنبيه بسيطة - تحقق من ذلك!

<div class="callout callout--alert">
 <p class="callout-title">This is alert callout</p>
 <p>...</p>
</div>

الأكورديون

بناء الأكورديون المنهارة رأسياً في تركيبة

مثال الأكورديون

هذا هو الأكورديون 1

هذا هو جسم أكورديون العنصر الأول. إنه مخفي افتراضيًا ، حتى يضيف ملحق الطي الفئات المناسبة التي نقوم بها تستخدم لتصميم كل عنصر. تتحكم هذه الفئات في المظهر العام ، وكذلك العرض والاختباء عبر انتقالات CSS. يمكنك تعديل أي ملف من هذا باستخدام CSS مخصص أو تجاوز المتغيرات الافتراضية لدينا. إنه يستحق أيضًا مع الإشارة إلى أنه يمكن إدخال أي HTML تقريبًا داخل ملف .accordion-panel, على الرغم من أن الانتقال لا يحد من الفائض.

هذا هو الأكورديون 2

هذا هو جسم أكورديون العنصر الأول. إنه مخفي افتراضيًا ، حتى يضيف ملحق الطي الفئات المناسبة التي نقوم بها تستخدم لتصميم كل عنصر. تتحكم هذه الفئات في المظهر العام ، وكذلك العرض والاختباء عبر انتقالات CSS. يمكنك تعديل أي ملف من هذا باستخدام CSS مخصص أو تجاوز المتغيرات الافتراضية لدينا. إنه يستحق أيضًا مع الإشارة إلى أنه يمكن إدخال أي HTML تقريبًا داخل ملف .accordion-panel, على الرغم من أن الانتقال لا يحد من الفائض.

هذا هو الأكورديون 3

هذا هو جسم أكورديون العنصر الأول. إنه مخفي افتراضيًا ، حتى يضيف ملحق الطي الفئات المناسبة التي نقوم بها تستخدم لتصميم كل عنصر. تتحكم هذه الفئات في المظهر العام ، وكذلك العرض والاختباء عبر انتقالات CSS. يمكنك تعديل أي ملف من هذا باستخدام CSS مخصص أو تجاوز المتغيرات الافتراضية لدينا. إنه يستحق أيضًا مع الإشارة إلى أنه يمكن إدخال أي HTML تقريبًا داخل ملف .accordion-panel, على الرغم من أن الانتقال لا يحد من الفائض.

<div class="accordion">This is accordion 1</div>
 <div class="accordion-panel">
  <p>...</p>
</div>

<div class="accordion">This is accordion 2</div>
 <div class="accordion-panel">
  <p>...</p>
</div>

<div class="accordion">This is accordion 3</div>
 <div class="accordion-panel">
  <p>...</p>
</div>

Lightbox الصورة