Sheet Svelte 组件

Sheet 模态组件
Sheet 属性
示例

Sheet 模态是一种特殊的叠加类型。这种模态允许创建带有自定义内容的自定义选择器叠加。

包含以下组件

Sheet - sheet 模态元素

Sheet 属性

名称	类型	默认值	描述
backdrop	布尔值	true	启用 Sheet 模态的背景（后面是半透明的深色层）
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.bgIos	字符串	'bg-white dark:bg-black'
colors.bgMaterial	字符串	'bg-md-light-surface dark:bg-md-dark-surface'
opened	布尔值	false	允许打开/关闭 Sheet 模态并设置其初始状态
onBackdropClick	function(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 组件

Sheet 模态组件

Sheet 属性

示例