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

シート React コンポーネント

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

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

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

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

シートのプロパティ

名前タイプデフォルト説明
backdropboolean (ブーリアン)true

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

colorsobject (オブジェクト)

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

colors.bgIosstring (文字列)'bg-white dark:bg-black'
colors.bgMaterialstring (文字列)'bg-md-light-surface dark:bg-md-dark-surface'
componentstring (文字列)'div'

コンポーネントのHTML要素

openedboolean (ブーリアン)false

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

onBackdropClickfunction(e)

バックドロップ要素のクリックハンドラ

例

SheetModal.jsx
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Sheet,
  Block,
  Button,
  Toolbar,
  Link,
} from 'konsta/react';


export default function SheetModalPage() {
  const [sheetOpened, setSheetOpened] = useState(false);
  return (
    <Page>
      <Navbar
        title="Sheet Modal"
        />


      <Block strongIos outlineIos className="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={() => setSheetOpened(true)}>Open Sheet</Button>
        </p>
      </Block>


      <Sheet
        className="pb-safe"
        opened={sheetOpened}
        onBackdropClick={() => setSheetOpened(false)}
      >
        <Toolbar top>
          <div className="left" />
          <div className="right">
            <Link toolbar onClick={() => setSheetOpened(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 className="mt-4">
            <Button onClick={() => setSheetOpened(false)}>Action</Button>
          </div>
        </Block>
      </Sheet>
    </Page>
  );
}
コードのライセンス MIT.
2022 © Konsta UI by nolimits4web.