create-slidev 0.48.8 → 0.48.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/template/package.json +1 -1
- package/template/slides.md +14 -12
package/package.json
CHANGED
package/template/package.json
CHANGED
package/template/slides.md
CHANGED
|
@@ -373,8 +373,6 @@ also allows you to add
|
|
|
373
373
|
|
|
374
374
|
</div>
|
|
375
375
|
|
|
376
|
-
---
|
|
377
|
-
preload: false
|
|
378
376
|
---
|
|
379
377
|
|
|
380
378
|
# Motions
|
|
@@ -385,18 +383,21 @@ Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), t
|
|
|
385
383
|
<div
|
|
386
384
|
v-motion
|
|
387
385
|
:initial="{ x: -80 }"
|
|
388
|
-
:enter="{ x: 0 }"
|
|
386
|
+
:enter="{ x: 0 }"
|
|
387
|
+
:click-3="{ x: 80 }"
|
|
388
|
+
:leave="{ x: 1000 }"
|
|
389
|
+
>
|
|
389
390
|
Slidev
|
|
390
391
|
</div>
|
|
391
392
|
```
|
|
392
393
|
|
|
393
|
-
<div class="w-60 relative
|
|
394
|
+
<div class="w-60 relative">
|
|
394
395
|
<div class="relative w-40 h-40">
|
|
395
396
|
<img
|
|
396
397
|
v-motion
|
|
397
398
|
:initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
|
|
398
399
|
:enter="final"
|
|
399
|
-
class="absolute
|
|
400
|
+
class="absolute inset-0"
|
|
400
401
|
src="https://sli.dev/logo-square.png"
|
|
401
402
|
alt=""
|
|
402
403
|
/>
|
|
@@ -404,7 +405,7 @@ Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), t
|
|
|
404
405
|
v-motion
|
|
405
406
|
:initial="{ y: 500, x: -100, scale: 2 }"
|
|
406
407
|
:enter="final"
|
|
407
|
-
class="absolute
|
|
408
|
+
class="absolute inset-0"
|
|
408
409
|
src="https://sli.dev/logo-circle.png"
|
|
409
410
|
alt=""
|
|
410
411
|
/>
|
|
@@ -412,7 +413,7 @@ Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), t
|
|
|
412
413
|
v-motion
|
|
413
414
|
:initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
|
|
414
415
|
:enter="final"
|
|
415
|
-
class="absolute
|
|
416
|
+
class="absolute inset-0"
|
|
416
417
|
src="https://sli.dev/logo-triangle.png"
|
|
417
418
|
alt=""
|
|
418
419
|
/>
|
|
@@ -445,7 +446,7 @@ const final = {
|
|
|
445
446
|
|
|
446
447
|
<div
|
|
447
448
|
v-motion
|
|
448
|
-
:initial="{ x:35, y:
|
|
449
|
+
:initial="{ x:35, y: 30, opacity: 0}"
|
|
449
450
|
:enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
|
|
450
451
|
|
|
451
452
|
[Learn More](https://sli.dev/guide/animations.html#motion)
|
|
@@ -567,7 +568,7 @@ hide: false
|
|
|
567
568
|
|
|
568
569
|
# Monaco Editor
|
|
569
570
|
|
|
570
|
-
Slidev provides built-in
|
|
571
|
+
Slidev provides built-in Monaco Editor support.
|
|
571
572
|
|
|
572
573
|
Add `{monaco}` to the code block to turn it into an editor:
|
|
573
574
|
|
|
@@ -575,20 +576,21 @@ Add `{monaco}` to the code block to turn it into an editor:
|
|
|
575
576
|
import { ref } from 'vue'
|
|
576
577
|
import hello from './external'
|
|
577
578
|
|
|
578
|
-
const code = ref(
|
|
579
|
-
hello()
|
|
579
|
+
const code = ref(hello())
|
|
580
580
|
```
|
|
581
581
|
|
|
582
582
|
Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
|
|
583
583
|
|
|
584
584
|
```ts {monaco-run}
|
|
585
|
+
import { version } from 'vue'
|
|
586
|
+
|
|
585
587
|
function fibonacci(n: number): number {
|
|
586
588
|
return n <= 1
|
|
587
589
|
? n
|
|
588
590
|
: fibonacci(n - 1) + fibonacci(n - 2) // you know, this is NOT the best way to do it :P
|
|
589
591
|
}
|
|
590
592
|
|
|
591
|
-
console.log(Array.from({ length: 10 }, (_, i) => fibonacci(i + 1)))
|
|
593
|
+
console.log(version, Array.from({ length: 10 }, (_, i) => fibonacci(i + 1)))
|
|
592
594
|
```
|
|
593
595
|
|
|
594
596
|
---
|