mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Add customizable Star Ratings component using star-rating.js library (#1571)
This commit is contained in:
Paweł Kuna
GitHub
5
.changeset/curvy-fishes-lie.md
Normal file
5
.changeset/curvy-fishes-lie.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Add customizable Star Ratings component using `star-rating.js` library
|
||||
2
.github/workflows/bundlewatch.yml
vendored
2
.github/workflows/bundlewatch.yml
vendored
@@ -34,7 +34,7 @@ jobs:
|
||||
bundler-cache: true
|
||||
|
||||
- name: Install pnpm dependencies
|
||||
run: pnpm install
|
||||
run: pnpm install --no-frozen-lockfile
|
||||
|
||||
- name: Run build
|
||||
run: pnpm run build
|
||||
|
||||
10
package.json
10
package.json
@@ -4,6 +4,7 @@
|
||||
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
||||
"homepage": "https://tabler.io",
|
||||
"scripts": {
|
||||
"dev": "pnpm run start-plugins",
|
||||
"start": "gulp start",
|
||||
"start-plugins": "gulp start --with-plugins",
|
||||
"build": "gulp build",
|
||||
@@ -184,7 +185,8 @@
|
||||
"vinyl-buffer": "^1.0.1",
|
||||
"vinyl-source-stream": "^2.0.0",
|
||||
"yaml": "^2.2.2",
|
||||
"yargs": "^17.7.2"
|
||||
"yargs": "^17.7.2",
|
||||
"star-rating.js": "^4.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.7",
|
||||
@@ -205,7 +207,8 @@
|
||||
"nouislider": "^15.7.0",
|
||||
"plyr": "^3.7.8",
|
||||
"tinymce": "^6.4.2",
|
||||
"tom-select": "^2.2.2"
|
||||
"tom-select": "^2.2.2",
|
||||
"star-rating.js": "^4.3.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"apexcharts": {
|
||||
@@ -252,6 +255,9 @@
|
||||
},
|
||||
"tom-select": {
|
||||
"optional": true
|
||||
},
|
||||
"star-rating.js": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"release-it": {
|
||||
|
||||
3550
pnpm-lock.yaml
generated
3550
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -22,12 +22,14 @@
|
||||
"fslightbox": "fslightbox/index.js",
|
||||
"tinymce" :"tinymce/tinymce.min.js",
|
||||
"plyr": "plyr/dist/plyr.min.js",
|
||||
"dropzone": "dropzone/dist/dropzone-min.js"
|
||||
"dropzone": "dropzone/dist/dropzone-min.js",
|
||||
"star-rating.js": "star-rating.js/dist/star-rating.min.js"
|
||||
},
|
||||
"css": {
|
||||
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",
|
||||
"dropzone": "dropzone/dist/dropzone.css",
|
||||
"plyr": "plyr/dist/plyr.css"
|
||||
"plyr": "plyr/dist/plyr.css",
|
||||
"star-rating.js": "star-rating.js/dist/star-rating.min.css"
|
||||
},
|
||||
"js-copy": {
|
||||
"tinymce" :"tinymce/*"
|
||||
|
||||
@@ -79,6 +79,10 @@ base:
|
||||
url: steps.html
|
||||
title: Steps
|
||||
badge: New
|
||||
stars-rating:
|
||||
title: Stars rating
|
||||
url: stars-rating.html
|
||||
badge: New
|
||||
tabs:
|
||||
url: tabs.html
|
||||
title: Tabs
|
||||
|
||||
38
src/pages/_includes/ui/rating.html
Normal file
38
src/pages/_includes/ui/rating.html
Normal file
@@ -0,0 +1,38 @@
|
||||
{% assign id = include.id | default: include.icon | default: 'default' %}
|
||||
{% assign icon = include.icon | default: 'star-filled' %}
|
||||
{% assign color = include.color %}
|
||||
{% assign size = include.size | default: false %}
|
||||
{% assign value = include.value %}
|
||||
|
||||
<select id="rating-{{ id }}">
|
||||
<option value="">Select a rating</option>
|
||||
<option value="5"{% if value == 5 %} selected{% endif %}>Excellent</option>
|
||||
<option value="4"{% if value == 4 %} selected{% endif %}>Very Good</option>
|
||||
<option value="3"{% if value == 3 %} selected{% endif %}>Average</option>
|
||||
<option value="2"{% if value == 2 %} selected{% endif %}>Poor</option>
|
||||
<option value="1"{% if value == 1 %} selected{% endif %}>Terrible</option>
|
||||
</select>
|
||||
|
||||
{% capture star %}
|
||||
{% include ui/icon.html class="gl-star-full" icon=icon color=color size=size %}
|
||||
{% endcapture %}
|
||||
{% assign star = star | strip | replace_regex: "\n\s+", "" %}
|
||||
|
||||
{% capture_global scripts %}
|
||||
<script>
|
||||
// @formatter:off
|
||||
{% if jekyll.environment == 'development' %}window.tabler_rating = window.tabler_rating || {};{% endif %}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const rating = new StarRating('#rating-{{ id }}', {
|
||||
tooltip: false,
|
||||
clearable: false,
|
||||
stars: function (el, item, index) {
|
||||
el.innerHTML = `{{ star }}`;
|
||||
},
|
||||
})
|
||||
{% if jekyll.environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %}
|
||||
})
|
||||
// @formatter:on
|
||||
</script>
|
||||
{% endcapture_global %}
|
||||
65
src/pages/stars-rating.html
Normal file
65
src/pages/stars-rating.html
Normal file
@@ -0,0 +1,65 @@
|
||||
---
|
||||
title: Star Ratings
|
||||
page-header: Star Ratings
|
||||
description:
|
||||
The star ratings HTML admin panel component is a user interface element that
|
||||
allows users to rate items using a star rating system. This component is
|
||||
commonly used in applications that allow users to rate products, services, or
|
||||
other items.
|
||||
libs: tabler-flags, star-rating.js
|
||||
menu: base.stars-rating
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="h3 card-title">Basic</div>
|
||||
<div>{% include ui/rating.html value=4 %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="h3 card-title">Different icon</div>
|
||||
<div class="space-y">
|
||||
{% include ui/rating.html value=4 %}
|
||||
{% include ui/rating.html icon="heart-filled" value=4 color="red" %}
|
||||
{% include ui/rating.html icon="ghost-filled" value=4 color="azure" %}
|
||||
{% include ui/rating.html icon="circle-filled" value=4 color="green" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="h3 card-title">Custom colors</div>
|
||||
<div class="space-y">
|
||||
{% include ui/rating.html id="color" value=3 %}
|
||||
{% include ui/rating.html id="color-primary" color="primary" value=3 %}
|
||||
{% include ui/rating.html id="color-red" color="red" value=3 %}
|
||||
{% include ui/rating.html id="color-lime" color="lime" value=3 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="h3 card-title">Custom sizes</div>
|
||||
<div class="space-y">
|
||||
{% include ui/rating.html id="size-sm" value=3 size="sm" %}
|
||||
{% include ui/rating.html id="size-primary" value=3 %}
|
||||
{% include ui/rating.html id="size-red" value=3 size="md" %}
|
||||
{% include ui/rating.html id="size-lime" value=3 size="lg" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -9,3 +9,4 @@
|
||||
@import "vendor/fslightbox";
|
||||
@import "vendor/plyr";
|
||||
@import "vendor/tinymce";
|
||||
@import "vendor/stars-rating";
|
||||
|
||||
20
src/scss/vendor/_stars-rating.scss
vendored
Normal file
20
src/scss/vendor/_stars-rating.scss
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
:root {
|
||||
--gl-star-size: auto;
|
||||
--gl-star-color: var(--#{$prefix}yellow);
|
||||
--gl-star-color-inactive: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
[data-star-rating] {
|
||||
svg {
|
||||
width: var(--#{$prefix}icon-size, --gl-star-size);
|
||||
height: var(--#{$prefix}icon-size, --gl-star-size);
|
||||
}
|
||||
|
||||
:not(.gl-active) > .gl-star-full {
|
||||
color: var(--gl-star-color-inactive) !important;
|
||||
}
|
||||
|
||||
.gl-active > .gl-star-full {
|
||||
color: var(--gl-star-color);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user