I am trying to create a tile like menu for my mobile application which should look like the main menu on windows 8. I am using the ionic framework version 1.0.0. Please can anyone give me pointers on how to implemeny this.
I know this question is about ionic framework. When i tried for a similar application which gives windows 8 look i used Gridster.js. have a look into it. If you find it helpful use it. http://gridster.net/
you can Use card Imaged from Ionic
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-image">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>
here is the Link Ionic Card Images
but Gridster is a pretty neat solution
You could probably build your own based off on the grid. Here's a really quick starter.
CSS:
.tile {
color: #fff;
height: 150px;
padding: 20px;
}
.tile-double {
height: 300px;
}
.tile + .tile {
margin-top: 10px;
height: 140px;
}
.tile-icon {
padding: 0;
text-align: center;
font-size: 60px;
line-height: 150px;
}
.tile-title {
position: relative;
text-align: center;
}
.tile-title > h1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
color: #fff;
margin: 0;
}
.tile-image {
text-shadow: 1px 1px 0 #000;
background-size: cover;
background-position: bottom;
}