Tiles案例

Windows 8 开始页面

Demo page

基本信息

Tiles是你应用程序子模块的表现方式。你的内容显示在Tile中，理想状态下这些东西是可以定期更新的，特别是你的内容是实时的，这样更新可以与用户更好的交流。 Tiles 可以文本和图像的组合一起显示,也可以以一枚徽章的状态来显示。 Tile是一个区块，可以放在任何容器内。

Tile的默认尺寸大小是150x150像素。 Tile尺寸也可以添加子类来增加更多的对象: .double(-vertical), .triple(-vertical), .quadro(-vertical).

可以对Tile设置已选择状态："selected"。你也可以通过添加类名.bg-color-*来改变Tile的背景色。

Tile定义:

    <div class="tile"></div>
    <div class="tile double"></div>
    <div class="tile selected"></div>
    <div class="tile bg-color-orange"></div>

Tile内容

Tile可以使用类名.tile-content将内容放置在子容器中。类名.tile-content顶部和底部有10px的内距，距左边和右边有15px的内距。

    <div class="tile">
        <div class="tile-content">
            ...content here...
        </div>
    </div>

Tiles内容内置的子类

Tiles内容在子块可使用的类名: .icon, .image, .image-set, .image-slider.

默认参数值:

• Duration - 1000ms
• Period - 2000ms
• Direction - "up"

Tile状态

Tile 状态(品牌信息)可以使用类名.brand or .tile-status放在子容器之中。 Tile 状态也可以修改背景颜色，例如使用类名.bg-color-*

    <div class="tile">
        <div class="brand">
            ...status content here...
        </div>
    </div>

Tile 状态 > 徽章

一个徽章可以显示的是1-99的数字也可以是图形。徽章都是定位在Tile区块的右下角位置。 Metro UI CSS 支持Windows 8内置的主要徽章: activity, alert, available, away, busy, newMessage, paused, playing, unavailable, error and attention。默认徽章的背景色是蓝色，但我们也可以修改的，例如，使用类名.bg-color-*.

    <div class="tile">
        <div class="brand">
            <div class="badge activity"></div>
        </div>
    </div>

Tile 状态 >品牌信息

品牌信息可以显示品牌名称或者代表品牌信息的图片。品牌信息定位在Tile区块的左下角位置。

    <div class="tile">
        <div class="brand">
            <div class="name">Name</div>
        </div>
    </div>
 
    <div class="tile">
        <div class="brand">
            <div class="icon"> <img /> </div>
        </div>
    </div>