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 模态并设置其初始状态 |
名称 | 类型 | 描述 |
---|---|---|
backdropclick | 函数(e) | 背景元素上的点击处理程序 |
<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 morecontent. Such modals allow to create custom overlays with customcontent.</p><p><k-button @click="() => (sheetOpened = true)">Open Sheet</k-button></p></k-block><k-sheetclass="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 adexcepturi nesciunt nobis aliquam. Quibusdam ducimus nequenecessitatibus, 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>