Inicio

Copie un prompt de configuración con los pasos de instalación y la guía markdown completa para este plugin.

        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.

Instalación

Puede utilizar nuestra configuración asistida por inteligencia artificial para instalar el complemento. Agregue las Capgo habilidades a su herramienta de inteligencia artificial utilizando el siguiente comando:

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

Luego utilice la siguiente solicitud:

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

Si prefiere la configuración manual, instale el complemento ejecutando los siguientes comandos y siguiendo las instrucciones específicas de la plataforma a continuación:

Instalar el paquete
ventana de terminal
```
npm install @capgo/capacitor-sheets
```
Registrar los componentes web
```
import '@capgo/capacitor-sheets';
```

Agregar la configuración de la vista para áreas seguras

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

Renderizar una hoja

<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 Áreas Seguras

Las áreas seguras están habilitadas por defecto a través de safe-area="auto"El visor de la hoja lee tanto valores del entorno de navegador como variables de reemplazo 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)

Elegir los bordes protegidos por hoja:

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

Para aplicaciones con barras de estado de superposición o barras de sistema, mantenga los plugins nativos responsables de exponer los valores de ajuste correctos:

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

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

export default config;

El manejo del teclado está controlado por native-focus-scroll-preventionque se establece por defecto en trueDesactive solo cuando su aplicación ya posee la evitación del teclado:

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

Control Imperativo

Todos los ayudantes de marco configuran el mismo elemento personalizado subyacente. También puede controlar una hoja directamente:

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

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

Escuchar eventos para estado controlado, análisis o animación coordinada:

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

Importar desde @capgo/capacitor-sheets/react también registra tipos de JSX para los elementos personalizados. Si TypeScript sigue informando etiquetas desconocidas, agrega un archivo de declaración dentro de tu árbol de origen:

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>

Sólido

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

Componentes

Elemento	Propósito
`cap-sheet`	Estado de la hoja, detentes, gestos, comportamiento modal y eventos
`cap-sheet-trigger`	Acciones presentes, desaparecer, alternar y acciones de paso
`cap-sheet-portal`	Portal de cuerpo opcional para la capa de superposición
`cap-sheet-view`	Anfitrión de vista fija con relleno de área segura y relleno de teclado
`cap-sheet-backdrop`	Fondo de progreso sincronizado
`cap-sheet-content`	Superficie de hoja accesible
`cap-sheet-bleeding-background`	Extensión de fondo para hojas con borde redondeado
`cap-sheet-handle`	Manija de detente arrastrable y accesible con teclado
`cap-sheet-title`	Título accesible
`cap-sheet-description`	Descripción accesible
`cap-sheet-special-wrapper`	Herramienta de composición para hojas desacopladas, tarjetas y ventanas emergentes
`cap-sheet-stack`	Grupos de hojas apilados
`cap-sheet-outlet`	Salida de progreso para efectos de profundidad, paralaje y página
`cap-scroll`	Ayuda para el progreso de la barra de desplazamiento
`cap-fixed`	Ayuda para capas fijas
`cap-island`	Contenido de isla flotante relacionado
`cap-external-overlay`	Contenido de capa de sobreposición gestionado fuera del árbol de hojas

Opciones principales

Opción	Atributo	Valor predeterminado	Descripción
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, o `center`
`detents`	`detents`	ninguno	Longitudes CSS separadas por espacio como `18em 32em`
`safeArea`	`safe-area`	`auto`	Orillas de área segura protegidas
`swipe`	`swipe`	`true`	Habilitar gestos de puntero, toque, trackpad y rueda
`swipeDismissal`	`swipe-dismissal`	`true`	Permitir que los gestos desaparezcan hasta el detente `0`
`inertOutside`	`inert-outside`	`true`	Prevenir interacción detrás de hojas de estilo modal
`focusTrap`	`focus-trap`	`true`	Mantener el enfoque del teclado dentro de la hoja
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Desaparecer al hacer clic en el fondo o la vista
`closeOnEscape`	`close-on-escape`	`true`	Desaparecer al presionar Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Mantener los campos de entrada enfocados visibles por encima del teclado
`themeColorDimming`	`theme-color-dimming`	`auto`	Ajuste el color del tema de WebView mientras se muestra el modal

Entrypuntos disponibles

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

Sigue adelante desde Getting Started

Si estás utilizando Getting Started para planificar el trabajo de plugin nativo, conecta con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo Agregar o Actualizar Plugins para los detalles de implementación en Agregar o Actualizar Plugins Alternativas de Plugins de Empresa Ionic para el flujo de trabajo del producto en Alternativas de Plugins de Empresa Ionic, y Capgo Construcción Nativa para el flujo de trabajo del producto en Capgo Construcción Nativa.