Bootstrap 5 Offcanvas

Offcanvas (levy)

Offcanvas (levy) on samanlainen kuin modaalinen (oletusarvoisesti piilotettu ja näytetään aktiivisena), mutta se käytetään yleensä sivupaneelina navigointivalikkona.

Kuinka luoda Offcanvas-sivupaneeli

Tämä esimerkki näyttää, kuinka offcanvas-sivupaneeli luodaan:

Esimerkki

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Otsikko</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Joitakin tekstejä. Joitakin tekstejä. Joitakin tekstejä.</p>
    <p>Joitakin tekstejä. Joitakin tekstejä. Joitakin tekstejä.</p>
    <button class="btn btn-secondary" type="button">按钮</button>
  </div>
</div>
<!-- Painike offcanvas-sivupaneelin avaamiseen -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Avaa Offcanvas-sivupaneeli
</button>

Kokeile itse

Esimerkki selitys

.offcanvas luokka luo offcanvas-sivupaneelin.

.offcanvas-start luokka sijoittaa offcanvas ja asettaa sen leveyden 400px. Lisätietoja sijoitusluokista löydät alla olevista esimerkeistä.

.offcanvas-title luokka varmistaa sopivat reunat ja rivikorkeuden.

Lisää sitten sisällön .offcanvas-body luokassa.

Jos haluat avata offcanvas-sivupaneelin, sinun täytyy käyttää <button> tai <a> elementti osoittaa .offcanvas elementin id (esimerkissämme #demo）。

Jos haluat käyttää <a> elementti avaa offcanvas-sivupaneelin, voit käyttää href-ominaisuutta sen sijaan data-bs-target ominaisuus osoittaa #demo.

Offcanvas-asetukset

Käytä .offcanvas-start|end|top|bottom Aseta offcanvas-objekti vasemmalle, oikealle, ylälle tai alhaalle:

Oikeapuolinen esimerkki

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

Kokeile itse

Ylätuolinen esimerkki

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

Kokeile itse

Alapuolinen esimerkki

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

Kokeile itse