我正在嘗試爲我的移動應用程序創建一個類似於菜單的圖塊，它應該看起來像Windows 8上的主菜單。我使用離子框架版本1.0.0。請任何人都可以給我指示如何實現這一點。如何使用離子框架創建一個類似於Windows 8的菜單

來源

2015-07-01 Christian Majuta

嗨。這些解決方案是否適合您？有幫助嗎？ – jme11

venkat krishna的解決方案非常有幫助。 http://gridster.net/ –

我知道這個問題是關於離子框架。當我嘗試使用Windows 8的類似應用程序時，我使用了Gridster.js。看看它。如果您覺得有用，請使用它。 http://gridster.net/

來源

2015-07-01 05:29:41

偉大的網格 - 不知道它。 – Nikola

是的。它也提供簡單的文檔。 –

上面的鏈接被打破了，我想現在是http://dsmorse.github.io/gridster.js/ –

您可以使用機卡分離離子

<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>

這裏拍攝的是鏈接 Ionic Card Images

但Gridster是一個非常巧妙的解決辦法

來源

2015-07-01 05:42:51 stackg91

你也許可以建立自己的基於折網格。這是一個非常快速的入門者。

Codepen

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; 
}

來源

2015-07-01 08:16:09 jme11

如何使用離子框架創建一個類似於Windows 8的菜單

回答

Codepen

相關問題