Component Template in Metro 4

Hi, my friends! I want to introduce you a new component in version 4.3.8 - Template. This component allows you to use javascript templates inside HTML elements. Gif example Full code example <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <title>Test Template - Metro 4 :: Popular... » read more

0
Read
olton
Metro 4 Table — data-body attribute

Hello my friends! In this article I want to talk about the yet undocumented feature of the table component - attribute data-body. With this attribute you can define data for table as ARRAY. Without writting <tr><td>...</td></tr> code. First - You must define array with table data. Important! Data for table must be defined before moment... » read more

0
Read
olton
Using Metro4-React with CRA

Hi, my friends! In this post, I’ll show you how to use Metro4-React in an application created using create-react-app without ejecting configs. Remarks Metro4-React published in the npm registry with raw JSX files. When creating an application using CRA and Metro4-React and trying to compile it, we get a syntax error, since Babel does not... » read more

0
Read
olton
Create scroll indicator with Metro 4 Progress component

Hello, my friends! In this post, I want to show how easy it is to create a scroll indicator in Metro 4 using the progress component. CSS .indicator { position: fixed; top: 0; left: 0; right: 0; z-index: 1; } HTML <div class="indicator" data-role="progress"></div> JavaScript function indicator(){ var container = document.documentElement; var scrolled = (container.scrollTop... » read more

5
Read
olton
Metro 4 — Changes for animate function in 4.3.7

In 4.3.7 will be changed arguments for the animate function. Version <= 4.3.6 animate format: $(selector).animate(draw, dur, easing, callback); Version >= 4.3.7. Function animate receive one argument as plain object or array of objects. $.animate({ el: object | HTMLElement, draw: {} | function, dur: 1000, ease: "linear", loop: 0, pause: 0, dir: "normal", defer: 0,... » read more

0
Read
olton