Inicio

Copia una solicitud de configuración con los pasos de instalación y la guía de 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

Puedes utilizar nuestra configuración asistida por IA para instalar el plugin. Agrega las Capgo habilidades a tu herramienta de IA utilizando el siguiente comando:

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

Luego utilice el siguiente prompt:

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 plugin 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". La vista de la hoja de cálculo 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)

Elige 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 valores de inset 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-prevention, que por defecto es true. Desactive solo cuando su aplicación ya tenga la propiedad de evitar el teclado:

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

Sección titulada “Control Informativo”

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

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

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

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

Componentes

Elemento	Propósito
`cap-sheet`	Estado de la hoja, detentes, gestos, comportamiento modal y eventos
`cap-sheet-trigger`	Acciones declarativas de presentación, cierre, alternancia y paso
`cap-sheet-portal`	Portal de cuerpo opcional para capas de superposición
`cap-sheet-view`	Huespéd de vista fija con relleno de zona segura y relleno de teclado
`cap-sheet-backdrop`	Fondo de fondo sincronizado con progreso
`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`	Hoja de composición para hojas desacopladas, tarjetas y ventanas de luz
`cap-sheet-stack`	Grupo de hojas apiladas
`cap-sheet-outlet`	Salida de progreso para profundidad, paralaje y efectos de página
`cap-scroll`	Ayuda de progreso de desplazamiento
`cap-fixed`	Ayuda de capa fija
`cap-island`	Contenido de isla flotante relacionado
`cap-external-overlay`	Contenido de capa de sobremanejo 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`	none	Longitudes CSS separadas por espacio como `18em 32em`
`safeArea`	`safe-area`	`auto`	Borde seguro de área protegida
`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 diálogo
`focusTrap`	`focus-trap`	`true`	Mantener el enfoque del teclado dentro de la hoja
`closeOnOutsideClick`	`close-on-outside-click`	`true`	Cerrar cuando se haga clic en el fondo o la vista
`closeOnEscape`	`close-on-escape`	`true`	Cerrar cuando se presione Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Mantener los campos de entrada enfocados visibles por encima del teclado
`themeColorDimming`	`theme-color-dimming`	`auto`	Aclarar el color del tema de WebView mientras se muestra la hoja

Entrypoints disponibles

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

Continúa desde Inicio

Si estás utilizando Inicio 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 el detalle de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Construcción Nativa para el flujo de trabajo del producto en Capgo Construcción Nativa.