シートの__CAPGO_KEEP_0__リポジトリ

このプラグインのインストールステップとフルマークダウンガイドを含むセットアップの質問をコピーできます。

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-sheets`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/sheets/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

インストール

CapgoのAIアシストセットアップを使用してプラグインをインストールできます。次のコマンドを使用して、AIツールにCapgoスキルを追加してください。

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次のプロンプトを使用してください:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-sheets` plugin in my project.

Manual Setupを使用する場合は、以下のコマンドを実行して、下記のプラットフォーム固有の指示に従ってください。

パッケージをインストール
ターミナルウィンドウ
```
npm install @capgo/capacitor-sheets
```
ウェブコンポーネントを登録
```
import '@capgo/capacitor-sheets';
```

安全なエリアのビューポート設定を追加

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

シートをレンダリング

<cap-sheet-trigger for="booking-sheet" action="present">Open route</cap-sheet-trigger>

<cap-sheet id="booking-sheet" detents="18em 32em" content-placement="bottom">
  <cap-sheet-portal>
    <cap-sheet-view>
      <cap-sheet-backdrop></cap-sheet-backdrop>
      <cap-sheet-content class="route-sheet">
        <cap-sheet-bleeding-background></cap-sheet-bleeding-background>
        <cap-sheet-handle></cap-sheet-handle>
        <cap-sheet-title>Evening route</cap-sheet-title>
        <cap-sheet-description>Choose a route and confirm pickup.</cap-sheet-description>
        <cap-sheet-trigger action="dismiss">Done</cap-sheet-trigger>
      </cap-sheet-content>
    </cap-sheet-view>
  </cap-sheet-portal>
</cap-sheet>

.route-sheet {
  width: min(100%, 34em);
  padding: 0 1.25em 1.25em;
}

セクション「Capacitor セーフエリア」

クリップボードにコピー safe-area="auto". The sheet viewport reads both browser environment values and Capacitor fallback variables:

env(safe-area-inset-top)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
env(safe-area-inset-right)
var(--safe-area-inset-top)
var(--safe-area-inset-bottom)
var(--safe-area-inset-left)
var(--safe-area-inset-right)

シートごとに保護されたエッジを選択してください:

<cap-sheet safe-area="auto"></cap-sheet>
<cap-sheet safe-area="bottom left right"></cap-sheet>
<cap-sheet safe-area="none"></cap-sheet>

overlay ステータスバーまたはシステムバーがあるアプリには、インセット値を正しく表示する責任のあるネイティブプラグインを使用してください。

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    StatusBar: {
      overlaysWebView: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    SystemBars: {
      insetsHandling: 'css',
    },
  },
};

export default config;

キーボードのハンドリングは native-focus-scroll-preventionによって制御されます。デフォルトでは trueです。アプリがキーボードの回避をすでに所有している場合にのみ、無効にします。

<cap-sheet native-focus-scroll-prevention="false"></cap-sheet>

命令型コントロール

すべてのフレームワークヘルパーは同じ下位互換性のあるカスタム要素を構成します。シートを直接制御することもできます。

const sheet = document.querySelector('cap-sheet');

await sheet?.present();
await sheet?.stepTo(2);
await sheet?.step('down');
await sheet?.dismiss();

制御された状態、分析、または調整されたアニメーションを監視する:

sheet?.addEventListener('cap-sheet-presented-change', (event) => {
  console.log(event.detail.presented);
});

sheet?.addEventListener('cap-sheet-active-detent-change', (event) => {
  console.log(event.detail.activeDetent);
});

sheet?.addEventListener('cap-sheet-travel', (event) => {
  console.log(event.detail.progress);
});

React

import { useEffect, useRef } from 'react';
import { setupSheet } from '@capgo/capacitor-sheets/react';
import '@capgo/capacitor-sheets';

export function BookingSheet() {
  const sheetRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!sheetRef.current) return;

    return setupSheet(sheetRef.current, {
      detents: ['18em', '32em'],
      contentPlacement: 'bottom',
      onPresentedChange: ({ presented }) => console.log({ presented }),
    });
  }, []);

  return (
    <cap-sheet id="booking-sheet" ref={sheetRef}>
      <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
      <cap-sheet-view>
        <cap-sheet-backdrop />
        <cap-sheet-content>
          <cap-sheet-handle />
          <cap-sheet-title>React sheet</cap-sheet-title>
        </cap-sheet-content>
      </cap-sheet-view>
    </cap-sheet>
  );
}

クリップボードにコピー @capgo/capacitor-sheets/react インポート

import '@capgo/capacitor-sheets/react';

クリップボードにコピー

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { setupSheet } from '@capgo/capacitor-sheets/vue';
import '@capgo/capacitor-sheets';

const sheetRef = ref<HTMLElement | null>(null);
let cleanup: (() => void) | undefined;

onMounted(() => {
  if (sheetRef.value) {
    cleanup = setupSheet(sheetRef.value, {
      detents: ['18em', '32em'],
      contentPlacement: 'bottom',
    });
  }
});

onUnmounted(() => cleanup?.());
</script>

<template>
  <cap-sheet id="booking-sheet" ref="sheetRef">
    <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
    <cap-sheet-view>
      <cap-sheet-backdrop />
      <cap-sheet-content>
        <cap-sheet-handle />
        <cap-sheet-title>Vue sheet</cap-sheet-title>
      </cap-sheet-content>
    </cap-sheet-view>
  </cap-sheet>
</template>

アンガラ

