zdhxiong/mdui

Features

• Material Design Components - Provides a comprehensive set of UI components strictly adhering to Material Design 3 standards.
• CSS Variable Theming - Controls design tokens and color schemes using a hierarchy of CSS custom properties for real-time updates.
• Attribute Synchronization - Maintains consistent state between HTML attributes and JavaScript properties for web component behavior.
• Color Palette Generators - Generates complete Material Design color palettes from a single seed color or image source.
• Color Schemes - Implements configurations for defining and applying color palettes across all user interface elements.
• Color Themes - Manages visual color schemes with support for switching between light, dark, and automatic system-preference modes.
• Dynamic Theme Switching - Implements dynamic theme management for switching between light and dark modes and generating custom color schemes.
• Cross-Framework UI Libraries - Offers a framework-agnostic UI library of web components compatible with Vue, Angular, and other JavaScript frameworks.
• Light and Dark Theme Systems - Manages the switch between light and dark modes based on system settings or specific containers.
• Material Design Systems - Implements a full design system based on Material Design 3, using design tokens for colors, typography, and shapes.
• Slot-Based Content Projection - Provides named and default slots for injecting custom HTML into predefined component areas.
• Theme Style Customizations - Enables overriding default design tokens like colors and spacing globally or locally via CSS variables.
• Component-Based Architectures - Utilizes a web-component-based architecture to ensure framework-agnostic rendering and portability.
• Shadow DOM Encapsulation - Isolates component styles using Shadow DOM while permitting customization via CSS part selectors.
• Responsive Layout Adaptation - Offers flexible layout components and predefined breakpoints to create interfaces that adapt to various screen sizes.
• UI Component Frameworks - Implements a framework-agnostic UI system using web components to ensure consistent layouts and interactions.
• Linear Progress Bars - Provides a horizontal progress bar to indicate the completion status of ongoing tasks.
• Icon Renderers - Renders system icons and custom SVG graphics using font variants or direct image sources.
• Dynamic Theme Color Generators - Generates coordinated color palettes based on a single hexadecimal seed value for use in themes.
• Localization Modules - Imports translation data through asynchronous modules to adapt the interface for different languages on demand.
• DOM Tree Traversers - Navigates the document tree to find descendants, ancestors, or siblings relative to a collection.
• App Bars - Implements a persistent header containing branding, navigation controls, search, and action buttons.
• Navigation Rails - Provides a narrow vertical navigation rail for switching primary pages on larger screens.
• User Avatars - Provides circular containers to display user profiles using images, icons, or initials.
• Bottom Navigation Bars - Implements a bottom-aligned navigation bar for mobile screens with configurable scrolling actions.
• Segmented - Provides segmented button components to present a set of mutually exclusive options.
• Chips - Ships compact chip elements to represent inputs, attributes, or actions with multiple visual styles.
• Circular Progress Indicators - Implements circular indicators to communicate the status of ongoing background operations.
• Collapsible Panels - Provides collapsible panels to group and hide complex content areas for better page organization.
• Image Color Extractors - Analyzes images to determine the dominant hexadecimal color for automated palette generation.
• Content Cards - Ships versatile container elements to group related content and actions into a single card.
• Floating Action Buttons - Ships a prominent floating action button for quick access to the primary application task.
• Checkbox Inputs - Provides toggleable checkbox inputs for selecting one or multiple options from a set.
• Toggle Switches - Ships a binary switch interface for toggling single configuration options on or off.
• Generic Button Components - Provides interactive clickable buttons for triggering user actions and form submissions.
• Icon Buttons - Provides compact, clickable buttons containing icons to trigger small actions.
• Interface Localization - Includes tools for translating user interface labels and descriptions into multiple languages.
• List Components - Provides vertical list components to display a scannable collection of related options or images.
• Localization Settings - Provides configuration options to set the display language and regional preferences of the interface.
• Menu Components - Provides hierarchical menu components that can be populated with custom HTML content or hyperlink targets.
• Submenus - Provides nested menu components to organize options into hierarchical submenus.
• Modal Components - Provides modal dialog components for displaying alerts and confirmation messages within workflows.
• Alert Dialogs - Provides the ability to programmatically trigger modal alert messages that require user acknowledgment.
• Text Input Dialogs - Allows programmatically triggering modal interfaces specifically designed for gathering text-based user input.
• Multilingual Interface Localization - Manages the loading and switching of locale modules to translate and format the user interface.
• Notification Components - Provides temporary, non-blocking snackbar notifications to inform users of system events.
• Page Layout Frameworks - Provides a standardized framework for organizing high-level page structures and content areas.
• Pop-up Overlays - Implements floating pop-up overlays to house action lists or navigation menus.
• Radio Button Components - Provides a group of radio buttons that allow users to select exactly one option.
• Range Sliders - Provides draggable range sliders for selecting single values or numeric ranges.
• Numeric Range Sliders - Provides numeric range sliders featuring dual thumbs for selecting minimum and maximum values.
• Responsive Breakpoints - Defines screen width thresholds using CSS variables and JavaScript for responsive layout adaptation.
• Select Components - Provides dropdown select components that support single or multiple item selections.
• Shadow DOM Part Styling - Allows targeting and styling of specific elements inside the shadow DOM using the CSS part selector.
• Side Navigation - Implements a slide-out panel containing a list of items for application-wide navigation.
• Snackbar Notifications - Ships temporary, non-blocking popup messages with optional action buttons for system event notifications.
• Tabbed Content Panes - Implements tabbed layouts that allow users to switch between different content views.
• Text Input Fields - Provides fields for entering and editing single-line or multi-line text within forms and dialogs.
• Typography Styling - Controls font size, line height, weight, and letter spacing for various text roles via CSS variables.
• UI Status Indicators - Provides visual markers such as counts and labels to communicate current state and context.
• User Confirmation Dialogs - Provides a programmatic way to launch modal dialogs for user confirmation before executing actions.
• Viewport Breakpoint Detection - Provides mechanisms to monitor page width and detect current screen size ranges against predefined thresholds.
• DOM Element Manipulators - Provides utilities to insert, move, replace, or remove elements and content within the DOM.
• DOM Element Selectors - Matches elements using CSS selectors, DOM elements, or arrays to create chainable collections.
• Locale Data Loading - Supports loading only the necessary language and region data required for a specific session via lazy-loading.
• Frontend Framework Bridges - Bridges web components with various JavaScript frameworks to ensure compatible rendering and lifecycle management.
• Frontend Framework Integrations - Ensures custom web components can be seamlessly integrated into Vue, Angular, and other JavaScript frameworks.

Star history