FAQ #

Grids #

Da Slidev Webbasiert ist, können Grid-Layouts genutzt werden. CSS Grids, Flexboxen, oder sogar CSS Masonry Layouts, die volle Kontrolle liegt bei dir!

Da wir Windi CSS integriert haben, geht es ganz einfach, wie hier:

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

Die erste Spalte

</div>
<div>

Die zweite Spalte

</div>
</div>

Weiter, kann die Größe jeder einzelnen Spalte angepasst werden:

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

Die erste Spalte (200px)

</div>
<div>

Die zweite Spalte (auto fit)

</div>
<div>

Die dritte Spalte (10% Breite des übergeordneten Containers)

</div>
</div>

Erfahre mehr über Windi CSS Grids.

Positionierung #

Folien werden mit festen Größen definiert (Standart: 980x552px) und so skaliert, dass sie mit der Breite des Benutzerbildschirms übereinstimmen. Somit können Elemente problemlos absolut positioniert werden, ohne sich Gedanken über das Skalieren zumachen. Da die gesamten Folien skaliert werden, werden auch die einzelnen Elemente mit skaliert.

Zum Beispiel:

<div class="absolute left-30px bottom-30px">
Das ist eine nach unten links ausgerichtete Fußzeile
</div>

Um die Tatsächliche Größe der Folie zu ändern, kann eine canvasWidth Option im ersten Formationsblock hinzugefügt werden:

---
canvasWidth: 800
---

Schriftgröße #

Falls dir die Schriftgrößen auf den Folien zu klein sind, können diese in folgenden Wegen geändert werden:

Lokale Styles überschreiben #

Man kann die lokale Styles für jede Folie mit einem <style> Tag überschreiben.

# Folie 1

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

---

# Folie 2

Diese Folie wird nicht beeinflusst.

Erfahre mehr über Embedded Styles

Globale Styles überschreiben #

Man kann eigene globale Styles in der ./style.css Datei bereitstellen, zum Beispiel:

/* style.css */ 

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

Erfahre mehr über Globale Styles

Den Canvas skalieren #

Das Ändern der tatsächlichen Größe des Canvases skaliert alle Inhalte der Folien (Text, Bilder, Komponenten, ...) und Folien.

---
# standart: 980
# da der Canvas kleiner wird, wird die visuelle Größe größer 
canvasWidth: 800
---

Transform verwenden #

Wir bieten eine integrierte Komponente <Transform />, welcher ein Wrapper der CSS transform Eigenschaft ist.

<Transform :scale="1.4">

- Item 1
- Item 2

</Transform>