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 hidden (Show)
Published by olton almost 6 years ago
m4-cloak
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.v-menu
-> v-menu
parseCard(val)
, parsePhone(val)
. Functions remove all not numeric chars from valuecard
, phone
card
, phone
card
, phone
Published by olton almost 6 years ago
ml-auto
for-dropdown
, added automatically, when add role `dropdownmin-width
for item.m4-cloak
for body
to remove blinking initiated componentsmetro4:cloak
can receive values: show
, fade
(default)metro4:cloak_duration
can receive integer values, default 500
. Use for fade
data-close-button="true|false""
data-popover-text
, data-popover-position
data-cls-popover-content
element
for which popover is createdbg-*
for facebook, twitter, github, gitlab, amazon, bootstrapfocused
classinput-large
input-large
input-large
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()
.arrayDeleteByMultipleKeys(arr, /*array*/ indexes)
. Function return new Array.data-save-state
, required element ID
. If true
, panes sizes stored into Storage
setData(obj)
setHeads(obj)
, setHeadItem(obj)
setItems(obj)
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:
Published by olton almost 6 years ago
iframeBubbleMouseMove(iframe)
.input-large
Published by olton about 6 years ago
isLocalhost()
htmlcontainer
componentgetCursorPosition(...)
, getCursorPositionX(...)
, getCursorPositionY(...)
Published by olton about 6 years ago
val
for issue #1221setToday
for issue #1215_createNode
for structure
option, issue #1220insertBefore
, insertAfter
expand
behaviordata-cls-option-active
resume()
, reset()
onClose
onNotifyCreate
, onAppend
data-null-value
. If this attribute false and value empty, used current datedata-material='true'
data-material='true'
Published by olton about 6 years ago
onchange
event triggering, issue #1198data-prev-month-icon
, data-next-month-icon
, data-prev-year-icon
, data-next-year-icon
data-prepend
attribute, issue #1201data-filters-operator="and|or"
data-filters
filterMinLength
to searchMinLength
filterThreshold
to searchThreshold
data-search-fields
, issue #1195data-cls-row
, data-cls-even-row
, data-cls-odd-row
Project need financial support
Published by olton about 6 years ago
app-bar-expanded-*
and add attributes data-expand
, data-exapnd-point
hidden
class applying. issue #1194data-cls-cell-wrapper
line-height: 1
for mif-*x
classesdrop
long
captionsdata-cls-select-input
HTML element
Published by olton about 6 years ago
data-min-width
, data-max-width
, data-min-height
, data-max-height
, data-can-resize
, issue #1100onClearClick
, onRevealClick
clear()
, toDefault()
data-cls-element
to data-cls-component
data-cls-custom-button
data-history-divider
and methods getHistory
, setHistory
, getHistoryIndex
, setHistoryIndex
search input
functionalitysearch
pluginvalue
val()
onArrowUp
, onArrowDown
, onArrowClick
onPlusClick
, onMinusClick
, onButtonClick
onItemSelect
reset()
, getSelected()
val(...)
clear()
, toDefault()
data-append
attributedata-dialog-mode
, data-dialog-point
, data-dialog-overlay
, data-overlay-color
, data-overlay-alpha
compact
classdata-wide
or data-wide-point
Project need your financial support
Published by olton about 6 years ago
th
and td
multiple
option, issue #1184history
option, issue #1162hamburger
when background-color is rgba
or transparent
, issue #1172onChange
data-input-format
, issue #1186data-input-format
, issue #1186getWeek()
- return week numberProject need your financial support
Published by olton about 6 years ago
open(tab_num | tab_el)
. Tab number counting from 1. Tab element - li
HTML element or $("li")
jquery wrappernext()
, prev()
data-popover-timeout
. Timeout before popover show.isOpen
to object Metro.sidebar
loadData
for string value from serverdata-cls-selected-item
, data-cls-selected-item-remover
data-tag-trigger
. The attribute must contain integer values for keyCode
for triggering tag creating event. Default: "13,188" - Enter and comma.checkbox
position for selectable
modedata-check-style
. Value must be 1
or 2
getSelected()
, selectAll()
or selectAll(false)
(for clear), clearSelected()
notequals
. Input value can't be equal to other inputequals
. Input value can be equal to other input. Different from compare
- it use trim()
for valuew-
for all media breakpointsProject need your financial support
Published by olton about 6 years ago
showTableInfo
, showPagination
when wrappers defineddata-check
and data-rownnum
<a>
have a link in href
attributeclearSelected()
toDay()
fixed-layout
data-filter-threshold
attribute, this is a timeout before searching startdata-template
for option
. You can use this attribute to define html wrapper for option text in format ...any...$1
. Where $1
used for replace by option text.data-cls-drop-list
to add additional class to drop down list.data-append
and minor css fixesselect.less
, input.less
, textarea.less
, input-file.less
data-style="2"
to your radio component.data-style="2"
to your checkbox component.Help the project, become a backer
https://github.com/olton/Metro-UI-CSS/blob/master/BACKERS.md
Published by olton about 6 years ago
review
to methods reload
and loadData
. If true
, table view will be recreated from init values.show
data-default-value="..."
for set default if val is empty and set to this when click clear button.subcompact
to pair to .compact
data-cell-wrapper
. This class add wrapper to cell data with no wrap
and no overflow
props..compact
and .subcompact
Help the project, become a backer
https://github.com/olton/Metro-UI-CSS/blob/master/BACKERS.md
Published by olton about 6 years ago
Metro.export
. Now you can export any HTML tables
to CSV
with method Metro.export.tableToCSV(table, filename)
copy(el)
for copying element to clipboardbool(val)
. This func return true if value one of: true
, 'true'
, 1
, '1'
, 'on'
, 'yes'
show
for view have string type 'true'
or 'false'
heads
for custom filter functioncompact
class{id: table_id, view: table_view}
export(to, mode, filename, export_options)
. Argument to
currently must value CSV
. Argument mode: all
, checked
, view
, all-filtered
resetView(save)
reset table view to defaultgetView()
return current view objectgetHeads()
return table internal headsclearSelected(redraw)
. This method uncheck rows and redraw table if your needdata-to-top='true|false'
, data-to-bottom='true|false'
for sticky dialog to top or bottom side.Help the project, become a backer
https://github.com/olton/Metro-UI-CSS/blob/master/BACKERS.md
Published by olton about 6 years ago
data-append
attributetoDate(mask)
nearest(val, prec, down)
for search for the nearest integer, a multiple of requiredsteps
attributes data-hours-step
, data-minutes-step
, data-seconds-step
. issue #1122data-min-date
, data-max-date
type=time
data-filter-min-length
for number of symbols inputs and start searchingdata-rownum="true"
data-check="true"
data-check-type="radio"
data-check-store-key="..."
used for store selected rows in the storagedata-view-save-mode="client|server"
used for store table viewdata-view-save-path="storage_key|url"
used for store table viewdata-locale
attributeopenInspector(true|false)
, toggleInspector()
to show/hide table inspectorgetFilteredItems()
, getSelectedItems()
, getStoredKeys()
onDrawCell
, onAppendCell
, onAppendRow
, onViewSave
, onViewGet
, onCheckDraw
Published by olton over 6 years ago
-1
(show all rows)data-show-all-pages
to data-pagination-short-mode
Published by olton over 6 years ago
compact-{media}
and normal-{media}
where {media}
is one of sm
, md
, lg
, xl
, xxl
Published by olton over 6 years ago
col-*
and row-*
classes for tiles grid issue #1133-1
value for data-rows
and data-rows-steps
data-all-records-title
attributetr
Published by olton over 6 years ago
data-thousand-separator
, data-decimal-separator
issue #1129data-thousand-separator
, data-decimal-separator
issue #1129data-thousand-separator
, data-decimal-separator
issue #1129colspan
option issue #1129data-cls-column
a
in tab have a valid formed url
in href attributePublished by olton over 6 years ago
data-hint-always=true
when showing others hits issue #1126data-data
.primary
, .secondary
, .success
, .alert
, .warning
, .yellow
, .info
, .light
Published by olton over 6 years ago
val
for issue #1116.for-top
, .for-bottom
. Use with attribute data-cls-picker