Assets 2


  • Sidebar: fix z-index
  • Docs: fix mistakes in table options
  • Utils css: fix class m4-cloak
  • Validator: add argument data to events data-on-validate-form, data-on-error-form, data-on-submit. Data is a object and contains pairs: input-name: input-value for form elements.
  • Popover: fix close popover
  • v-menu: fix drop down for v-menu -> v-menu
  • Validator: fix for issue #1254
  • Utils: add functions parseCard(val), parsePhone(val). Functions remove all not numeric chars from value
  • Table: add data formats card, phone
  • List: add data formats card, phone
  • Sorter: add data formats card, phone

@olton olton released this Nov 4, 2018 · 16 commits to master since this release

Assets 2


  • Input: remove -webkit-autofill background color
  • App bar: fixed class ml-auto
  • v-menu: add service class for-dropdown, added automatically, when add role `dropdown
  • d-menu, v-menu: remove min-width for item
  • d-menu: fix icon position in item
  • Cloak: add class .m4-cloak for body to remove blinking initiated components
  • Cloak: add meta tag metro4:cloak can receive values: show, fade (default)
  • Cloak: add meta tag metro4:cloak_duration can receive integer values, default 500. Use for fade
  • Dialog: add element as context to events
  • Popovers: fix minor bugs, issue #1179, issue #1238
  • Popovers: add attribute data-close-button="true|false""
  • Popovers: now you can change popover content and position at runtime with attributes data-popover-text, data-popover-position
  • Popovers: add attribute data-cls-popover-content
  • Popovers: change context for events to element for which popover is created
  • Colors: add branding color classes bg-* for facebook, twitter, github, gitlab, amazon, bootstrap
  • Select: fix add, remove focused class
  • Select: add class input-large
  • Spinner: add class input-large
  • Tag input: add class input-large
  • Tag input: add auto resize to input
  • Table: add methods deleteItem(field_index, val), deleteItemByName(field_name, val). Function return list instance. Val can be function or primitive value. Method can not redraw list, to redraw call method draw().
  • Utils: add function arrayDeleteByMultipleKeys(arr, /*array*/ indexes). Function return new Array.
  • Toolbar: fix for vertical layout
  • Splitter: add attribute data-save-state, required element ID. If true, panes sizes stored into Storage
  • Table: add method setData(obj)
  • Table: add method setHeads(obj), setHeadItem(obj)
  • Table: add method setItems(obj)
  • List: add method deleteItem(val). Function return list instance. Val can be function or primitive value. Method can not redraw list, to redraw call method draw().

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.
If you'd like to join them, please consider:

@olton olton released this Oct 21, 2018 · 36 commits to master since this release

Assets 2


  • Image compare: fix for touch devices
  • Image magnifier: fix for touch devices
  • Window: fix _setPosition method
  • Buttons: fix size for dropdown-button, split-button and info-button
  • Utils: add function iframeBubbleMouseMove(iframe)
  • Input: add class .input-large
  • Splitter: new component
  • Popovers: fix minor bugs (forum issue)

@olton olton released this Oct 14, 2018 · 48 commits to master since this release

Assets 2


  • Sidebar: remove scroll-y from sidebar, add scroll-y to sidebar-menu
  • Countdown: refactoring structure, add animation effects: slide, fade, zoom
  • Hero: minor upd styles for background image
  • Html container: new component, include HTML snippets in HTML element
  • Utils: add function isLocalhost()
  • Docs: upd for using htmlcontainer component
  • Window: fix gradually disappear for children when window is hiding, issue #1222
  • Utils: add methods getCursorPosition(...), getCursorPositionX(...), getCursorPositionY(...)
  • Image compare: new component
  • Image magnifier: new component

@olton olton released this Sep 30, 2018 · 66 commits to master since this release

Assets 2


  • Time picker: fix method val for issue #1221
  • Calendar: fix method setToday for issue #1215
  • ListView: fix method _createNode for structure option, issue #1220
  • ListView: fix methods insertBefore, insertAfter
  • Tabs: change expand behavior
  • Tabs: fix expand/collapse behavior
  • Select: add attribute data-cls-option-active
  • Countdown: fix performance and minor bugs
  • Countdown: fix deferred start setup
  • Countdown: add methods resume(), reset()
  • Notify: fix firing method onClose
  • Notify: add methods onNotifyCreate, onAppend
  • Input: fix custom search button click
  • Calendar picker: add attribute data-null-value. If this attribute false and value empty, used current date
  • Calendar picker: fix for null value, issue #1217
  • Accordion: add attribute data-material='true'
  • Switch: add attribute data-material='true'
  • Mif: add new icons 50+
  • Bottom navigation: add new CSS component
  • Bottom sheet: add new component
  • Items list: add new CSS component
  • Feed list: add new CSS component
  • Group list: add new CSS component
  • Head bar: add new CSS component
  • Material tabs: add new component
  • Material input: add new component
  • Chips: add new CSS component
  • Swipe: add new JS component

@olton olton released this Sep 23, 2018 · 92 commits to master since this release

Assets 2


  • Select: fix native onchange event triggering, issue #1198
  • Calendar: add attributes data-prev-month-icon, data-next-month-icon, data-prev-year-icon, data-next-year-icon
  • Calendar: fix rendering for ie, issue #1202
  • Calendar picker: add data-prepend attribute, issue #1201
  • Calendar picker: fix close when clicked dropdown button issue #1210
  • Calendar picker: fix disabled white text is unreadable, issue #1208
  • Calendar picker: fix init null value, issue #1206
  • Resizeable: fix resize, issue #1205
  • Table: add attribute data-filters-operator="and|or"
  • Table: fix init filters, defined in attribute data-filters
  • Table: rename filterMinLength to searchMinLength
  • Table: rename filterThreshold to searchThreshold
  • Table: add attribute data-search-fields, issue #1195
  • Table: add attributes data-cls-row, data-cls-even-row, data-cls-odd-row
  • Table component: full rewrite docs

Project need financial support

@olton olton released this Sep 16, 2018 · 111 commits to master since this release

Assets 2


  • Appbar: remove classes app-bar-expanded-* and add attributes data-expand, data-exapnd-point
  • Table: fix hidden class applying. issue #1194
  • Table: add attribute data-cls-cell-wrapper
  • Mif: set line-height: 1 for mif-*x classes
  • File: add mode drop
  • Select: fix for the long captions
  • Select: add attribute data-cls-select-input
  • Media players: set context for events to HTML element
  • Builder: add Metro 4 Builder

@olton olton released this Sep 9, 2018 · 117 commits to master since this release

Assets 2


  • Docs: refactoring docs for form components
  • Resizable: add attributes data-min-width, data-max-width, data-min-height, data-max-height, data-can-resize, issue #1100
  • Input: add events onClearClick, onRevealClick
  • Input: add methods clear(), toDefault()
  • Input: rename data-cls-element to data-cls-component
  • Input: add attribute data-cls-custom-button
  • Input: add attribute data-history-divider and methods getHistory, setHistory, getHistoryIndex, setHistoryIndex
  • Input: add search input functionality
  • Search: remove search plugin
  • Tag input: add observing attribute value
  • Tag input: fix method val()
  • Spinner: add events onArrowUp, onArrowDown, onArrowClick
  • Spinner: add events onPlusClick, onMinusClick, onButtonClick
  • Select: add event onItemSelect
  • Select: add method reset(), getSelected()
  • Select: fix method val(...)
  • Textarea: add methods clear(), toDefault()
  • Textarea: fix data-append attribute
  • Calendar picker: fix error when value attribute is empty, issue #1191
  • Calendar picker: add attributes data-dialog-mode, data-dialog-point, data-dialog-overlay, data-overlay-color, data-overlay-alpha
  • Calendar: add compact class
  • Calendar: for wide mode now use attributes data-wide or data-wide-point
  • Extension: add method, if not exists, Array.from

Project need your financial support

@olton olton released this Sep 3, 2018 · 148 commits to master since this release

Assets 2


  • Table: fix default padding for th and td
  • Select: fix custom classes apply for selected options for select with multiple option, issue #1184
  • Input: add history option, issue #1162
  • Spinner: new component, issue #1180
  • AppBar: fix error creating hamburger when background-color is rgba or transparent, issue #1172
  • Slider: add event onChange
  • TreeView: change context for events
  • Calendar: any input format with attribute data-input-format, issue #1186
  • Calendar picker: any input format with attribute data-input-format, issue #1186
  • Date: add extension function getWeek() - return week number

Project need your financial support

@olton olton released this Aug 26, 2018 · 163 commits to master since this release

Assets 2


  • Change contributing rules
  • Tabs: add method open(tab_num | tab_el). Tab number counting from 1. Tab element - li HTML element or $("li") jquery wrapper
  • Tabs: add methods next(), prev()
  • Popover: add attribute data-popover-timeout. Timeout before popover show.
  • Sidebar: add method isOpen to object Metro.sidebar
  • Table: fix method loadData for string value from server
  • Table: fix minor bugs
  • Select: for multiple add attributes data-cls-selected-item, data-cls-selected-item-remover
  • TagInput: add attribute data-tag-trigger. The attribute must contain integer values for keyCode for triggering tag creating event. Default: "13,188" - Enter and comma.
  • ListView: fix checkbox position for selectable mode
  • ListView: add attribute data-check-style. Value must be 1 or 2
  • ListView: add methods getSelected(), selectAll() or selectAll(false) (for clear), clearSelected()
  • Checkbox: add observing checkbox style attribute
  • Radio: add observing checkbox style attribute
  • Validator: add function notequals. Input value can't be equal to other input
  • Validator: add function equals. Input value can be equal to other input. Different from compare - it use trim() for value
  • Sizing: fix width classes w- for all media breakpoints

Project need your financial support