fomantic / Fomantic-UI-Docs

Official Documentation for Fomantic-UI
https://fomantic-ui.com
28 stars 85 forks source link

[Docs] Toggle inverted mode examples/code #339

Open jamessampford opened 2 years ago

jamessampford commented 2 years ago

Just an idea…

Wondering if perhaps it may be useful to have a button when viewing the docs (possibly next to where the code is expanded/shown) where the section being viewed toggles between the standard and inverted version (where inverted is of course supported)

This way could potentially not need to have so many potentially duplicated sections showing inverted variants, and could also make it easier to keep track of inverted examples and quickly see what is supported and what could potentially be improved

jamessampford commented 1 year ago

@lubber-de I’ve put a little sample together for this at https://jsfiddle.net/m1sLv30c/1/ - I guess ideally the toggle button would be next to the source code revealer so it can be easily toggled and also update the example copyable source code

Essentially, by adding another data attribute to the example div (like done with the from version label) we can add a comma separated list of class paths that can be used to match in order to add and remove an inverted class in order to toggle between the 2

The tricky bit, I expect, will be actually doing the implementation of what can and cannot be inverted and what path/paths need to be used in order to do this dynamically, as well as being able to target where the actual code is to apply the class/path changes to