FAQ #

Grids #

Dado que Slidev está basado en la web, puedes aplicar cualquier modelo de grid como CSS Grids, flexboxes, o incluso Masonry, tú tienes el control.

Dado que tenemos Windi CSS integrado, aquí te mostramos una forma simple como referencia:

<div class="grid grid-cols-2 gap-4">
<div>

La primera columna

</div>
<div>

La segunda columna

</div>
</div>

Yendo más allá, puedes personalizar el tamaño de cada columna con:

<div class="grid grid-cols-[200px,1fr,10%] gap-4">
<div>

La primera columna (200px)

</div>
<div>

La segunda columna (auto ajuste)

</div>
<div>

La tercera columna (10% del ancho del elemento padre)

</div>
</div>

Lee más sobre Windi CSS Grids.

Posicionamiento #

Las diapositivas se definen en tamaños fijos (por defecto 980x552px) y se ajustan a la pantalla del usuario. Puedes utilizar con seguridad la posición absoluta en tus diapositivas ya que se escalarán junto con la pantalla.

Por ejemplo:

<div class="absolute left-30px bottom-30px">
This is a left-bottom aligned footer
</div>

Para cambiar el tamaño real del lienzo, puedes pasar las opciones canvasWidth en tu primer frontmatter:

---
canvasWidth: 800
---

Tamaño de la letra #

Si crees que el tamaño de la fuente en tus diapositivas es demasiado pequeño, puedes ajustarlo de varias maneras:

Anular el estilo local #

Puedes anular los estilos de cada diapositiva con la etiqueta <style>.

# Página 1

<style>
h1 {
  font-size: 10em;
}
</style>

---

# Página 2

No se verá afectado

Leer más: Estilos Incrustados

Reemplazando estilos globales #

Puedes crear tus propios estilos globales en ./style.css, por ejemplo

/* style.css */ 

h1 {
  font-size: 10em !important;
}

Leer más: Global Style

Escalar el lienzo #

Al cambiar el tamaño real del lienzo se escalarán todos los contenidos (texto, imágenes, componentes, etc.) y las diapositivas

---
# por defecto: 980
# como el lienzo se hace más pequeño, el tamaño visual será mayor
canvasWidth: 800
---

Usar Transform #

Disponemos de una funcionalidad integrada llamada <Transform />, que envuelve la propiedad transform de CSS.

<Transform :scale="1.4">

- Item 1
- Item 2

</Transform>