Metro-UI系统-1-tile标签

2018-06-24 00:35:04来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一 效果图

 

二 各个效果的详解

 1,简单磁贴

<div class="tile"  data-role="title">  <!--定义一个磁贴-->
        <div class="tile-content iconic"><!--设置磁贴的内容-->
            <icon /> 
        </div>
    </div>

2,带有标题和边角的磁贴

<div class="tile">
        <div class="tile-content">
            <span class="tile-label">Label</span> <!--设置磁贴的标题-->
            <span class="tile-badge">5</span> <!--设置磁贴下方的字数-->
        </div>
    </div>

3,一组图片的磁贴

<div class="tile">
        <div class="tile-content image-set">  <!--定义一组图片-->
            <img src="images/1.jpg">
            <img src="images/1.jpg">
            <img src="images/1.jpg">
            <img src="images/1.jpg">
            <img src="images/1.jpg">
        </div>
    </div>

 

 

3,一张图片的磁贴

 

<div class="tile">
        <div class="tile-content">
            <img src="images/1.jpg" data-role="fitImage" data-format="square"> <!--正常图片大小,自动裁剪-->
        </div>
    </div>

 

 

4,带有翻页动态效果的磁贴

<div class="tile">
        <div class="tile-content">
            <div class="carousel" data-role="carousel"> <!--带有旋转的样式的磁贴-->
                <div class="slide"><a href="http:www.baidu.com"><img src="images/1.jpg"></a></div>
                <div class="slide"><img src="images/1.jpg"></div>
            </div>
        </div>
    </div>

 

 

5,选择样式的磁贴

 

<div class="tile element-selected"> <!--选中样式的磁贴-->
        12321321
    </div>

 

 

 6,内容由下向上滑动磁贴

<div class="tile">
        <div class="tile-content slide-up"> <!--定义内容是向上滑动的-->
            <div class="slide"> <!--触发焦点时向上滑动-->
                ... Main slide content ...
            </div>
            <div class="slide-over"> <!--触发焦点时由下向上滑动覆盖内容-->
                ... Over slide content here ...
            </div>
        </div>
    </div>

 

 

7,内容由上向下滑动

<div class="tile">
        <div class="tile-content slide-down"> <!--定义内容是向下滑动的-->
            <div class="slide"><!--触发焦点时向上滑动-->
                ... Main slide content ...
            </div>
            <div class="slide-over"> <!--触发焦点时由上向下滑动覆盖内容-->
                ... Over slide content here ...
            </div>
        </div>
    </div>

8,内容由左向右滑动

<div class="tile">
        <div class="tile-content slide-left"><!--定义内容是由左向右滑动的-->
            <div class="slide">
                ... Main slide content ...
            </div>
            <div class="slide-over">
                ... Over slide content here ...
            </div>
        </div>
    </div>

 

 

9,定义内容是由右向左滑动

<div class="tile">
        <div class="tile-content slide-right"> <!--定义内容是由右向左滑动的-->
            <div class="slide">
                ... Main slide content ...
            </div>
            <div class="slide-over">
                ... Over slide content here ...
            </div>
        </div>
    </div>

 

10,放大效果

    <div class="tile">
        <div class="tile-content zooming">  <!--定义内容放大的-->
            <div class="slide">
                ... Slide content here ...
            </div>
        </div>
    </div>

 

  

11,缩小效果

<div class="tile">
        <div class="tile-content zooming-out"> <!--定义内容缩小的-->
            <div class="slide">
                ... Slide content here ...
            </div>
        </div>
    </div>

 

12,上下滑动的效果

<div class="tile-wide" data-role="tile" data-effect="slideUpDown"> <!--定义内容是滑动的 上下滑动 类似滚动效果-->
        <div class="tile-content">
            <div class="live-slide">...slide content...</div>
            ...
            <div class="live-slide">...slide content2...</div>
        </div>
    </div>

 

 

13,使用ICon的效果

三 源码地址

 https://git.oschina.net/yudaming/metro

四 个人小站(提供各种技术类网站分享)

 http://dmsite.chinacloudsites.cn/

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:新学的 冒泡排序

下一篇:邂逅Sass和Compass之Compass篇