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

@capgo/capacitor-シート

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

フレームワーク非依存

__CAPGO_KEEP_0__が利用可能

Capacitor ready

すべてのシートの形状

__CAPGO_KEEP_1__

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

モダンなCSS

デタントを em, remビューポート単位、 calc()CSS変数とともに、デフォルトのサイズは em ベース

使用する時

「使用する時」のセクション

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

使用する時は次の場合です:

  • 1つ以上のデタントを持つボトムシート
  • 左または右のサイドバーとトップシート
  • 中央ダイアログ、ライトボックス、カード、トーストのようなオーバーレイ
  • アプリケーションを背景として保持し、インタラクティブなシート
  • エッジから入るフルページオーバーレイ
  • シートの進行度でドライブされるスタック、深度、パララックス効果
  • 進行度と距離値を公開するスクロールヘルパー
  • Capacitor-safe layout for notches, home indicators, Android cutouts, and software keyboards

用途カバー

用途カバー
用途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 進捗
ページフルビューポートのコンテンツがエッジから入り始める
ライトボックスcontent-placement="center" バックドロップとメディアコンテンツ
デタント付きのパーシステントシートdefault-presented, swipe-dismissal="false", そして inert-outside="false"
カードコンパクトな中心のシートコンテンツ

コア API

「コア 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> シートのスクロール進行度合いと距離のヘルパーを公開します。
  • setupSheet(element, options?) フレームワーク効果またはライフサイクルハックからシートを構成します。

Capacitorレイアウトモデル

Capacitorレイアウトモデル

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

必要な場合に異なる動作が必要な場合 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.

ソフトウェアキーボードの上に表示するため、制御をフォーカスします。

Demos And Playgrounds

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

長いシートデタント
@capgo/capacitor-シート用のアニメーション長いシートデモ@capgo/capacitor-シート用のデタントアニメーションシートデモ
サイドバーライトボックス
@capgo/capacitor-シート用のアニメーションサイドバーデモ@capgo/capacitor-シート用のアニメーションライトボックスデモ

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

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

「@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets」を使用している場合 @capgo/capacitor-sheets __CAPGO_KEEP_0__ プラグイン ディレクトリと接続 Capgo プラグイン ディレクトリにおける製品ワークフロー Capgo プラグイン ディレクトリにおける__CAPGO_KEEP_1__ プラグイン 「@Capacitor/Capgo-sheets」を使用してnative プラグインの作業を計画している場合 Capacitor プラグインの実装詳細については、Capgo でご確認ください。 プラグインの追加または更新 __CAPGO_KEEP_0__ プラグインの実装詳細については、プラグインの追加または更新でご確認ください。 イオニック エンタープライズ プラグインの代替 __CAPGO_KEEP_0__ プラグインの実装詳細については、イオニック エンタープライズ プラグインの代替の製品ワークフローでご確認ください。 Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフローでご確認ください。