Latest web development tutorials

علامة التبويب الأيونية (علامة التبويب)

علامة التبويب الأيونية (تبويب) يتم محاذاة أفقيا أزرار أو روابط للتنقل بين صفحات التبديل. ويمكن أن تحتوي على مجموعة من النصوص والرموز على جهاز المحمول هو وسيلة شعبية للملاحة.

استخدام علامات التبويب علامات التبويب الطبقات الحاوية التالية، كل علامة تبويب باستخدام فئة التبويب البند. افتراضيا، علامة التبويب هو النص وليس رمز.

أمثلة

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

افتراضيا، لون علامة التبويب هو الافتراضي، يمكنك تعيين أنماط الألوان المختلفة التالية: علامات التبويب الافتراضي، علامات ضوء، علامات مستقرة، علامات إيجابية، علامات، هادئة، علامات متوازنة، تنشيط علامات التبويب، علامات التبويب، حزما، علامات التبويب -royal، علامات الظلام.

لإخفاء شريط التبويب، يمكنك استخدام الطبقة علامات التبويب البند إخفاء.

علامة التبويب رمز

بعد انتهاء الدرس لإضافة علامات تبويب-رمز فقط يمكن تعيين الطبقات لعرض فقط علامة التبويب رمز.

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

ايقونة + علامة التبويب النص

بعد انتهاء الدرس لإضافة علامات تبويب-رمز-الطبقة العليا رمز + نص يمكن تعيين في الجزء العلوي من علامة التبويب.

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="#">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

تبقى من رمز + علامة التبويب النص

رمز بعد الطبقة لإضافة علامات تبويب-رمز-الأيسر على الجانب الأيسر من الدرجة يمكن تعيين إلى علامة التبويب نص +.

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

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

يمكنك إضافة نمط علامات التبويب-مخطط على اسم عنصر مع علامات التبويب لتحقيق علامات التبويب النمط كما الروبوت. يمكنك أيضا إضافة علامات تبويب أعلى لتحقيق التبويب في الجزء العلوي من الصفحة.

المشارب اللون التبويب يمكن أن يسيطر عليها علامات التبويب-background- {اللون} وعلامات-color- {لون}، {} لون قيمة يمكن أن يكون: الافتراضي، ضوء، مستقر، سواء كان إيجابيا، والهدوء ومتوازنة، تنشيط، حزما، ملكي، أو الظلام.

ملاحظة: إذا كان رئيس العنوان على علامة التبويب مرة أخرى، تحتاج إلى استخدام فئة لديها علامات التبويب أعلى.

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

النتائج التشغيلية هي كما يلي: