Flex Components

This repo contains a collection of Flex Component: examples, schema tools, and workflow guides

Shadows Components

mivaecommerce/shadows has the full collection of MMX Flex Components:

• mmx-accordion
• mmx-base
• mmx-button
• mmx-card
• mmx-category-carousel
• mmx-combination-facet
• mmx-contact-form
• mmx-csv
• mmx-featured-product
• mmx-hero-slider
• mmx-hero
• mmx-icons
• mmx-image-across
• mmx-image-and-text
• mmx-messages
• mmx-product-carousel
• mmx-product-list
• mmx-quick-order
• mmx-text-area
• mmx-text-banner
• mmx-text-editor
• mmx-text
• mmx-video

Reference Components

• mmx-base - A copy of mmx-base is provided to review:
  • mmx-base.css CSS Variables that can be used in mmx-customizations.
  • mmx-base.js to view its JavaScript functions and web-component methods
• Flex Property Kitchen Sink - Example showing many different flex property types and settings

Flex Component Architectures

• Example of basic Flex Component
  • No MMX assets, no dependencies, no web-components, just a basic Flex Component.
• Example of a Flex Component that uses a Web Component
  • No MMX assets, no dependencies, just a basic web-component
• MMX Example
  • A simple MMX_Element web-component with a couple MMX dependencies.

Real World Use-Cases

• Example of a Comparison Table
• Example of a FAQs component

Additional Resources

• docs.miva.com: Flex Component Reference Guide
• YouTube.com MivaLearn Page Builder Overview

Guides

Guide to Duplicating MMX Components

VS Code flex.json Schema Reference

Add Flex Component Schema Hints in VS Code