+
### Имя
diff --git a/custom/directory-structure.md b/custom/directory-structure.md
index e31e5a9..4b2c48d 100644
--- a/custom/directory-structure.md
+++ b/custom/directory-structure.md
@@ -9,11 +9,19 @@ your-slidev/
├── components/ # кастомные компоненты
├── layouts/ # кастомные шаблоны
├── public/ # static assets
+<<<<<<< HEAD
├── setup/ # кастомные настройки / хуки
├── styles/ # кастомные стили
├── index.html # инъекции в index.html
├── slides.md # описание слайдов
└── vite.config.ts # расширение конфигурации vite
+=======
+ ├── setup/ # custom setup / hooks
+ ├── styles/ # custom style
+ ├── index.html # injections to index.html
+ ├── slides.md # the main slides entry
+ └── vite.config.ts # extending vite config
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```
Все они необязательны.
@@ -48,7 +56,11 @@ your-slidev/
```
+<<<<<<< HEAD
Эта функция работает благодаря [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
+=======
+This feature is powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components), learn more there.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Slidev также предоставляет вам некоторые [встроенные компоненты](/builtin/components).
@@ -115,18 +127,24 @@ import './code.css'
import './layouts.css'
```
+<<<<<<< HEAD
Стили будут обрабатываться через [Windi CSS](http://windicss.org/) и [PostCSS](https://postcss.org/), поэтому вы можете использовать вложенные css стили и [at-директивы](https://windicss.org/features/directives.html) прямо из коробки. Например:
+=======
+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:
+
+
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```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 {
@@ -135,7 +153,11 @@ import './layouts.css'
}
```
+<<<<<<< HEAD
[Подробнее о синтаксисе](https://windicss.org/features/directives.html).
+=======
+[Learn more about the syntax](https://unocss.dev/transformers/directives#apply).
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
## `index.html`
@@ -183,5 +205,9 @@ import './layouts.css'
Соглашения: `global-top.vue` | `global-bottom.vue`
+<<<<<<< HEAD
Подробнее: [Глобальные слои](/custom/global-layers)
+=======
+Learn more: [Global Layers](/custom/global-layers)
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
diff --git a/custom/fonts.md b/custom/fonts.md
index c48badf..93ded8e 100644
--- a/custom/fonts.md
+++ b/custom/fonts.md
@@ -9,12 +9,21 @@
```yaml
---
fonts:
+<<<<<<< HEAD
# основной текст
sans: 'Robot'
# использование с css классом `font-serif` от windicss
serif: 'Robot Slab'
# для блоков кода, inline-кода и т.д.
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
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
---
```
@@ -24,15 +33,24 @@ fonts:
## Локальные шрифты
+<<<<<<< HEAD
По умолчанию Slidev считает, что все шрифты, указанные в конфигурациях `fonts`, взяты из Google Fonts. Если вы хотите использовать локальные шрифты, укажите `fonts.local`, чтобы отключить автоматический импорт.
+=======
+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.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```yaml
---
fonts:
# вы можете использовать `,` чтобы использовать несколько шрифтов для fallback'а (как font-family в css)
sans: 'Helvetica Neue,Robot'
+<<<<<<< HEAD
# пометить 'Helvetica Neue' как локальный шрифт
local: 'Helvetica Neue'
+=======
+ # mark 'Helvetica Neue' as local font
+ local: Helvetica Neue
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
---
```
@@ -43,8 +61,13 @@ fonts:
```yaml
---
fonts:
+<<<<<<< HEAD
sans: 'Robot'
# по умолчанию
+=======
+ sans: Robot
+ # default
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
weights: '200,400,600'
# импорт курсивных шрифтов, по умолчанию `false`
italic: false
@@ -60,13 +83,19 @@ fonts:
```yaml
---
fonts:
- sans: 'Robot'
- serif: 'Robot Slab'
- mono: 'Fira Code'
+ sans: Robot
+ serif: Robot Slab
+ mono: Fira Code
---
```
+<<<<<<< HEAD
сбилдится в
+=======
+will result in
+
+
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```css
.font-sans {
@@ -86,7 +115,7 @@ fonts:
---
fonts:
mono: 'Fira Code, monospace'
- fallback: false
+ fallbacks: false
---
```
@@ -100,8 +129,6 @@ fonts:
```yaml
---
fonts:
- provide: 'none'
+ provider: none
---
```
-
-
diff --git a/custom/global-layers.md b/custom/global-layers.md
index 5f8777f..e7a3f7f 100644
--- a/custom/global-layers.md
+++ b/custom/global-layers.md
@@ -4,18 +4,30 @@
Глобальные слои позволяют иметь кастомные компоненты, **постоянно** доступные в слайдах. Это может быть полезно для футера, анимации смены слайдов, глобальных эффектов и т.д.
+<<<<<<< HEAD
Slidev предоставляет два слоя для этого: создайте `global-top.vue` или `global-bottom.vue` в корне вашего проекта, и он будет загружен автоматически.
+=======
+Slidev provides three layers for this usage, create `global-top.vue`, `global-bottom.vue` or `custom-nav-controls.vue` under your project root and it will pick up automatically.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Связь слоёв:
+<<<<<<< HEAD
- Глобальный Top (`global-top.vue`)
- Слайды
- Глобальный Bottom (`global-bottom.vue`)
+=======
+- Global Top (`global-top.vue`)
+- Slides
+- Global Bottom (`global-bottom.vue`)
+- NavControls
+ - Customized Navigation Controls (`custom-nav-controls.vue`)
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
## Примеры
```html
-
+
@@ -23,7 +35,22 @@ Slidev предоставляет два слоя для этого: созда
Текст `Ваше имя` будет отображаться на всех ваших слайдах.
+<<<<<<< HEAD
Чтобы использовать при определённых условиях, вы можете применить его с помощью [глобального контекста Vue](/custom/vue-context).
+=======
+```html
+
+
+
+
+
+
+```
+
+The button `Next` will appear in NavControls.
+
+To enable it conditionally, you can apply it with the [Vue Global Context](/custom/vue-context).
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```html
@@ -60,3 +87,13 @@ Slidev предоставляет два слоя для этого: созда
```
+
+```html
+
+
+
+
+
+
+
+```
diff --git a/custom/highlighters.md b/custom/highlighters.md
index 0b94e76..d876977 100644
--- a/custom/highlighters.md
+++ b/custom/highlighters.md
@@ -1,34 +1,53 @@
# Подсветка
+<<<<<<< HEAD
Slidev поставляется с двумя подсветками синтаксиса на выбор:
+=======
+Slidev comes with two syntax highlighters for you to choose from:
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
- [Prism](https://prismjs.com/)
- [Shiki](https://github.com/shikijs/shiki)
**Prism** - один из самых популярных инструментов подсветки синтаксиса. Подсветка выполняется путём добавления токенов в виде классов и стилизации их через CSS. Вы можете просмотреть [официальные темы](https://github.com/PrismJS/prism-themes) или очень легко создать/настроить их самостоятельно, используя [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars).
+<<<<<<< HEAD
**Shiki**, с другой стороны, представляет собой средство выделения синтаксиса на основе грамматики TextMate. Он генерирует цветовые токены, поэтому дополнительный CSS не требуется. Поскольку он имеет отличную поддержку грамматики, сгенерированные цвета очень точны, как, например, в VS Code. Shiki также поставляется с [набором встроенных тем](https://github.com/shikijs/shiki/blob/master/docs/themes.md). Обратной стороной Shiki является то, что для выделения также требуются темы TextMate (совместимые с темой VS Code), что может быть немного сложнее настроить.
+=======
+**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, [TwoSlash](https://sli.dev/guide/syntax#twoslash-integration) support is also built-in.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Темы Slidev обычно поддерживают как Prism, так и Shiki, но в зависимости от темы, которую вы используете, он может поддерживать только одну из них.
Когда у вас есть выбор, компромисс заключается в следующем:
+<<<<<<< HEAD
- **Prism** – для лёгкой кастомизации
- **Shiki** – для более аккуратной подсветки
По умолчанию Slidev использует Prism. Вы можете изменить его в frontmatter:
+=======
+- **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`:
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```yaml
---
-highlighter: shiki
+highlighter: Prism
---
```
+<<<<<<< HEAD
## Конфигурация Prism
Чтобы настроить Prism, вы можете просто импортировать css тему или использовать [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) для настройки тем как для светлого, так и для тёмного режима. Обратитесь к документации Prism для получения более подробной информации.
## Конфигурация Shiki
+=======
+## Configure Shiki
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
@@ -40,29 +59,25 @@ import { defineShikiSetup } from '@slidev/types'
export default defineShikiSetup(() => {
return {
- theme: {
+ themes: {
dark: 'min-dark',
light: 'min-light',
},
+ transformers: [
+ // ...
+ ]
}
})
```
+<<<<<<< HEAD
Доступные имена тем можно посмотреть в [документации Shiki](https://github.com/shikijs/shiki/blob/master/docs/themes.md#all-themes).
Или, если вы хотите использовать свою собственную тему:
+=======
+Refer to [Shiki's docs](https://shiki.style) for available theme names.
-```ts
-/* ./setup/shiki.ts */
-
-import { defineShikiSetup } from '@slidev/types'
+## Configure Prism
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
-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 a0ef53c..16eea80 100644
--- a/custom/index.md
+++ b/custom/index.md
@@ -1,6 +1,10 @@
# Кастомизация
+<<<<<<< HEAD
Slidev полностью кастомизируем, начиная от стилей, заканчивая инструментами конфигурации. Это позволяет вам сконфигурировать инструменты под ([Vite](/custom/config-vite), [Windi CSS](/custom/config-windicss), [Monaco](/custom/config-monaco), и т.д.)
+=======
+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.)
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
## Frontmatter Configures
@@ -8,13 +12,29 @@ Slidev полностью кастомизируем, начиная от сти
```yaml
---
+<<<<<<< HEAD
# id темы или название пакета
theme: 'default'
# заголовок слайда, если не указан, то будет автоматически подставлен из первого найденного заголовка
title: ''
# шаблон заголовка для веб-страницы, `%s` будет заменен заголовком страницы
+=======
+# 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
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
titleTemplate: '%s - Slidev'
+# information for your slides, can be a markdown string.
+info: false
+# author field for exported PDF
+author: Your Name Here
+# keywords field for exported PDF, comma-delimited.
+keywords: keyword1,keyword2
+<<<<<<< HEAD
# загрузка pdf в SPA сборке, также может содержать кастомный URL
download: true
# подсветка синтаксиса, может быть 'prism' или 'shiki'
@@ -31,30 +51,115 @@ routerMode: 'history'
# соотношение сторон слайдов
aspectRatio: '16/9'
# реальная ширина canvas, единица измерения в пикселях
+=======
+# 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'
+remoteAssets: false
+# controls whether texts in slides are selectable
+selectable: true
+# 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
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
canvasWidth: 980
+# used for theme customization, will inject root styles as `--slidev-theme-x` for attribute `x`
+themeConfig:
+ primary: '#5d8392'
+<<<<<<< HEAD
# шрифты будут автоматически импортированы из Google fonts
# Подробнее: https://sli.dev/custom/fonts
+=======
+# favicon, can be a local file path or URL
+favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
+# URL of PlantUML server used to render diagrams
+plantUmlServer: 'https://www.plantuml.com/plantuml'
+# fonts will be auto imported from Google fonts
+# Learn more: https://sli.dev/custom/fonts
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
fonts:
- sans: 'Roboto'
- serif: 'Roboto Slab'
- mono: 'Fira Code'
+ sans: Roboto
+ serif: Roboto Slab
+ mono: Fira Code
# дефолтные настройки frontmatter для всех слайдов
defaults:
- layout: 'default'
+ layout: default
# ...
+<<<<<<< HEAD
# информация для слайдов, может быть markdown-строкой
info: |
## Slidev
My first [Slidev](http://sli.dev/) presentations!
+=======
+# drawing options
+# Learn more: https://sli.dev/guide/drawing.html
+drawings:
+ enabled: true
+ persist: false
+ presenterOnly: false
+ syncAll: true
+
+# HTML tag attributes
+htmlAttrs:
+ dir: ltr
+ lang: en
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
---
```
Подробнее в [определении типов](https://github.com/slidevjs/slidev/blob/main/packages/types/src/types.ts#L29).
+<<<<<<< HEAD
## Структура каталогов
+=======
+## 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-total-clicks-count)).
+- `disabled` (`boolean`): Completely disable and hide the slide.
+- `hide` (`boolean`): The same as `disabled`.
+- `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)).
+- `zoom` (`number`): Custom zoom scale. Useful for slides with a lot of content.
+
+## Directory Structure
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Slidev использует структуру каталогов для минимальной и поверхностной конфигурации, и делает расширения гибкими и интуитивными в функциональности.
@@ -65,7 +170,7 @@ Slidev использует структуру каталогов для мин
- [Highlighters](/custom/highlighters)
- [Configure Vue](/custom/config-vue)
- [Configure Vite](/custom/config-vite)
-- [Configure Windi CSS](/custom/config-windicss)
+- [Configure UnoCSS](/custom/config-unocss)
- [Configure Monaco](/custom/config-monaco)
- [Configure KaTeX](/custom/config-katex)
- [Configure Mermaid](/custom/config-mermaid)
diff --git a/custom/vue-context.md b/custom/vue-context.md
index 4d9c927..f3ea1ec 100644
--- a/custom/vue-context.md
+++ b/custom/vue-context.md
@@ -25,6 +25,34 @@ Slidev внедряет `$slidev` в [глобальный контекст Vue]
## Параметры
+### `$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`
Реактивный объект, содержащий свойства и элементы управления для навигации по слайдам. Например:
@@ -40,13 +68,19 @@ $slidev.nav.go(10) // переход к слайду #10
```js
$slidev.nav.currentPage // номер текущего слайда
+<<<<<<< HEAD
$slidev.nav.currentLayout // текущий id шаблона
$slidev.nav.clicks // текущее количество кликов
+=======
+$slidev.nav.currentLayout // current layout id
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```
Дополнительные доступные свойства смотрите в экспортах файла [nav.ts](https://github.com/slidevjs/slidev/blob/main/packages/client/logic/nav.ts).
+> 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`
Реактивный объект, содержащий обработанные [настройки из первого frontmatter](/custom/#frontmatter-configures) вашего `slides.md`. Например
@@ -69,10 +103,16 @@ title: Мой первый Slidev!
---
title: Мой первыйSlidev!
themeConfig:
- primary: #213435
+ primary: # 213435
---
```
```
{{ $slidev.themeConfigs.primary }} // '#213435'
```
+
+### `$nav`
+
+> Available since v0.43.0
+
+A shorthand of `$slidev.nav`.
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..c62e6a4
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.vitepress/@slidev
+.vitepress/cache
diff --git a/docs/.npmrc b/docs/.npmrc
new file mode 100644
index 0000000..cf04042
--- /dev/null
+++ b/docs/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
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 8c2cc75..1765d37 100644
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -1,12 +1,24 @@
+<<<<<<< HEAD
# Анимация
+=======
+---
+outline: deep
+---
+
+# Animations
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
## Анимация по клику
+> [!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`
Чтобы применить «анимацию по клику» для элементов, вы можете использовать директиву `v-click` или `` компоненты
```md
+<<<<<<< HEAD
# Привет
@@ -22,10 +34,21 @@
Хэй!
+=======
+
+
+
Hello **World**
+
+
+
Hey!
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```
### `v-after`
+<<<<<<< HEAD
Использование `v-after` очень похоже на `v-click`, но элемент появится только при срабатывании предыдущего `v-click`.
```md
@@ -34,33 +57,202 @@
```
Когда вы нажмёте кнопку «Далее», `Привет` и `Мир` появятся вместе.
+=======
+`v-after` is only provided as a directive. It will turn the element visible when the previous `v-click` is triggered.
+
+```md
+
Hello
+
World
+```
-### `v-click-hide`
+When you press "next", both `Hello` and `World` will show up together.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
+### Hide after clicking
+
+<<<<<<< HEAD
То же, что и `v-click`, но вместо того, чтобы отображать элемент, он скроет его после клика.
```md
Привет
+=======
+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
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```
### `v-clicks`
+<<<<<<< HEAD
`v-clicks` используется только как компонент. Это сокращение для директивы `v-click` ко всем её дочерним элементам. Особенно полезно при работе со списками.
+=======
+`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.
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```md
+<<<<<<< HEAD
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
+=======
+- Item 1
+- Item 2
+- Item 3
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```
+<<<<<<< HEAD
Каждый пункт будет отображаться по клику на «Далее».
### Кастомный счётчик кликов
+=======
+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
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
По умолчанию Slidev подсчитывает, сколько шагов нужно сделать, прежде чем перейти к следующему слайду. Вы можете переопределить этот параметр, передав frontmatter опцию `clicks`:
@@ -71,6 +263,7 @@ clicks: 10
---
```
+<<<<<<< HEAD
### Порядок
Передав индекс кликов в свои директивы, вы можете настроить порядок раскрытия
@@ -100,6 +293,9 @@ clicks: 3
```
### Переходы элементов
+=======
+### Element Transitions
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Когда вы применяете директиву `v-click` к элементам, она добавляет к ним класс `slidev-vclick-target`. Когда элементы скрыты, будет добавлен класс `slidev-vclick-hidden`. Например:
@@ -128,12 +324,18 @@ clicks: 3
}
```
+<<<<<<< HEAD
Вы можете переопределить их, чтобы настроить эффекты перехода в своих стилях.
Например, вы можете добавить переход масштабирования следующим образом:
+=======
+You can override them to customize the transition effects in your custom stylesheets.
+
+For example, you can achieve the scaling up transitions by:
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
```css
-// styles.css
+/* styles.css */
.slidev-vclick-target {
transition: all 500ms ease;
@@ -161,7 +363,47 @@ clicks: 3
Подробнее в [кастомизации стилей](/custom/directory-structure#style).
+<<<<<<< HEAD
## Перемещение
+=======
+## Rough Markers
+
+> Available since v0.48.0
+
+Slidev integrates [Rough Notation](https://github.com/linkstrifer/react-rough-notation) to allow marking or highlighting elements in your slides.
+
+### `v-mark`
+
+Rough Notation integrates comes with the `v-mark` directive.
+
+#### Type
+
+`v-mark.underline` for Underline mark, `v-mark.circle` for Circle mark, etc. Default to `underline`
+
+#### Color
+
+`v-mark.red` make the notation `red`. Supported builtin color themes from UnoCSS. For custom colors, use object syntax `v-mark="{ color: '#234' }"`
+
+#### Clicks
+
+`v-mark` works like `v-click` and will trigger after a click. Same as `v-click`, it allows you to pass a custom click value, like `v-mark="5"` or `v-mark="'+1'"`.
+
+#### Options
+
+Optionally you can pass an object to `v-mark` to specify the options, for example:
+
+```vue
+
+Important text
+
+```
+
+#### Preview
+
+
+
+## Motion
+>>>>>>> 69e1142c6f07cb04fb7fea7f396de60cd1f0538f
Slidev имеет встроенный [@vueuse/motion](https://motion.vueuse.org/). Вы можете использовать директиву `v-motion` к любым элементам, чтобы применить к ним перемещение. Например
@@ -196,8 +438,116 @@ Slidev имеет встроенный [@vueuse/motion](https://motion.vueuse.or
>
> ```
+<<<<<<< HEAD
Подробнее: [Демо](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)
## Переходы страниц
> Встроенная поддержка слайдов ЕЩЁ НЕ предусмотрена в текущей версии. Мы планируем добавить их в следующей мажорной версии. Но сейчас вы всё ещё можете использовать свои собственные стили и библиотеки для этого.
+=======
+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
+
+