mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Merge branch 'dev' of https://github.com/tabler/tabler into dev-onboarding
This commit is contained in:
codecalm
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-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-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-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}btn-icon-size);
|
||||
height: var(--#{$prefix}btn-icon-size);
|
||||
@@ -115,6 +114,15 @@
|
||||
--#{$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.btn-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
//
|
||||
.icon-sm {
|
||||
--#{$prefix}icon-size: 1rem;
|
||||
stroke-width: 1;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
|
||||
@@ -42,11 +42,20 @@ Progress
|
||||
height: .25rem;
|
||||
}
|
||||
|
||||
.progress-lg {
|
||||
height: .75rem;
|
||||
}
|
||||
|
||||
.progress-xl {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
Progress bar
|
||||
*/
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
@include transition(width $transition-time, background $transition-time);
|
||||
}
|
||||
|
||||
.progress-bar-indeterminate {
|
||||
@@ -105,3 +114,31 @@ Progressbg
|
||||
margin-left: auto;
|
||||
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 {
|
||||
display: inline-flex;
|
||||
margin: 0 -.5rem -.5rem 0;
|
||||
margin: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
.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:
|
||||
|
||||
{% capture html -%}
|
||||
<div class="progressbg">
|
||||
<div class="progress progressbg-progress">
|
||||
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
|
||||
</div>
|
||||
<div class="progressbg-text">Poland</div>
|
||||
<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>
|
||||
{% include "ui/progressbg.html" value="65" text="Poland" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="35" text="Germany" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="28" text="United Stated" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="20" text="United Kingdom" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="15" text="France" show-value=true %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical card %}
|
||||
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",
|
||||
"title": "Placeholder"
|
||||
},
|
||||
"progress": {
|
||||
"url": "progress.html",
|
||||
"title": "Progress",
|
||||
"badge": "New"
|
||||
},
|
||||
"segmented-control": {
|
||||
"title": "Segmented control",
|
||||
"url": "segmented-control.html",
|
||||
|
||||
@@ -13,10 +13,7 @@
|
||||
{% for url in urls %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="progressbg">
|
||||
{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %}
|
||||
<div class="progressbg-text">{{ url.uri }}</div>
|
||||
</div>
|
||||
{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
|
||||
</td>
|
||||
<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
|
||||
</tr>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row flex-fill align-items-md-center">
|
||||
<div class="col">
|
||||
<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" %}
|
||||
</a>
|
||||
<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 %}
|
||||
<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 () {
|
||||
var themeConfig = {
|
||||
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 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 %}
|
||||
<div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
{% 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 %}
|
||||
{{ percentage }}%
|
||||
{% 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 %}
|
||||
{% if value > 0 %}
|
||||
{% assign trending-color = 'green' %}
|
||||
{% assign trending-icon = 'trending-up' %}
|
||||
{% assign trending-icon = 'arrow-up' %}
|
||||
{% elsif value == 0 %}
|
||||
{% assign trending-color = 'yellow' %}
|
||||
{% assign trending-color = 'muted' %}
|
||||
{% assign trending-icon = 'minus' %}
|
||||
{% else %}
|
||||
{% assign trending-color = 'red' %}
|
||||
{% assign trending-icon = 'trending-down' %}
|
||||
{% assign trending-icon = 'arrow-down' %}
|
||||
{% 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>
|
||||
|
||||
Reference in New Issue
Block a user