Skip to content

Latest commit

 

History

History
157 lines (156 loc) · 11 KB

File metadata and controls

157 lines (156 loc) · 11 KB

Metro UI Components List

  • accordion - A component that displays collapsible content panels for presenting information in a limited amount of space.
  • action-button - A button component that can trigger actions when clicked, with various styling options.
  • activity - A component that displays an activity indicator or loading spinner.
  • adblock - A component that detects and handles ad blockers.
  • analog-clock - A component that displays an analog clock with customizable appearance.
  • app-bar - A navigation component that appears at the top of the application, similar to a toolbar.
  • audio-button - A button component that plays audio when clicked.
  • audio-player - A component that provides audio playback functionality with controls.
  • badges - Small status descriptors for UI elements that can contain text or numbers.
  • box - A container component with various styling options.
  • breadcrumbs - A navigation component that shows the current location in a hierarchical structure.
  • bulls - A component that displays a series of dots, typically used for pagination or steps.
  • button - A standard button component with various styling options.
  • button-group - A component that groups related buttons together.
  • calendar - A component that displays a calendar for date selection.
  • calendarpicker - A component that allows users to pick a date from a calendar popup.
  • cards - Container components with a distinctive appearance that can hold various content.
  • carousel - A slideshow component for cycling through elements.
  • charms - A component that displays a set of icons or buttons in a specific location on the screen.
  • chart-card - A card component specifically designed to display charts.
  • chat - A component that provides a chat interface.
  • checkbox - A standard checkbox input component with enhanced styling.
  • chips - Small, interactive elements that represent entities, attributes, or actions.
  • cloak - A component that hides elements until the page is fully loaded.
  • clock - A component that displays a digital clock.
  • collapse - A component that can be expanded or collapsed to show or hide content.
  • color-picker - A component that allows users to select a color.
  • color-selector - A component that provides a set of predefined colors for selection.
  • command-button - A button component that can execute commands.
  • container - A layout component that contains other elements with proper spacing.
  • context-menu - A menu that appears when a user interacts with an element, typically on right-click.
  • cookie - A component that manages browser cookies.
  • cookie-disclaimer - A component that displays a cookie usage disclaimer message.
  • countdown - A component that counts down to a specific date or time.
  • counter - A component that displays a numerical counter with animation.
  • cube - A 3D cube component with customizable faces.
  • custom-checkbox - An enhanced checkbox component with additional styling options.
  • d-menu - A dropdown menu component.
  • datepicker - A component that allows users to select a date.
  • dialog - A modal window component for displaying content or requesting user input.
  • directive - A component that provides directive functionality for other components.
  • donut - A circular progress indicator component that displays a value as a filled arc.
  • double-select-box - A component that allows selection from two lists, moving items between them.
  • double-slider - A slider component with two handles for selecting a range.
  • drag-items - A component that enables drag and drop functionality for items.
  • draggable - A component that makes elements draggable.
  • drop-menu - A menu component that drops down when activated.
  • dropdown - A component that displays a list of options when clicked.
  • dropdown-button - A button that displays a dropdown menu when clicked.
  • eval - A component that evaluates JavaScript expressions.
  • export - A component that exports data to various formats.
  • file-input - An enhanced file input component with additional features.
  • flip-card - A card component that can be flipped to reveal content on the back.
  • form - A component that manages form elements and submission.
  • gauge - A component that displays a value on a gauge with a needle.
  • gradient-box - A container component with a gradient background.
  • gravatar - A component that displays Gravatar images based on email addresses.
  • grid - A layout component that arranges elements in a grid.
  • h-menu - A horizontal menu component.
  • hamburger - A component that displays a hamburger menu icon that can be clicked to show/hide a menu.
  • hero - A large banner component typically used at the top of a page.
  • hint - A component that displays a hint or tooltip when hovering over an element.
  • hotkey - A component that manages keyboard shortcuts.
  • hover-box - A box component that changes appearance when hovered.
  • html-container - A component that safely renders HTML content.
  • icon-box - A container component specifically designed for displaying icons.
  • image-box - A container component specifically designed for displaying images.
  • image-button - A button component that displays an image.
  • image-compare - A component that allows comparison of two images with a slider.
  • image-grid - A grid component specifically designed for displaying images.
  • image-magnifier - A component that allows zooming in on parts of an image.
  • image-placeholder - A component that displays a placeholder while an image is loading.
  • info-box - A component that displays information in a box.
  • info-button - A button component that displays additional information when clicked.
  • info-panel - A panel component that displays information.
  • input - A standard text input component with enhanced styling.
  • input-common - Common functionality for input components.
  • input-mask - A component that applies a mask to input fields for formatted entry.
  • input-material - A material design styled input component.
  • keypad - A component that displays a numeric keypad for input.
  • lightbox - A component that displays images or content in a modal overlay.
  • list - A component that displays items in a list format.
  • listview - An enhanced list component with additional features.
  • marquee - A component that scrolls text horizontally.
  • master - A master-detail component for displaying related information.
  • md5 - A component that generates MD5 hashes.
  • media-player - A component that provides media playback functionality.
  • navview - A navigation view component for application navigation.
  • notify - A component that displays notification messages.
  • overlay - A component that creates an overlay on the page.
  • package-manager - A component that manages packages or modules.
  • page-control - A component that manages page navigation.
  • pagination - A component that displays pagination controls for navigating through pages.
  • panel - A container component with a header and content area.
  • popover - A component that displays content in a popup when an element is clicked.
  • progress - A component that displays progress as a bar or circle.
  • radio - A radio button input component with enhanced styling.
  • rating - A component that allows users to rate items with stars or other symbols.
  • remark - A component that displays remarks or comments.
  • remote-dataset - A component that fetches and manages data from a remote source.
  • remote-table - A table component that fetches data from a remote source.
  • resizable - A component that makes elements resizable.
  • resizer - A component that allows resizing of elements.
  • ribbon - A component that displays a ribbon across an element.
  • ribbon-menu - A menu component styled as a ribbon.
  • ripple - A component that creates a ripple effect when an element is clicked.
  • scrollbar - A custom scrollbar component.
  • select - A dropdown select component with enhanced styling.
  • shadows - A component that adds shadow effects to elements.
  • shortcut - A component that manages keyboard shortcuts.
  • sidebar - A component that displays a sidebar on the page.
  • sidenav-counter - A navigation component with counters.
  • sidenav-m3 - A Metro 3 styled side navigation component.
  • sidenav-simple - A simple side navigation component.
  • skill-box - A component that displays skills with progress indicators.
  • slider - A component that allows selection of a value from a range.
  • social-box - A component that displays social media links or sharing options.
  • sorter - A component that enables sorting of elements.
  • spinner - A loading spinner component.
  • split-button - A button component that combines a standard button with a dropdown.
  • splitter - A component that creates resizable split panes.
  • stepper - A component that displays a sequence of steps.
  • storage - A component that manages local storage.
  • streamer - A component that displays a stream of events or activities.
  • swipe - A component that detects swipe gestures.
  • switch - A toggle switch component that provides an on/off control, similar to a checkbox but with a different visual representation.
  • t-menu - A tabbed menu component.
  • table - A table component with enhanced styling and functionality.
  • tabs - A component that organizes content into tabs.
  • tabs-material - A material design styled tabs component.
  • tag - A component that displays tags or labels.
  • tag-input - A component that allows input and management of tags.
  • task-bar - A component that displays a task bar similar to operating systems.
  • template - A component that renders templates.
  • textarea - A multiline text input component with enhanced styling.
  • theme-switcher - A component that allows switching between light and dark themes.
  • tile - A square or rectangular component that can contain various content.
  • timeline - A component that displays events in chronological order.
  • timepicker - A component that allows users to select a time.
  • toast - A component that displays brief notifications.
  • tokenizer - A component that converts input into tokens.
  • toolbar - A component that displays a set of actions or tools.
  • transform-button - A button component that transforms when clicked.
  • treeview - A component that displays hierarchical data in a tree structure.
  • typer - A component that creates a typing animation effect.
  • v-menu - A vertical menu component.
  • validator - A component that validates form inputs.
  • vegas - A component that creates fullscreen slideshows.
  • video-player - A component that provides video playback functionality.
  • viewport-check - A component that checks if elements are in the viewport.
  • wheelpicker - A component that allows selection from a wheel interface.
  • window - A draggable and resizable window component.
  • wizard - A component that guides users through a sequence of steps.
  • wizard-classic - A classic styled wizard component.
  • working-tree - A component that displays a hierarchical tree of items that can be worked with.