コンテンツにジャンプ
Capgo - Capacitor アプリのリアルタイム更新 Capgo

Getting Started

  1. パッケージをインストールしてください

    ターミナルウィンドウ
    npm install @capgo/capacitor-sheets

  2. ウェブコンポーネントを登録する

    import '@capgo/capacitor-sheets';

  3. 安全なエリア用のビューポート設定を追加する

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

  4. シートをレンダリングする

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

セクションのタイトルは “Capacitor Safe Areas”

セーフエリアはデフォルトで有効になっています。 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>

オーバーレイのステータスバーまたはシステムバーを持つアプリの場合、正しいインセット値を露出させるネイティブプラグインを管理してください。

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

「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 がまだ未知のタグを報告している場合、ソースツリー内に宣言ファイルを追加してください:

src/capgo-sheets.d.ts
import '@capgo/capacitor-sheets/react';

Vue

「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

「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

「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

Section titled “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>
  );
}

Components

Section titled “Components”
要素目的
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シート木構造体外のオーバーレイコンテンツ

メイン オプション

「メイン オプション」タイトルのセクション
オプション属性デフォルト説明
contentPlacementcontent-placementbottomtop, bottom, left, right、または center
detentsdetentsnoneスペース区切りの CSS の長さ 18em 32em
safeAreasafe-areaauto保護された安全エリアの境界
swipeswipetrueポインター、タッチ、トラックパッド、ホイールのジェスチャーを有効にする
swipeDismissalswipe-dismissaltrueデテントにジェスチャーを許可する 0
inertOutsideinert-outsidetrueモーダルシートの背後でユーザーが操作を実行しないようにする
focusTrapfocus-traptrueシート内でキーボードのフォーカスを維持する
closeOnOutsideClickclose-on-outside-clicktrueバックドロップまたはビューをクリックすると閉じる
closeOnEscapeclose-on-escapetrueエスケープキーを押すと閉じる
nativeFocusScrollPreventionnative-focus-scroll-preventiontrueキーボードの下にフォーカスした入力が表示されるようにする
themeColorDimmingtheme-color-dimmingautoモーダル時にはWebViewのテーマカラーを減らす

Available Entrypoints

「Available Entrypoints」
  • @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から続けて進む

「Getting Startedから続けて進む」

Capgoを使用している場合 Getting Started ネイティブ プラグインの作業を計画するには、接続する Capgo プラグイン ディレクトリ Capgo プラグイン ディレクトリの製品ワークフローについて Capacitor プラグインは Capgo によって提供されます for the implementation detail in Capacitor Plugins by Capgo, プラグインを追加または更新する プラグインを追加または更新するの実装詳細について Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについて Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフローについて