Angular Material ile duyarlı kullanıcı arabirimi oluşturma — BreakpointObserver

Duyarlı web uygulaması oluşturmak, günümüzde söylenmeyen gereksinimlerden biridir. Düz eski CSS medya sorgularından Angular Material gibi çeşitli çerçeve ve kitaplıklara kadar duyarlı UI oluşturmanın farklı yolları vardır .

Bu hikayede, cihazdaki değişen görünüm penceresine nasıl bir Gözlenebilir olarak tepki oluşturulacağını ve buna göre kullanıcı arayüzünün nasıl güncelleneceğini göreceğiz. Angular malzeme CDK kütüphanesinden BreakpointObserver bileşenini kullanacağız . Hedef cihaz türüne göre kart bileşenlerinin listesini farklı şekilde oluşturacağız.

BreakpointObserverCDK bileşeni içeren BreakPointsnesne aşağıdaki gibi çeşitli önceden tanımlanmış ekran türleri içerir:

Bir kez BreakpointObserverservis bileşeni enjekte edilir, biz istenilen ekran tipine abone olabilir ve yanıt olarak bizim UI güncelleyebilirsiniz.

Bu örnekte, mobil ve küçük ekranlı el cihazlarını hedefleyen UI'yi görüntülemek için Ahize, XSmall ve Küçük ekran tipini gözlemliyoruz. TabletVe Webekran türleri oldukça açıklayıcıdır.

HTML şablonu, cardLayout.layoutItemgözlemlenebilir olana asyncboru yoluyla abone olur ve colspanve rowspanözelliklerini günceller .

Kaynak kodunun tamamı bu GitHub deposunda bulunabilir .

Demo

Suggested posts

Jest — Güçlü Bir JavaScript Test Çerçevesi

Jest — Güçlü Bir JavaScript Test Çerçevesi

Test, yazılım geliştirmenin önemli bir parçasıdır. Kodun güvenilir olmasını, beklendiği gibi çalışmasını sağlar ve hata olasılığını azaltır.

Bir kurumsal uygulamayı Angular 16'ya yükseltme

İşte acı geliyor

Bir kurumsal uygulamayı Angular 16'ya yükseltme

Sinyallerden başlayarak tüm yeni Angular v16 özellikleri ve diğer her şey beni kesinlikle satın aldı. Ve ne kadar zor olabileceğini görmek için şirketin uygulamalarından birini yükseltme dürtüsüne karşı koyamadım.

Related posts

"Mariana Çukuru Ortaya Çıktı: Uçurumun Korkunç Gizli Gerçeklerini Ortaya Çıkarmak"

"Mariana Çukuru Ortaya Çıktı: Uçurumun Korkunç Gizli Gerçeklerini Ortaya Çıkarmak"

Giriş: Cesur okuyucular, bizi gezegenimizin en karanlık derinliklerine götürecek bir yolculuğa hoş geldiniz. Bu blogda, Mariana Çukuru'nun esrarengiz dünyasına dalıyor, onun gizli sırlarını açığa çıkarıyor ve yüzeyinin altında yatan tüyler ürpertici gerçekleri ortaya çıkarıyoruz.

Artık parola yok — geçiş anahtarları parolanızın yerini nasıl alacak?

Artık parola yok — geçiş anahtarları parolanızın yerini nasıl alacak?

Belirsizliği önlemek için aşağıdaki terimler kullanılacaktır; Doğrulayıcı; Web sitesine giriş yapmak için kullanılan cep telefonu; Kullanıcının oturum açma isteği Hizmetini yapmak için kullandığı web sitesi veya uygulama; Verilen hizmeti sağlayan satıcı, örn.

SINIRSIZ HAYAT

Büyüdüğünde, dünyanın olduğu gibi olduğunu ve hayatının sadece dünyanın içinde yaşamak olduğunu, hayatını asla riske atmadan, sadece belirlenmiş bir yolu takip et ve sonunda öl ve ölmemeye çalış. duvarlara çok fazla vur. Ama bu çok sınırlı bir hayat.

Kızıl Saçlı Kızın Solo Performansı

Hayden'ın görevi üzerine Katie kendini mastürbasyon yaparken filme alır.

Kızıl Saçlı Kızın Solo Performansı

Hayden, birlikte geçirdikleri akşamdan sonra Katie'yi üniversite yurduna geri götürdüğünde gece yarısını geçmişti. Sabah erkenden dersi vardı ve önceki gece onunla kaldıktan sonra bir daha kıyafet değiştirmedi.