@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"`
重ねたシート	`cap-sheet-stack` __CAPGO_KEEP_0__
シートの深さ	`cap-sheet-outlet` __CAPGO_KEEP_0__
パララックスページ	`cap-sheet-outlet` __CAPGO_KEEP_0__ `cap-scroll` __CAPGO_KEEP_0__
ページ	フルビューポートのコンテンツがエッジから入ります
ライトボックス	`content-placement="center"` バックドロップとメディアコンテンツ
デタントが永続するシート	`default-presented`, `swipe-dismissal="false"`カード `inert-outside="false"`
コンパクトな中心シートのコンテンツ	コア

Core API

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

Capacitorレイアウトモデル

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

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

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.

サポートされているすべての用途のアニメーションWebPデモはリポジトリのREADMEに含まれています。例はStackBlitzプレイグラウンドとしても利用可能です。

Animated WebP demos for every supported usecase ship in the repository README. The examples are also available as StackBlitz playgrounds:

長いシート	デンテンス

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

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

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