Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!
MIT License
Bot releases are visible (Hide)
Published by olton almost 4 years ago
no-gap
for split-button
.val(...)
, issue #1652data-repeat
.content
wrapping into the block
when defining content
property.parse()
.color
, now you can use any color string format: rgb, hex, ...bars
, atom
.hex2rgba()
, getTransformMatrix()
, computedRgbToHex()
, computedRgbToRgba()
, computedRgbToArray()
, hexColorToArray()
, hexColorToRgbA()
tr-TR
turkish locale.select2
, datatables
onBeforeMenuOpen
, onBeforeMenuClose
, fixed firing events onMenuOpen
, onMenuClose
.data-cls-button
, data-cls-ok-button
, data-cls-cancel-button
to modify picker buttons style, issue #1659.data-cls-button
, data-cls-ok-button
, data-cls-cancel-button
to modify picker buttons style, issue #1659.ul
default position to initial, issue #1660.drop-down-left
, .drop-down-right
, .drop-up-left
, .drop-up-right
.position
, position-ext
, z-index
.isColor(...)
, if need, use Metro.colors.isColor()
.embedObject(...)
, if need, use $(...).wrap()
.randomColor(...)
, if need, use Metro.colors.random()
.isVideoUrl(...)
, added twitch
.Published by olton about 4 years ago
$.isLocalhost([hostname])
, true if host is localhost.$.localhost
, true if current location is localhost.$.touchable
, true if device detected as touchable.appendText(...any_text...)
, prependText(...any_text...)
.onClick
renamed to onTileClick
(attribute data-on-click
=> data-on-tile-click
), issue #1636arrayToCSV(array, filename, options)
.isLocalhost
, if you need, use $.localhost
or $.isLocalhost([host])
.isArray
.isTouchDevice
. if you need, use $.touchable
.val()
. Now you can use for new value(s) array
or simple value
.append(val)
. For append tag(s) to existing value.data-cls-option-group
, issue #1640data-width
, now this attribute applied to max-width
css property, issue #1647shadowed
, class defined in shadow.less
, issue #1643data-show-group-name="true|false"
(default - false), data-short-tag="true|false"
(default - true), issue #1642Published by olton about 4 years ago
data-role
with $('@rolename')
hide
for detecting initial display
value$.device
, true for mobile a device.Component._fireEvent(...)
method for firing component events data-on-*
onMonthChange
when user clicks on outside day, issue #1589pos(top, left)
, top(v)
, left(v)
, width(v)
, height(v)
, issue #1590pos(top, left)
, top(v)
, left(v)
, width(v)
, height(v)
data-on
, data-off
attributes to show switch text statetoggle(state)
. The state
must be -1
(indeterminate), 0
(unchecked), 1
(checked) or undefined
(toggle between checked and unchecked), issue #1586toggle(state)
. The state
must be 0
(unchecked), 1
(checked) or undefined
(toggle between checked and unchecked), issue #1586attr
to custom button definition. This attribute must be a object
with pairs key: value
where key
- attribute name, value
- attribute value, issue #1592attr
to custom button definitionattr
to custom button definitiondata-boundary-restriction="true|false"
, issue #1595z-index
, issue #1605data-drop-up=true|false
(default false
), data-check-drop-up=true|false
(default: false
), issue #1604data-drop-up=true|false
(default false
), data-check-drop-up=true|false
(default: true
), issue #1604input
. To added metro style to input without role input
, use class metro-input
.input
. To added metro style to input without role input
, use class metro-input
..neb
, .neb2
, .h-center
, .v-center
onAutocompleteSelect
. You can define this event with an attribute data-on-autocomplete-select
. The event receives a one argument - selected value. issue #1615.data-max-height=0..n
, now you can set max height for textarea component.metro-common.css
, metro-reset.css
, issue #1609data-btn-max=false
and user use double-click on then window caption, issue #1625min-width=0
, issue #1626_runtime()
for updating attribute data-role
.data-label
. If this attribute defined, label
element for input will be created automatically.data-label
. If this attribute defined, label
element for input will be created automatically.data-label
. If this attribute defined, label
element for input will be created automatically.data-label
. If this attribute defined, label
element for input will be created automatically.external
, new-tab
ColorPrimitive
with color primitive objectsmix(...)
: ColorType.mix(color)
and Colors.mix(color1, color2)
. This method allows you to mix colors.channel(channelName, val)
, channels(obj)
. This method change specified color channel. Color must be a required format.enable()
, disable())
, toggleState()
, added observing for prop disabled
, issue #1633enable()
, disable())
, toggleState()
, added observing for prop disabled
, issue #1633Published by olton over 4 years ago
setAutocompleteList(array|string)
, issue #1576.scrollbar-type-1
, .scrollbar-type-2
, .scrollbar-type-3
, .scrollbar-type-4
gap-*
, where *
is one of 0, 8, 16, 24, 32, 40
in pixelstoggleMode()
to toggle between expanded and compacted modes, issue #1538data(newOptions, selected, delimiter)
added second argument. Must be a string
or array
, if selected
is a string
, you can use delimiter
argument to split string into array, issue #1497Published by olton over 4 years ago
_fireEvent
push __this
to arguments. __this
contains HTMLElementgithub()
for executing callbackdata-from
, data-prefix
, data-suffix
. Prefix and suffix must be a plain text.attrchange
when component attribute was ben changed. e.detail
contains an object {attr, newValue, oldValue, __this}
.hotkeybonded
when hotkey for component was ben bonded. e.detail
contains an object {__this, hotkey, fn}
.create
when init. The e.detail
contains an object {name, __this}
.component-create
when a component was ben initialized. The e.detail
contains an object {element, name}
.makeRuntime
calling, issue #1574resizable
italic
and underline
text classes, issue #1577Published by olton over 4 years ago
/
to _getRelativeValue()
.fire
. Now main is constructor CustonEvent
, for old - createEvent
wrap
, wrapAll
, wrapInner
. The method puts elements inside the wrapper and return wrapper(s)
.throw Error
to console.warn
when selector is #
or .
process
and web workers
compare
, equals
, notequals
to work not inside a form, issue #1542form-rtl
, accordion-rtl
less files. RTL Styles moved to component style.pt-BR
Brazilian Portuguese languageMetro.createToast()
. This eq to Metro.toast.create()
on[Component]Create
now have context a HTMLElement
and receive $(HTMLElement)
as argumentkeypad
, created at runtime
, issue #1547isType
camelCase()
, dashedName()
. Use String.camelCase
or $.camelCase()
and String.dashedName())
or $.dashedName()
.onTick
, onSecond
includes()
, camelCase()
, dashedName()
, shuffle()
includes()
onNodeDblclick
, issue #1453ColorJS
color
variable. Var can be defined as var c = new Color(...)
or var c = new Metro.Color(...)
zoom
, swirl
animate-*
for values for attribute data-effect
metro4:init:mode
. Now Metro is ALWAYS initialized after the content has been loaded.ie.less
. Styles moved to components styles.selectByAttribute(attrName, attrValue, true|false)
for select/deselect items, issue #1554skip
, issue #1557clsPrepend
, issue #1558Metro.createToast(message, options)
. Where options
is a plain object
.dragContext
, you can set it for access to any object with drag events, issue #1565context
for events onDragStart
, onDragStop
, onDragMove
, issue #1565dialog-mode
clsTabsListItemActive
, issue #1568da-DK
, issue #1570Published by olton over 4 years ago
animate
function changed. Now function receives one argument. Also, you can use old syntax :)contentType
. If this param has value false
, Content-type
can't be defined.:visible
to method is
. Example: $(...).is(':visible')
$.random(array | a, b)
, $.getUnit(a)
, $.strip(where, what)
, $.hasProp(obj, prop)
, $.dashedName(val)
$(...).removeClassBy(mask)
2020.1
. New version not compatibility with 4.3.6onResizeWindow
. Setup this event with prop data-on-resize-window
or event $(...).on('resizewindow', ...)
, issue #1516skip to page
functionality, issue #1511data-show-skip
, data-table-skip-title
, data-skip-wrapper
, data-cls-table-skip
, data-cls-table-skip-input
, data-cls-table-skip-button
data-on-skip
lists
, reset
isFloat
function, issue #1518whatsapp
icon, issue #1510audio-button
prepend
, append
for input-small
, input-large
. With multiple
, append
and prepend
will not displayed.prepend
, append
for input-small
, input-large
. Issue #1522metro-reset.css
, metro-common.css
, metro-components.css
as standalone.animate
function to draw stroke-dasharray
animate
function to drawreset
on form in drop
mode, issue #1524audio-player
video-player
select2
, datatables
move to components and include to maindisplay: block
option
, issue #1527random
, to get random value from an array or two values, use $.random(array | a, b)
from m4q
uniqueID
, to get unique GUID, use $.uniqueID(prefix)
from m4q
formData
, to get form data as array, use $.serializeToArray(form)
from m4q
and $.serialize(form)
to get stringify value with &
dividerstrToArray
, to transform string to array, use String.prototype method String.prototype.toArray(delimiter, type, format)
callback
, execute function or code, use method Utils.exec(fn, args, context)
data-menu-scrollbar="true|false"
. Attribute enable or disable scrollbar in the sidebar menu, issue #1528tag-input
, select
, can be used as standalone.ribbon-icon-button
, ribbon-tool-button
text-decoration
for anchors (a
) inside any types of menusMetro.cookie
. Contains methods: setCookie()
, getCookie()
, delCookie()
cross-light
, document-file-*
(64)d-menu
navview-menu
in compacted
modePublished by olton over 4 years ago
1.0.6
contentType
. If this param has value false
, Content-type
can't be defined.RGB
, RGBA
data-cls-drop-container
important
to .drop-left
, .drop-right
, .drop-up
classesformatMask
for fields defined in table head thead
half
and one-third
constantsonDrawEvent
, onDrawGlobalEvent
, onDrawStream
data-show-child-count
data-value
to set init input value, issue #1506data-wheel
now true by defaultdata-wheel-step
to define scroll step for horizontal scrolling with mousePublished by olton almost 5 years ago
1.0.5
trigger
, now this is a synonym of fire
trigger
definingclear button
with attributes clearButton
, clsClearButton
, clearButtonIcon
clsComponent
, clsInput
onClear
data-sort-initial
to sorts on create component, issue #1475data-static
and static mode for data-static='true'
or if present attribute readonly
toggleStatic([true|false])
select-input
, issue #1477input-large
, input-small
classeskeyup
to keydown
for tag trigger eventonTagTrigger
Backspace
, you can disable it with attribute data-backspace='false'
data-timeout
for set timeout before creating componentdata-[componentName]-deferred=[ms]
. Example: <div data-role='draggable' data-draggable-deferred='2000'>...</div>
data-start-on-viewport
. If attribute value is true
, counter started after element showed in viewport. You can combine this with data-timeout
data-filter='false'
clear
for mode dropzone
button
Published by olton almost 5 years ago
append
, prepend
to one definition for IE$.script
, $.fn.script
to execute scripts from element or create script object$.fn.append
, $.fn.prepend
now support script tag processingdata
if second argument withData
is true
- $(el).clone(true, true)
hyphen
or in camelCase
notation. Example: mouse-down
, accordionCreate
$.json
if returned value can't be parsedpost
for object
removeEventListener
metro-animations
.flip-card
.post-card
font-size
to 14px
, add text-ellipsis
.stop-pointer
data-role='button-group''
and data-role='buttongroup''
are equivalent.viewPath
for getting view
from serveremptyTableTitle
readonly
readonly
viewPath
for saving view
on serverapp-bar-menu
behavior when user resize a windowMetro.window.create()
onMenuOpen
, onMenuClose
, onMenuExpand
, onMenuCollapse
Published by olton almost 5 years ago
data-show-value="true"
, data-value-position="free|center"
data-show-label="true|false"
, data-label-position="before|after"
, data-label-template="Value is %VAL%"
clear()
, issue #1426data-cell-wrapper="true"
data-show-week-number
open
for undefined optionsmax-height
for app-bar-menu
opened with hamburger
to visible viewport-disabled
Metro4
init after content was loaded. If you need to switch to old init method, use metro4:init:mode
with value immediate
display
change from inline-flex
to inline-block
, issue #1451on
onNodeDblClick
event, issue #1453data-source
. Value for attribute must be a object name.Published by olton almost 5 years ago
data-hotkey
and attr href
, issue #1420function.name
property for IE11, issue #1425addItem([...], redraw)
, addItems([...], redraw)
, issue #1426data-cls-drop-list
now override default class d-menu
if definedmargin: 0; padding: 0; list-style: none inside;
onDataSaveError
metro4:init:mode
. The value must be immediate
or contentloaded
, default - immediate
. If value is contentloaded
and meta tag metro4:init
not equal false
, Metro 4 will be initiate after the content was loaded.decimalSeparator
and thousandSeparator
in table head and globaldata-head
(object name, define table header), data-body
(object name, define table data)data-static
. If true
, search, pagination, info, rows count will be disabled and will not showing.size(str)
for change panel sizes at runtime, add observing for attribute data-split-sizes
for change panel sizes at runtimechange
for checkboxesh-auto-*
Published by olton about 5 years ago
data-hotkey
and attr href
, issue #1420function.name
property for IE11, issue #1425addItem([...], redraw)
, addItems([...], redraw)
, issue #1426data-cls-drop-list
now override default class d-menu
if definedmargin: 0; padding: 0; list-style: none inside;
onDataSaveError
metro4:init:mode
. The value must be immediate
or contentloaded
, default - immediate
. If value is contentloaded
and meta tag metro4:init
not equal false
, Metro 4 will be initiate after the content was loaded.decimalSeparator
and thousandSeparator
in table head and globaldata-head
(object name, define table header), data-body
(object name, define table data)data-static
. If true
, search, pagination, info, rows count will be disabled and will not showing.size(str)
for change panel sizes at runtime, add observing for attribute data-split-sizes
for change panel sizes at runtimechange
for checkboxesPublished by olton about 5 years ago
metro4
added into head
next[Year, Month]
clickeddisabled
to option to create disabled option, issue #1413tiles-grid
when tile placed in specific columnPublished by olton about 5 years ago
data-length
to data-key-length
margin-top
for lists inside a lists, ex: ul > ul
fadeIn
, fadeOut
data-expanded
to data-expand
start screen
remark
with accent
colorcypress
mouseMove
data-readonly
and method toggleReadonly
tfoot
checkRuntime
to componentsdata-empty-table-title
, data-cls-empty-table-title
for issue #1403destroy
method to components. This method remove all event handlers and return core elementdata-add-empty-value
(default: false), data-empty-value
(default: empty string)data-placeholder
data-clear-button
(default: false)data-show-child-count
Published by olton about 5 years ago
icon-box
, more-info-box
, skill-box
, social-box
open(tab_num)
for issue #1399change
event on SafariPublished by olton about 5 years ago
data-exclaim
for defining exclamation symbolPublished by olton about 5 years ago
change
event, add trigger event clear
when clear button is pressedPublished by olton over 5 years ago
data-locale
data-format
isLocalhost
integer
and float
rules, issue #1388config
100%
Published by olton over 5 years ago
line-height: 1.5
for p