@capgo/capacitor-シート

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

始める GitHub

フレームワーク非依存

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

Capacitor ご利用可能

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

すべてのシートの形状

下部シート、サイドドロワー、上部シート、センタリングダイアログ、トースト、分離シート、カード、ページ、ライトボックスを組み立てる

モダン CSS

デタントをauthorする 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` ページ
Page	ライトボックス
Lightbox	`content-placement="center"` シート
Persistent Sheet with Detent	`default-presented`, `swipe-dismissal="false"`, and `inert-outside="false"`
Card	コンパクトなシートのコンテンツ

Core API

<cap-sheet> presentation state, detents, placement, gestures, accessibility, and events を管理します。
<cap-sheet-trigger> present, dismiss, toggle, and detent-step アクションを宣言します。
<cap-sheet-view> overlay の位置を設定し、安全なエリアとキーボードオフセットを適用します。
<cap-sheet-backdrop> progress-synced バックグラウンドをレンダリングします。
<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.

「デモとプレイグラウンド」

長いシート

デンテント	Detents

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

@capgo/capacitorから続きます

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