mInputs - Material Design Inputs
Overview
mInputs will automatically convert your default Mendix inputs into beautiful Google Material Design inputs. You can choose between the Outlined style or the Filled style. This widget is plug & play. No configuration needed. Supports the new Combo Box widget! Also supports now the use of CSS variables!
Just a headsup: this UI module makes use of a small piece of JavaScript within the HTML/JavaScript widget. Please use the Snippet_mInputs_SetBackgroundColor within your layouts when you're opting for the Outlined style.
For more goodness and instructions, please read the documentation.
Check out my other UI Modules:
- mInputs – Material Design Inputs: https://marketplace.mendix.com/link/component/207980
- mIcons - Material Icons and Symbols: https://marketplace.mendix.com/link/component/205995
- mFonts - Use Google fonts easily within your app: https://marketplace.mendix.com/link/component/206063
- mAnimations - Animate almost every widget: https://marketplace.mendix.com/link/component/209256
- mFlex – CSS Flex Options: https://marketplace.mendix.com/link/component/205993
- mGrid – CCS Grid Options: https://marketplace.mendix.com/link/component/205994
- mDataGrids - Sticky Columns & More for Data Grid (2): https://marketplace.mendix.com/link/component/212219
Connect with me on LinkedIn! https://www.linkedin.com/in/mauritspdekoning/
Documentation
Typical usage scenario
mInputs will automatically convert your default Mendix inputs into beautiful Google Material Design inputs. This widget is plug & play. No configuration needed. Supports marketplace widgets* like the Autocomplete & Multiselect widget.
Go to https://m3.material.io/components/text-fields/overview for more information about input/text fields.
Features and limitations
- Supports Textbox, Textarea, DateTime pickets, Dropdowns, Reference Selectors and Reference Set Selectors
- Supports DataGrid, DataGrid2 and Gallery widgets.
- Supports Login id text box and Password text box authentication widgets.
- Supports Combo Box Widget.
- Supports Autocomplete & Multiselect widget. (Soon to be deprecated - will be replaced by the Combo Box widget)
- Supports outlined & filled style.
- Supports dynamic backgrounds for outlined style. Please use the Snippet_mInputs_SetBackgroundColor within your layouts.
- Work even better when you use mMaterial Symbols (Icons). You can download this here: https://marketplace.mendix.com/link/component/205995.
- Also works better with mFonts. You can download this here: https://marketplace.mendix.com/link/component/206063
- Added legacy support for browsers that don’t support the :has selector yet (Firefox).
- No API calls.
Dependencies
- Mendix 9.24.0. and up.
- Requires the HTML/Javascript widget when using the Outlined style. https://marketplace.mendix.com/link/component/56
- Requires _custom-variables.scss for certain variables. The default path has been set within the main.scss. Change this if your _custom-variables.scss is located somewhere else.
Installation
Just download and install this UI Module. Rerun your Mendix Studio Pro application and behold all the new Material Design Inputs! Set the input form orientation to vertical for the best results. While mInputs supports horizontal form orientation, it is still a new unproven feature.
If you're using the Outlined style, please use the Snippet_mInputs_SetBackgroundColor within your layouts.
Configuration
Almost no configuration needed. Please see the Installation part. At default the style will be set to ‘Outlined’. If you would like to change this or changes other values like colors, please go to _m-material-inputs-variables.scss.
Known bugs
- Some browsers might not support the new :has selector. I’ve added legacy styling for these cases. The input field will look pretty much the same, but with less animation/interaction.
- Might work not as expected when form orientation is set to Horizontal.
- Not a bug, but a heads-up: placing data controls in a column header of datagrid2 might look funny when you don't reserve enough space for that column.
Legal notice:
Copyright (c) 2024 Maurits de Koning-Hewitt.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.