Metro 4 Components Library
Sleek, intuitive, and powerful front-end framework for faster and easier web development. Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.
Explore Metro 4 docs »
Metro 4 is an MIT-licensed open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these
awesome Backers.
License and Premium Features
This project licensed under the MIT license. In addition, SUPPORT PACK is available for an annual subscription on XS:CODE and for a Patreon Patrons.
SUPPORT PACK includes an Extra time for priority support by email and other options.
Donation on Patreon
Community
Contributing
All contributions are welcome. Learn more about how you can contribute to this project here.
Important! Before you create Pull Request, you must sign CLA!
Docs
Please click here for Documentation and Demo.
Releases
Metro 4 releases frequently. I Am create release when there are significant bug fixes, new APIs or components. The usual frequency of release of the new version is one week on Sundays.
LTS
Long term support of older versions of Metro 4 does not currently exist. If your current version of Metro 4 works for you, you can stay on it for as long as you'd like. If you want to make use of new features as they come in you should upgrade to a newer version.
Browser Compatibility
Latest 2 |
Latest 2 |
Latest 2 |
Latest 2 |
Latest 2 |
Old version
Metro UI CSS 3.x you can find in a repo Metro-UI-CSS-3
Metro UI CSS 2.x you can find in a repo Metro-UI-CSS-2
Metro UI CSS 0.x you can find in a repo Metro-UI-CSS-095
Documentation and Demo for V3: metroui.org.ua/v3.
Documentation and Demo for V2: metroui.org.ua/v2.
Documentation and Demo for V0: metroui.org.ua/v0.
Thanks
Thanks to all. Special thanks to all those who financially supported the project.
Credits
You can read about credits here
2012-2020 © Copyright by Serhii Pimenov. All Rights Reserved. Created by Serhii Pimenov.
Announcement of a new version of the Metro UI CSS
The new version (1.0) will be available in the next 2 weeks.
In new version:
Conflict with str.search() javascript function
Hello.
First of all congratulate them for this great job.
I work with Asp.Net Core 3.1 (Razor Pages) and I have a piece of code that gives an error when I load metro.min.js.
If I comment the line that loads metro.min.js or put my piece of code before loading metro.min.js there is no error.
The error is as follows: (index):352 Uncaught SyntaxError: Invalid regular expression: / `
` /: Nothing to repeat at String.search ()
at (index):352
My piece of code is in _Layout.cshtml and is as follows:
`
`
Cannot get Metro UI navigation bar dropdown to work
I'm having trouble getting the navigation bar to work. I'm using Jquery ver 2.1.1. I've validated that jquery is working (added a little alert for window load). The navigation bar itself is rendering, but the dropdown just does not work. I'm using Visual Studio and installed the package via nuget.
JS Files included: metro.min.js jquery-2.1.1.js
CSS Files: metro-bootstrap.css metro-bootstrap-responsive.css
Please help.
Dialogs not working in 4.3
Hi after yesterday's update dialogs stop working, and when I try to open dialog, I only get message "Element not contain role dialog! Please add attribute data-role="dialog" to element #idDialog". There is data-role="dialog" in dialog for sure, as dialogs worked in older versions and rollback to ver. 4.2 helped as well.
Metro UI using Vue js
Hello sir Can i use this framework in Vue js? the datepicker and calendar seem not working in vue js but other input is working..
Calendar Picker Component Bug
Describe the bug When selecting a date it chooses 2 dates.
To Reproduce https://codepen.io/RodolfoXDR/pen/YzQGzYX
Expected behavior Work as on documentation
Screenshots
Desktop (please complete the following information):
set Content Dialog not centered
When I open a Dialog with setContent(), it loads onto the bottom of the screen. When i minimize and maximize the browser or change browser window width or height, the dialog centers properly.
Is there a way to redraw or refresh dialog position before opening? or is there a solution??
Thank you
Button 'X' to clear an input doesnt' work, doesn't clear else submit the form
Hi everybody, I'm using the class "input-control text" and I need a "
Dropdown menu in context "user-login"
Please consider the following code:
The idea is a context menu that appears when the avatar/username is clicked, but this concept seems to not work. Any thoughts?
Treeview event not working metro 4
The below code is for metro 3 and working fine. Not working in metro 4 because of backward compatibility issues. Please guide me to work with treeview in metro 4.
html.txt
Javascript
bankingQ.events.on(document, 'treeNodeToggled', 'contextItem', function (e, expanded) {
Dialog
Очень нравятся ваши работы! Пытаюсь потестить, подскажите в чем проблема с dialog выдает вот такою ошибку Uncaught ReferenceError: addTouchEvents is not defined ...и если я правильно понимаю обработка форм и прочее можно размещать, здесь: onShow: function(_dialog){ Спасибо!
METRO UI Builder minify code does not work
Describe the bug The METRO UI Builder at https://builder.metroui.org.ua/ has switches to minify code and to include source maps. These buttons do not have an effect: The code is neither minified (I tried both switch position) nor there is a source map includes (which make sense only if the code was minified, of course)
To Reproduce Go to https://builder.metroui.org.ua/build.html and try to download minified code.
Expected behavior Minified code ad source map in the zip-file, if the appropriate switch position has been set
Reflected xss in Notify.js
FYI we have notified you many months ago, by email that there is an vuln in your code, but you did not reply nor fixed the issue. So thats why i'm posting the issue here.
If you think this is already fixed, then see this ticket, as an open disclosure.
Describe the bug It is possible, to run js when triggering an notification, when the notification gets the body/value of the parameter.
To Reproduce if you have an parameter that triggers an notification for metro, then just put "" into the parameter value. and you should see an alert poping up.
In our case, the problem was when searching for an url with a parameter, and the url was not found it would display the parameters content like "- not found"
How to fix We fixed it, by just replacing the ".html" to ".text"
Additional context Thanks for reading, if you have any questions, then feel free to ask.
Date format in Calendarpicker not working
Describe the bug In the latest build, when you change the output date format from the default YYYY-mm-dd to anything else, the result is not correctly formatted.
To Reproduce Create a input with data-role="calendarpicker", set data-format="%d %b %Y" or data-format="%d %B %Y" . Now when you pick a date from the calendar, the result is %3 %b %undefined or %2 %B %undefined. The same problem can be seen in the example here: https://metroui.org.ua/calendarpicker.html
Expected behavior The date should be formatted correctly using the data-format format.
Screenshots

Calendar wrong dates displayed
Describe the bug When loading the calendar the dates displayed in the month view are shifted incorrectly by one.
To Reproduce Load any of the source examples for the calendars and you will see.
Expected behavior I noticed just by checking the calendar in my computer and because it's highlighting the wrong day.
Screenshots
function show()
Describe the bug functions show()/hide toggle between display:none and display:block Unfortunately, when hidding a table row, the function show should go back to display:table-row