OH4.3 f-chip with oh-icon as background to text

Setup, Configuration and Use Widgets
,
1

Hi

I am trying to use an f-chip with an icon to indicate when a true condition exist (When alarm Zone is Bypassed)

So I want it to display something like:

image

I am using the f7-badge to get a small footprint.

I will use the visible condition to hide the icon if the condition is false.

My test looks like this:

image

But I am trying to get the icon behind the text. This will allow the badge to be smaller and squarer.

uid: widget_bf9e8c02a7
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: Aug 16, 2024, 4:54:48 PM
component: f7-card
config:
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: =props.prop1
  content: =items[props.item].displayState || items[props.item].state
slots:
  default:
    - component: f7-badge
      config:
        color: green
        text: 1
        iconF7: arrow_branch
        iconColor: blue
        iconSize: 15
    - component: f7-chip
      config:
        color: green
        text: 1
      slots:
        media:
          - component: oh-icon
            config:
              visible: true
              icon: f7:arrow_branch
              style:
                position: absolute
                color: rgba(39,26,226,255)
                left: 5px
              width: 17px

Any suggestions as I have run out of ideas.

I tried putting the oh-icon is the default slot but it then does not show.

Thanks
Mark

2

There are two options here and they both relate to how the chip is constructed. The whole chip is a div container. When you add media to that chip then inside that container a media div is added. The same is true for the label. So if you have media and a label you get a structure like this:

<div class="chip">
  <div class="chip-media"></div>
  <div class="chip-label"></div>
</div>

When you add an icon to the media, it’s inside the chip-media div so changing the icon’s positioning only changes it inside that div and not relative to the label.

So, your two options are:

  1. Use a stylesheet to change the positioning of the chip-label div
    - component: f7-chip
      config:
        color: green
        text: 1
        stylesheet: >
          .chip-label {
            position: absolute;
            margin-left: 0;
          }
  1. Don’t add the text to the chip itself (which removes the chip-label div) but add a Label component to the chip media in addition to the icon which you can then position relative to the icon within the chip-media div:
    - component: f7-chip
      config:
        color: green
      slots:
        media:
          - component: oh-icon
            config:
              visible: true
              icon: f7:arrow_branch
              style:
                color: rgba(39,26,226,255)
                left: 5px
              width: 17px
          - component: Label
            config:
              text: 1
              style:
                position: absolute
                margin-left: 10px
1 Like
3

Thanks Justin. That works really well. Always appreciate your help and knoweledge.

4

One other question if you don’t mind?

How can I limit the size of the f7-chip?

As soon as I add any component it almost double sin size?

5

You probably want to adjust the padding values on the chip (adjusting the actual width will have negative consequences for the alignment of the components inside).

Since it grows in width, probably just padding-right: 5px, and padding-left: 5px will be sufficient.

1 Like
6

Thank you. I just could not find the correct setting (checked all my widgets and my mind was a blank. :slight_smile: