@capgo/capacitor-sheets

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

はじめに GitHub

フレームワーク非依存

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

Capacitor が準備できました

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

すべてのシートの形状

モバイルオーバーレイをカスタマイズしたいが、特定のUIフレームワークを採用したくないアプリ向け

モダンなCSS

デタントをauthorする 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.

使用する時

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"`__CAPGO_KEEP_0__、外部クリックで閉じない
独立したシート	`cap-sheet-special-wrapper` カスタムのマージンと半径
ページから下部	フルハイトの下部シートコンテンツ
上部シート	`content-placement="top"`
重ねたシート	`cap-sheet-stack` 深さの変数
深さのシート	`cap-sheet-outlet` 変換の進行度
パララックスページ	`cap-sheet-outlet` with `cap-scroll` progress
ページ	フルビューポートのコンテンツがエッジから入り始める
ライトボックス	`content-placement="center"` バックドロップとメディアコンテンツ
デタント付きのパーシステントシート	`default-presented`, `swipe-dismissal="false"`, そして `inert-outside="false"`
カード	コンパクトな中心に据えられたシートコンテンツ

コア API

<cap-sheet> プレゼンテーション状態、デンテント、配置、ジェスチャー、アクセシビリティ、イベントを所有します。
<cap-sheet-trigger> 現在、閉じる、切り替え、デンテントステップアクションを宣言します。
<cap-sheet-view> オーバーレイの位置を設定し、安全エリアとキーボードオフセットを適用します。
<cap-sheet-backdrop> 進行度合い-syncedバックグラウンドをレンダリングします。
<cap-sheet-content> シートの表面をレンダリングします。
<cap-sheet-handle> ドラッグとキーボードデンテントコントロールを提供します。
<cap-sheet-stack> 重ねられたシートを調整します。
<cap-sheet-outlet> ページ、深度、パララックス効果にシートの進行度合いを公開します。
<cap-scroll> and <cap-scroll-content> context
setupSheet(element, options?) ページ/エリア: Capgo マーケティングウェブサイト。役割: 短い UI ラベルまたはナビゲーションアイテム。ページ trust.astro を見る。メッセージキー `and` (And)。

Capacitor Layout Model

デフォルトのシートビューは 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.

パッケージはWeb層で実行されます。UIKITまたはAndroidのnativeボトムシートをレンダリングしません。アプリは、__CAPGO_KEEP_0__のWebView制約を尊重しながら、フルスタイリングの制御を維持します。

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

長いシート	デタント

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

Capgoから@capgo/capacitor-sheetsに進みましょう

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