El lienzo

El lienzo es el borrador en directo e interactivo. Haz clic, escribe y desplázate por él como en una página real. La barra de encima contiene las herramientas de esta página.

Vista previa y código

• Vista previa muestra la pantalla en funcionamiento.
• Código muestra el código React de la versión que hay en el lienzo. Es de solo lectura; selecciona Copiar código para copiarlo.

Anchos de escritorio, tableta y móvil

Usa los tres botones de dispositivo para ver el borrador a ancho completo, a 768 píxeles (tableta) o a 390 píxeles (móvil). Aparecen cuando el lienzo tiene espacio para ellos.

Todos los tamaños, el botón que sigue al móvil, muestra el borrador a ancho de móvil, tableta y escritorio uno junto a otro, cada uno como una página en vivo reducida para que quepa. El modo claro u oscuro y el idioma de la vista previa se aplican a los tres, así que puedes comprobar un idioma en todos los anchos a la vez. Para seleccionar, medir o anotar, vuelve a un solo ancho.

Medir espaciado

Selecciona Medir espaciado (el icono de regla) para comprobar los espacios como lo harías en una herramienta de diseño. También puedes mantener pulsado Alt (Opción en un Mac) sobre el lienzo sin activarlo.

• Pasa el cursor sobre un elemento para ver reglas rojas en sus cuatro lados, con las distancias en píxeles. Arriba, abajo, a la izquierda y a la derecha, cada una llega hasta el elemento más cercano en esa línea, o hasta el borde de su contenedor si no hay nada en medio. El elemento también muestra su ancho y su alto.
• Haz clic en un elemento para medir desde él y luego pasa el cursor sobre otro para ver los espacios entre ambos. Pasa el cursor sobre su contenedor para ver los cuatro márgenes interiores.
• En una pantalla táctil, toca un elemento y luego otro.
• Pulsa Esc para soltar el elemento en el que hiciste clic, y otra vez para dejar de medir.

Las distancias son píxeles CSS del borrador, con los bordes incluidos, así que el tamaño del lienzo no las cambia. Mientras mides, los clics no pulsan botones ni siguen enlaces.

Recargar

Después de interactuar con un borrador, Recargar lo devuelve a su primera pantalla. Está desactivado hasta que interactúas con el borrador.

Versiones

Cada borrador de una sesión se conserva como una versión. Cuando hay más de una, la barra muestra un contador como 2/2 con botones para deshacer y rehacer.

• Deshacer muestra la versión anterior, y Rehacer, la siguiente. También puedes pulsar ⌘+Z y ⌘+Mayús+Z (Ctrl en Windows) cuando no estés escribiendo en un campo. La versión cambia sin recargar el espacio de trabajo.
• Tu próxima petición revisa la versión que haya en el lienzo, así que puedes volver atrás y tomar otra dirección.
• Un prototipo guardado conserva hasta sus 20 versiones más recientes.

Comparar versiones

Selecciona Comparar versiones para ver dos versiones una junto a otra con un control deslizante entre ellas. Ambos lados se desplazan a la vez.

• Elige dos versiones cualesquiera en las listas Antes y Después.
• Arrastra el divisor, o dale el foco y usa las teclas de flecha (mantén pulsada Mayús para avanzar más rápido, y usa Inicio y Fin para ir a los bordes).
• Volver a la versión de antes pone la versión de antes en el lienzo, para que tu próxima petición la revise.
• Selecciona Listo o pulsa Esc para salir.

Vista previa clara y oscura

Cuando un borrador usa uno de tus temas de color, aparece un botón Modo oscuro para que puedas comprobar ambos modos. Esto solo cambia el borrador, no Vibr.

Vista previa en otro idioma

El botón Idioma de la vista previa (el icono de traducir) muestra el borrador en otro idioma, para que veas cómo aguanta tu diseño antes de que nadie lo traduzca de verdad. Elige uno de más de 40 idiomas, incluidos el árabe y el hebreo, que se leen de derecha a izquierda. Cambian los textos, los textos de ejemplo de los campos y las etiquetas del borrador, y la página ajusta su idioma y su dirección. Tu código no cambia, y el idioma se mantiene mientras sigues construyendo.

• Traduce tu modelo. Vibr envía el texto visible del borrador al modelo que has elegido, con tu clave, unas pocas decenas de cadenas cada vez. El texto nuevo, como un contador que aumenta, se traduce cuando aparece. Cada cadena se traduce una vez por sesión.
• De derecha a izquierda. Los borradores nuevos usan propiedades lógicas, como marginInlineStart, que se invierten solas. Mientras el árabe o el hebreo están activos, la revisión de diseño también busca estilos que usan left o right y flechas que no se invertirán, y Reparar los corrige antes de mostrar el borrador. Un borrador creado antes de cambiar de idioma muestra un aviso en su lugar, con Corregir para derecha a izquierda.
• Pseudo no necesita modelo. Pone acentos en todas las letras y alarga el texto en torno a un 40 %, como suele ocurrir con el alemán o el finés, para que las etiquetas cortadas y los anchos fijos se vean enseguida.
• Los ejemplos no necesitan clave. Los ejemplos vienen en todos los idiomas de Vibr, así que previsualizar uno en cualquiera de ellos, incluidos el árabe y el hebreo, funciona sin clave. Los demás idiomas, y el texto que añadas a un ejemplo, los traduce tu modelo.
• Exporta en ese idioma. Con un idioma activo, el menú Exportar añade App en ese idioma. La página exportada se abre en ese idioma, con su dirección, y también traduce el resto del texto del borrador, como otras pestañas y cuadros de diálogo. Las demás exportaciones conservan el texto original del borrador.
• Fuentes. Si una fuente que importaste no tiene las letras del idioma, un aviso muestra algunas de las que faltan y sugiere fuentes de Google Fonts parecidas que sí las tienen. Usar… añade una a la escala tipográfica de la fuente como alternativa, y el lienzo y las apps exportadas la cargan.
• Elige El texto original del borrador para volver.

Enlaces en el lienzo

Los enlaces no salen del lienzo, así que no puedes perder tu borrador al hacer clic en uno. En su lugar, Vibr te dice adónde lleva el enlace. Una app exportada sí sigue sus enlaces. Los botones que abren otra pantalla guardada funcionan con Reproducir; consulta Flujos.

En un móvil

En pantallas pequeñas, Vibr muestra Chat y Vista previa como pestañas. Un punto en Vista previa indica que hay un borrador nuevo que aún no has visto. Las herramientas que no caben encima del lienzo pasan al menú Acciones. Cuando las herramientas de encima del lienzo no caben todas, deslízalas hacia un lado.