Home > Article > Web Front-end > Metro-UI system-1-tile label

Metro-UI system-1-tile label

WBOYOriginal: 2016-10-23 23:59:591760browse

One rendering

2 Detailed explanation of each effect

1. Simple tile

<div class="tile"  data-role="title">  
        <div class="tile-content iconic">
            <icon /> 
        div>
    div>

2, Tile with title and corners

<div class="tile">
        <div class="tile-content">
            <span class="tile-label">Labelspan> 
            <span class="tile-badge">5span> 
        div>
    div>

3, a set of picture tiles

<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, a picture tile

<div class="tile">
        <div class="tile-content">
            <img src="images/1.jpg" data-role="fitImage" data-format="square"> 
        div>
    div>

4, tiles with page turning dynamic effect

<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. Select the style of tile

<div class="tile element-selected"> 
        12321321
    div>

6. The content slides the tile from bottom to top

<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, the content slides from top to bottom

<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, the content slides from left to right

<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, the definition content is sliding from right to left

<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, magnification effect

    <div class="tile">
        <div class="tile-content zooming">  
            <div class="slide">
                ... Slide content here ...
            div>
        div>
    div>

11, zoom out effect

<div class="tile">
        <div class="tile-content zooming-out"> 
            <div class="slide">
                ... Slide content here ...
            div>
        div>
    div>

12, the effect of sliding up and down

<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, the effect of using ICon

Three source code addresses

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

Four personal sites (providing sharing of various technical websites)

http://dmsite.chinacloudsites.cn/

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：彻底理解nth-child和nth-of-type的区别。Next article：手风琴菜单

See more

Metro-UI system-1-tile label

Related articles