Capgo/@capgo/capacitor-sheets

Build Silk-style sheets, drawers, dialogs, toasts, lightboxes, cards, and page overlays in any Capacitor frontend.

はじめましょう 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` トースト
Toast	`inert-outside="false"`, `focus-trap="false"`, 外部クリックで閉じない
分離したシート	`cap-sheet-special-wrapper` カスタムのマージンと半径
ページから下に	フルハイトの下部シートコンテンツ
上部シート	`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"`
カード	コンパクトな中心のシートコンテンツ

Core API

<cap-sheet> プレゼンテーション状態、デタント、配置、ジェスチャー、アクセシビリティ、イベントを所有します。
<cap-sheet-trigger> 現在の状態、閉じる、切り替え、そしてデンテストステップアクションを宣言します。
<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レイアウトモデル

デフォルトのシートビューポートレイトは env(safe-area-inset-*) そしてCapacitorスタイルの --safe-area-inset-* フォールバック変数、次に選択されたエッジをオーバーレイに適用する safe-area="auto" すべてのエッジを保護します。使用 safe-area="bottom left right" または safe-area="none" または

キーボードハンドリングはデフォルトで有効になっています。シートは visualViewport リサイズとスクロールイベントをリスンし、キーボードオフセットをビューポートに追加し、 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.

パッケージはウェブ層で実行されます。UIKITまたはAndroidのボトムシートをレンダリングしないため、

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

長いシート	デタント

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

@capgo/capacitorから続ける

使用中の場合 @capgo/capacitor @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__を使用して、ネイティブプラグインの作業計画に接続し、 Capgo プラグインディレクトリ Capgo プラグインディレクトリ内での製品ワークフロー Capacitor Capgo Capacitor プラグインの実装詳細については、Capgo によって提供されます。プラグインの追加または更新プラグインの追加または更新の実装詳細について Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについて Capgo ネイティブビルド Capgo ネイティブビルドの製品ワークフローについて