Offcanvas‌های Bootstrap 5

Offcanvas (کانواس)

Offcanvas (کانواس) مانند مودل (دفعہ میں پنهان اور فعال ہونے پر دکھایا جاتا ہے)، اس کی فرق یہ ہے کہ یہ عام طور پر سائیڈ بار ناویگیشن منو کے طور پر استعمال کیا جاتا ہے。

کہا ویسا، offcanvas کیسے بنایا جاتا ہے

در آمدیں، چگونه offcanvas سائیڈ بار بنایا جاتا ہے:

مثال

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">عنوان</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas">بند</button>
  </div>
  <div class="offcanvas-body">
    <p>کچھ متن۔ کچھ متن۔ کچھ متن۔</p>
    <p>کچھ متن۔ کچھ متن۔ کچھ متن۔</p>
    <button class="btn btn-secondary" type="button">بٹن</button>
  </div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Offcanvas کا سمت کا دکھانے کے لئے کریپشن کریں
</button>

خود خود کا تجربہ کریں

مثال کی تفسیر

.offcanvas کلاس offcanvas کا سمت کا دکھانے کے لئے استعمال کی جاتی ہے۔

.offcanvas-start کلاس offcanvas کو رکھتی ہے اور اس کی چوڑائی کو 400px میں ستھرایا ہے۔ مزید رکھنوں کی تفصیلات کے لئے نیچے کے مثال دیکھیں۔

.offcanvas-title کلاس کو یقینی بنایا گیا ہے کہ مناسب کراو اور خط کی بلندی ہو۔

تاہم، آپ کا معلومات کو .offcanvas-body کلاس میں۔

کریپشن استعمال کریں <button> یا <a> عنصر کی سمت .offcanvas کابین کا آئی ڈی (ہمارے مثال میں #demo）。

کریپشن استعمال کریں <a> عنصر offcanvas کا سمت کا دکھانے کے لئے آپ میں سے کسی کو استعمال کرسکتے ہیں، href پرانہیں استعمال کرسکتے ہیں data-bs-target پارٹی کی سمت #demo。

Offcanvas رکھنا

کریپشن استعمال کریں .offcanvas-start|end|top|bottom offcanvas کو دسہراب، باہر، بالا یا پائین میں رکھنا:

دسہراب مثال

<div class="offcanvas offcanvas-end" id="demo">

خود خود کا تجربہ کریں

بالا مثال

<div class="offcanvas offcanvas-top" id="demo">

خود خود کا تجربہ کریں

پایین مثال

<div class="offcanvas offcanvas-bottom" id="demo">

خود خود کا تجربہ کریں