Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Fix icon display issues in the Star Ratings component (#2007)

Browse Source 
* fix #1998: star rating fix

* Create gentle-dingos-joke.md

* Fix typo in changeset description
This commit is contained in:
Paweł Kuna
2024-12-06 10:11:52 +01:00
committed by GitHub
parent b23a9aee58
commit 88eb4137d9
5 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/gentle-dingos-joke.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fix icon display issues in the Star Ratings component

6
src/pages/_includes/ui/icon.html
View File

@@ -13,10 +13,6 @@
{% assign replace-to = replace-to | append: ' text-' | append: include.color %} {% assign replace-to = replace-to | append: ' text-' | append: include.color %}
{% endif %} {% endif %}
{% if include.filled %}
{% assign replace-to = replace-to | append: ' icon-filled' %}
{% endif %}
{% if include.inline %} {% if include.inline %}
{% assign replace-to = replace-to | append: ' icon-inline' %} {% assign replace-to = replace-to | append: ' icon-inline' %}
{% endif %} {% endif %}
@@ -28,7 +24,7 @@
{% assign replace-to = 'class="' | append: replace-to | append: '"' %} {% assign replace-to = 'class="' | append: replace-to | append: '"' %}
{% if site.use-iconfont %} {% if site.use-iconfont %}
<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.filled %} icon-filled{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i> <i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
{% else %} {% else %}
<!-- Download SVG icon from http://tabler-icons.io/i/{{ icon-name }} --> <!-- Download SVG icon from http://tabler-icons.io/i/{{ icon-name }} -->
{% assign svg-icon = site.data.icons[icon-name].svg[type] | default: '' %} {% assign svg-icon = site.data.icons[icon-name].svg[type] | default: '' %}

6
src/pages/_includes/ui/rating.html
View File

@@ -1,5 +1,5 @@
{% assign id = include.id | default: include.icon | default: 'default' %} {% assign id = include.id | default: include.icon | default: 'default' %}
{% assign icon = include.icon | default: 'star-filled' %} {% assign icon = include.icon | default: 'star' %}
{% assign color = include.color %} {% assign color = include.color %}
{% assign size = include.size | default: false %} {% assign size = include.size | default: false %}
{% assign value = include.value %} {% assign value = include.value %}
@@ -14,7 +14,7 @@
</select> </select>
{% capture star %} {% capture star %}
{% include ui/icon.html class="gl-star-full" icon=icon color=color size=size %} {% include ui/icon.html class="gl-star-full" icon=icon color=color type="filled" size=size %}
{% endcapture %} {% endcapture %}
{% assign star = star | strip | replace_regex: "\n\s+", "" %} {% assign star = star | strip | replace_regex: "\n\s+", "" %}
@@ -30,6 +30,8 @@
stars: function (el, item, index) { stars: function (el, item, index) {
el.innerHTML = `{{ star }}`; el.innerHTML = `{{ star }}`;
}, },
classNames: {
}
}) })
{% if jekyll.environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %} {% if jekyll.environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %}
}) })

6
src/pages/stars-rating.html
View File

@@ -27,9 +27,9 @@ menu: base.stars-rating
<div class="h3 card-title">Different icon</div> <div class="h3 card-title">Different icon</div>
<div class="space-y"> <div class="space-y">
{% include ui/rating.html value=4 %} {% include ui/rating.html value=4 %}
{% include ui/rating.html icon="heart-filled" value=4 color="red" %} {% include ui/rating.html icon="heart" value=4 color="red" %}
{% include ui/rating.html icon="ghost-filled" value=4 color="azure" %} {% include ui/rating.html icon="ghost" value=4 color="azure" %}
{% include ui/rating.html icon="circle-filled" value=4 color="green" %} {% include ui/rating.html icon="circle" value=4 color="green" %}
</div> </div>
</div> </div>
</div> </div>

2
src/scss/vendor/_stars-rating.scss vendored
View File

@@ -16,5 +16,7 @@
.gl-active > .gl-star-full { .gl-active > .gl-star-full {
color: var(--gl-star-color); color: var(--gl-star-color);
fill: currentColor;
stroke: currentColor;
} }
} }