Progress component for Slidev Slidev
.
Shows a progress bar that represents the completed percentage of the presentation.
npm i slidev-component-progress
Define this package into your slidev addons.
In your slides metadata (using frontmatter):
---
addons:
- slidev-component-progress
---
Or in your package.json
:
{
"slidev": {
"addons": [
"slidev-component-progress"
]
}
}
Create a ./global-top.vue
file in your Slidev
project and use the component:
<template>
<Progress level="2"/>
</template>
Component that displays the slides progress:
<Progress level="2"/>
Parameters:
activeColor
(type: string
, default: '#ffffff'
(light) or '#000000'
(dark)): The color of the active itembarColor
(type: string
): The color of the progress bar, by default, it will use the --slidev-theme-primary
CSS variableheight
(type: string
): Height of the progress bar, by default it is the minimum possible height depending of the level
level
(type: number | string
, default: 1
): Title level to show in the progress bar with informations from the Table Of Contentopacity
(type: number | string
, default: 0.5
): Opacity of the progress bar when not hoveredposition
(type: 'top' | bottom'
, default: 'top'
): Position of the progress bar in the slidestrokeColor
(type: string
, default: '#000000'
(light) or '#ffffff'
(dark)): The stroke color for the itemsthickness
(type: string
, default: 2px
)transitionDuration
(type: string
, default: 200ms
): CSS transition durations