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.

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

Usar luego 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 siga las instrucciones específicas del 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 viewport para áreas seguras

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

Vista de 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 hoja lee tanto valores del entorno de navegador como variables de reemplazo de 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 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-preventionque por defecto es trueDeshabilitarlo solo cuando su aplicación ya posee la evitación del teclado:

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

Sección titulada “Control Informativo”

__CAPGO_KEEP_0__

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 aún informa 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 presentativas, de cierre, de alternancia y de paso declarativas
`cap-sheet-portal`	Portal de cuerpo opcional para la capa de superposición
`cap-sheet-view`	Huespéd con vista fija y relleno de área segura y de teclado
`cap-sheet-backdrop`	Fondo sincronizado con progreso
`cap-sheet-content`	Superficie de hoja accesible
`cap-sheet-bleeding-background`	Extensión de fondo 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`	Mecanismo de composición para hojas, tarjetas y ventanas de luz desacopladas
`cap-sheet-stack`	Grupo de hojas apiladas
`cap-sheet-outlet`	Salida de progreso para efectos de profundidad, parallax y 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 sobreposición 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, como `18em 32em`
`safeArea`	`safe-area`	`auto`	Bordes de área segura protegidos
`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 foco 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 pulsar Escape
`nativeFocusScrollPrevention`	`native-focus-scroll-prevention`	`true`	Mantener visibles los campos de entrada enfocados por encima del teclado
`themeColorDimming`	`theme-color-dimming`	`auto`	Ajuste el color del tema de WebView mientras se muestra el modal

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

Siga adelante desde Getting Started

Si está utilizando Getting Started para planificar el trabajo de plugin nativo, conecte con Capgo Directorio de Plugin para el flujo de trabajo del producto en Capgo Directorio de Plugin, Capacitor Plugins por Capgo para los detalles 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 Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Compilación Nativa para el flujo de trabajo del producto en Capgo Compilación Nativa.