@capgo/capacitor-sheets

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

スタート GitHub

フレームワーク非依存

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

Capacitor対応

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

すべてのシートの形状

下部シート、側ドロワー、上部シート、中央のダイアログ、トースト、分離されたシート、カード、ページ、ライトボックスを組み合わせてください。

モダンCSS

Author detents with em, rem、ビューポート単位で calc(), と CSS 変数を同時に使用しながら、デフォルトのサイズを維持します。 em based.

使用するタイミング

@capgo/capacitor-sheets は、特定の UI フレームワークを採用せずに、高品質のモバイルオーバーレイが必要な Capacitor アプリ向けです。カスタム要素として配布されるため、コアパッケージには React、Vue、Angular、Svelte、または Solid ランタイム依存関係がありません。

使用する場合

1 つ以上のデンテントを持つ下部シート
左または右のサイドバーと上部シート
中央のダイアログ、ライトボックス、カード、トーストのようなオーバーレイ
シートが進捗に応じてスタック、深度、パララックス効果を実現する
シートが進捗に応じてスタック、深度、パララックス効果を実現する
シートが進捗に応じてスタック、深度、パララックス効果を実現する
スクロールヘルパーが進行度と距離の値を公開します。
Capacitor-セーフレイアウト（ノッチ、ホームインジケーター、Androidカットアウト、ソフトウェアキーボードを含む）

用途カバレッジ

用途	Capgo シートパターン
長いシート	`cap-sheet` 自然なコンテンツスクロールまたは `cap-scroll`
デタントを持つシート	`detents="18em 32em"` プラス `stepTo()` __CAPGO_KEEP_0__
サイドバー	`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__
上部シート	`content-placement="top"`
重ね合わせたシート	`cap-sheet-stack` 深さ変数とともに
深さのシート	`cap-sheet-outlet` 進捗度の変換
パララックスページ	`cap-sheet-outlet` 進捗 `cap-scroll` ページ
フルビューポートのコンテンツ	エッジから入る
ライトボックス	`content-placement="center"` バックドロップとメディアコンテンツとともに
デタントを持つパーシステントシート	`default-presented`, `swipe-dismissal="false"`、 `inert-outside="false"`
カード	コンパクトな中心に配置されたシートコンテンツ

コアAPI

<cap-sheet> プレゼンテーション状態、デタント、配置、ジェスチャー、アクセシビリティ、イベントを所有します。
<cap-sheet-trigger> 現在、閉じ、切り替え、デタントステップアクションを宣言します。
<cap-sheet-view> オーバーレイの位置を設定し、安全エリアとキーボードオフセットを適用します。
<cap-sheet-backdrop> バックドロップを進捗同步でレンダリングします。
<cap-sheet-content> __CAPGO_KEEP_0__ 表現モデル
<cap-sheet-handle> __CAPGO_KEEP_0__ ドラッグとキーボードデタントコントロールを提供します。
<cap-sheet-stack> __CAPGO_KEEP_0__ ステックされたシートを調整します。
<cap-sheet-outlet> __CAPGO_KEEP_0__ シートの進行状況をページ、深度、パララックス効果に公開します。
<cap-scroll> そして <cap-scroll-content> __CAPGO_KEEP_0__ スクロール進行度と距離ヘルパーを公開します。
setupSheet(element, options?) __CAPGO_KEEP_0__ フレームワーク効果またはライフサイクルハックからシートを構成します。

Capacitor レイアウトモデル

デフォルトのシートビューポートは env(safe-area-inset-*) そして Capacitor-style --safe-area-inset-* フォールバック変数を読み、選択されたエッジをオーバーレイの周りにパディングとして適用します。 safe-area="auto" すべてのエッジを保護します。必要な場合に異なる動作が必要なシナリオでは使用します。 safe-area="bottom left right" または safe-area="none" キーボード処理はデフォルトで有効になっています。シートは

サイズ変更とスクロールイベントに反応し、ビューポートにキーボードオフセットを追加し、 visualViewport でコントロールをフォーカスするため、入力がソフトウェアキーボードの上に表示されます。 preventScroll パッケージはWeb層で実行されます。ネイティブの UIKitまたはAndroidの下部シートをレンダリングしないため、スタイリングの制御を完全に維持しながら、重要なWebViewの制約を尊重します。

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.

「デモとプレイグラウンド」のセクション

長いシート

Detents	__CAPGO_KEEP_0__

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

続けてください @capgo/capacitor-sheets

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