github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-25 06:20:40 +00:00
Code Issues Projects Releases Wiki Activity

feat: add option to set custom label on progress shortcode (#412)

Browse Source
This commit is contained in:
Robert Kaussow 2023-07-06 22:07:07 +02:00 committed by GitHub
parent 9be026819d
commit a611955251
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
exampleSite/content/posts/advanced/shortcodes.md
View File

@ -450,7 +450,8 @@ Text continues here.
| Name | Description | default | | Name | Description | default |
| ---------------- | -------------------------------------------------------------------------------- | --------- | | ---------------- | -------------------------------------------------------------------------------- | --------- |
| value | progress value | 0 | | value | progress value (0-100) | 0 |
| label | value to display | value |
| icon (optional) | icon to use, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined | | icon (optional) | icon to use, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined |
| title (optional) | progress title | undefined | | title (optional) | progress title | undefined |

5
layouts/shortcodes/progress.html
View File

@ -1,4 +1,5 @@
{{- $value := default 0 (.Get "value") -}} {{- $value := default 0 (.Get "value") -}}
{{- $label := default (printf "%v %%" $value) (.Get "label") -}}
{{- $title := .Get "title" -}} {{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}} {{- $icon := .Get "icon" -}}
@ -11,13 +12,13 @@
{{- end }} {{- end }}
{{ with $title }}<span>{{ . }}</span>{{ end }} {{ with $title }}<span>{{ . }}</span>{{ end }}
</div> </div>
<div>{{ $value }}%</div> <div>{{ $label }}</div>
</div> </div>
<div class="gblog-progress__wrap"> <div class="gblog-progress__wrap">
<div <div
class="gblog-progress__bar" class="gblog-progress__bar"
data-percent="{{ $value }}" data-percent="{{ $value }}"
style="width: {{ $value }}%;" style="width: {{ $value }}%; max-width: 100%; min-width: 0"
></div> ></div>
</div> </div>
</div> </div>