🔥 认识我们的新项目 t0ggles - 你终极的项目管理工具! 🔥

Sheet Vue 组件

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

Sheet 模态组件

以下组件包含在内

  • Sheet - sheet 模态元素

Sheet 属性

名称类型默认值描述
backdrop布尔值true

启用 Sheet 模态背景(后面是深色半透明层)

颜色对象

包含 Tailwind CSS 颜色类的对象

colors.bgIos字符串'bg-white dark:bg-black'
colors.bgMaterial字符串'bg-md-light-surface dark:bg-md-dark-surface'
组件字符串'div'

组件的 HTML 元素

已打开布尔值false

允许打开/关闭 Sheet 模态并设置其初始状态

Sheet 事件

名称类型描述
backdropclick函数(e)

背景元素上的点击处理程序

示例

SheetModal.vue
<template>
<k-page>
<k-navbar title="Sheet Modal" />
<k-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>
<k-button @click="() => (sheetOpened = true)">Open Sheet</k-button>
</p>
</k-block>
<k-sheet
class="pb-safe"
:opened="sheetOpened"
@backdropclick="() => (sheetOpened = false)"
>
<k-toolbar top>
<div class="left" />
<div class="right">
<k-link toolbar @click="() => (sheetOpened = false)"> Done </k-link>
</div>
</k-toolbar>
<k-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">
<k-button @click="() => (sheetOpened = false)">Action</k-button>
</div>
</k-block>
</k-sheet>
</k-page>
</template>
<script>
import { ref } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kSheet,
kBlock,
kButton,
kToolbar,
kLink,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kSheet,
kBlock,
kButton,
kToolbar,
kLink,
},
setup() {
const sheetOpened = ref(false);
return {
sheetOpened,
};
},
};
</script>
代码许可证为 MIT.
2022 © Konsta UI 由 nolimits4web.