Mark_VG
(Mark)
September 22, 2022, 5:16pm
1
Hi All
I am trying to set up an oh-cell with a couple of f7-chip with the icon displayed. Adding the icon: f7:compass
statement seems to allocate space for the icon, but it is not displayed:
The code to produce this is as follows:
component: oh-cell
config:
on: true
title: TEST
slots:
header:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: f7-list-item
config:
title: TEST
slots:
title:
- component: f7-chip
config:
color: gray
text: Lounge
- component: f7-chip
config:
icon: f7:compass
icon-color: black
color: gray
text: Lounge
Any ideas on how to get the icon to display?
Thanks
Mark
JustinG
(JustinG)
September 22, 2022, 5:30pm
2
If you want the f7 icons on the chip use:
iconF7: compass
instead.
1 Like
Mark_VG
(Mark)
September 22, 2022, 5:32pm
3
Thanks Justin. Speedy solution as always.
tbrettinger
(Thomas Brettinger)
October 17, 2022, 5:46pm
4
Hi,
I have an add-on question: is there a way to use custom images as chip icons (as in f7 contact chips)
I tried around, but didn’t find a way to get the Image URL into the yaml so that it works…
Regards
Thomas
JustinG
(JustinG)
October 17, 2022, 6:25pm
5
Put an oh-image
component in the media slot of the chip. Then you can just use the url
property of the oh-image
with a full address string if the image is on the web, or with the /static/image.jpg
if the image is in your conf/html
folder.
- component: f7-chip
config:
text: With image
slots:
media:
- component: oh-image
config:
url: https://addresss.of.image.com/image.jpg
tbrettinger
(Thomas Brettinger)
October 18, 2022, 9:38am
6
Works like a charm, thanks a lot!
Hi,
do you have a example of a working code using Contact Chips for custom widgets please?
Thanks
Hi together,
if someone is interested for including media to widget, check out this example:
HI together,
I am quite new to custom widget even though I read a lot of documentation and examples.
I got the widget working with media if someone is interested:
uid: widget_people
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 30, 2023…