0.1.4 • Published 10 months ago

slidev-theme-ventus v0.1.4

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

slidev-theme-ventus

NPM version

A Tornado 🌪 theme for Slidev.

Live demo: here

Install

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

Footer

You can configure the presenter name and language used to format the date by configuring thoses props at the frontmatter

---
// at the frontmatter
  presenterName: "name-of-the-presenter" 
  dateFormat: "en-US" (note : link to the list of dateFormat)
---

Intro : intro

Usage:

  • Add cover in the layout field.
---
layout: cover
---
DarkLight
coverDarkcoverLight

Presenter : presenter

Usage:

  • Add intro in the layout field.
  • Add introImage for the speaker image.
---
layout: intro
presenterImage: './my-presenter-image.png'
---
DarkLight
introDarkintroLight

Section : section

Usage:

  • Add section in the layout field.
  • Add number to give a number to the section.
---
layout: section
number: 1
---
DarkLight
SectionDarkSectionLight

Code : code

Usage:

  • Add code in the layout
  • Can't be used with a title
---
layout: code
---
DarkLight
codeDarkcodeLight
codeDoubleDarkcodeDoubleLight

Default : default

Usage:

  • Layout by defaults
DarkLight
textWindowDarktextWindowLight

End : end

Usage:

  • Add end in the layout
  • You can end your presentation with this slide
---
layout: end
---
DarkLight
textWindowDarktextWindowLight

Feedback : feedback

Goal :

  • Use to make a "pause" in your presentation and get feedback from the attendees

Usage:

  • Add feedback in the layout
---
layout: feedback
---
DarkLight
textWindowDarktextWindowLight

Iframe-left or Iframe-right : iframe-left

Goal :

  • Use to visualize iframe while showing something else (text, image, code, etc..)

Usage:

  • Add iframe-left or iframe-right in the layout
---
layout: iframe-left
---
DarkLight
textWindowDarktextWindowLight

Image-left or Image-right : image-left

Goal :

  • Use to visualize image while showing something else (text, image, code, etc..)

Usage:

  • Add image-left or image-right in the layout
---
layout: image-right
---
DarkLight
imageRightDarkimageRightLight

Punch : punch

Goal :

  • Use to make the audience wake-up.
  • Use when you want to show something that stand out from the rest of the presentation

Usage:

  • Add punch in the layout
---
layout: punch
---
DarkLight
imageRightDarkimageRightLight

Quote : quote

Goal :

  • Use when you quote someone.

Usage:

  • Add quote in the layout
---
layout: quote
---
DarkLight
imageQuoteDarkimageQuoteLight

ROTI : roti

Goal :

Usage:

  • Add roti in the layout
---
layout: roti
---
DarkLight
imagerotiDarkimagerotiLight

Components

This theme provides the following components:

Text <Text> ... </Text>

Goal :

<Text> Component will allow you to automatically format some text.

Usage :

To use it you just need to add it to your slides like this:

<Text>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</Text>

Variant <Variant> ... </Variant>

Goal :

<Variant> give you the ability to style the color of a text

Usage :

To use it you just need to add it to your slides like this:

<Variant type='info'>
  Some text
</Variant>

The props type give access to the theme of the application.

  • type is one of info | accent | warning

Card <Card> ... </Card>

Goal :

<Card> give you the ability to encapsulate Components/text/images with a backgroud and a title relative to the theme of the slides

Usage :

To use it you just need to add it to your slides like this:

<Card type='info' title='My Title'>
  Some text, components, images
</Card>

The props type give access to the theme of the application.

  • type is one of | info | accent | warning
  • title is a string

Note <Note> ... </Note>

Goal :

<Note> give you the ability to encapsulate Components/text/images with a backgroud and a title relative to the theme of the slides

Usage :

To use it you just need to add it to your slides like this:

<Note>
  Some nicely formated notes
</Note>

The props type give access to the theme of the application.

  • type is one of | info | accent | warning
  • title is a string