Allows to display dynamic HTML from the html prop - use with expressions to display HTML from item states etc.
It uses a resizable f7-text-editor component without any visible toolbar and adds a div on top of it to “make it non-editable”.
To remove the background color and the border, add it with this:
stylesheet: >
.text-editor {
border: 0;
background: transparent;
}
Screenshots
With the border and background removed as per above, in a card:
Changelog
Version 0.1
- initial release
Resources
uid: html_display
tags: []
props:
parameters:
- label: HTML to display
name: html
required: false
type: TEXT
parameterGroups: []
component: div
config:
style:
position: relative
slots:
default:
- component: f7-text-editor
config:
position: relative
buttons: []
mode: keyboard-toolbar
resizable: true
value: =props.html
- component: div
config:
style:
position: absolute
top: 0
height: 100%
width: 100%
z-index: 10000