it-swarm.asia

açısal malzeme ızgara sistemi

köşeli malzeme tasarımı ve malzeme css ile karıştırıldım. Neden farklı düzen ve ızgaralara sahipler? Açısal malzeme tasarımında önyüklemeli kaptaki eşdeğeri nedir?

Önyükleme ile karşılaştırarak projem için köşeli malzeme tasarımı kullanmalı mıyım?

14

Angular Materyali ile gitmek için ana neden, Esnek Kutu Düzeni spesifikasyonuna dayandığından, cadı bir W3C standardı Esnek Kutu dir.

Bootstrap container için daha yakın etiket şu olabilir: <div layout="row" layout-wrap></div>

12
Germando

Açısal Malzeme Tasarımı, Önyükleme kabına tam olarak eşdeğer değildir çünkü Malzeme Tasarımı (AMD) daha esnektir. Bir konteyner 8 bölümden oluşmaktadır. AMD, düzen ve esnek özelliklere sahiptir. AMD'nin esnekliği% 5 (BS'de 20 bölüm) veya 33 ve 66 (2 bölüm) veya% 5,% 33 ve% 66 kombinasyonlarıyla artırılabilir, bu% 100'den fazla olabilir (en çok sayıda bölüm) bu durumda otomatik olarak birden çok satır oluşturulur. Şu ana kadar bulduğum örneklerle en iyi tek sayfa https://material.angularjs.org/#/layout/grid AMD’nin HTML’si hakkında daha ayrıntılı bilgi almak için her bir örnek üzerindeki Kaynak kutusuna tıklayın düzen ve esnek sözdizimi.

Her div arasındaki boşluğu yatay ve dikey olarak kontrol eden Çocuk Hizalama yoluyla daha fazla esnekliğe sahip olursunuz. Div'lerin nasıl merkezlendiğini, yayıldığını, bir uca ittiğini veya yukarı kaldırıldığını vb. Görmek için o sayfadaki radyo düğmelerini tıklayın.

Görüntülenen HTML sözdizimi, belirlenmiş boyutta bir sayfada çalışır. Medya sorgularının eşdeğerinin farklı cihazların boyutlarını değiştirmesini istiyorsanız, açısal denetleyiciler yapmak için daha başka kodlamalar yapmanız gerekir. Bir fikir edinmek için çeşitli bileşenlerin DEMOS örneklerine bakın.

10
Mike_Laird

Açısal Malzeme ızgarası> Önyükleme ızgarası, özellikle Angular uygulamaları için. Önyükleme ızgarası, esnek kutu modeline göre eski olan float öğesini kullanır. float korkunç masa düzenini değiştirdi, ancak şimdi esnek kutu modeli float öğesini bir kenara itmeye başladı (ızgara düzenleri için). Yalnızca eski tarayıcılar için CSS’nize bazı sonekler eklemeniz gerektiğini unutmayın. Bu CSS Püf Noktaları makalesine / daha eski tarayıcılar için flex programının nasıl uygulandığına dair bir örnek için. Önyükleme ızgara uygulamaları da, korkunç görünen ve HTML5 kullanan herhangi bir uygulamada kaçınılması gereken sonsuz miktarda divs oluşturmanızı gerektirir. Teknik olarak, belirli divleri değiştirmek için kendi Angular yönergelerinizi yazabilir ve neyi veya nasıl gösterdiklerine bağlı olarak gruplandırabilir, ancak daha sonra neden zaten yaptıklarında Angular Malzemeyi kullanmıyorsunuz bu senin için? 

2
UltraSonja

Aynı sorunun cevabını arıyordum. Burada harika yorumlar görüyorum. Aralık 2016'dan itibaren birkaç ekleme: Bootstrap'in şimdi Flexbox desteği var. Bunu kontrol edin link ayrıca bunu kontrol edin link bootstrap'i sadece bayrak değiştirerek veya bootstrap-flex.css dosyasını indirerek varsayılan olarak Flexbox'ı kullanmak için kontrol edin. Malzemedeki ızgara desteği devam ettiği sürece, bir ızgara demosu kullanın here , harika görünen bir malzeme esnek düzen motoru var (henüz denemedim). Önyükleme ızgarasına çok yakın. Bunu kontrol et link .

0
Manish Jain

Materyalize, Google tarafından Materyal Tasarımını temel alan modern bir duyarlıCSS çerçevesidir.

Ve

Bootstrap, yanıt veren mobil ilk web siteleri geliştirmek için en popüler HTML, CSS ve JavaScript çerçevesidir.

Bu yüzden yeni bir modern tasarım istiyorsanız, malzeme tasarımına devam etmeniz gerektiğini düşünüyorum. Çok güzel bir animasyonu da var.

0
Yogesh

eğer Angular ile çalışıyorsanız, ızgara kullanmak yerine flexbox kullanmalısınız, Angular bunun için bir paket sunar:

https://github.com/angular/flex-layout

Bunu kullanmanın çok büyük bir avantajı, Flex-düzeni yönergelerinde TypeScript ortak değişkenlerini kullanabilmenizdir (bunu bootstrap ile yapamazsınız). Ayrıca, medya sorgusu değişiklikleri için Gözlemlenebilir içerir.

0
catlabs