Hi there,
how can I have an oh-toogle-item and open an popup if I only click on the label and not on the toggle?
The idea is to have a dimmer in an popup window.
Short answer: I don’t think you can with the oh widgets, you’ll have to construct it yourself from the base f7 widgets.
Long answer: The oh actions trigger off of the entire area of the widget, so even if you add an oh-toggle item to an oh-list-item and then give the list item an action, every time you click the toggle it will also trigger the action.
An f7-list-item is the base for the oh-list-item but it doesn’t have the actions baked in. The f7 component does have all the slots that you need to simulate the oh widget. You’ll just want to put an oh-link with the label you want in the title slot. You can then give that link the actions you want. Next you can add an oh-toggle to the after slot of the f7-list-item and connect that to the item of interest.
Where you have an oh-toggle-item you need to replace it with an f7-list-item. The f7 version won’t have all the same properties as the oh version, but you don’t need much (and you can always use [ctrl]+[space] in the widget editor to see the list of available config options when you are in the config section of a widget). The oh options will come from adding other widgets inside the f7. It will look something like this:
- component: f7-list-item
config: {}
slots:
title:
- component: oh-link
config:
text: =your appropriate loop label variable here
other action configs....
after:
- component: oh-toggle
config:
item =your appropriate loop name variable here
other toggle configs...
Hi Justin,
thank you again for your support. I played all evening with different solutions with now all technical work, but they don’t look nearly the same like the original oh-toggle-item.
My example only used two child components to the custom list item. You’ve added a third. The f7-list-item, by default uses flex spacing on its children which does its best to responsively evenly distribute the children in the available space. That means as soon as you added the third component to the list item, the even spacing put one component in the middle. There are two fairly easy solutions to this:
Keep your three different items but combine the first two under their own f7-row component. This will keep those two on one side and the toggle on the other as the list item will think it’s only trying to space out two items, the f7-row and the toggle.
f7-list-item
f7-row
f7-icon
oh-link
oh-toggle
Use only two items. The oh-link can have both icons and text simultaneously so you don’t need the additional icon component.
I think #2 is probably closer to what you need and a little easier to manage.
component: oh-list-card
config: {}
slots:
default:
- component: oh-toggle-item
config:
icon: f7:lightbulb
title: Title goes here
- component: f7-list-item
config:
slots:
title:
- component: oh-link
config:
iconF7: lightbulb
text: Title Goes here
iconSize: 32
iconColor: black
textColor: black
after-title:
- component: oh-toggle
config:
item: some_item
Produces:
You can see that with minimal styling the custom list item matches the oh list item almost exactly. The only downside to this method is the simplicity of the oh-link does prevent you from perfectly matching the alignment of the title text. If 4 or 5 pixels bothers you then you’ll want to try and use solution #1.
