Offcanvas

bs-offcanvas is a slide-in panel anchored to one of the four viewport edges via [position] (start, end, top, bottom). The host owns open/close state via [(open)]. The panel renders at the end of <body>; with [backdrop] (the default) it is modal and traps focus. The content is the body, the *bsOffcanvasHeader slot is the title that names the panel, and any element inside with data-bs-dismiss="offcanvas" closes it. Escape and the backdrop close it too.

Basic usage

Show offcanvas

  
    
      
        <button [color]="colors.primary" (click)="visible.set(true)">Open offcanvas</button>
        
    
      
        
        
    
      
        <bs-offcanvas [(open)]="visible" position="end">
        
    
      
          <span *bsOffcanvasHeader>Offcanvas title</span>
        
    
      
          Place any content here — forms, lists, navigation.
        
    
      
        </bs-offcanvas>

  
    
      
        import { Component, model } from '@angular/core';
        
    
      
        import { Color } from '@mintplayer/ng-bootstrap';
        
    
      
        import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
        
    
      
        import { BsOffcanvasComponent, BsOffcanvasHeaderDirective } from '@mintplayer/ng-bootstrap/offcanvas';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-offcanvas-demo',
        
    
      
          templateUrl: './my-offcanvas-demo.component.html',
        
    
      
          imports: [BsOffcanvasComponent, BsOffcanvasHeaderDirective, BsButtonTypeDirective],
        
    
      
        })
        
    
      
        export class MyOffcanvasDemoComponent {
        
    
      
          protected readonly colors = Color;
        
    
      
          protected readonly visible = model(false);
        
    
      
        }

Code

The code is available here.