@capgo/capacitor-sheets

Capacitor WebView向けに調整された、フレームワーク非依存のボトムシート、ドロワー、ダイアログ、オーバーレイ。

はじめる GitHub

フレームワークに依存しない

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

Capacitor 準備完了

Webレイヤーから、セーフエリア、キーボードの動き、ネイティブのエッジジェスチャー、WebViewのテーマカラー減光を考慮します。

あらゆるシート形状

ボトムシート、サイドドロワー、トップシート、中央ダイアログ、トースト、デタッチドシート、カード、ページ、ライトボックスを作成できます。

モダンCSS

detentsの作成には、 em, remビューポート単位、 calc()およびCSS変数を使用でき、デフォルトのサイズ設定は em に基づいています。

プラットフォーム対応

プラットフォーム	サポート	備考
iOSと	Webレイヤー	WKWebView 内のカスタム要素
Androidでは	Webレイヤー	Android WebView 内のカスタム要素
Web	はい	Capacitor Web ビルドで同じコンポーネントを使用

利用シーン

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

以下のような場合に最適です：

1つ以上のデテント（高さ設定）を持つボトムシート
左右のサイドバーおよびトップシート
中央配置のダイアログ、ライトボックス、カード、トースト風オーバーレイ
背後のアプリを操作できるパーシステントシート
画面端から表示されるフルページオーバーレイ
シートの進行状況に応じたスタック、奥行き、パララックス効果
進行状況や距離の値を取得できるスクロールヘルパー
ノッチ、ホームインジケーター、Androidの切り欠き、ソフトウェアキーボードに対応した Capacitor セーフなレイアウト

ユースケースのカバレッジ

ユースケース	Capgo Sheetsパターン
長いシート	`cap-sheet` コンテンツを自然にスクロール、または `cap-scroll`
デテント付きシート	`detents="18em 32em"` と `stepTo()` またはステップトリガー
サイドバー	`content-placement="left"` または `content-placement="right"`
ボトムシート	default `content-placement="bottom"`
キーボード付きシート	`native-focus-scroll-prevention` およびビジュアルビューポートオフセット処理
Toast	`inert-outside="false"`, `focus-trap="false"`、外部クリックでの閉じなし
デタッチドシート	`cap-sheet-special-wrapper` カスタムマージンと角丸
ページから下へ	全高のBottom Sheetコンテンツ
トップシート	`content-placement="top"`
スタッキング付きシート	`cap-sheet-stack` depth変数付き
Depth付きSheet	`cap-sheet-outlet` progress連動のtransform
パララックスページ	`cap-sheet-outlet` を使用して `cap-scroll` progress
ページ	画面端から入るビューポート全体のコンテンツ
ライトボックス	`content-placement="center"` backdropとメディアコンテンツ付き
Detent付きPersistent Sheet	`default-presented`, `swipe-dismissal="false"`や `inert-outside="false"`
Card	コンパクトな中央揃えのシートコンテンツ

コア API

<cap-sheet> プレゼンテーション状態、デテント、配置、ジェスチャー、アクセシビリティ、イベントを管理します。
<cap-sheet-trigger> present、dismiss、toggle、detent-step アクションを宣言します。
<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 リサイズとスクロールイベント、ビューポートへのキーボードオフセットの追加、および preventScroll これにより、ソフトウェアキーボードの上で入力欄が常に表示されます。

このパッケージはWebレイヤーで動作します。ネイティブのUIKitやAndroidのボトムシートを描画しないため、Capacitorで重要なWebViewの制約を尊重しながら、アプリのスタイルを完全に制御できます。

デモとプレイグラウンド

サポートされているすべてのユースケースに対応したアニメーション付きWebPデモがリポジトリのREADMEに同梱されています。サンプルはStackBlitzプレイグラウンドでも利用できます。

長いシート	デテント

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

@capgo/capacitor-sheets から続ける

使用している場合 @capgo/capacitor-sheets ネイティブプラグインの作業を計画するには、次と連携してください： Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、プラグインの追加または更新プラグインの追加または更新に関する実装詳細については、 Ionic Enterprise プラグインの代替案 Ionic Enterprise Plugin Alternatives のプロダクトワークフロー、および Capgo Native Build Capgo Native Builds のプロダクトワークフローについては、