Documentation

Documentation - Offcanvas.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Documentation - Offcanvas. +

Démarrage

Concepts de base

Utilitaires

Composants

Offcanvas

Marssel intègre un système d'offcanvas pour créer des panneaux latéraux coulissants depuis les bords de l'écran. Idéal pour les menus de navigation, filtres, paniers d'achat ou tout contenu secondaire.

Configuration de base

Le OffcanvasManager est automatiquement initialisé :

const marssel = new Marssel();
// Le OffcanvasManager est prêt à l'emploi

Structure HTML

Un offcanvas se compose d'un déclencheur et d'un panneau :

Aperçu

<button data-offcanvas-target="offcanvas-menu">
    Ouvrir le menu
</button>

<div id="offcanvas-menu" class="offcanvas offcanvas-start">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title c-[black]">Menu</h5>
        <button class="offcanvas-close">&times;</button>
    </div>
    <div class="offcanvas-body">
        <p>Contenu du menu</p>
    </div>
</div>

Positions disponibles

Définissez la position avec les classes appropriées :

<!-- Depuis la gauche (défaut) -->
<div id="offcanvas-start" class="offcanvas offcanvas-start">
    <!-- Contenu -->
</div>

<!-- Depuis la droite -->
<div id="offcanvas-end" class="offcanvas offcanvas-end">
    <!-- Contenu -->
</div>

<!-- Depuis le haut -->
<div id="offcanvas-top" class="offcanvas offcanvas-top">
    <!-- Contenu -->
</div>

<!-- Depuis le bas -->
<div id="offcanvas-bottom" class="offcanvas offcanvas-bottom">
    <!-- Contenu -->
</div>

Verrouillage du scroll

Contrôlez le défilement de la page avec data-offcanvas-lock-scroll :

<!-- Avec verrouillage (défaut) -->
<button data-offcanvas-target="offcanvas-menu"
        data-offcanvas-lock-scroll="true">
    Ouvrir
</button>

<!-- Sans verrouillage -->
<button data-offcanvas-target="offcanvas-menu"
        data-offcanvas-lock-scroll="false">
    Ouvrir
</button>

API JavaScript

Contrôlez les offcanvas programmatiquement :

// Afficher un offcanvas
marssel.offcanvasManager.show('offcanvas-id');

// Afficher sans verrouiller le scroll
marssel.offcanvasManager.show('offcanvas-id', false);

// Masquer l'offcanvas actif
marssel.offcanvasManager.hideActive();

// Créer un offcanvas dynamiquement
marssel.offcanvasManager.create({
    id: 'new-offcanvas',
    title: 'Nouveau panneau',
    content: '<p>Contenu dynamique</p>',
    position: 'end' // 'start', 'end', 'top', 'bottom'
});

// Mettre à jour le contenu
marssel.offcanvasManager.update('offcanvas-id', {
    title: 'Nouveau titre',
    content: '<p>Nouveau contenu</p>'
});

// Supprimer un offcanvas
marssel.offcanvasManager.remove('offcanvas-id');

Événements personnalisés

Écoutez les événements d'ouverture et fermeture :

// Événement d'ouverture
document.getElementById('offcanvas-menu').addEventListener('offcanvas:shown', (e) => {
    console.log('Offcanvas ouvert');
    // Charger des données, etc.
});

// Événement de fermeture
document.getElementById('offcanvas-menu').addEventListener('offcanvas:hidden', (e) => {
    console.log('Offcanvas fermé');
    // Nettoyer, sauvegarder, etc.
});

Personnalisation des styles

Stylez vos offcanvas avec les classes Marssel :

<!-- Header personnalisé -->
<div class="offcanvas-header---[bg-[gradient(135deg,_667eea_0%,_764ba2_100%)]+c-[ffffff]+border-[none]]">
    <h5 class="offcanvas-title---[font-size-[20px]+font-weight-[700]]">Titre</h5>
    <button class="offcanvas-close---[c-[ffffff]+font-size-[28px]]">&times;</button>
</div>

<!-- Body personnalisé -->
<div class="offcanvas-body---[bg-[f8f9fa]+p-[24px]]">
    <p>Contenu</p>
</div>

Offcanvas responsive

Adaptez la largeur selon la taille d'écran :

<style>
.offcanvas-start,
.offcanvas-end {
    width: 300px;
}

@media (min-width: 768px) {
    .offcanvas-start,
    .offcanvas-end {
        width: 400px;
    }
}

@media (min-width: 1024px) {
    .offcanvas-start,
    .offcanvas-end {
        width: 500px;
    }
}
</style>

Exemple complet