import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';
import { setupSheet } from '@capgo/capacitor-sheets/angular';
import '@capgo/capacitor-sheets';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <cap-sheet id="booking-sheet" #sheet>
      <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
      <cap-sheet-view>
        <cap-sheet-backdrop></cap-sheet-backdrop>
        <cap-sheet-content>
          <cap-sheet-handle></cap-sheet-handle>
          <cap-sheet-title>Angular sheet</cap-sheet-title>
        </cap-sheet-content>
      </cap-sheet-view>
    </cap-sheet>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('sheet', { static: true }) sheet?: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    if (this.sheet?.nativeElement) {
      setupSheet(this.sheet.nativeElement, {
        detents: ['18em', '32em'],
        contentPlacement: 'bottom',
      });
    }
  }
}

スベルト

<script lang="ts">
  import { sheet } from '@capgo/capacitor-sheets/svelte';
  import '@capgo/capacitor-sheets';
</script>

<cap-sheet id="booking-sheet" use:sheet={{ detents: ['18em', '32em'], contentPlacement: 'bottom' }}>
  <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
  <cap-sheet-view>
    <cap-sheet-backdrop />
    <cap-sheet-content>
      <cap-sheet-handle />
      <cap-sheet-title>Svelte sheet</cap-sheet-title>
    </cap-sheet-content>
  </cap-sheet-view>
</cap-sheet>

ソリッド

import { onCleanup, onMount } from 'solid-js';
import { setupSheet } from '@capgo/capacitor-sheets/solid';
import '@capgo/capacitor-sheets';

export function BookingSheet() {
  let sheetEl!: HTMLElement;

  onMount(() => {
    const cleanup = setupSheet(sheetEl, {
      detents: ['18em', '32em'],
      contentPlacement: 'bottom',
    });

    onCleanup(cleanup);
  });

  return (
    <cap-sheet id="booking-sheet" ref={sheetEl}>
      <cap-sheet-trigger action="present">Open</cap-sheet-trigger>
      <cap-sheet-view>
        <cap-sheet-backdrop />
        <cap-sheet-content>
          <cap-sheet-handle />
          <cap-sheet-title>Solid sheet</cap-sheet-title>
        </cap-sheet-content>
      </cap-sheet-view>
    </cap-sheet>
  );
}

コンポーネント

要素	目的
`cap-sheet`	状態、固定位置、ジェスチャー、モーダルビヘイバー、イベント
`cap-sheet-trigger`	宣言的表示、閉じる、切り替え、ステップアクション
`cap-sheet-portal`	オーバーレイレイヤー用オプションのボディポータル
`cap-sheet-view`	安全エリアとキーボードパディングを考慮した固定ビューポートホスト
`cap-sheet-backdrop`	進行度合いと同期されたバックドロップ
`cap-sheet-content`	アクセシビリティのあるシート表面
`cap-sheet-bleeding-background`	丸い角のシートの背景拡張
`cap-sheet-handle`	ドラッグ可能でキーボードアクセシビリティのある固定位置ハンドル
`cap-sheet-title`	アクセシビリティのあるタイトル
`cap-sheet-description`	アクセシビリティのある説明
`cap-sheet-special-wrapper`	分離されたシート、カード、ライトボックス用の組成ホック
`cap-sheet-stack`	積み重ねられたシートグループ
`cap-sheet-outlet`	深度、パララックス、ページ効果用の進行出力
`cap-scroll`	スクロール進行ヘルパー
`cap-fixed`	固定レイヤーヘルパー
`cap-island`	関連する浮遊島のコンテンツ
`cap-external-overlay`	シートツリー外で管理されるオーバーレイコンテンツ

メインオプション

オプション	属性	デフォルト	概要
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, または `center`
`detents`	`detents`	なし	スペース区切りのCSS長さなど `18em 32em`
`safeArea`	`safe-area`	`auto`	保護された安全エリアの境界
`swipe`	`swipe`	`true`	ポインター、タッチ、トラックパッド、ホイールジェスチャーを有効にする
`swipeDismissal`	`swipe-dismissal`	`true`	ジェスチャーをデテントに解放するためにdismissする `0`
`inertOutside`	`inert-outside`	`true`	モーダルシートの背後でインタラクションを防止する
`focusTrap`	`focus-trap`	`true`	シート内でキーボードフォーカスを維持する
`closeOnOutsideClick`	`close-on-outside-click`	`true`	バックドロップまたはビューをクリックするとdismissする
`closeOnEscape`	`close-on-escape`	`true`	エスケープキーを押すとdismissする
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	キーボード上に表示されるフォーカス入力を維持する
`themeColorDimming`	`theme-color-dimming`	`auto`	ウェブビューのテーマ色をモーダル時低下させる

利用可能なエントリポイント

@capgo/capacitor-sheets
@capgo/capacitor-sheets/react
@capgo/capacitor-sheets/vue
@capgo/capacitor-sheets/angular
@capgo/capacitor-sheets/svelte
@capgo/capacitor-sheets/solid

「はじめから始める」から続けて

Capgoを使用している場合 はじめから始める __CAPGO_KEEP_0__ プラグインディレクトリと接続する Capgo プラグインディレクトリの製品ワークフロー Capgo プラグインディレクトリの__CAPGO_KEEP_1__ プラグイン Capacitor プラグインディレクトリのCapgo プラグインの実装詳細 for the implementation detail in Capacitor Plugins by Capgo, プラグインの追加または更新プラグインの追加または更新の実装詳細について Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインのワークフローについて Capgo ネイティブビルド for the product workflow in Capgo Native Builds.