mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-30 00:59:47 +02:00
Code Issues Releases Wiki Activity

feat: Wizard

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 15:49:56 +07:00
parent b7bd6a9d0a
commit 151fed0eaa
7 changed files with 143 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
contents/_includes/covers/wizard.njk Normal file
View File

@@ -0,0 +1,12 @@
<div class="wizard">
{% for i in range(0, 3) -%}
<div class="wizard__step">
<div class="wizard__dot">
<div class="wizard__connector"></div>
<div class="wizard__number"></div>
<div class="wizard__connector"></div>
</div>
{% lines "hor", 5 %}
</div>
{%- endfor %}
</div>

1
contents/index.njk
View File

@@ -129,6 +129,7 @@ eleventyExcludeFromCollections: true
{% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
{% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %}
{% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %}
{% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %}
</div>
</div>

84
contents/wizard.md Normal file
View File

@@ -0,0 +1,84 @@
---
layout: layouts/post.njk
title: Wizard
description: Create a wizard with CSS flexbox
keywords: css flexbox, css stepper, css wizard
---
## HTML
```html
<div class="wizard">
<!-- Step -->
<div class="wizard__step">
<div class="wizard__dot">
<!-- The left connector -->
<div class="wizard__connector"></div>
<!-- The step number -->
<div class="wizard__number">
...
</div>
<!-- The right connector -->
<div class="wizard__connector"></div>
</div>
<!-- Title of step -->
...
</div>
<!-- Repeat other steps -->
...
</div>
```
## CSS
```css
.wizard {
display: flex;
}
.wizard__step {
/* Make all steps have the same width */
flex: 1;
}
.wizard__dot {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.wizard__connector {
flex: 1;
height: 1px;
background-color: #d1d5db;
}
.wizard__step:first-child .wizard__connector:first-child,
.wizard__step:last-child .wizard__connector:last-child {
background-color: transparent;
}
.wizard__number {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
background-color: #d1d5db;
border-radius: 9999px;
height: 2rem;
width: 2rem;
/* OPTIONAL: Spacing between it and connectors */
margin-left: 0.25rem;
margin-right: 0.25rem;
}
```
{% demo %}{% include "covers/wizard.njk" %}{% enddemo %}