BrowserFrame
Marco de navegador para enseñar una pantalla de la app dentro de una página: documentación, onboarding, presentaciones.
Cuándo usarlo
Props. variant (safari: semáforo, navegación, barra de direcciones de hasta 516 px y acciones · minimal: semáforo gris y dirección), url, height (alto del área de contenido), children (la pantalla, normalmente componentes reales).
Visual. radius-xl, borde border-secondary y shadow-xl. Barra en bg-primary (minimal: bg-secondary) con línea inferior; dirección en bg-secondary. Los colores del semáforo (#EE6A5F, #F5BD4F, #61C454) son fijos; el resto sigue el tema.
Reglas. Mete dentro componentes de verdad, no capturas: así cambian con el tema. Para capturas a pantalla completa no hace falta marco.
Detalles. Funciona sin JavaScript (lo que lleve dentro puede necesitar sus islas). La barra es una maqueta: sus iconos no son botones y se ocultan en pantallas de menos de 560px.
Ejemplos
Sin contactos todavía
Importa un CSV o añade el primero.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
variant | "safari" · "minimal" | safari | safari semáforo, navegación, dirección y acciones · minimal semáforo gris y dirección. |
url | string | jotis.me | Dirección que se muestra en la barra. |
height | string | number | — | Alto del área de contenido. |
children | ReactNode | — | La pantalla: componentes reales, no capturas, para que cambien con el tema. |
className | string | — | |
style | CSSProperties | — |
Código
import { BrowserFrame } from "@jotis-me/react";
export default function Page() {
return (
<>
<BrowserFrame url="pecunia.jotis.me/resumen" height={260}>
<MetricCard label="Gasto de octubre" value="1.284,50 €" />
</BrowserFrame>
</>
);
}---
import { BrowserFrame } from "@jotis-me/react";
---
<BrowserFrame url="pecunia.jotis.me/resumen" height={260}>
<MetricCard label="Gasto de octubre" value="1.284,50 €" />
</BrowserFrame>