Material UI Integration

Material UI Integration bridges Drupal with Google’s Material Design principles using Material-UI, a popular React component library. This module integrates responsive UI components as a Webforms element.

Introduction

Material UI Integration is a Drupal module that connects Google's Material Design with Drupal using Material-UI, a modern React component library. It empowers site builders to create visually engaging, responsive, and interactive interfaces with ease. The module includes seamless integration with Drupal Webforms, allowing Material-UI components to be added to forms and pages without custom code.

Key Features:

• Dynamic integration of Material-UI components like sliders, buttons, and more.
• Support for custom props and dynamic rendering via React.
• Admin configuration options to manage Material UI settings.

Usage Instructions

1. Installation

1. Place the material_ui_integration folder in web/modules/custom/.
2. Enable the module:
   

   drush en material_ui_integration

3. Clear the cache:
   

   drush cr

2. Configuration

Navigate to the settings page at Configuration → Development → Material UI Integration Settings.

• Enable Material UI Integration: Toggle to enable or disable Material UI features.
• Custom CSS Path: Specify a path to override Material-UI styling (optional).

3. Adding Material UI Components to Webforms

1. Go to Structure → Webforms.
2. Create or edit a Webform.
3. Click Add Element and search for Material UI Element.
4. Configure the element:
   • material_ui_component: Enter the name of the Material-UI component (e.g., Slider).
   • material_ui_props: Provide component properties in YAML format, e.g.:
     

      material_ui_props: defaultValue: 50 min: 0 max: 100 step: 10 

5. Save the Webform and preview the changes.

4. Customizing Components

Extend the React app to add or modify components:

• Edit js/react_app/components/MaterialUIComponent.js to add custom React components.
• Rebuild the React app and clear Drupal's cache.

5. Debugging and Troubleshooting

• Ensure Material UI libraries are loaded by inspecting the browser’s developer tools.
• Check the browser’s console for JavaScript errors.
• Clear cache if changes do not reflect:
  

  drush cr

Example: Adding a Slider to a Webform

1. Add a Material UI Element to the Webform.
2. Set material_ui_component to Slider.
3. Set material_ui_props:
   

    material_ui_props: defaultValue: 50 min: 0 max: 100 step: 10 

4. Save the Webform and preview the slider.

Feel free to share this structure in the module documentation or project page to assist collaborators!