Sheet Svelte 組件

表單模式視窗組件
表單 Props
範例

表單模式視窗是一種特殊的覆蓋類型。此類模式允許建立具有自訂內容的自訂選擇器覆蓋。

包含以下組件

Sheet - 表單模式視窗元素

表單 Props

名稱	類型	預設值	描述
backdrop	布林值	true	啟用表單模式視窗背景（後方的深色半透明圖層）
colors	物件		具有 Tailwind CSS 顏色類別的物件
colors.bgIos	字串	'bg-white dark:bg-black'
colors.bgMaterial	字串	'bg-md-light-surface dark:bg-md-dark-surface'
opened	布林值	false	允許開啟/關閉表單模式視窗並設定其初始狀態
onBackdropClick	函式(e)		背景元素上的點擊處理程式

範例

SheetModal.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Sheet,
    Block,
    Button,
    Toolbar,
    Link,
  } from 'konsta/svelte';

  let sheetOpened = false;
</script>

<Page>
  <Navbar title="Sheet Modal" />

  <Block strongIos outlineIos 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>
      <Button onClick={() => (sheetOpened = true)}>Open Sheet</Button>
    </p>
  </Block>

  <Sheet
    class="pb-safe"
    opened={sheetOpened}
    onBackdropClick={() => (sheetOpened = false)}
  >
    <Toolbar top>
      <div class="left"></div>
      <div class="right">
        <Link toolbar onClick={() => (sheetOpened = 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 class="mt-4">
        <Button onClick={() => (sheetOpened = false)}>Action</Button>
      </div>
    </Block>
  </Sheet>
</Page>

Sheet Svelte 組件

表單模式視窗組件

表單 Props

範例