@capgo/capacitor-sheets

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

Get started GitHub

フレームワーク非依存

React、Vue、Angular、Svelte、Solidなどのフレームワークに対応したセットアップヘルパーを使用して、標準ベースのカスタム要素を直接使用できます。

Capacitor用

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

すべてのシートの形状

モバイルオーバーレイを高品質に実現するために、特定のUIフレームワークを採用せずに使用する__CAPGO_KEEP_0__アプリ向けに。

モダンCSS

デタントを設定するには、 em, remビューポート単位、 calc()CSS変数を使用します。 em デフォルトのサイズは

ベース

@capgo/capacitor-sheets is for Capacitor apps that need high-quality mobile overlays without adopting a specific UI framework. It ships as custom elements, so the core package has no React, Vue, Angular, Svelte, or Solid runtime dependency.

左または右のサイドバーと上部シート

モバイルオーバーレイを高品質に実現するために、特定のUIフレームワークを採用せずに使用する__CAPGO_KEEP_0__アプリ向けに。
モダンCSS
中央ダイアログ、ライトボックス、カード、トーストのようなオーバーレイ
アプリの後ろにアクティブなままのシート
エッジから入るフルページオーバーレイ
シートの進行度でドライブされるスタック、深度、パララックス効果
進行度と距離値を露出するスクロールヘルパー
Capacitor-セーフなノッチ、ホームインジケーター、Androidカットアウト、ソフトウェアキーボードに対応したレイアウト

用途カバレッジ

用途	Capgo シートのパターン
長いシート	`cap-sheet` 自然なコンテンツスクロールまたは `cap-scroll`
デタント付きシート	`detents="18em 32em"` プラス `stepTo()` またはステップトリガ
サイドバー	`content-placement="left"` または `content-placement="right"`
フッターシート	デフォルト `content-placement="bottom"`
キーボードと視覚的なビューポートオフセットハンドリングのあるシート	`native-focus-scroll-prevention` と
Toast	`inert-outside="false"`, `focus-trap="false"`クリック外部で非表示
Detached Sheet	`cap-sheet-special-wrapper` plusカスタムマージンと半径
Page from Bottom	全高の下部シートコンテンツ
Top Sheet	`content-placement="top"`
シートの重ね	`cap-sheet-stack` with深度変数
シートの深度	`cap-sheet-outlet` と進行度変化
パララックスページ	`cap-sheet-outlet` with `cap-scroll` progress
Page	full-viewport content entering from an edge
Lightbox	`content-placement="center"` with backdrop and media content
Persistent Sheet with Detent	`default-presented`, `swipe-dismissal="false"`, and `inert-outside="false"`
Card	compact centered sheet content

Core API

<cap-sheet> プレゼンテーション状態、抑制、配置、ジェスチャー、アクセシビリティ、およびイベントを所有します。
<cap-sheet-trigger> __CAPGO_KEEP_0__ 表示、非表示、切り替え、および抑制ステップアクションを宣言します。
<cap-sheet-view> オーバーレイの位置を設定し、安全エリアとキーボードオフセットを適用します。
<cap-sheet-backdrop> 進行度合いをsyncしたバックドロップをレンダリングします。
<cap-sheet-content> シートの表面をレンダリングします。
<cap-sheet-handle> ドラッグとキーボード抑制制御を提供します。
<cap-sheet-stack> 重ねたシートを調整します。
<cap-sheet-outlet> ページ、深度、およびパララックス効果のシート進行度をページに公開します。
<cap-scroll> スクロール進行度と距離のヘルパーを公開します。 <cap-scroll-content> フレームワーク効果またはライフサイクルハックからシートを構成します。
setupSheet(element, options?) レイアウトモデル

Capacitor

__CAPGO_KEEP_0__のデフォルトシートビューは env(safe-area-inset-*) そしてCapacitorスタイル --safe-area-inset-* フォールバック変数を使用して、オーバーレイに周囲のパディングとして選択されたエッジを適用します。 safe-area="auto" すべてのエッジを保護します。使用ケースが異なる動作が必要な場合に使用します。 safe-area="bottom left right" キーボードのハンドリングはデフォルトで有効になっています。シートはリサイズとスクロールイベントをリスンし、ビューポートにキーボードオフセットを追加し、制御をフォーカスして、ソフトウェアキーボード上に表示されるように入力フィールドを維持します。 safe-area="none" パッケージはWeb層で実行されます。UIKITまたはAndroidのボトムシートをレンダリングしないため、__CAPGO_KEEP_0__の制約を尊重しながら、完全なスタイリング制御を維持できます。

デモとプレイグラウンド visualViewport resize and scroll events, adds a keyboard offset to the viewport, and focuses controls with preventScroll so inputs stay visible above the software keyboard.

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.

Demos And Playgrounds

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

長いシート	デンテント

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

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

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