<BarBottom /> component
Receives a title prop that is the text displayed on the left.
This component uses slots to add items on the right. Exist an <Item /> component that receives a text prop and uses slots to add the icon/image.
Exist a large list of icon collections available that you can use. These icons are imported automatically by slidev, you don’t need to configure anything else to use them.
Slide example
---
layout: intro
---
# Content
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom><BarBottom /> with custom icons/images
You can use your own icons/images if you want.
Only need to add an <Item /> component and use slots features.
Also, you can use Windi CSS to add style to the icon, for example, adjust the width o height.
Slide example
---
layout: intro
---
# Content
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<img
src="https://d33wubrfki0l68.cloudfront.net/273aa82ec83b3e4357492a201fb68048af1c3e6a/8f657/logo.svg"
class="w-4"
/>
</Item>
</BarBottom>
sli.devSlidev Theme Purplin
Presentation slides for developers
<BarBottom /> component
Receives a title prop that is the text displayed on the left.
This component uses slots to add items on the right. Exist an <Item /> component that receives a text prop and uses slots to add the icon/image.
Exist a large list of icon collections available that you can use. These icons are imported automatically by slidev, you don’t need to configure anything else to use them.
Slide example
---
layout: intro
---
# Content
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom><BarBottom /> with custom icons/images
You can use your own icons/images if you want.
Only need to add an <Item /> component and use slots features.
Also, you can use Windi CSS to add style to the icon, for example, adjust the width o height.
Slide example
---
layout: intro
---
# Content
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<img
src="https://d33wubrfki0l68.cloudfront.net/273aa82ec83b3e4357492a201fb68048af1c3e6a/8f657/logo.svg"
class="w-4"
/>
</Item>
</BarBottom>
layout: image-x
imageOrder: 1
image 600x600
layout: image-x
imageOrder: 2
image 1080x1920
"layout: quote"
position: center
'position' variants: left (default), center, right
What is Slidev?
Slidev is a slides maker and presenter designed for developers, consist of the following features
- 📝 Text-based - focus on the content with Markdown, and then style them later
- 🎨 Themable - theme can be shared and used with npm packages
- 🧑💻 Developer Friendly - code highlighting, live coding with autocompletion
- 🤹 Interactive - embedding Vue components to enhance your expressions
- 🎥 Recording - built-in recording and camera view
- 📤 Portable - export into PDF, PNGs, or even a hostable SPA
- 🛠 Hackable - anything possible on a webpage
Read more about Why Slidev?
Navigation
Hover on the bottom-left corner to see the navigation’s controls panel
Keyboard Shortcuts
| space / tab / right | next animation or slide |
| left | previous animation or slide |
| up | previous slide |
| down | next slide |
Code
Use code snippets and get the highlighting directly!
interface User {
id: number
firstName: string
lastName: string
role: string
}
function updateUser(id: number, update: Partial<User>) {
const user = getUser(id)
const newUser = {...user, ...update}
saveUser(id, newUser)
}