Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Toggle inverted mode examples/code #339

Open
jamessampford opened this issue Mar 7, 2022 · 1 comment
Open

[Docs] Toggle inverted mode examples/code #339

jamessampford opened this issue Mar 7, 2022 · 1 comment

Comments

@jamessampford
Copy link
Contributor

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
Copy link
Contributor Author

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants