46 lines
1.8 KiB
Plaintext
46 lines
1.8 KiB
Plaintext
---
|
|
title: Stepper
|
|
description: A component used to display step-by-step instructions directly within the markdown render.
|
|
date: 14-12-2024
|
|
---
|
|
|
|
In this guide, we utilize a custom `Stepper` component, specifically designed for DocuBook, which enables users to display step-by-step instructions directly within the markdown render.
|
|
|
|
## Preview
|
|
|
|
<Stepper>
|
|
<StepperItem title="Step 1: Clone the DocuBook Repository">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
|
|
felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
|
|
dolor in lorem.
|
|
</StepperItem>
|
|
<StepperItem title="Step 2: Access the Project Directory">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
|
|
eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
|
|
</StepperItem>
|
|
<StepperItem title="Step 3: Install Required Dependencies">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
|
|
ipsum nec nulla ultricies porttitor et non justo.
|
|
</StepperItem>
|
|
</Stepper>
|
|
|
|
## Output Markdown
|
|
|
|
```markdown
|
|
<Stepper>
|
|
<StepperItem title="Step 1: Clone the DocuBook Repository">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
|
|
felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
|
|
dolor in lorem.
|
|
</StepperItem>
|
|
<StepperItem title="Step 2: Access the Project Directory">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
|
|
eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
|
|
</StepperItem>
|
|
<StepperItem title="Step 3: Install Required Dependencies">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
|
|
ipsum nec nulla ultricies porttitor et non justo.
|
|
</StepperItem>
|
|
</Stepper>
|
|
```
|