基于 metro 4 框架

官网:https://metroui.org.ua/


本教程翻译自官方英文文档:>

文档链接

序言:效果展示

案例:https://zfe.one

案例源码下载:模板

模板源码下载:源码

PS:建议使用案例直接开发!但也别忘了给原项目点个收藏!


🎈 入门属性

🎨 磁贴基本样式属性

Metro 4 包含创建磁贴(如 Windows8/10 中的应用程序磁贴)的 class。

若要创建磁贴,可以在 div 添加到具有属性 data role 的元素。

1
<div data-role="tile"></div>

🎨 磁贴尺寸

你可以使用四种尺寸的磁贴:。要设置磁贴大小,请使用”data-size”属性。

🎨 磁贴图标和标签

要创建磁贴图标,需要添加 img 标签,并添加值为 icon 的 class。

也可以使用字体中的图标创建带有 icon class 的 span 标签作为磁贴图标。

字体图标的生成方法:>

小康的 Iconfont 图标库






Branding bar 磁贴可同时拥有标题和 icon。

1
2
3
4
<div data-role="tile">
<img src="images/facebook.png" class="icon" />
<span class="branding-bar">Branding bar</span>
</div>

🎈 初级属性

🎨 磁贴徽章

通过添加带有”badge-top”或”badge-bottom”class 的 span 标签,

能为磁贴创建用于展示数字等元素的徽章。


10
10

🎨 磁贴颜色

通过添加”bg-x”(x 为颜色英文)的或 class 或”background-color: #xxxxxx”的内联 style 样式。

可以改变磁贴的颜色。

🎨 磁贴选中

通过添加”bg-x”(x 为颜色英文)的或 class,为磁贴添加选中状态。


Applications

🎨 磁贴图片封面

通过添加 data-cover 属性可以为磁贴添加图片封面。


Sergey Pimenov
Author

🎨 磁贴相册

通过在带有图片的 div 标签添加 data-effect=”image-set”可以实现相册的滚动闪烁。


🎨 悬停动效

若要设置悬停效果,请使用 data-effect 属性的以下一个值:

hover-slide-up、   悬停向上滑动

hover-slide-down、 悬停向下滑动

hover-slide-left、 悬停向左滑动

hover-slide-right、悬停向右滑动

hover-zoom-up、     悬停向上缩放

hover-zoom-down、   悬停向下缩放

hover-zoom-left、   悬停向左缩放

hover-zoom-right   悬停向右缩放

同时需要添加一个封面 div 和封底 div。

1
2
3
4
<div data-role="tile" data-effect="...">
<div class="slide-front">...</div>
<div class="slide-back">...</div>
</div>

🎈 进阶属性

🎨 磁贴网格

为了将磁贴划分网格,Metro 4 中设置了特殊的 class,

使用带有”.tiles-grid”的 class 可以创建网格来装载你的磁贴。

磁贴间距为 10px,通过”size-x”(x 为 1 到 10 整数)来限定网格的宽度。

例如添加值为 size-4 的 class 可以创建宽度为 8 个 small 磁贴或者 4 个 medium 磁贴宽度的容器。


🎨 磁贴固定

你也可以通过 class 类”col-x”和”row-x”(x 为 1 到 12 整数)指定磁贴的位置。

🎨 磁贴组

要对图块进行分组,可以使用特殊的类。图块组。

若要设置组固定大小,请添加以下 class 之一:

size half、

size-x(x 为 1 到 10 整数)、

此外,还可以使用 CSS 媒体查询来更改大小。

要实现,请使用 class 类:

size-{media}-half、

size-{media}-x(x 为 1 到 10 整数)、

其中{media}是一个参数,对应不同响应尺寸:fs、sm、md、ld、xl、xxl。


[

Github
       30
   ](https://github.com/olton/Metro-UI-CSS)Email10ChromeTables


🎈DIY 属性

🎨 添加天气磁贴

前往中国天气网天气插件

设计自己的天气插件样式。打开 index.html 将 key 值改为自己的 key 值。同时调整宽度和高度。

1
2
3
4
5
6
7
8
9
10
11
12
WIDGET = {
CONFIG: {

"layout": 1,
"width": "310",
"height": "150",
"background": 1,
"dataColor": "FFFFFF",
"borderRadius": 1,
"key": "FtmcNnOSjp"
}
}

🎨 添加网站监控磁贴

参考 flexiston 的教程UptimeRobot 免费网站存活监控

获取监控链接替换”https://stats.uptimerobot.com/2OkvpSkWAJ

1
2
3
4
5
6
<div class="tiles-grid tiles-group size-2 fg-white" data-group-title="网站信息">
<a href="https://stats.uptimerobot.com/2OkvpSkWAJ" data-role="tile" class="bg-indigo fg-white">
<span class="fa icon-uniE903 icon"></span>
<span class="branding-bar">网站监控</span>
<span class="badge-bottom">2</span>
</a>