Overview

This pluggable widget provides a fully customizable toggle switch specifically designed for Mendix native mobile apps. It allows for extensive customization, enabling you to adjust various aspects of the toggle's appearance to suit your design needs. Features include:

• Labels: Show or hide labels, and position them inside or outside the toggle switch.
• Text Styling: Customize label font type, size, and color.
• Track Customization: Modify the height, width, color, and border radius of the toggle track.
• Thumb Customization: Adjust the thumb's height, width, color, and border radius.
• Complete Flexibility: Achieve a personalized look and feel by tweaking all UI elements.

This widget is perfect for creating unique toggle buttons for your Mendix native mobile projects, giving you full control over its design.

we can also customize the font family of the label by writing class in mendix with label font attribute "labelFont".

Eg

export const toggleFont = {

  labelFont: { // this will unlock the feature to customize the font family

    fontFamily: arial, // example

  },

};

Documentation

The Custom Toggle Button widget is ideal for Mendix native mobile applications where you need a highly customizable toggle switch to enhance user experience. It can be used to enable or disable features, toggle settings, or capture user preferences seamlessly. This widget solves the problem of limited styling options available in standard toggle switch by providing full control over the design, allowing it to align with your app’s theme and branding. It’s particularly useful in scenarios where UI consistency and unique visual elements are crucial.

Features and Limitations

Features:

• Customizable labels with options to adjust font type, size, color, and position (inside or outside the switch).
• Flexible track customization: Adjust height, width, color, and border radius.
• Fully customizable thumb: Modify height, width, color, and border radius.
• Options to show or hide labels for a cleaner look.
• Compatible with Mendix native mobile environments, ensuring smooth performance.

Limitations:

• Currently only supported on Mendix native mobile apps (not web or hybrid).
• Limited to two states (on/off) without additional functionality for intermediate states.

Dependencies

• Mendix Native Mobile Framework (version 9.0.5 or later).
• React Native dependencies included in Mendix projects.

Installation

1. Download the widget from the Mendix Marketplace.
2. Add the widget to your native mobile page and enjoy.

Configuration

1. Drag and drop the Native Custom Toggle widget onto your native mobile page.
2. Configure the widget properties to customize labels, track, and thumb according to your design preferences.
3. Bind the toggle state to a Mendix boolean attribute for storing the toggle's value.

Frequently Asked Questions

1. Can this widget be used in web applications?

   • No, this widget is designed specifically for Mendix native mobile apps.

2. How can I hide the labels if I only want the toggle?

   • Set the label visibility option to "No" in the widget properties.

3. Does the widget support animations?

   • Yes, it include animations for toggling actions, but future updates it also includes animation for labels too.