+
### Name
diff --git a/custom/directory-structure.md b/custom/directory-structure.md
index b9d2ab2..0dd72b0 100644
--- a/custom/directory-structure.md
+++ b/custom/directory-structure.md
@@ -117,19 +117,23 @@ import './code.css'
import './layouts.css'
```
+<<<<<<< HEAD
Stile werden von [Windi CSS](http://windicss.org/) und [PostCSS](https://postcss.org/) verarbeitet, so dass man css-Schachtelungen und [at-Direktiven](https://windicss.org/features/directives.html) out-of-box verwenden kann. Zum Beispiel:
+=======
+Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://unocss.dev/transformers/directives#apply) out-of-box. For example:
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```less
.slidev-layout {
- @apply px-14 py-10 text-[1.1rem];
+ --uno: px-14 py-10 text-[1.1rem];
h1, h2, h3, h4, p, div {
- @apply select-none;
+ --uno: select-none;
}
pre, code {
- @apply select-text;
+ --uno: select-text;
}
a {
@@ -138,7 +142,11 @@ Stile werden von [Windi CSS](http://windicss.org/) und [PostCSS](https://postcss
}
```
+<<<<<<< HEAD
[Erfahre mehr über den Syntax](https://windicss.org/features/directives.html).
+=======
+[Learn more about the syntax](https://unocss.dev/transformers/directives#apply).
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
## `index.html`
@@ -186,5 +194,9 @@ Die fertig gehostete `index.html` wird sein:
Konventionen: `global-top.vue` | `global-bottom.vue`
+<<<<<<< HEAD
Erfahre mehr: [Globale Ebenen](/custom/global-layers)
+=======
+Learn more: [Global Layers](/custom/global-layers)
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
diff --git a/custom/fonts.md b/custom/fonts.md
index 983d9c8..7945fa6 100644
--- a/custom/fonts.md
+++ b/custom/fonts.md
@@ -9,12 +9,21 @@ Konfiguriere den Frontmatter wie folgt:
```yaml
---
fonts:
+<<<<<<< HEAD
# grundsätzlicher Text
sans: 'Robot'
# Verwendung mit `font-serif` css-Klasse aus windicss
serif: 'Robot Slab'
# für Code-Blöcke, Inline-Code, etc.
mono: 'Fira Code'
+=======
+ # basically the text
+ sans: Robot
+ # use with `font-serif` css class from UnoCSS
+ serif: Robot Slab
+ # for code blocks, inline code, etc.
+ mono: Fira Code
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
---
```
@@ -24,15 +33,24 @@ Schriftarten werden **automatisch von [Google Fonts](https://fonts.google.com/)*
## Lokale Schriftarten
+<<<<<<< HEAD
Standardmäßig nimmt Slidev an, dass alle über die `fonts`-Konfigurationen angegebenen Schriftarten von Google Fonts stammen. Wenn man lokale Schriftarten verwenden möchte, gibt man `fonts.local` an, um den Auto-Import zu deaktivieren.
+=======
+By default, Slidev assumes all the fonts specified via `fonts` configurations come from Google Fonts. If you want to use local fonts, specify the `fonts.local` to opt-out the auto-importing.
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```yaml
---
fonts:
# wie font-family in css kann ein Komma (`,`) genutzt werden um Fallback Schriftarten anzugeben
sans: 'Helvetica Neue,Robot'
+<<<<<<< HEAD
# "Helvetica Neue" als lokale Schrift markieren
local: 'Helvetica Neue'
+=======
+ # mark 'Helvetica Neue' as local font
+ local: Helvetica Neue
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
---
```
@@ -43,8 +61,13 @@ Standardmäßig importiert Slidev drei Gewichte `200`,`400`,`600` für jede Schr
```yaml
---
fonts:
+<<<<<<< HEAD
sans: 'Robot'
# Standart
+=======
+ sans: Robot
+ # default
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
weights: '200,400,600'
# importiere kursive Schriftarten, Voreinstellung `false`
italic: false
@@ -60,13 +83,17 @@ Für die meisten Szenarien muss man nur die "spezielle Schriftart" angeben, und
```yaml
---
fonts:
- sans: 'Robot'
- serif: 'Robot Slab'
- mono: 'Fira Code'
+ sans: Robot
+ serif: Robot Slab
+ mono: Fira Code
---
```
+<<<<<<< HEAD
wird
+=======
+will result in
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```css
.font-sans {
@@ -86,7 +113,7 @@ Wenn man die Fallback-Schriftarten deaktivieren möchte, muss das ganze wie folg
---
fonts:
mono: 'Fira Code, monospace'
- fallback: false
+ fallbacks: false
---
```
@@ -100,8 +127,6 @@ Derzeit wird nur Google Fonts unterstützt, es ist geplant, in Zukunft weitere A
```yaml
---
fonts:
- provider: 'none'
+ provider: none
---
```
-
-
diff --git a/custom/highlighters.md b/custom/highlighters.md
index 85c68a4..089e097 100644
--- a/custom/highlighters.md
+++ b/custom/highlighters.md
@@ -1,34 +1,53 @@
# Highlighters
+<<<<<<< HEAD
Slidev kommt mit zwei Syntax-Highlighter, aus denen man wählen kann:
+=======
+Slidev comes with two syntax highlighters for you to choose from:
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
- [Prism](https://prismjs.com/)
- [Shiki](https://github.com/shikijs/shiki)
**Prism** ist einer der beliebtesten Syntax-Highlighter. Die Hervorhebung erfolgt durch Hinzufügen von Token-Klassen zum Code und wird mit CSS gefärbt. Man kann die [offiziellen Themen](https://github.com/PrismJS/prism-themes) durchstöbern oder mit [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) ganz einfach selbst ein Thema erstellen/anpassen.
+<<<<<<< HEAD
**Shiki** hingegen ist ein TextMate-Grammatik-gestützter Syntax-Highlighter. Er generiert farbige Token, so dass kein zusätzliches CSS erforderlich ist. Da Shiki eine großartige Grammatikunterstützung hat, sind die generierten Farben sehr akkurat, fast genau wie das, was in VS Code zu sehen ist. Shiki kommt auch mit [einer Reihe von eingebauten Themen](https://github.com/shikijs/shiki/blob/master/docs/themes.md). Der Nachteil von Shiki ist, dass es TextMate-Themen (kompatibel mit VS Code-Themen) benötigt, um die Hervorhebung zu machen, was etwas schwieriger anzupassen sein kann.
+=======
+**Shiki** is a TextMate grammar-powered syntax highlighter. It generates colored tokens, so there is no additional CSS needed. Since it has great grammar support, the generated colors are very accurate, just like what you will see in VS Code. Shiki also comes with [a bunch of built-in themes](https://shiki.style/themes). In Slidev, we also provided the [TwoSlash](#twoslash-integration) support is also built-in.
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
Slidev-Themen unterstützen normalerweise sowohl Prism als auch Shiki, aber je nach verwendetem Thema kann es sein, dass nur eines davon unterstützt wird.
Falls man die Wahl hat, ist der einzige Unterschied:
+<<<<<<< HEAD
- **Prism** für einfachere Anpassung
- **Shiki** für eine genauere Hervorhebung
Standardmäßig verwendet Slidev Prism. Man kan dies aber ändern, indem man den Frontmatter modifiziert:
+=======
+- **Prism** for easier customization
+- **Shiki** for accurate highlighting
+
+Slidev uses Shiki by default since v0.47. You can switch to it by adding the following to your `slides.md`:
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```yaml
---
-highlighter: shiki
+highlighter: Prism
---
```
+<<<<<<< HEAD
## Konfiguriere Prism
Um Prism zu konfigurieren, kann man einfach das Thema-Css importieren oder [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) verwenden, um Themen für den hellen und dunklen Modus zu konfigurieren. Weitere Details findet man in den entsprechenden Dokumenten.
## Konfiguriere Shiki
+=======
+## Configure Shiki
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
@@ -41,29 +60,25 @@ import { defineShikiSetup } from '@slidev/types'
export default defineShikiSetup(() => {
return {
- theme: {
+ themes: {
dark: 'min-dark',
light: 'min-light',
},
+ transformers: [
+ // ...
+ ]
}
})
```
+<<<<<<< HEAD
Die verfügbaren Themennamen findet man in [Shikis Dokumentation](https://github.com/shikijs/shiki/blob/master/docs/themes.md#all-themes).
Oder wenn man sein eigenes Thema verwenden möchten:
+=======
+Refer to [Shiki's docs](https://shiki.style) for available theme names.
-```ts
-/* ./setup/shiki.ts */
-
-import { defineShikiSetup } from '@slidev/types'
+## Configure Prism
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
-export default defineShikiSetup(async({ loadTheme }) => {
- return {
- theme: {
- dark: await loadTheme('path/to/theme.json'),
- light: await loadTheme('path/to/theme.json'),
- },
- }
-})
-```
+To configure your Prism, you can just import the theme CSS or use [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) to configure themes for both light and dark mode. Refer to its docs for more details.
diff --git a/custom/index.md b/custom/index.md
index 89b3f0f..404a0db 100644
--- a/custom/index.md
+++ b/custom/index.md
@@ -1,6 +1,10 @@
# Anpassungen
+<<<<<<< HEAD
Slidev ist vollständig anpassbar, vom Styling bis zur Tools-konfiguration. Slidev ermöglicht darunter liegende Tools zu konfigurieren ([Vite](/custom/config-vite), [Windi CSS](/custom/config-windicss), [Monaco](/custom/config-monaco), etc.)
+=======
+Slidev is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath ([Vite](/custom/config-vite), [UnoCSS](/custom/config-unocss), [Monaco](/custom/config-monaco), etc.)
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
## Frontmatter Konfigurationen
@@ -8,15 +12,25 @@ Slidev kann im Frontmatterblock der ersten Folie konfiguriert werden. Folgende L
```yaml
---
+<<<<<<< HEAD
# theme-id oder package name
# Mehr unter: https://sli.dev/themes/use.html
theme: 'default'
# Titel der Folie (wird automatisch aus der ersten Überschrift abgeleitet, wenn nicht angegeben)
title: 'Slidev'
# titleTemplate für die Webseite, `%s` wird mit dem Folientitel ersetzt
+=======
+# theme id or package name
+# Learn more: https://sli.dev/themes/use.html
+theme: default
+# title of your slide, will auto infer from the first header if not specified
+title: Slidev
+# titleTemplate for the webpage, `%s` will be replaced by the page's title
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
titleTemplate: '%s - Slidev'
-# information for your slides, can be a markdown string
+# information for your slides, can be a markdown string.
info: false
+<<<<<<< HEAD
# erlaube das Herunterladen einer PDF aus der SPA, kann auch ein eigener URL sein
download: false
# Präsentationsmodus aktivieren, kann boolean, 'dev' oder 'build' sein
@@ -30,9 +44,39 @@ lineNumbers: false
# Monaco-Editor aktivieren, standardmäßig nur dev
monaco: 'dev'
# Remote-Assets lokal mit vite-plugin-remote-assets herunterladen, kann ein boolean, 'dev' oder 'build' sein
+=======
+# author field for exported PDF
+author: Your Name Here
+# keywords field for exported PDF, comma-delimited.
+keywords: keyword1,keyword2
+
+# enable presenter mode, can be boolean, 'dev' or 'build'
+presenter: true
+# enabled pdf downloading in SPA build, can also be a custom url
+download: false
+# filename of the export file
+exportFilename: slidev-exported
+# export options
+# use export CLI options in camelCase format
+# Learn more: https://sli.dev/guide/exporting.html
+export:
+ format: pdf
+ timeout: 30000
+ dark: false
+ withClicks: false
+ withToc: false
+# syntax highlighter, can be 'prism', 'shiki'
+highlighter: shiki
+# show line numbers in code blocks
+lineNumbers: false
+# enable monaco editor, can be boolean, 'dev' or 'build'
+monaco: dev
+# download remote assets in local using vite-plugin-remote-assets, can be boolean, 'dev' or 'build'
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
remoteAssets: false
# gibt an, ob Text in den Folien auswählbar ist
selectable: true
+<<<<<<< HEAD
# Folienaufzeichnung aktivieren, kann ein boolean, 'dev' oder 'build' sein
record: 'dev'
@@ -43,6 +87,18 @@ routerMode: 'history'
# Seitenverhältnis der Folien
aspectRatio: '16/9'
# tatsächliche Breite des Canvases (Einheit in px)
+=======
+# enable slide recording, can be boolean, 'dev' or 'build'
+record: dev
+
+# force color schema for the slides, can be 'auto', 'light', or 'dark'
+colorSchema: auto
+# router mode for vue-router, can be "history" or "hash"
+routerMode: history
+# aspect ratio for the slides
+aspectRatio: 16/9
+# real width of the canvas, unit in px
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
canvasWidth: 980
# passe Theme Designs an, fügt Root-Styles `--slidev-theme-x` für das Attribut `x` ein
themeConfig:
@@ -56,13 +112,13 @@ plantUmlServer: 'https://www.plantuml.com/plantuml'
# Schriften werden automatisch von Google Fonts importiert
# Erfahre mehr: https://de.sli.dev/custom/fonts
fonts:
- sans: 'Roboto'
- serif: 'Roboto Slab'
- mono: 'Fira Code'
+ sans: Roboto
+ serif: Roboto Slab
+ mono: Fira Code
# Standard-Frontmatter, gilt für alle Folien
defaults:
- layout: 'default'
+ layout: default
# ...
@@ -73,12 +129,37 @@ drawings:
persist: false
presenterOnly: false
syncAll: true
+
+# HTML tag attributes
+htmlAttrs:
+ dir: ltr
+ lang: en
---
```
Weitere Informationen sind in den [Typdefinitionen](https://github.com/slidevjs/slidev/blob/main/packages/types/src/config.ts) zu finden.
+<<<<<<< HEAD
## Ordner Struktur
+=======
+## Per slide configuration
+
+In addition, every slide accepts the following configuration in the Frontmatter block:
+
+* `clicks` (`number`): Custom clicks count (learn more [here](/guide/animations.html#custom-clicks-count)).
+* `disabled` (`boolean`): Completely disable the slide.
+* `hide` (`boolean`): Hide sub-slides when using `src` (learn more [here](/guide/syntax.html#multiple-entries)).
+* `hideInToc` (`boolean`): Hide the slide for the `
` components (learn more [here](/builtin/components.html#toc)).
+* `layout` (`string`): Defines the layout component applied to the slide (learn more [here](/guide/syntax.html#front-matter-layouts) and [here](/builtin/layouts.html)).
+* `level` (`number`): Override the title level for the `` and `` components (only if `title` has also been declared, learn more [here](/builtin/components.html#titles)).
+* `preload` (`boolean`, default `true`): preload the next slide (learn more [here](/guide/animations.html#motion)).
+* `routeAlias` (`string`): create a route alias that can be used in the URL or with the ` ` component (learn more [here](/builtin/components.html#link)).
+* `src` (`string`): Includes a markdown file (learn more [here](/guide/syntax.html#multiple-entries)).
+* `title` (`string`): Override the title for the `` and `` components (learn more [here](/builtin/components.html#titles)).
+* `transition` (`string | TransitionProps`): Defines the transition between the slide and the next one (learn more [here](/guide/animations.html#slide-transitions)).
+
+## Directory Structure
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
Slidev nutzt Ordner-Struktur-Konventionen, um die Konfigurationsoberfläche minimal zu halten und Erweiterungen flexibel und intuitiv zu gestalten.
@@ -86,9 +167,18 @@ Siehe Abschnitt [Ordner Struktur](/custom/directory-structure).
## Tools Konfigurieren
- [Highlighters](/custom/highlighters)
+<<<<<<< HEAD
- [Vue konfigurieren](/custom/config-vue)
- [Vite konfigurieren](/custom/config-vite)
- [Windi CSS konfigurieren](/custom/config-windicss)
- [Monaco konfigurieren](/custom/config-monaco)
- [KaTeX konfigurieren](/custom/config-katex)
- [Mermaid konfigurieren](/custom/config-mermaid)
+=======
+- [Configure Vue](/custom/config-vue)
+- [Configure Vite](/custom/config-vite)
+- [Configure UnoCSS](/custom/config-unocss)
+- [Configure Monaco](/custom/config-monaco)
+- [Configure KaTeX](/custom/config-katex)
+- [Configure Mermaid](/custom/config-mermaid)
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
diff --git a/custom/vue-context.md b/custom/vue-context.md
index c1e0f29..fb90aa6 100644
--- a/custom/vue-context.md
+++ b/custom/vue-context.md
@@ -25,6 +25,34 @@ Die aktuelle Folie ist: {{ $slidev.nav.currentPage }}
## Eigenschaften
+### `$clicks`
+
+`$clicks` hold a number of clicks on the current slide. Can be used conditionally to show different content on clicks.
+
+```html
+Content
+```
+
+### `$page`
+
+`$page` holds the number of the current page, 1-indexed.
+
+```md
+Page: {{ $page }}
+
+Is current page active: {{ $page === $slidev.nav.currentPage }}
+```
+
+### `$renderContext`
+
+`$renderContext` holds the current render context, can be `slide`, `overview`, `presenter` or `previewNext`
+
+```md
+
+ This content will only be rendered in slides view
+
+```
+
### `$slidev.nav`
Ein reaktives Objekt, das die Eigenschaften und Steuerelemente der Foliennavigation enthält. Zum Beispiel:
@@ -41,14 +69,20 @@ $slidev.nav.go(10) // gehe zu Folie #10
```js
$slidev.nav.currentPage // aktuelle Foliennummer
+<<<<<<< HEAD
$slidev.nav.currentLayout // aktuelle Layout-ID
$slidev.nav.clicks // aktuelle Anzahl der Klicks
+=======
+$slidev.nav.currentLayout // current layout id
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```
Weitere verfügbare Eigenschaften sind in den [nav.ts](https://github.com/slidevjs/slidev/blob/main/packages/client/logic/nav.ts) Exporten zu finden.
+> Note: `$slidev.nav.clicks` is a global state while `$clicks` is local to each slide. It's recommended to **use `$clicks` over `$slidev.nav.clicks`** to avoid clicks changed been triggered on page transitions.
+
### `$slidev.configs`
Ein reaktives Objekt, das die geparsten [Konfigurationen im ersten Frontmatter](/custom/#frontmatter-configures) der `slides.md` Datei enthält. Zum Beispiel:
@@ -72,10 +106,16 @@ Ein reaktives Objekt, das die geparsten Themenkonfigurationen enthält.
---
title: Meine erste Slidev!
themeConfig:
- primary: #213435
+ primary: # 213435
---
```
```
{{ $slidev.themeConfigs.primary }} // '#213435'
```
+
+### `$nav`
+
+> Available since v0.43.0
+
+A shorthand of `$slidev.nav`.
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..f03c99f
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,5 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+
+})
diff --git a/guide/animations.md b/guide/animations.md
index 034592a..f050fef 100644
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -1,12 +1,24 @@
+<<<<<<< HEAD
# Animationen
+=======
+---
+outline: deep
+---
+
+# Animations
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
## Klick Animationen
+> [!NOTE]
+> Since v0.48.0, we are rewritten the click animations system with much more consistent behaviors. It might change the behaviors of your existing slides in edge cases. While this page is showing the new click system, you can find more details about the refactor in [#1279](https://github.com/slidevjs/slidev/pull/1279).
+
### `v-click`
Um "Klick-Animationen" zu Elementen hinzuzufügen, können die `v-click`-Direktive oder `` Komponente verwendet werden.
```md
+<<<<<<< HEAD
# Hallo
@@ -22,10 +34,20 @@ Hallo Welt
Hey!
+=======
+
+
Hello **World**
+
+
+
Hey!
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```
### `v-after`
+<<<<<<< HEAD
Die Verwendung von `v-after` ist ähnlich wie `v-click`, aber diesmal wird das Element sichtbar, wenn der Vorherige `v-click`ausgelöst wird.
```md
@@ -34,18 +56,48 @@ Die Verwendung von `v-after` ist ähnlich wie `v-click`, aber diesmal wird das E
```
Wenn "Weiter" gedrückt wird, werden `Hallo`und `Welt` zusammen sichtbar.
+=======
+`v-after` is only provided as a directive. It will turn the element visible when the previous `v-click` is triggered.
+
+```md
+
Hello
+
World
+```
+
+When you press "next", both `Hello` and `World` will show up together.
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
-### `v-click-hide`
+### Hide after clicking
+<<<<<<< HEAD
Funktioniert genau wie `v-click`, nur dass es das Element verschwinden lässt.
```md
Hallo
+=======
+Add a `.hide` modifier to `v-click` or `v-after` to make the element invisible after clicking, instead of showing up.
+
+```md
+
Visible after 1 click
+
Hidden after 2 click
+
Hidden after 2 click
+```
+
+For `v-click` component, you can use the `hide` prop to achieve the same effect:
+
+```md
+
Visible after 1 click
+
Hidden after 2 click
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```
### `v-clicks`
+<<<<<<< HEAD
`v-clicks` wird nur als Komponente bereit gestellt. Es ist eine Abkürzung, um die `v-click`-Direktive auf alle untergeordneten Elemente anzuwenden. Es ist besonders nützlich, wenn man mit Listen arbeitet.
+=======
+`v-clicks` is only provided as a component. It's a shorthand to apply the `v-click` directive to all its child elements. It is especially useful when working with lists and tables.
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```md
@@ -53,14 +105,146 @@ Funktioniert genau wie `v-click`, nur dass es das Element verschwinden lässt.
- Item 1
- Item 2
- Item 3
-- Item 4
```
+<<<<<<< HEAD
Jedes Mal, wenn man auf "Weiter" klickt, wird ein Element sichtbar.
### Benutzerdefinierte Anzahl der Klicks
+=======
+An item will become visible each time you click "next".
+It accepts a `depth` prop for nested list:
+
+```md
+
+
+- Item 1
+ - Item 1.1
+ - Item 1.2
+- Item 2
+ - Item 2.1
+ - Item 2.2
+
+
+```
+
+Also, you can use the `every` prop to specify the number of items to show after each click:
+
+```md
+
+
+- Item 1 (part 1)
+- Item 1 (part 2)
+- Item 2 (part 1)
+- Item 2 (part 2)
+
+
+```
+
+### Positioning
+
+By default, the clicking animations take place one by one. You can customize the animation position of elements by using the `at` prop or the `v-click` directive with value.
+
+Like the CSS layout system, click-animated elements can be "relative" or "absolute":
+
+#### Relative Position
+
+This actual position of relative elements are calculated based on the previous relative elements:
+
+~~~md
+
visible after 1 click
+
visible after 3 clicks
+
hidden after 2 clicks
+
+```js {none|1|2}{at:'+5'}
+1 // highlighted after 7 clicks
+2 // highlighted after 8 clicks
+```
+~~~
+
+> [!NOTE]
+> The default value of `v-click` is `'+1'` when you don't specify it.
+
+In fact, `v-after` are just shortcuts for `v-click` with `at` prop:
+
+```md
+
+
+
+
+
+
+
+
+```
+
+:::info
+Only string values start with `'+'` or `'-'` like `'+1'` are treated as relative positions:
+
+| Value | Kind |
+| -------------- | -------- |
+| `'-1'`, `'+1'` | Relative |
+| `+1` === `1` | Absolute |
+| `'1'` | Absolute |
+
+So don't forget the single quotes for the relative values.
+:::
+
+#### Absolute Position
+
+The given value is the exact click count to show the element:
+
+~~~md
+
visible after 3 clicks
+
visible after 2 clicks
+
hidden after 1 click
+
+```js {none|1|2}{at:3}
+1 // highlighted after 3 clicks
+2 // highlighted after 4 clicks
+```
+~~~
+
+#### Mixed Case
+
+You can mix the absolute and relative positions:
+
+~~~md
+
visible after 1 click
+
visible after 3 clicks
+
visible after 2 click
+
visible after 1 click
+
visible after 4 clicks
+~~~
+
+The following example synchronizes the highlighting of the two code blocks:
+
+~~~md
+```js {1|2}{at:1}
+1 + 1
+'a' + 'b'
+```
+
+```js {1|2}{at:1}
+2
+'ab'
+```
+~~~
+
+### Enter & Leave
+
+> Available since v0.43.0
+
+You can also specify the enter and leave index for the `v-click` directive by passing an array. The end index is exclusive.
+
+```md
+
This will be shown on the 2nd and 3rd clicks, and hide again after the 4th.
+```
+
+### Custom Total Clicks Count
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
Standardmäßig zählt Slidev, wie viele Schritte erforderlich sind, bevor zur nächsten Folie gewechselt wird. Man kann diese Einstellung überschreiben, indem man die Frontmatter-Option `clicks` übergibt:
@@ -71,6 +255,7 @@ clicks: 10
---
```
+<<<<<<< HEAD
### Reihenfolge
Wenn man einen Index der `v-click` Direktive überreicht, kann die Reihenfolge der Enthüllung angepasst werden.
@@ -100,6 +285,9 @@ clicks: 3
```
### Element Übergänge
+=======
+### Element Transitions
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
Wenn die `v-click`Direktive bei Elementen angewendet wird, erhalten diese auch die `slidev-vclick-target` CSS Klasse. Wenn das Element auch noch versteckt ist, des weiteren auch die Klasse `slidev-vclick-hidden`. Zum Beispiel:
@@ -128,9 +316,15 @@ Standardmäßig wird auf diese Klassen ein subtiler Deckkraftübergang angewende
}
```
+<<<<<<< HEAD
Man kann diese Übergänge in den eigenen Stylesheets überschreiben und verändern.
Zum Beispiel wäre ein Hochskalierender Übergang:
+=======
+You can override them to customize the transition effects in your custom stylesheets.
+
+For example, you can achieve the scaling up transitions by:
+>>>>>>> 7a04557f35275398f1e4314e782f6a42936f7152
```css
// styles.css
@@ -196,8 +390,113 @@ Der Text `Slidev` bewegt sich von `-80px` zu seiner ursprüngliche Position.
>
> ```
+<<<<<<< HEAD
Mehr erfahren: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/directive-usage.html) | [Presets](https://motion.vueuse.org/presets.html)
## Folienübergänge
> Bisher gibt es KEINE integrierte Unterstützung für Folienübergange. Wir planen Folienübergange in der nächsten Hauptversion hinzuzufügen. Zuvor können dafür nur benutzerdefinierte Styles und Libraries genutzt werden.
+=======
+Learn mode: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/features/directive-usage) | [Presets](https://motion.vueuse.org/features/presets)
+
+## Slide Transitions
+
+