Simple default progressbar widget with a configurable icon, title, header, footer, color and item to be displayed
Version 0.1
- initial release
Resources
uid: Cell_Progress_Card
tags: []
props:
parameters:
- description: Header on top of the card
label: Header
name: header
required: false
type: TEXT
- description: Title of the card
label: Title
name: title
required: false
type: TEXT
- description: Footer of the cell
label: Footer
name: footer
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Foreground Color
name: fgcolor
required: false
type: TEXT
- context: item
description: Item for Progressbar
label: Item
name: ProgressItem
required: true
type: TEXT
parameterGroups: []
timestamp: Oct 3, 2022, 5:30:15 PM
component: f7-card
config:
style:
background: =props.bgcolor
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 120px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.header ? props.header : ''"
- component: f7-block
config:
style:
flex-direction: row
left: 16px
position: absolute
top: 50px
slots:
default:
- component: Label
config:
style:
font-size: 14px
text: =props.title
visible: "=props.title ? true : false"
- component: f7-progressbar
config:
progress: =Number(items[props.ProgressItem].state.split(' ')[0])
style:
position: absolute
top: 60px
width: calc(100% - 30px)
--f7-progressbar-height: 26px
--f7-theme-color: "=props.fgcolor ? [props.fgcolor] : ['#E64A19']"
- component: Label
config:
style:
font-size: 12px
position: absolute
top: 64px
right: 20px
text: =items[props.ProgressItem].state
- component: Label
config:
style:
color: gray
font-size: 12px
position: absolute
top: 90px
text: =props.footer
visible: "=props.footer ? true : false"