I’m working on a Framework7 layout and aiming to make my code cleaner and more efficient. I have the following f7-row structure, which includes an icon, label, and toggle switch, but I’d love suggestions for optimizing or simplifying it.
Honestly, there’s not much to improve here, in my opinion. Responsive, flexible UI’s just require a lot of piece under the hood. Sometimes it feels a little overboard to have so many different pieces that are not the actual interactive elements, but that’s the nature of xml type documents; defining an entire tree needs a lot of branches before you get to the leaves. You’re using the f7 rows and columns pretty much how they are intended, and the yaml is clear and understandable.
I personally would not use the cols in this situation, but that is truly just a matter of personal preference - there’s nothing “wrong” with using them. I simply tend to prefer to work directly with the flexbox spacing and placement within the f7 row instead of using the cols for placement and spacing. The cols are simpler and cleaner, the flexbox styling is more powerful and customizable.
The exact final solution depends on a lot of factors, including what behavior you want as the size of the row changes. Here are two similar solutions that differ from yours only in the position of the label relative to the icon as the row increases in size:
