@sveltestrap/sveltestrap/src/Offcanvas/Offcanvas.mdx

Bootstrap components for Svelte

import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as OffcanvasStories from './Offcanvas.stories';

  <Meta title="Components/Offcanvas" />

# Offcanvas <small class="bootstrap-docs">[Bootstrap Offcanvas](https://getbootstrap.com/docs/5.3/components/offcanvas/)</small>

The `<Offcanvas>` component is used to manage and present content in a compact and organized manner, enhancing both the usability and aesthetics of a user interface.

<Canvas>
  <Story of={OffcanvasStories.Basic} />
</Canvas>

<div id="offcanvas-controls">
  <Controls of={OffcanvasStories.Basic} />
</div>

## Backdrop

<p>You can disable the <code>Offcanvas</code> backdrop by setting the <code>backdrop</code> prop to <code>false</code>.</p>

<Canvas withSource="none">
  <Story of={OffcanvasStories.Backdrop} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Button, Offcanvas } from '@sveltestrap/sveltestrap';

  let isOpen = false;

  const toggle = () => {
    isOpen = !isOpen;
  };
</script>

<Button color="primary" on:click={toggle}>Open</Button>

<Offcanvas header="No Backdrop" {isOpen} {toggle} backdrop={false}>
  Look ma, no backdrop.
</Offcanvas>
`} />


## Events

<code>Offcanvas</code> provides four events for managing state: <code>opening</code>, <code>open</code>, <code>closing</code>, and <code>close</code>.

<Canvas withSource="none">
  <Story of={OffcanvasStories.Events} />
</Canvas>

<Source dark language="html" code={`

<script lang="ts">
  import { Button, Offcanvas } from '@sveltestrap/sveltestrap';

  let isOpen = false;

  const toggle = () => {
    isOpen = !isOpen;
  };
</script>

<Button color="primary" on:click={toggle}>Open</Button>

<code>Current state: {status}</code>

<Offcanvas
  {isOpen}
  {toggle}
  placement="end"
  on:opening={() => (status = 'Opening...')}
  on:open={() => (status = 'Opened')}
  on:closing={() => (status = 'Closing...')}
  on:close={() => (status = 'Closed')}
>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</Offcanvas>
`} />

## Placement

<Canvas withSource="none">
  <Story of={OffcanvasStories.Placement} />
</Canvas>

<Source dark language="html" code={`

<script lang="ts">
  import { Button, Offcanvas } from '@sveltestrap/sveltestrap';

  let isOpen = false;
  let status = 'Closed';
  let endOpen = false;
  let bottomOpen = false;
  let topOpen = false;
  const toggleEnd = () => (endOpen = !endOpen);
  const toggleBottom = () => (bottomOpen = !bottomOpen);
  const toggleTop = () => (topOpen = !topOpen);

  const toggle = () => {
    isOpen = !isOpen
  };
</script>

<Button color="danger" on:click={toggle}>Start</Button>
<Button color="warning" on:click={() => (endOpen = !endOpen)}>End</Button>
<Button color="success" on:click={() => (topOpen = !topOpen)}>Top</Button>
<Button color="info" on:click={() => (bottomOpen = !bottomOpen)}>
  Bottom
</Button>

<Offcanvas {isOpen} {toggle} header="Start" placement="start">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</Offcanvas>

<Offcanvas isOpen={endOpen} toggle={toggleEnd} placement="end" header="Right">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</Offcanvas>

<Offcanvas isOpen={topOpen} toggle={toggleTop} placement="top" header="Top">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</Offcanvas>

<Offcanvas
  isOpen={bottomOpen}
  toggle={toggleBottom}
  placement="bottom"
  header="Bottom"
>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</Offcanvas>
`} />

## Slots

- <code>default</code> This slot is used to render the content for <code>Offcanvas</code> body.
- <code>header</code> Use this slot to create a custom formatted header for the <code>Offcanvas</code>.

<Canvas withSource="none">
  <Story of={OffcanvasStories.Slots} />
</Canvas>

<Source dark language="html" code={`

<script lang="ts">
  import { Button, Offcanvas } from '@sveltestrap/sveltestrap';

  let isOpen = false;

  const toggle = () => {
    isOpen = !isOpen;
  };
</script>

<Button color="primary" on:click={toggle}>Open</Button>

<Offcanvas scroll isOpen={isOpen} {toggle}>
  <h1 slot="header">
    <i>Hello <b>World!</b></i>
  </h1>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
</Offcanvas>
`} />

## Manual

<Canvas withSource="none">
  <Story of={OffcanvasStories.Manual} />
</Canvas>

<Source dark language="html" code={`

<script lang="ts">
  import { Button, Offcanvas } from '@sveltestrap/sveltestrap';

  let isOpen = false;

  const toggle = () => {
    isOpen = !isOpen;
  };
</script>

<Button color="primary" on:click={() => (isOpen = true)}>Open</Button>

<Offcanvas header="No toggle or esc" scroll {isOpen}>
  <Button color="danger" on:click={() => (isOpen = false)}>Close Me</Button>
</Offcanvas>
`} />

## Scrolling

<Canvas withSource="none">
  <Story of={OffcanvasStories.Scrolling} />
</Canvas>

<Source dark language="html" code={`

<script lang="ts">
  import { Button, Offcanvas } from '@sveltestrap/sveltestrap';

  let isOpen = false;

  const toggle = () => {
    isOpen = !isOpen;
  };
</script>

<Button color="primary" on:click={toggle}>Open Offcanvas</Button>

<Offcanvas
  header="You can scroll the body"
  scroll
  {isOpen}
  {toggle}
  backdrop={false}
>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.</p>

  // ... a bunch more content
</Offcanvas>
`} />

## Custom Width & Content

<Canvas withSource="none">
  <Story of={OffcanvasStories.Custom} />
</Canvas>

<Source dark language="html" code={`

<script lang="ts">
  import { Button, Offcanvas } from '@sveltestrap/sveltestrap';

  let isOpen = false;

  const toggle = () => {
    isOpen = !isOpen;
  };
</script>

<Button color="primary" on:click={() => (isOpen = true)}>Open</Button>

<Offcanvas isOpen={isOpen} body={false} style="width: 150px" class="bg-danger">
  <div on:click={() => (isOpen = false)}>
    <img src="https://picsum.photos/150/1200" alt="Meaningless content" />
  </div>
</Offcanvas>
`} />

## Theming

<Canvas withSource="none">
  <Story of={OffcanvasStories.Theming} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Button, Offcanvas } from '@sveltestrap/sveltestrap';

  let isOpen = false;
  let endOpen = false;

  const toggle = () => (isOpen = !isOpen)
  const toggleEnd = () => (endOpen = !endOpen);
</script>

<Button color="dark" on:click={toggle}>Dark Theme</Button>
<Button color="light" on:click={() => (endOpen = !endOpen)}>Light Theme</Button>

<Offcanvas theme="dark" {isOpen} {toggle} header="Dark Theme" placement="start">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua.
</Offcanvas>

<Offcanvas theme="light" isOpen={endOpen} toggle={toggleEnd} header="Light Theme" placement="end">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua.
</Offcanvas>
`} />