تمت الإضافة في v5.1 مشاهدة على الـ GitHub

الفاصل العمودي | Vertical rule

استخدم مساعد القاعدة الرأسية المخصص لإنشاء فواصل رأسية مثل عنصر <hr>.

في هذه الصفحة

كيف يعمل ؟

القواعد الرأسية مستوحاة من عنصر <hr>، مما يتيح لك إنشاء فواصل رأسية في التخطيطات الشائعة. وهي مصممة تماماً مثل عناصر <hr>:

عرضها 1px
لديها min-height بمقدار 1em
يتم تعيين لونها عبر currentColor و opacity

قم بتخصيصها بأنماط إضافية حسب الحاجة.

مثال

html

<div class="vr"></div>

تتوسع القواعد الرأسية في ارتفاعها ضمن تخطيطات flex:

html

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

مع المجموعات (Stacks)

يمكن استخدامها أيضاً في المجموعات (stacks):

First item

Second item

Third item

html

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2 ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="p-2">Third item</div>
</div>

الـ (CSS)

متغيرات الـ (Sass)

قم بتخصيص متغير الـ Sass الخاص بالقاعدة الرأسية لتغيير عرضها.

scss/_variables.scss

$vr-border-width:             var(--#{$prefix}border-width);