Getting Started

このプラグインのインストール手順とフルマークダウンガイドを含むセットアッププロンプトをコピーします。

        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.

インストール

AI-Assisted セットアップを使用してプラグインをインストールできます。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 セーフエリア

セーフエリアはデフォルトで有効になっています。シートのビューは、ブラウザ環境の値と__CAPGO_KEEP_0__ のフォールバック変数を読みます: 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)

targetLanguage

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

オーバーレイのステータスバーまたはシステムバーを持つアプリの場合、インセット値を正しく表示する責任を負うネイティブプラグインを維持してください:

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 カスタム要素の JSX タイピングも登録されます。TypeScript が未知のタグを報告している場合、ソースツリー内に宣言ファイルを追加してください。

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

Vue

<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>

Angular

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',
      });
    }
  }
}

Svelte

<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>

Solid

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`	none	スペースで区切られたCSS長さ `18em 32em`
`safeArea`	`safe-area`	`auto`	保護された安全エリアの境界
`swipe`	`swipe`	`true`	ポインター、タッチ、トラックパッド、ホイールジェスチャーを有効
`swipeDismissal`	`swipe-dismissal`	`true`	ジェスチャーをデテントに使用してモーダルを閉じる `0`
`inertOutside`	`inert-outside`	`true`	モーダルシートの背後にあるインタラクションを防止
`focusTrap`	`focus-trap`	`true`	モーダルシート内でキーボードのフォーカスを維持
`closeOnOutsideClick`	`close-on-outside-click`	`true`	バックドロップまたはビューをクリックするとモーダルを閉じる
`closeOnEscape`	`close-on-escape`	`true`	エスケープキーを押すとモーダルを閉じる
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	キーボードの下にフォーカスした入力が表示される
`themeColorDimming`	`theme-color-dimming`	`auto`	モーダル中にWebViewのテーマカラーを減光

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

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

Getting Startedから続けてください

Capgoを使用している場合 Getting Started Capgoを使用してネイティブプラグインの作業を計画する場合、Capgoプラグインディレクトリと接続します。 Capgo Plugin Directory CapgoプラグインディレクトリのCapgo プラグイン Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgoプラグインディレクトリの__CAPGO_KEEP_0__ プラグインの実装詳細 Capgoプラグインディレクトリの__CAPGO_KEEP_0__ プラグインの実装詳細 Ionic Enterprise Plugin Alternatives Ionic Enterprise プラグインの代替品のワークフローについて、 Capgo Native Builds Capgo ネイティブビルドのワークフローについて、

Getting Started

インストール

Capacitor セーフ エリア

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

React

Vue

Angular

Svelte

Solid

コンポーネント

メインオプション

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

Getting Startedから続けてください

Capacitor セーフエリア