Inicio

Copie un prompt 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.

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

Agregar la configuración de viewport 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 hoja de vista de la ventana 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. Deshabilítelo solo cuando su aplicación ya posee la evitación del teclado:

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

Control Instruccional

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

Importando desde @capgo/capacitor-sheets/react también registra tipificaciones 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 presentes, desaparecer, alternar y paso
`cap-sheet-portal`	Puerto de cuerpo opcional para capas de superposición
`cap-sheet-view`	Host de vista fija con relleno de área 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 bordes redondeados
`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`	Hook de composición para hojas, tarjetas y ventanas de luz separadas
`cap-sheet-stack`	Grupo de hojas apiladas
`cap-sheet-outlet`	Salida de progreso para efectos de profundidad, paralaje y 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 superpuesta gestionado fuera del árbol de hojas

Opciones principales

Opción	Atributo	Predeterminado	Descripción
`contentPlacement`	`content-placement`	`bottom`	`top`, `bottom`, `left`, `right`, o `center`
`detents`	`detents`	ninguno	Longitudes CSS separadas por espacio tales 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 diálogo
`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`	Desvanecer el color del tema WebView mientras se muestra la hoja de diálogo

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

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