https://github.com/accenture/mendix.cssclassswitcher
A Mendix widget that adds CSS classes determined by a microflow (or nanoflow) to elements determined by CSS selector.
https://github.com/accenture/mendix.cssclassswitcher
mendix mendix-widget
Last synced: 10 months ago
JSON representation
A Mendix widget that adds CSS classes determined by a microflow (or nanoflow) to elements determined by CSS selector.
- Host: GitHub
- URL: https://github.com/accenture/mendix.cssclassswitcher
- Owner: Accenture
- License: mit
- Created: 2019-05-16T11:44:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T09:44:31.000Z (about 3 years ago)
- Last Synced: 2024-04-03T10:31:18.885Z (almost 2 years ago)
- Topics: mendix, mendix-widget
- Language: CSS
- Homepage:
- Size: 16.9 MB
- Stars: 1
- Watchers: 11
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Css Class Switcher
A Mendix widget that adds CSS classes determined by a microflow (or nanoflow) to elements determined by CSS selector.
## Typical usage scenario
It's useful in applications that need to **determine styling** based on **arbitrary logic** and change it **dynamically in runtime**:
- An example may be a **multi-tenant app** with different styling for **different brands**, depending on settings of the current user.
- Another use case would be to allow your users to choose between **multiple theme or skins** for your application, depending on their preferences.
- You can also **improve accessibility** by switching to styling with e.g. bigger fonts and cleaner layout with less distractions for users with visual or cognitive impairments.
## Example application
[Here](https://github.com/ObjectivityLtd/Mendix.CssClassSwitcher/tree/master/test) you can find a simple yet beautiful sample app that switches its styling between light and dark depending on current user theme stored in ``Account`` entity.
(And [here](https://github.com/ObjectivityLtd/Mendix.CssClassSwitcher/tree/master/test-mx8) is the same app for Mendix 8.)
## Usage
Place the widget inside your app and provide the following settings:
- `Microflow`: A microflow that has no parameters and returns a string with CSS classes that should be added to target elements. Multiple classes can be seperated with a space.
- `Nanoflow`: Alternatively, you can use a nanoflow instead of microflow - as above.
- `Target element selector`: Optional CSS selector of target elements to add the classes to. If empty, the parent element of the widget will be used.
- `CSS classes to remove`: Optional CSS classes to be removed from the target elements. Multiple classes can be seperated with a space.
## Inspired by / thanks to
- [Dynamic Classes widget](https://appstore.home.mendix.com/link/app/108838/)
- [StyleSheetSwitcher widget](https://appstore.home.mendix.com/link/app/106033/).