Metro-UI system-1-tile label, metro-ui-1-tile

Metro-UI system-1-tile label, metro-ui-1-tile

I

 

2. Detailed description of each Effect

1. Simple Tile

<Div class = "tile" data-role = "title"> <! -- Define a tile --> <div class = "tile-content iconic"> <! -- Set the tile content --> <icon/> </div>

2. tile with title and corner

<Div class = "tile"> <div class = "tile-content"> <span class = "tile-label"> Label </span> <! -- Set the title of the tile --> <span class = "tile-badge"> 5 </span> <! -- Set the words below the tile --> </div>

3. Tile of a group of images

<Div class = "tile"> <div class = "tile-content image-set"> <! -- Define a group of images -->      </div>

 

 

3. Tile of an image

 

<Div class = "tile"> <div class = "tile-content">  <! -- Normal image size, auto crop --> </div>

 

 

4. tile with dynamic page flip Effect

<Div class = "tile"> <div class = "tile-content"> <div class = "carousel" data-role = "carousel"> <! -- Tile with a rotating style --> <div class = "slide"> <a href = "http: www.baidu.com ">  </a> </div> <div class = "slide">  </div> </div>

 

 

5. Select the tile of the style

 

<Div class = "tile element-selected"> <! -- Tile of the selected style --> 12321321 </div>

 

 

6. Slide the tile from bottom to top

<Div class = "tile"> <div class = "tile-content slide-up"> <! -- The definition content is sliding up --> <div class = "slide"> <! -- Slide up When Triggering the focus -->... Main slide content... </div> <div class = "slide-over"> <! -- When the focus is triggered, the content is moved from the bottom to the top -->... Over slide content here... </div>

 

 

7. The content slides from top to bottom.

<Div class = "tile"> <div class = "tile-content slide-down"> <! -- The definition content is sliding down --> <div class = "slide"> <! -- Slide up When Triggering the focus -->... Main slide content... </div> <div class = "slide-over"> <! -- When the focus is triggered, the content is overwritten by sliding up and down -->... Over slide content here... </div>

8. The content slides from left to right.

<Div class = "tile"> <div class = "tile-content slide-left"> <! -- The definition content is sliding from left to right --> <div class = "slide">... main slide content... </div> <div class = "slide-over">... over slide content here... </div>

 

 

9. The definition content is sliding from right to left.

<Div class = "tile"> <div class = "tile-content slide-right"> <! -- The definition content is sliding from right to left --> <div class = "slide">... main slide content... </div> <div class = "slide-over">... over slide content here... </div>

 

10. Zoom in

<Div class = "tile"> <div class = "tile-content zooming"> <! -- Define the enlarged content --> <div class = "slide">... Slide content here... </div>

 

11. Reduce the effect

<Div class = "tile"> <div class = "tile-content zooming-out"> <! -- Narrow definition content --> <div class = "slide">... Slide content here... </div>

 

12. sliding up and down

<Div class = "tile-wide" data-role = "tile" data-effect = "slideUpDown"> <! -- The definition content is sliding up and down similar to the scroll effect --> <div class = "tile-content"> <div class = "live-slide">... slide content... </div>... <div class = "live-slide">... slide content2... </div>

 

 

13. ICon Effect

Source Code address

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

Small websites for four people (sharing on various technical websites)

Http://dmsite.chinacloudsites.cn/