-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add steps component and its docs.
- Loading branch information
Showing
6 changed files
with
292 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { CodeDemo } from '../../../components/demo/code'; | ||
|
|
||
| # Steps | ||
|
|
||
| ## Position | ||
|
|
||
| Use `top` `bottom` `left` `right` classes to control the position of steps. | ||
|
|
||
| <CodeDemo> | ||
| <div class="steps success top"> | ||
| <div class="step active">Register</div> | ||
| <div class="step active">Choose plan</div> | ||
| <div class="step">Purchase</div> | ||
| <div class="step">Receive Product</div> | ||
| </div> | ||
| </CodeDemo> | ||
|
|
||
| <CodeDemo> | ||
| <div class="steps success bottom"> | ||
| <div class="step">Register</div> | ||
| <div class="step active-point">Choose plan</div> | ||
| <div class="step active">Purchase</div> | ||
| <div class="step">Receive Product</div> | ||
| </div> | ||
| </CodeDemo> | ||
|
|
||
| <CodeDemo> | ||
| <div class="steps success left"> | ||
| <div class="step">Register</div> | ||
| <div class="step">Choose plan</div> | ||
| <div class="step active-point">Purchase</div> | ||
| <div class="step active">Receive Product</div> | ||
| </div> | ||
| </CodeDemo> | ||
|
|
||
| <CodeDemo> | ||
| <div class="steps success right"> | ||
| <div class="step">Register</div> | ||
| <div class="step active-point">Choose plan</div> | ||
| <div class="step active">Purchase</div> | ||
| <div class="step">Receive Product</div> | ||
| </div> | ||
| </CodeDemo> | ||
|
|
||
| ## Active waypoints | ||
|
|
||
| Use `active` `active-point` classes to control the activation of steps. | ||
|
|
||
| - `active`: will activate bar and dot of steps. | ||
| - `active-point`: will only activate dot part of the step. | ||
|
|
||
| <CodeDemo> | ||
| <div class="steps danger bottom"> | ||
| <div class="step">Register</div> | ||
| <div class="step active-point">Choose plan</div> | ||
| <div class="step active">Purchase</div> | ||
| <div class="step">Receive Product</div> | ||
| </div> | ||
| </CodeDemo> | ||
|
|
||
| ## Shape | ||
|
|
||
| Use `cornered` `square` classes to control the shape of step's waypoint. | ||
| Defaults to circle. | ||
|
|
||
| <CodeDemo> | ||
| <div class="flex gap-4"> | ||
| <div class="steps success right"> | ||
| <div class="step square active">Register</div> | ||
| <div class="step square active">Choose plan</div> | ||
| <div class="step square">Purchase</div> | ||
| <div class="step square">Receive Product</div> | ||
| </div> | ||
| <div class="steps danger left"> | ||
| <div class="step cornered active">Register</div> | ||
| <div class="step cornered active">Choose plan</div> | ||
| <div class="step cornered">Purchase</div> | ||
| <div class="step cornered">Receive Product</div> | ||
| </div> | ||
| </div> | ||
| </CodeDemo> | ||
|
|
||
| ## Custom content | ||
|
|
||
| And you can customize the content of step's waypoint. | ||
| Just add the `data-content` attribute on it. | ||
|
|
||
| <CodeDemo> | ||
| <div class="steps success left"> | ||
| <div class="step active" data-content="✓"> | ||
| Checked | ||
| </div> | ||
| <div class="step active" data-content=""> | ||
| Empty | ||
| </div> | ||
| <div class="step" data-content="★"> | ||
| Star | ||
| </div> | ||
| <div class="step" data-content="●"> | ||
| circle | ||
| </div> | ||
| <div class="step" data-content="💪"> | ||
| emoji | ||
| </div> | ||
| </div> | ||
| </CodeDemo> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| .steps { | ||
| @apply grid place-content-stretch place-items-stretch; | ||
| counter-reset: step; | ||
| } | ||
|
|
||
| .steps:where(.top, .bottom) { | ||
| @apply grid-flow-col auto-cols-fr w-full gap-5; | ||
| } | ||
|
|
||
| .steps:where(.left, .right) { | ||
| @apply grid-flow-row auto-rows-fr w-fit gap-3; | ||
| } | ||
|
|
||
| .steps .step { | ||
| @apply relative flex items-center gap-2 whitespace-nowrap; | ||
| @apply font-medium; | ||
| color: rgba(var(--sira-color-1000), var(--tw-text-opacity)); | ||
| } | ||
| .steps.top .step { | ||
| @apply flex-col-reverse; | ||
| } | ||
| .steps.bottom .step { | ||
| @apply flex-col; | ||
| } | ||
| .steps.left .step { | ||
| @apply flex-row-reverse justify-end; | ||
| } | ||
| .steps.right .step { | ||
| @apply flex-row justify-end; | ||
| } | ||
|
|
||
| /* after element for dot */ | ||
| .steps .step:after { | ||
| content: counter(step); | ||
| counter-increment: step; | ||
| z-index: 1; | ||
| @apply flex justify-center items-center h-8 w-8 rounded-full; | ||
| } | ||
| .steps .step[data-content]:after { | ||
| content: attr(data-content); | ||
| } | ||
| /* dot shape */ | ||
| .steps .step.cornered:after { | ||
| @apply rounded-xl; | ||
| } | ||
| .steps .step.square:after { | ||
| @apply rounded-lg; | ||
| } | ||
|
|
||
| /* before element for bar */ | ||
| .steps .step:first-child:before { | ||
| content: none; | ||
| } | ||
| .steps .step:before { | ||
| content: ''; | ||
| @apply transform block absolute; | ||
| } | ||
|
|
||
| .steps:where(.top, .bottom) .step:before { | ||
| @apply h-2 w-full -translate-y-1/2 scale-x-110; | ||
| } | ||
| .steps.top .step:before { | ||
| left: -55%; | ||
| top: 25%; | ||
| } | ||
| .steps.bottom .step:before { | ||
| left: -55%; | ||
| top: 75%; | ||
| } | ||
|
|
||
| .steps:where(.left, .right) .step:before { | ||
| @apply w-2 h-full scale-y-110; | ||
| top: -75%; | ||
| } | ||
| .steps.left .step:before { | ||
| left: 0.75rem; | ||
| } | ||
| .steps.right .step:before { | ||
| right: 0.75rem; | ||
| } | ||
|
|
||
| /* color style */ | ||
| .steps .step + .step:before, | ||
| .steps .step:after { | ||
| background-color: rgb(var(--sira-color-100)); | ||
| color: rgb(var(--sira-color-800)); | ||
| } | ||
| .steps .step + .step.active:before, | ||
| .steps .step.active:after, | ||
| /* only active dot (not bar) */ | ||
| .steps .step.active-point:after { | ||
| background-color: rgb(var(--sira-color-300)); | ||
| } |
cf53d9fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
sira – ./
sira-git-main-riccox.vercel.app
sira.vercel.app
sira.riccox.com
sira-riccox.vercel.app