Sheetmodal

Sheet Props

Name	Type	Default	Description
backdrop	boolean	true	Enables Sheet modal backdrop (dark semi transparent layer behind)
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-white dark:bg-black'
colors.bgMaterial	string	'bg-md-light-surface dark:bg-md-dark-surface'
component	string	'div'	Component's HTML Element
opened	boolean	false	Allows to open/close Sheet modal and set its initial state

Sheet Events

Name	Type	Description
backdropclick	function(e)	Click handler on backdrop element

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Sheet Modal" />

    <i-block strong-ios outline-ios class="space-y-4">
      <p>
        Sheet Modals slide up from the bottom of the screen to reveal more
        content. Such modals allow to create custom overlays with custom
        content.
      </p>
      <p>
        <i-button @click="() => (sheetOpened = true)">Open Sheet</i-button>
      </p>
    </i-block>

    <i-sheet
      class="pb-safe"
      :opened="sheetOpened"
      @backdropclick="() => (sheetOpened = false)"
    >
      <i-toolbar top>
        <div class="left" />
        <div class="right">
          <i-link toolbar @click="() => (sheetOpened = false)"> Done </i-link>
        </div>
      </i-toolbar>
      <i-block>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum ad
          excepturi nesciunt nobis aliquam. Quibusdam ducimus neque
          necessitatibus, molestias cupiditate velit nihil alias incidunt,
          excepturi voluptatem dolore itaque sapiente dolores!
        </p>
        <div class="mt-4">
          <i-button @click="() => (sheetOpened = false)">Action</i-button>
        </div>
      </i-block>
    </i-sheet>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iSheet,
    iBlock,
    iButton,
    iToolbar,
    iLink,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iSheet,
      iBlock,
      iButton,
      iToolbar,
      iLink,
    },
    setup() {
      const sheetOpened = ref(false);
      return {
        sheetOpened,
      };
    },
  };
</script>

React

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Sheet,
  Block,
  Button,
  Toolbar,
  Link,
} from 'ina-ui/react';

export default function SheetModalPage() {
  const [sheetOpened, setSheetOpened] = useState(false);
  return (
    <Page>
      <Navbar
        title="Sheet Modal"
        />

      <Block strongIos outlineIos className="space-y-4">
        <p>
          Sheet Modals slide up from the bottom of the screen to reveal more
          content. Such modals allow to create custom overlays with custom
          content.
        </p>
        <p>
          <Button onClick={() => setSheetOpened(true)}>Open Sheet</Button>
        </p>
      </Block>

      <Sheet
        className="pb-safe"
        opened={sheetOpened}
        onBackdropClick={() => setSheetOpened(false)}
      >
        <Toolbar top>
          <div className="left" />
          <div className="right">
            <Link toolbar onClick={() => setSheetOpened(false)}>
              Done
            </Link>
          </div>
        </Toolbar>
        <Block>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum ad
            excepturi nesciunt nobis aliquam. Quibusdam ducimus neque
            necessitatibus, molestias cupiditate velit nihil alias incidunt,
            excepturi voluptatem dolore itaque sapiente dolores!
          </p>
          <div className="mt-4">
            <Button onClick={() => setSheetOpened(false)}>Action</Button>
          </div>
        </Block>
      </Sheet>
    </Page>
  );
}