AngularJs'de toggle ve toggleClass

Genelde jquery’den angular’a geçtiğimiz için daha önceki alışkanlıkları ve kolaylıkları angular’da da arıyoruz. Bunlardan bir taneside toggle ve toggleClass.

AngularJs ile toggle ve toggleClass uygulamak çok basit.

Basit bit toggle yapalım. Bir değişken(acKapa) tanımlayıp, bu değişkenin değerine göre gizle göster yapacağız. Değer kontrolünü acKapa=!acKapa kısayolu ile yapıyoruz.

toggleClass içinde benzer bir yol izliyoruz. ng-class yönergesini(directive) kullanıyoruz.

Kaynaklar

http://stackoverflow.com/questions/15397252/angularjs-toggle-class-using-ng-class
http://geniuscarrier.com/ng-toggle-in-angularjs/
https://docs.angularjs.org/api/ng/directive/ngClass

7 Nisan 2015 tarihinde Fatih Hayrioğlu

:before ve :after Sözde Sınıflarının Kullanım Alanları

:before ve :after sözde sınıfları tanımlandığı elemanla ilişkili ve alt eleman olarak eklenir, isimlerinden de anlaşılacağı gibi içeriğin başına ve sonuna eklenirler. Kullanım alanlarını gördükçe ne kadar faydalı seçiciler olduğunu daha iyi anlayacağız.

Bu makalede özellikle kullanım alanlarına değineceğim. Daha önce bir çok sayfada kullandığım ve sitemde örneklerini verdiğim bu seçicileri önemine binaen daha detaylı anlatacağım. pseudo sınıfları ve pseudo elementleri yazımda anlatmıştım. Basit bir kullanımı var.

p.not:before { 
    content: "Not." 
}

Gelelim kullanım yerlerine, tek tek kullanım yerlerini inceleyelim.

İkon eklemek

:before yöntemi ikonların kullanımı için bence birebir çözüm oluşturuyor. Boostrap’in ikonları için kullandığı <i> veya <span> etiketi bana çok mantıklı gelmiyor. Zamanında :before ve :after desteği olmadığında <i> kullanmak mantıklı idi ama şimdi çok mantıklı bir kullanım değil bence.

Hazırladığımız ikon sprite resminden ilgili ikonu :before ile ekleyebiliriz. Sprite resimlerinde boşluk ayarlamak gibi işlerle uğraşmaya da gerek kalmaz.

a:before {
    content: '';
    width: 20px;
    height: 20px;
    background:url(images/sprite) 0 0 no-repeat;
}

Tanımlanan ikonları konumlandırmak bu yöntem ile çok kolay oluyor.

Aynı yöntemle yazı tipi ikolnarıda eklenebilir. Yazı tipi ikonları kullanırken content kısmına ilgili karakter konulur. https://fatihhayrioglu.com/font-face-yardimi-ile-ikon-eklemek-yeni-tl-sembolu-eklemek/

clearfix

Float uygulanmış elementleri tam kapsayamama sorunu halletmek içinde :before ve :after yardımı gerekir.

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
 
.clearfix:after {
    clear:both;
}

Bİr çok arayüz geliştiricinin hazır kod kütüphanesinde vardır bu kod. Şimdilerde CSS önişlemcilerinde mixin listesinin başında yer alır bu kod.

Çoklu kenar kullanımı

Daha önceki çoklu kenar oluşturmak yazımdaki örnekte görebileceğimiz gibi.

#cokluKenarCizgisi:before{
    border: 5px solid #06F;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

Kapsayıcı elemanın genişlik ve yüksekliğini alması için position:absolute tanımlanıp; left, right, top ve bottom değerleri sıfırlanmıştır.

CSS ile şekil eklemek

CSS ile üçgen yapmak yazımızdaki örneği inceleyelim.

.konusma-balonu:after{
  content: '';
  position:absolute;
  left: 30px;
  top:-15px;
  border-style: solid;
  border-width: 0 15px 15px 15px;;
  border-color: transparent transparent #40DBE5 transparent;  
}

.konusma-balonu:before{
  content: '';
  position:absolute;
  left: 29px;
  top:-16px;
  border-style: solid;
  border-width: 0 16px 16px 16px;;
  border-color: transparent transparent #6b5fb3 transparent;  
}

CSS ile oluşturulan ok :before ile, okun kenarçizgisi ise :after ile ekleniyor.

CSS ile şekil üretirken altıgen yapmak içinde :after yardımı ile çözümler mevcut. http://www.cssportal.com/css3-shapes/

Gölge çeşitleri eklemek

CSS3 box-shadow örnekleri yazısında ve diğer estetik gölge örneklerinde :before ve :after yardımı gerekmektedir. http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow bu sitedeki örnekler çok süper.

Sonuç

Yukarıda listelediğim ve listelemeyi unuttuğum(kaynaklarda var) işleri :before ve :after ile yapabiliriz. İşin mantığını anlatmak için yukarıdaki listeyi yazdım. Genel olarak mantığı kavradıktan sonra web sayfalarımızda gerektikçe bu sözde sınıfları kullanmak bizim elimizi güçlendirir.

Bazı durumlarda keşke bir kaç tane daha olsa kullansak dediğim oluyor :D

Bu yazıyı özellikle Murat Çorlu‘ya ithaf ediyorum. 3 sene önce :before ve :after yazısı yazacaktı. Artık yazar bu göndermeden sonra :D

Kalın sağlıcakla.

Kaynaklar

26 Mart 2015 tarihinde Fatih Hayrioğlu

Dikey Ortalamada Son Nokta

CSS’de sorun olan noktalardan biridir dikeyde elemanları ortalamak. Farklı çözüm önerileri sunulmuştur. Bende daha önce yazmıştım bir tane. CSS ile Dikey Ortalama

CSS3 ile birlikte bu soruna bazı çözümler üretildi. Benim burada anlatacağım transform ile üretilen çözüm.

Kod çok basit;

.dikey-ortala {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Kod bu kadar

Son olarak belirtmem gereken şeyler var.

Kapsayıcı elemanın sabit bir yüksekliği olmalıdır.
İçeriği yoğun olan sayfalarda transform uygulanan elemanda bulanıklık oluyor. Çözüm için kapsayıcı elemana transform-style: preserve-3d; atamak yeterli oluyor.
Dikey ortalama uygulanan elemana tanımlanan üst ve alt padding, margin veya border sıkıntı çıkarıyor.
Dinamik CSS yazıyorsanız bunu bir mixin haline getirmek mantıklı

Kalın sağlıcakla.

Tarayıcı Desteği