Skip to content
Capgo - Capacitor アプリのリアルタイム更新 Capgo

@capgo/capacitor-sheets

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

フレームワーク非依存

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

Capacitor

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

すべてのシートの形状

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

現代の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 視覚的なビュー ポート オフセット ハンドリング
トースト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 進捗度
Pagefull-viewport content entering from an edge
Lightboxcontent-placement="center" with backdrop and media content
Persistent Sheet with Detentdefault-presented, swipe-dismissal="false", and inert-outside="false"
CardCore __CAPGO_KEEP_0__

Core API

Section titled “Core API”
  • <cap-sheet> owns presentation state, detents, placement, gestures, accessibility, and events.
  • <cap-sheet-trigger> declares present, dismiss, toggle, and detent-step actions.
  • <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レイアウトモデル

セクションのタイトル “Capacitorレイアウトモデル”

デフォルトのシートビューは「__CAPGO_KEEP_0__」 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プレイグラウンドとしても利用可能です。

長いシートデンテント
Animated Long Sheet demo for @capgo/capacitor-sheetsデンテント付きのシートのアニメーション demo for @capgo/capacitor-sheets
サイドバーライトボックス
Animated Sidebar demo for @capgo/capacitor-sheetsアニメーション ライトボックス demo for @capgo/capacitor-sheets

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

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

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