انشاء Bootstrap 5 Offcanvas
-
Offcanvas هو شريط جانبي مخفي في الصفحات او المشاريع يشبه الى حد كبير modals الي حكينا عنها سابقا، مثال ذلك عربات التسوق يتم اظهاراها عن الحاجه باستخدام مجموعه من classes واكواد JavaScript.
نطبق مثال حتى نفهم الموضوع.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target="#scrollspy" data-offset="1">
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Toal Items in Cart</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Item 1.</p>
<p>Item 2.</p>
<p>Item 3.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas Sidebar Examples</h3>
<button class="btn btn-warning" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
</div>
</body>
</html>
النتيجة:
تمام التمام نفهم شو عملنا.
طبقنا class المسى offcanvas. الي بعمل على انشاء الشريط الجانبي offcanvas.، بعد هيك طبقنا class باسم offcanvas-start. المسؤول عن تحديد مكان offcanvas ،والعرض الافتراضي بكون 400 بكسل. (اكيد ممكن تغير المكان).
الكود:
<div class="offcanvas offcanvas-start" id="demo">تضمن فئة العنوان .offcanvas هوامش مناسبة وارتفاع السطر.
بعد هيك اضفنا class باسم offcanvas-header الي اضفنا فيه العنوان وداخلها اضفنا عنوان وطبقنا عليه class باسم offcanvas-title. في هذا class يتم تحديد margins المناسبه وارتفاع السطر line-height. بعد هيك، أضفنا المحتوى وطبقنا عليه class باسم offcanvas-body.
واكيد لفتح الشريط الجانبي offcanvas ، بنحتاج استخدام <button>. ولتفح الشريط الجانبي بنستخدم الكود:
data-bs-toggle="offcanvas" data-bs-target="#demo"
الذي يشير إلى Id ل offcanvas container. (وفي مثالنا هون هو #demo).
لفتح الشريط الجانبي offcanvas باستخدام a> element> ، بنستخدم href attribute للإشارة إلى #demo ، بدلاً من سمة data-bs-target السابقه.
مكان Offcanvas Position
يمكن عرض offcanvas باكثر من مكان في الصفحه وهي :
.offcanvas-start : يستخدم لعرض offcanvas من اليسار الى اليمين.
.offcanvas-end : يستخدم لعرض offcanvas من اليمين الى اليسار.
.offcanvas-top: يستخدم لعرض offcanvas من الاعلى الى اسفل.
.offcanvas-bottom: يستخدم لعرض offcanvas من الاسفل الى الاعلى.
لتطبيق ذلك المطلوب هو تطبيق واحد من classes السابقة بدل الكود التالي:
<div class="offcanvas offcanvas-top" id="demo">
</div>
اترك تعليقك