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.

パッケージをインストール
ターミナル画面
```
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"ブラウザ環境の値と Capacitor のフォールバック変数を読み取るシートビュー:

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 status バーの場合、またはシステムバーの場合、native プラグインが正しい inset 値を表示する責任を負うようにしてください。

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`	なし	スペース区切りの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 Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgoプラグインの実装詳細 Capgoプラグインの追加または更新 Capgoプラグインの追加または更新の実装詳細、 Ionic Enterprise プラグイン代替品の製品ワークフローについて Capgo ネイティブビルド Capgo ネイティブビルドの製品ワークフローについて