Presentation slides for developers
<BarBottom />
componentReceives 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.
---
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>
Presentation slides for developers
<BarBottom />
componentReceives 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.
---
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/imagesYou 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.
---
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>
imageOrder: 1
image 600x600
imageOrder: 2
image 1080x1920
position: center
'position' variants: left (default), center, right
Slidev is a slides maker and presenter designed for developers, consist of the following features
Read more about Why Slidev?
Hover on the bottom-left corner to see the navigation’s controls panel
space / tab / right | next animation or slide |
left | previous animation or slide |
up | previous slide |
down | next slide |
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)
}