{{ pageTitle }} {{ pageSubtitle }}

{{ overviewIntro }}

{{ basicTitle }}

{{ basicBody }}

{{ startTitle }}

{{ startBody }}

{{ topTitle }}

{{ topBody }}

{{ footerTitle }}

{{ footerBody }}

{{ noBackdropTitle }}

{{ noBackdropBody }}

{{ lazyTitle }}

{{ lazyBody }}

{{ serviceTitle }}

{{ serviceBody }}

{{ guardedTitle }}

{{ guardedBody }}

{{ largeTitle }}

{{ largeBody }}

{{ eventLog }} 
<li-offcanvas
  title-text="Detalhes"
  position="end"
  size="lg"
  [lazyContent]="true"
  [keyboard]="true"
  [beforeDismiss]="guardBeforeDismiss"
  (shown)="onShown('Detalhes')"
  (hidden)="onHidden('Detalhes')"
  (close)="onClosed()"
  (dismiss)="onDismissed($event)">
  <div>Conteúdo projetado</div>
</li-offcanvas>
final ref = offcanvasService.open('service-demo');
ref.shown.listen((_) => print('shown'));
ref.hidden.listen((_) => print('hidden'));
ref.close();
<li-offcanvas #panel offcanvasId="service-demo" title-text="Ações">
  <div liOffcanvasHeader class="offcanvas-header bg-dark text-white">
    <h5 class="offcanvas-title mb-0">Header customizado</h5>
    <button class="btn-close btn-close-white" (click)="panel.close()"></button>
  </div>

  <div>Corpo padrão com projeção.</div>

  <div liOffcanvasFooter class="border-top p-3">
    <button class="btn btn-primary">Salvar</button>
  </div>
</li-offcanvas>
{{ basicPanelHeading }}

{{ basicPanelBody }}

{{ i + 1 }} {{ step }}

{{ startPanelBody }}
{{ topHeadline }}

{{ topPanelBody }}
{{ footerPanelTitle }}
{{ footerPanelSubtitle }}
{{ footerPanelHeading }}

{{ footerPanelBody }}

{{ helperPanelBody }}
{{ lazyPanelHeading }}
  • {{ item }}
{{ serviceFlowTitle }}

{{ serviceFlowBody }}
{{ guardedWarning }}
{{ xlReasonTitle }}

{{ xlReasonBody }}

{{ monitoredEventsTitle }}
  • {{ item }}