シート Svelte コンポーネント

シートモーダルコンポーネント
シートのプロパティ
例

シートモーダルは特別なオーバーレイタイプです。このモーダルでは、カスタムコンテンツを持つカスタムピッカーオーバーレイを作成できます。

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

Sheet - シートモーダル要素

シートのプロパティ

名前	タイプ	デフォルト	説明
backdrop	boolean (真偽値)	true (真)	シートモーダルのバックドロップ（背後にある暗い半透明レイヤー）を有効にします
colors	object (オブジェクト)		Tailwind CSSカラースタイルクラスを持つオブジェクト
colors.bgIos	string (文字列)	'bg-white dark:bg-black'
colors.bgMaterial	string (文字列)	'bg-md-light-surface dark:bg-md-dark-surface'
opened	boolean (真偽値)	false (偽)	シートモーダルを開閉し、初期状態を設定できます
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>

シート Svelte コンポーネント

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

シートのプロパティ

例