mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Add progress page (#2494)
Co-authored-by: ethancrawford <ethan_jc@hotmail.com>
This commit is contained in:
Paweł Kuna
GitHub
5
.changeset/button-ghost.md
Normal file
5
.changeset/button-ghost.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Added `.btn-ghost` button variant with transparent background and hover effects.
|
||||||
5
.changeset/icon-stroke-width.md
Normal file
5
.changeset/icon-stroke-width.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.
|
||||||
5
.changeset/onboarding-page.md
Normal file
5
.changeset/onboarding-page.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/preview": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Added new onboarding page with progress indicator and navigation layout.
|
||||||
6
.changeset/progress-background.md
Normal file
6
.changeset/progress-background.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": minor
|
||||||
|
"@tabler/preview": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Added Progress Background component with text labels and value display.
|
||||||
5
.changeset/progress-sizes.md
Normal file
5
.changeset/progress-sizes.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Added large and extra-large sizes for progress component (`.progress-lg`, `.progress-xl`).
|
||||||
6
.changeset/progress-steps.md
Normal file
6
.changeset/progress-steps.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": minor
|
||||||
|
"@tabler/preview": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Added Progress Steps component for step-by-step navigation indicators.
|
||||||
5
.changeset/progress-transitions.md
Normal file
5
.changeset/progress-transitions.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Added smooth transitions for progress bar width and background color changes.
|
||||||
5
.changeset/skip-link-accessibility.md
Normal file
5
.changeset/skip-link-accessibility.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Updated skip-link to use `visually-hidden` class for better accessibility.
|
||||||
6
.changeset/trending-icons.md
Normal file
6
.changeset/trending-icons.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
"@tabler/core": patch
|
||||||
|
"@tabler/preview": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Updated trending component to use `arrow-up`/`arrow-down` icons instead of `trending-up`/`trending-down`.
|
||||||
100
.cursor/rules/changelog.mdc
Normal file
100
.cursor/rules/changelog.mdc
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
---
|
||||||
|
description: Cursor Rules for Tabler Changesets
|
||||||
|
globs:
|
||||||
|
alwaysApply: true
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
### File Structure
|
||||||
|
|
||||||
|
- Each change must be in a separate changeset file in `.changeset/` directory
|
||||||
|
- Use descriptive kebab-case filenames (e.g., `progress-sizes.md`, `button-ghost.md`)
|
||||||
|
- Follow the standard changeset format with frontmatter and description
|
||||||
|
|
||||||
|
### Change Description Format
|
||||||
|
|
||||||
|
- **One sentence per changeset** - keep descriptions concise and focused
|
||||||
|
- Use **backticks for code elements**: classes (`.btn-ghost`), properties (`stroke-width`), values (`1.5`), icons (`arrow-up`)
|
||||||
|
- Start with action verbs: "Added", "Updated", "Fixed", "Removed"
|
||||||
|
- Be specific about what was changed
|
||||||
|
|
||||||
|
### Version Bump Guidelines
|
||||||
|
|
||||||
|
- **Major**: Breaking changes, complete rewrites
|
||||||
|
- **Minor**: New features, new components, new pages, significant enhancements
|
||||||
|
- **Patch**: Bug fixes, small improvements, style updates, accessibility fixes
|
||||||
|
|
||||||
|
### Package Selection
|
||||||
|
|
||||||
|
- `"@tabler/core"`: Changes to SCSS, core functionality, CSS classes
|
||||||
|
- `"@tabler/preview"`: New pages, demo updates, preview-specific changes
|
||||||
|
- `"@tabler/docs"`: Documentation updates
|
||||||
|
- Use multiple packages when change affects multiple areas
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
#### New Feature (Minor)
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
"@tabler/core": minor
|
||||||
|
"@tabler/preview": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Added Progress Steps component for step-by-step navigation indicators.
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Bug Fix (Patch)
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
"@tabler/core": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Page (Minor)
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
"@tabler/preview": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Added new onboarding page with progress indicator and navigation layout.
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Style Enhancement (Patch)
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
"@tabler/core": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Added smooth transitions for progress bar width and background color changes.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Code Formatting Rules
|
||||||
|
|
||||||
|
- Class names: `.btn-ghost`, `.progress-lg`, `.icon-sm`
|
||||||
|
- CSS properties: `stroke-width`, `background-color`, `width`
|
||||||
|
- Values: `1.5`, `transparent`, `100%`
|
||||||
|
- Icon names: `arrow-up`, `arrow-down`, `trending-up`
|
||||||
|
- HTML attributes: `aria-label`, `role`, `data-*`
|
||||||
|
- JavaScript functions: `addEventListener()`, `querySelector()`
|
||||||
|
|
||||||
|
### Common Patterns
|
||||||
|
|
||||||
|
- **Component additions**: "Added [ComponentName] component for [purpose]"
|
||||||
|
- **Size variants**: "Added [size] size variant for [component] (`.class-size`)"
|
||||||
|
- **Style fixes**: "Fixed [issue] in [component/element]"
|
||||||
|
- **Icon updates**: "Updated [component] to use `new-icon` instead of `old-icon`"
|
||||||
|
- **Accessibility**: "Improved accessibility by [specific change]"
|
||||||
|
|
||||||
|
### Commit Message Format
|
||||||
|
|
||||||
|
Use English for commit messages following conventional commit format when possible:
|
||||||
|
|
||||||
|
- `feat: add progress steps component`
|
||||||
|
- `fix: update icon stroke width for better visibility`
|
||||||
|
- `style: add smooth transitions to progress bars`
|
||||||
@@ -675,7 +675,7 @@ $card-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|||||||
$card-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
$card-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
||||||
|
|
||||||
$card-spacer-x: 1.25rem !default;
|
$card-spacer-x: 1.25rem !default;
|
||||||
$card-spacer-y: 1rem !default;
|
$card-spacer-y: 1.25rem !default;
|
||||||
|
|
||||||
$card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
|
$card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
|
||||||
$card-cap-color: inherit !default;
|
$card-cap-color: inherit !default;
|
||||||
|
|||||||
@@ -25,7 +25,6 @@
|
|||||||
min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||||
min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||||
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
width: var(--#{$prefix}btn-icon-size);
|
width: var(--#{$prefix}btn-icon-size);
|
||||||
height: var(--#{$prefix}btn-icon-size);
|
height: var(--#{$prefix}btn-icon-size);
|
||||||
@@ -115,6 +114,15 @@
|
|||||||
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
|
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
--#{$prefix}btn-bg: transparent;
|
||||||
|
--#{$prefix}btn-border-color: transparent;
|
||||||
|
--#{$prefix}btn-box-shadow: none;
|
||||||
|
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
|
||||||
|
--#{$prefix}btn-hover-border-color: transparent;
|
||||||
|
--#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
|
||||||
|
}
|
||||||
|
|
||||||
.btn-ghost-#{$color},
|
.btn-ghost-#{$color},
|
||||||
.btn-ghost.btn-#{$color} {
|
.btn-ghost.btn-#{$color} {
|
||||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
//
|
//
|
||||||
.icon-sm {
|
.icon-sm {
|
||||||
--#{$prefix}icon-size: 1rem;
|
--#{$prefix}icon-size: 1rem;
|
||||||
stroke-width: 1;
|
stroke-width: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-md {
|
.icon-md {
|
||||||
|
|||||||
@@ -42,11 +42,20 @@ Progress
|
|||||||
height: .25rem;
|
height: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.progress-lg {
|
||||||
|
height: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-xl {
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
Progress bar
|
Progress bar
|
||||||
*/
|
*/
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@include transition(width $transition-time, background $transition-time);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-indeterminate {
|
.progress-bar-indeterminate {
|
||||||
@@ -105,3 +114,31 @@ Progressbg
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Progress steps
|
||||||
|
*/
|
||||||
|
.progress-steps {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
gap: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-steps-item {
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-height: .25rem;
|
||||||
|
margin-top: 0;
|
||||||
|
color: inherit;
|
||||||
|
text-align: center;
|
||||||
|
cursor: default;
|
||||||
|
background-color: var(--tblr-border-color);
|
||||||
|
border-radius: var(--#{$prefix}border-radius-pill);
|
||||||
|
|
||||||
|
@at-root a#{&} {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -3,11 +3,12 @@ Select group
|
|||||||
*/
|
*/
|
||||||
.form-selectgroup {
|
.form-selectgroup {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
margin: 0 -.5rem -.5rem 0;
|
margin: 0;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
.form-selectgroup-item {
|
.form-selectgroup-item {
|
||||||
margin: 0 .5rem .5rem 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -170,40 +170,10 @@ By using a progress bar component as a background element, designers can create
|
|||||||
Thanks to this you can create a nice looking statistics section:
|
Thanks to this you can create a nice looking statistics section:
|
||||||
|
|
||||||
{% capture html -%}
|
{% capture html -%}
|
||||||
<div class="progressbg">
|
{% include "ui/progressbg.html" value="65" text="Poland" show-value=true %}
|
||||||
<div class="progress progressbg-progress">
|
{% include "ui/progressbg.html" value="35" text="Germany" show-value=true %}
|
||||||
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
|
{% include "ui/progressbg.html" value="28" text="United Stated" show-value=true %}
|
||||||
</div>
|
{% include "ui/progressbg.html" value="20" text="United Kingdom" show-value=true %}
|
||||||
<div class="progressbg-text">Poland</div>
|
{% include "ui/progressbg.html" value="15" text="France" show-value=true %}
|
||||||
<div class="progressbg-value">65%</div>
|
|
||||||
</div>
|
|
||||||
<div class="progressbg">
|
|
||||||
<div class="progress progressbg-progress">
|
|
||||||
<div class="progress-bar bg-primary-lt" style="width: 35%"></div>
|
|
||||||
</div>
|
|
||||||
<div class="progressbg-text">Germany</div>
|
|
||||||
<div class="progressbg-value">35%</div>
|
|
||||||
</div>
|
|
||||||
<div class="progressbg">
|
|
||||||
<div class="progress progressbg-progress">
|
|
||||||
<div class="progress-bar bg-primary-lt" style="width: 28%"></div>
|
|
||||||
</div>
|
|
||||||
<div class="progressbg-text">United Stated</div>
|
|
||||||
<div class="progressbg-value">28%</div>
|
|
||||||
</div>
|
|
||||||
<div class="progressbg">
|
|
||||||
<div class="progress progressbg-progress">
|
|
||||||
<div class="progress-bar bg-primary-lt" style="width: 20%"></div>
|
|
||||||
</div>
|
|
||||||
<div class="progressbg-text">United Kingdom</div>
|
|
||||||
<div class="progressbg-value">20%</div>
|
|
||||||
</div>
|
|
||||||
<div class="progressbg">
|
|
||||||
<div class="progress progressbg-progress">
|
|
||||||
<div class="progress-bar bg-primary-lt" style="width: 15%"></div>
|
|
||||||
</div>
|
|
||||||
<div class="progressbg-text">France</div>
|
|
||||||
<div class="progressbg-value">15%</div>
|
|
||||||
</div>
|
|
||||||
{%- endcapture %}
|
{%- endcapture %}
|
||||||
{% include "docs/example.html" html=html vertical card %}
|
{% include "docs/example.html" html=html vertical card %}
|
||||||
149
preview/pages/onboarding.html
Normal file
149
preview/pages/onboarding.html
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
---
|
||||||
|
layout: base
|
||||||
|
title: Onboarding
|
||||||
|
permalink: onboarding.html
|
||||||
|
---
|
||||||
|
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row w-100 align-items-center">
|
||||||
|
<div class="col me-auto">
|
||||||
|
{% include "layout/navbar-logo.html" class="logo-gray" %}
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
{% include "ui/progress-steps.html" count=5 current=2 %}
|
||||||
|
</div>
|
||||||
|
<div class="col text-end">
|
||||||
|
<a href="{{ page.url | relative }}" class="btn btn-ghost">Skip<span class="d-none d-md-inline"> to dashboard</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="py-5">
|
||||||
|
<div class="container container-tight">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1 class="page-title">
|
||||||
|
Let's set up your account
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="card mt-5">
|
||||||
|
<div class="card-body space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="form-label">Full name</label>
|
||||||
|
<input type="text" class="form-control" placeholder="Enter your full name">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-label">Company name</label>
|
||||||
|
<input type="text" class="form-control" placeholder="Enter your company name">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-label">Role</label>
|
||||||
|
<select class="form-select">
|
||||||
|
<option value="">Select your role</option>
|
||||||
|
<option value="developer">Developer</option>
|
||||||
|
<option value="designer">Designer</option>
|
||||||
|
<option value="manager">Manager</option>
|
||||||
|
<option value="founder">Founder</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-label">Team size</label>
|
||||||
|
<div class="form-selectgroup">
|
||||||
|
<label class="form-selectgroup-item">
|
||||||
|
<input type="radio" name="team-size" value="1" class="form-selectgroup-input" checked>
|
||||||
|
<span class="form-selectgroup-label">Just me</span>
|
||||||
|
</label>
|
||||||
|
<label class="form-selectgroup-item">
|
||||||
|
<input type="radio" name="team-size" value="2-10" class="form-selectgroup-input">
|
||||||
|
<span class="form-selectgroup-label">2-10 people</span>
|
||||||
|
</label>
|
||||||
|
<label class="form-selectgroup-item">
|
||||||
|
<input type="radio" name="team-size" value="11-50" class="form-selectgroup-input">
|
||||||
|
<span class="form-selectgroup-label">11-50 people</span>
|
||||||
|
</label>
|
||||||
|
<label class="form-selectgroup-item">
|
||||||
|
<input type="radio" name="team-size" value="50+" class="form-selectgroup-input">
|
||||||
|
<span class="form-selectgroup-label">50+ people</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-label">What are you planning to use this for?</label>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="radio" value="personal" id="use-personal" checked>
|
||||||
|
<label class="form-check-label" for="use-personal">
|
||||||
|
Personal projects
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="radio" value="business" id="use-business">
|
||||||
|
<label class="form-check-label" for="use-business">
|
||||||
|
Business applications
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="radio" value="client" id="use-client">
|
||||||
|
<label class="form-check-label" for="use-client">
|
||||||
|
Client work
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="radio" value="learning" id="use-learning">
|
||||||
|
<label class="form-check-label" for="use-learning">
|
||||||
|
Learning and experimentation
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-label">How did you hear about us?</label>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" name="referral" value="search" id="ref-search">
|
||||||
|
<label class="form-check-label" for="ref-search">
|
||||||
|
Search engine
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" name="referral" value="social" id="ref-social">
|
||||||
|
<label class="form-check-label" for="ref-social">
|
||||||
|
Social media
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" name="referral" value="friend" id="ref-friend">
|
||||||
|
<label class="form-check-label" for="ref-friend">
|
||||||
|
Friend or colleague
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" name="referral" value="blog" id="ref-blog">
|
||||||
|
<label class="form-check-label" for="ref-blog">
|
||||||
|
Blog or article
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" name="referral" value="other" id="ref-other">
|
||||||
|
<label class="form-check-label" for="ref-other">
|
||||||
|
Other
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input" type="checkbox" id="notifications" checked>
|
||||||
|
<label class="form-check-label" for="notifications">
|
||||||
|
Send me product updates and tips via email
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-list justify-content-between mt-4">
|
||||||
|
{% include "ui/button.html" text="Back" color="link link-secondary" %}
|
||||||
|
{% include "ui/button.html" text="Continue" color="primary" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
270
preview/pages/progress.html
Normal file
270
preview/pages/progress.html
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
---
|
||||||
|
layout: default
|
||||||
|
title: Progress
|
||||||
|
page-header: Progress
|
||||||
|
page-menu: base.progress
|
||||||
|
permalink: progress.html
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Default</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress.html" value="0" %}
|
||||||
|
{% include "ui/progress.html" value="20" %}
|
||||||
|
{% include "ui/progress.html" value="40" %}
|
||||||
|
{% include "ui/progress.html" value="100" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">With value</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress.html" value="10" show-value size="lg" %}
|
||||||
|
{% include "ui/progress.html" value="20" show-value size="lg" %}
|
||||||
|
{% include "ui/progress.html" value="90" show-value size="lg" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Colors</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress.html" color="blue" value="20" %}
|
||||||
|
{% include "ui/progress.html" color="green" value="40" %}
|
||||||
|
{% include "ui/progress.html" color="yellow" value="60" %}
|
||||||
|
{% include "ui/progress.html" color="red" value="80" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Sizes</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress.html" value="20" size="sm" %}
|
||||||
|
{% include "ui/progress.html" value="40" %}
|
||||||
|
{% include "ui/progress.html" value="60" size="lg" %}
|
||||||
|
{% include "ui/progress.html" value="80" size="xl" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Indeterminate</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress.html" indeterminate=true %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Multiple values</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress.html" values="20,30,10" %}
|
||||||
|
{% include "ui/progress.html" values="10,20,30,40" class="progress-separated" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Striped</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress.html" color="blue" value="20" striped %}
|
||||||
|
{% include "ui/progress.html" color="green" value="40" striped %}
|
||||||
|
{% include "ui/progress.html" color="yellow" value="60" striped %}
|
||||||
|
{% include "ui/progress.html" color="red" value="80" striped %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Animated</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress.html" value="20" striped animated %}
|
||||||
|
{% include "ui/progress.html" value="40" color="green" striped animated %}
|
||||||
|
{% include "ui/progress.html" value="60" color="yellow" striped animated %}
|
||||||
|
{% include "ui/progress.html" value="80" color="red" striped animated %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">
|
||||||
|
Animated with JavaScript
|
||||||
|
</h3>
|
||||||
|
<div class="row align-items-center g-0">
|
||||||
|
<div class="col">
|
||||||
|
{% include "ui/progress.html" value="0" id="progress-animated" %}
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-end" id="progress-animated-value">
|
||||||
|
0%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-list mt-3">
|
||||||
|
<button class="btn btn-sm" id="progress-animated-0">0%</button>
|
||||||
|
<button class="btn btn-sm" id="progress-animated-10">10%</button>
|
||||||
|
<button class="btn btn-sm" id="progress-animated-50">50%</button>
|
||||||
|
<button class="btn btn-sm" id="progress-animated-100">100%</button>
|
||||||
|
<button class="btn btn-sm ms-3" id="progress-animated-minus-10">-10%</button>
|
||||||
|
<button class="btn btn-sm" id="progress-animated-add-10">+10%</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">
|
||||||
|
Steps Progress
|
||||||
|
</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress-steps.html" count=3 %}
|
||||||
|
{% include "ui/progress-steps.html" count=5 active=4 %}
|
||||||
|
{% include "ui/progress-steps.html" count=10 color="red" %}
|
||||||
|
{% include "ui/progress-steps.html" count=8 color="green" active=8 %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">
|
||||||
|
Progress Background
|
||||||
|
</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progressbg.html" value="85" text="Poland" show-value=true %}
|
||||||
|
{% include "ui/progressbg.html" value="65" text="Germany" show-value=true %}
|
||||||
|
{% include "ui/progressbg.html" value="45" text="United States" show-value=true %}
|
||||||
|
{% include "ui/progressbg.html" value="25" text="France" show-value=true %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">
|
||||||
|
Progress Background Colors
|
||||||
|
</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progressbg.html" value="75" text="Success" color="success-lt" show-value=true %}
|
||||||
|
{% include "ui/progressbg.html" value="60" text="Warning" color="warning-lt" show-value=true %}
|
||||||
|
{% include "ui/progressbg.html" value="40" text="Danger" color="danger-lt" show-value=true %}
|
||||||
|
{% include "ui/progressbg.html" value="90" text="Info" color="info-lt" show-value=true %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">
|
||||||
|
Progress Description
|
||||||
|
</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress-description.html" label="Project completion" value="85" color="green" %}
|
||||||
|
{% include "ui/progress-description.html" label="Storage usage" description="2.4GB of 5GB" value="48" color="blue" %}
|
||||||
|
{% include "ui/progress-description.html" label="Download progress" value="75" color="yellow" %}
|
||||||
|
{% include "ui/progress-description.html" label="Skills assessment" description="HTML/CSS" value="92" color="red" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">
|
||||||
|
Progress Description Sizes
|
||||||
|
</h3>
|
||||||
|
<div class="space-y">
|
||||||
|
{% include "ui/progress-description.html" label="Small progress" value="60" size="sm" color="blue" %}
|
||||||
|
{% include "ui/progress-description.html" label="Default progress" value="70" color="green" %}
|
||||||
|
{% include "ui/progress-description.html" label="Large progress" value="80" size="lg" color="orange" %}
|
||||||
|
{% include "ui/progress-description.html" label="Extra large" value="90" size="xl" color="purple" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% capture_script -%}
|
||||||
|
<!-- BEGIN SCRIPT OF ANIMATION -->
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
This script is for animation of the last progress bar
|
||||||
|
It increases the progress bar value by a random amount every 2 seconds until it reaches 100%
|
||||||
|
When it reaches 100%, it changes the color to green and stops the animation
|
||||||
|
|
||||||
|
This is just a demo script to show how to animate the progress bar. You can modify it as needed.
|
||||||
|
*/
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
var width = 0;
|
||||||
|
var setWidth = function(w) {
|
||||||
|
width = Math.min(Math.max(w, 0), 100);
|
||||||
|
|
||||||
|
progress.querySelector('.progress-bar').style.width = width + '%';
|
||||||
|
progress.querySelector('.progress-bar').setAttribute('aria-valuenow', width);
|
||||||
|
document.getElementById('progress-animated-value').innerText = width + '%';
|
||||||
|
|
||||||
|
if (width >= 100) {
|
||||||
|
progress.querySelector('.progress-bar').classList.add('bg-green');
|
||||||
|
} else {
|
||||||
|
progress.querySelector('.progress-bar').classList.remove('bg-green');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var progress = document.getElementById('progress-animated');
|
||||||
|
|
||||||
|
var increment = 0;
|
||||||
|
var interval = setInterval(function () {
|
||||||
|
increment = Math.ceil(Math.random() * 10);
|
||||||
|
setWidth(width + increment);
|
||||||
|
|
||||||
|
if (width >= 100) {
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
document.getElementById('progress-animated-0').addEventListener('click', function() {
|
||||||
|
setWidth(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('progress-animated-add-10').addEventListener('click', function() {
|
||||||
|
setWidth(width + 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById('progress-animated-minus-10').addEventListener('click', function() {
|
||||||
|
setWidth(width - 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById('progress-animated-100').addEventListener('click', function() {
|
||||||
|
setWidth(100);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- END SCRIPT OF ANIMATION -->
|
||||||
|
{%- endcapture_script -%}
|
||||||
@@ -159,6 +159,11 @@
|
|||||||
"url": "placeholder.html",
|
"url": "placeholder.html",
|
||||||
"title": "Placeholder"
|
"title": "Placeholder"
|
||||||
},
|
},
|
||||||
|
"progress": {
|
||||||
|
"url": "progress.html",
|
||||||
|
"title": "Progress",
|
||||||
|
"badge": "New"
|
||||||
|
},
|
||||||
"segmented-control": {
|
"segmented-control": {
|
||||||
"title": "Segmented control",
|
"title": "Segmented control",
|
||||||
"url": "segmented-control.html",
|
"url": "segmented-control.html",
|
||||||
|
|||||||
@@ -13,10 +13,7 @@
|
|||||||
{% for url in urls %}
|
{% for url in urls %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<div class="progressbg">
|
{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
|
||||||
{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %}
|
|
||||||
<div class="progressbg-text">{{ url.uri }}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
|
<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<div class="row flex-fill align-items-md-center">
|
<div class="row flex-fill align-items-md-center">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="d-flex align-items-center gap-4">
|
<div class="d-flex align-items-center gap-4">
|
||||||
<a href="/" class="navbar-brand navbar-brand-autodark gap-4">
|
<a href="{{ page.url | relative }}" class="navbar-brand navbar-brand-autodark gap-4">
|
||||||
{% include "docs/logo.html" %}
|
{% include "docs/logo.html" %}
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
<a href="#content" class="visually-hidden-focusable skip-link">Skip to main content</a>
|
<a href="#content" class="visually-hidden skip-link">Skip to main content</a>
|
||||||
|
|
||||||
|
|||||||
@@ -106,6 +106,14 @@
|
|||||||
|
|
||||||
{% capture_script %}
|
{% capture_script %}
|
||||||
<script>
|
<script>
|
||||||
|
/*
|
||||||
|
This script handles the theme settings offcanvas functionality
|
||||||
|
It saves the selected settings to localStorage and applies them to the document
|
||||||
|
It also updates the URL with the selected settings as query parameters
|
||||||
|
It also has a reset button to clear all settings and revert to default
|
||||||
|
|
||||||
|
This is just a demo script to show how to implement theme settings. You can modify it as needed.
|
||||||
|
*/
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
var themeConfig = {
|
var themeConfig = {
|
||||||
theme: "light",
|
theme: "light",
|
||||||
|
|||||||
21
shared/includes/ui/progress-steps.html
Normal file
21
shared/includes/ui/progress-steps.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{% assign count = include.count | default: 3 %}
|
||||||
|
{% assign labels = '' | split: ',' %}
|
||||||
|
{% if include.labels %}
|
||||||
|
{% assign labels = include.labels | split: ',' %}
|
||||||
|
{% assign count = labels | size %}
|
||||||
|
{% endif %}
|
||||||
|
{% assign active = include.active | default: 1 %}
|
||||||
|
{% assign color = include.color | default: 'primary' %}
|
||||||
|
|
||||||
|
<ol class="progress-steps{% if include.class %} {{ include.class }}{% endif %}" {% if include.id %}
|
||||||
|
id="{{ include.id }}" {% endif %}{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}" {% endif %}>
|
||||||
|
{% for i in (1..count) %}
|
||||||
|
{% assign default = 'Step ' | append: i %}
|
||||||
|
{% assign label = labels[forloop.index0] | default: default %}
|
||||||
|
<li class="progress-steps-item{% if i <= active %} bg-{{ color }}{% endif %}" {% if i==active %} aria-current="step"{% endif %}>
|
||||||
|
<span class="visually-hidden">
|
||||||
|
{{ label }}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ol>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{% assign percentage = include.value | replace: '%', '' | default: 38 %}
|
{% assign percentage = include.value | replace: '%', '' | default: 38 %}
|
||||||
{% assign colors = include.colors | default: include.color | default: 'blue,red,green,yellow,dark' | split: ',' %}
|
{% assign colors = include.colors | default: include.color | default: 'blue,red,green,yellow,dark' | split: ',' %}
|
||||||
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.width %} style="width: {{ include.width }}"{% endif %}>
|
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.width %} style="width: {{ include.width }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %}>
|
||||||
{% if include.indeterminate %}
|
{% if include.indeterminate %}
|
||||||
<div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
|
<div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
|
||||||
{% elsif include.values %}
|
{% elsif include.values %}
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
<div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
|
<div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ percentage }}% Complete">
|
<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}{% if include.striped %} progress-bar-striped{% if include.animated %} progress-bar-animated{% endif %}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ percentage }}% Complete">
|
||||||
{% if include.show-value %}
|
{% if include.show-value %}
|
||||||
{{ percentage }}%
|
{{ percentage }}%
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|||||||
7
shared/includes/ui/progressbg.html
Normal file
7
shared/includes/ui/progressbg.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{% assign percentage = include.value | replace: '%', '' | default: 0 %}
|
||||||
|
{% assign color = include.color | default: 'primary-lt' %}
|
||||||
|
<div class="progressbg{% if include.class %} {{ include.class }}{% endif %}">
|
||||||
|
{% include "ui/progress.html" value=percentage class="progressbg-progress" color=color %}
|
||||||
|
{% if include.text %}<div class="progressbg-text">{{ include.text }}</div>{% endif %}
|
||||||
|
{% if include.show-value %}<div class="progressbg-value">{{ percentage }}%</div>{% endif %}
|
||||||
|
</div>
|
||||||
@@ -1,15 +1,15 @@
|
|||||||
{% assign value = include.value | default: 25 %}
|
{% assign value = include.value | default: 25 %}
|
||||||
{% if value > 0 %}
|
{% if value > 0 %}
|
||||||
{% assign trending-color = 'green' %}
|
{% assign trending-color = 'green' %}
|
||||||
{% assign trending-icon = 'trending-up' %}
|
{% assign trending-icon = 'arrow-up' %}
|
||||||
{% elsif value == 0 %}
|
{% elsif value == 0 %}
|
||||||
{% assign trending-color = 'yellow' %}
|
{% assign trending-color = 'muted' %}
|
||||||
{% assign trending-icon = 'minus' %}
|
{% assign trending-icon = 'minus' %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% assign trending-color = 'red' %}
|
{% assign trending-color = 'red' %}
|
||||||
{% assign trending-icon = 'trending-down' %}
|
{% assign trending-icon = 'arrow-down' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<span class="text-{{ trending-color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
|
<span class="text-{{ trending-color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
|
||||||
{{ value }}% {% include "ui/icon.html" icon=trending-icon class="ms-1" %}
|
{{ value }}% {% include "ui/icon.html" icon=trending-icon class="ms-0" size="sm" %}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user