Using Icon Chips or Contact Chips

Setup, Configuration and Use Widgets
1

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, 2:36:49 PM
component: oh-cell
config:
  on: true
  title: Anwesenheiten
slots:
  header:
    - component: f7-list
      config:
        mediaList: true
      slots:
        default:
          - component: f7-list-item
            config:
              title: Anwesenheiten
            slots:
              title:
                - component: f7-chip
                  config:
                    color: gray
                    text: Test
                  slots:
                    media:
                      - component: oh-image
                        config:
                          url: /static/test.jpg

image
image1406Ă—309 11.6 KB

I am just wondering how I can choose to show this as an Icon Chip or Contact Chip:

image
image745Ă—798 59.1 KB

Any hint?

2

It is not clear what your question is. You have successfully created the chip. “Icon chips” and “Contact chips” are not specific classes or versions of chips; they are just demonstrations from the f7 docs of the kinds of things you can use chips for. If you want an icon in the chip’s media circle then use one of the icon properties for the chip. If you want some text in there, then set that text using the media property of the chip. If you want a picture in there, then you need to use the media slot as you have demonstrated above.

3

Hi OK, maybe that explains why I failed so far. ideally I would like to have a media (jpeg) in the circle, similar to what they called contact chip. As fillback I would like to use an icon, similar to what they call ed icon chip.

Actually I realized my code works as expected, just had a wrong filename for the image :frowning:

Any advise if I want to play aroiund with icon chips how to get the icon not as part but as shown in the f7 eample?

4

If you want more control over the component in the media of the chip, you can replace the media or icon properties with Label or f7-icon or oh-icon components. For example:

- component: f7-chip
  config:
    text: John Doe
    iconF7: person_fill
    mediaBgColor: red

gives the same result as

- component: f7-chip
  config:
    text: John Doe
    mediaBgColor: red
  slots:
    media:
      - component: f7-icon
        config:
          f7: person_fill

Similarly,

- component: f7-chip
  config:
    text: Jennifer
    mediaBgColor: pink
    media: J

gives the same result as

- component: f7-chip
  config:
    text: Jennifer
    mediaBgColor: pink
  slots:
    media:
      - component: Label
        config:
          text: J
1 Like
5

perfect, thanks!