48 lines
1.7 KiB
Plaintext
48 lines
1.7 KiB
Plaintext
---
|
|
title: Stepper
|
|
description: This section previews the stepper component.
|
|
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>
|
|
|
|
## Code
|
|
|
|
```jsx
|
|
<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>
|
|
```
|