🔥 新プロジェクトのご紹介 t0ggles -究極のプロジェクト管理ツール！ 🔥

Sheet Vue コンポーネント

SheetModal は特殊なオーバーレイタイプです。このモーダルを使用すると、カスタムコンテンツを持つカスタムピッカーオーバーレイを作成できます。

Sheet モーダルコンポーネント

以下のコンポーネントが含まれています。

  • Sheet - シートモーダル要素

Sheet プロパティ

名前型デフォルト説明
backdropbooleantrue

Sheetモーダルのバックドロップ（後ろの暗い半透明レイヤー）を有効にします。

colorsobject

Tailwind CSSカラークラスを持つオブジェクト

colors.bgIosstring'bg-white dark:bg-black'
colors.bgMaterialstring'bg-md-light-surface dark:bg-md-dark-surface'
componentstring'div'

コンポーネントのHTML要素

openedbooleanfalse

Sheetモーダルを開閉し、初期状態を設定できます。

Sheet イベント

名前型説明
backdropclickfunction(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 by nolimits4web.