@capgo/capacitor-sheets

Capacitorでシルクスタイルのシート、ドロワー、ダイアログ、トースト、ライトボックス、カード、ページオーバーレイを作成できます。

はじめに GitHub

フレームワーク非依存

React、Vue、Angular、Svelte、Solidなどの標準ベースのカスタム要素を直接使用するか、セットアップヘルパーを使用して標準ベースのカスタム要素を使用する

Capacitor対応

安全なエリア、キーボードの動き、ネイティブのエッジのジェスチャー、WebViewのテーマカラーのダミングをWeb層から尊重する

すべてのシートの形状

下部シート、サイドドロワー、上部シート、センタリングダイアログ、トースト、分離シート、カード、ページ、ライトボックスを組み立てる

モダンCSS

作者がデッテントを保持する em, rem, ビューポート単位、 calc(), とCSS変数を使用しながら、デフォルトのサイズが em に基づく。

使用するとき

@capgo/capacitor-sheets Capacitor

」アプリケーションに必要な高品質のモバイルオーバーレイを採用することなく、特定のUIフレームワークを採用する必要がある場合に使用します。カスタム要素として配布されるため、コアパッケージにはReact、Vue、Angular、Svelte、またはSolidランタイム依存関係がありません。

使用するとき
1つ以上のデッテントを持つ下部シート
左または右のサイドバーと上部シート
中央のダイアログ、ライトボックス、カード、トーストのようなオーバーレイ、
全画面オーバーレイがエッジから入ります
シートの進行度によって駆動されるスタック、深度、パララックス効果
進行度と距離値を公開するスクロールヘルパー
Capacitor-セーフレイアウト(ノッチ、ホームインジケータ、Androidカットアウト、ソフトウェアキーボード)

ユースケースカバレッジ

ユースケース	Capgo シートパターン
長いシート	`cap-sheet` 自然なコンテンツスクロールまたは `cap-scroll`
デタント付きシート	`detents="18em 32em"` プラス `stepTo()` ステップトリガーまたは
サイドバー	`content-placement="left"` または `content-placement="right"`
デフォルト	キーボード入力対応シート `content-placement="bottom"`
視覚的なビューポートオフセットハンドリング	`native-focus-scroll-prevention` トースト
外部クリックによる閉じる機能なし	`inert-outside="false"`, `focus-trap="false"`外部クリックによる閉じる機能なし
分離されたシート	`cap-sheet-special-wrapper` __CAPGO_KEEP_0__
下部からページ	__CAPGO_KEEP_0__
上部シート	`content-placement="top"`
__CAPGO_KEEP_0__	`cap-sheet-stack` __CAPGO_KEEP_0__
__CAPGO_KEEP_0__	`cap-sheet-outlet` __CAPGO_KEEP_0__
パララックスページ	`cap-sheet-outlet` と `cap-scroll` 進行
ページ	フルビューポートのコンテンツがエッジから入ります
ライトボックス	`content-placement="center"` バックドロップとメディアコンテンツ
デタントが永続するシート	`default-presented`, `swipe-dismissal="false"`カード `inert-outside="false"`
コンパクトな中心シートのコンテンツ	コア

Core API

<cap-sheet> __CAPGO_KEEP_0__はpresent、dismiss、toggle、およびデタントステップアクションを宣言します。
<cap-sheet-trigger> セクション
<cap-sheet-view> オーバーレイの位置を設定し、安全エリアとキーボードのオフセットを適用します。
<cap-sheet-backdrop> 進行度合いを同期したバックドロップをレンダリングします。
<cap-sheet-content> __CAPGO_KEEP_0__ シートの表面をレンダリングします。
<cap-sheet-handle> ドラッグとキーボードのデンテント制御を提供します。
<cap-sheet-stack> 重ねられたシートを調整します。
<cap-sheet-outlet> ページ、深度、パララックス効果のシート進行度を公開します。
<cap-scroll> スクロール進行度と距離のヘルパーを公開します。 <cap-scroll-content> フレームワークの効果またはライフサイクルハックからシートを構成します。
setupSheet(element, options?) __CAPGO_KEEP_0__レイアウトモデル

「Capacitorレイアウトモデル」のタイトル

__CAPGO_KEEP_0__ Layout Model env(safe-area-inset-*) そしてCapacitor-スタイル --safe-area-inset-* デフォルトのフォールバック変数を使用し、オーバーレイに選択されたエッジをパディングとして適用します。 safe-area="auto" すべてのエッジを保護します。使用する safe-area="bottom left right" または safe-area="none" 使用ケースが異なる動作が必要な場合に使用します。

キーボードハンドリングはデフォルトで有効になっています。シートはリサイズとスクロールイベントをリスンし、ビューポートにキーボードオフセットを追加し、 visualViewport ソフトウェアキーボード上に表示される入力が見え続けるように、制御をフォーカスします。 preventScroll パッケージはWeb層で実行されます。UIKITまたはAndroidのボトムシートをレンダリングしないため、

The package runs in the web layer. It does not render native UIKit or Android bottom sheets, so your app keeps full styling control while still respecting the WebView constraints that matter in Capacitor.

READMEに含まれるサポートされているすべての用途のアニメーションWebPデモがリポジトリに含まれます。

セクション「Demos And Playgrounds」

長いシート	デンテンス

サイドバー	ライトボックス

「@capgo/capacitor-sheets」から続けてください

「@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets」を使用している場合 @capgo/capacitor-sheets 「@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets」を使用してネイティブプラグインの作業を計画している場合、「@Capgo プラグインディレクトリ」「@Capgo プラグインディレクトリ」内での製品ワークフロー Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, 「@__CAPGO_KEEP_0__ プラグイン」実装詳細の追加または更新プラグインの場合 Ionic Enterprise プラグインの代替 __CAPGO_KEEP_0__ Native ビルドの製品ワークフロー Capgo Native ビルドの製品ワークフロー Capgo Native ビルド