VUE.JS

Vue.js CSS Class ve Inline (Satır İçi) Style Bindings

Yayın:
VueJs ile ilgili 7. yazıda CSS (Cascading Style Sheets) Class ve satır içi (inline) olarak nasıl CSS style (style="...") işlemleri yapabileceğimizden bahsedeceğim. Özellikle bu yazı ...
GÖRSEL
VueJs ile ilgili 7. yazıda CSS (Cascading Style Sheets) Class ve satır içi (inline) olarak nasıl CSS style (style="...") işlemleri yapabileceğimizden bahsedeceğim. Özellikle bu yazı bağlamında, Vue.js > https://vuejs.org/v2/guide/class-and-styl sayfasında yer alan örneklerin oldukça açıklayıcı olduğunu hatırlatmak isterim. Ben, bu yazı içerisinde yer alan örnekleri çeşitlilik oluşturabilmek amacıyla farklı ek konularla ilintili ele almaya çalışacağım.

CSS Class ve Inline Style Bindings

Class İşlemleri

Vue.js ile uygulama geliştirirken ihtiyaçlar doğrultusunda CSS yapılarını da olaylarla ilişkilendirerek oldukça kolay bir şekilde yönetebilirsiniz. Direktifler yazı serisi içerisinde v-bind direktifini birkaç örnekte bu amaçla kullanmıştık. Gelelim ilgili konunun detaylarına.

Öncelikle, Vue expression dahilinde string ifadelere ek olarak, diziler (array) ve nesneler (object) kullanılabilmekte. Hızlıca bir örnek işlem gerçekleştirelim ve object içeriğini v-bind:class ile kullanalım.

<div id="app">
	<div v-cloak v-bind:class="status" v-show="status" v-text="message"></div>
</div>
Vue instance içeriğimiz de şöyle olsun:
var app = new Vue({
	el: '#app',
	data: {
		status: true,
		error: false,
		message: 'Welcome',
	}
})
status içeriğinin true | false durumuna göre v-show ile message içeriğini göstermekteyiz. Kaynak kodlara baktığınızda <div class>Welcome</div> şeklinde bir ifade göreceksiniz. Çünkü, daha class olarak atadığımız bir değer bulunmamakta. O halde düzenlemelerimizi yapalım ve ilgili HTML etiketini şu şekilde güncelleyelim.

Object Syntax

<div v-bind:class="{ active: status }" v-show="status" v-text="message"></div>
Tekrar kaynak kodlara baktığınızda class değerinin active olduğunu görebilirsiniz. Bir ekleme daha yapıp konuyu açıklayacağım.
<div v-cloak class="ui" v-bind:class="{ active: status, 'text-danger': error }" v-show="status" v-text="message"></div>
Console üzerinden app.error ve app.status için true değerini atadığınızda render sonucunda div etiketinin ui active text-danger class’larını bir arada aldığını görebilirsiniz. Bunun nedeni :class içerisinde tanımlanan ifadenin true alması durumunda, Vue’nun ilgili ifadeyi eğer var ise önceki class içeriklerini de dahil ederek bulunduğu elemente atıyor oluşu.

Elbette bu işlem inline (satır içi) olmak zorunda değil. Yukarıdaki örneği yeniden ele alalım:

<div v-bind:class="classObject"></div>
classObject ile data içeriğinde tanımladığımız tüm değerleri artık class olarak, yine true | false değerlerine uygun bir şekilde kullanabileceğiz.
data: {
  message: 'Welcome',
  classObject: {
    status: true,
    error: false
  }
}

Class object aynı zamanda computed property ile de edinilebilir.

data: {
	status: true,
	error: false,
	message: 'Welcome',
},
computed: {
	classObject: function () {
		return {
			active: this.status && !this.error,
			error: this.error && this.error.type === 'fatal'
		}
	}
}

Array Syntax

Class ve style tanımınında array (dizi) işlemleri de yapabildiğimizi belirtmiştim. Object syntax başlığı altındaki örneği yeniden ele alalım.
<div v-cloak class="ui" v-bind:class="[status, color]" v-show="status" v-text="message"></div>
data: {
	status: 'active',
	color: 'red',
	message: 'Welcome',
}

Bir class içeriğini koşullu olarak değiştirelim:

<div v-cloak class="ui" v-bind:class="[status ? color : '', error]" v-show="status" v-text="message"></div>

Birden fazla koşul söz konusu ise örneğimizi şu şekilde düzenleyebiliriz:

<div v-cloak class="ui" v-bind:class="[{ active: status }, error]" v-show="status" v-text="message"></div>

Inline Style İşlemleri

<div v-bind:style="{ color: status, fontWeight: fontWeight }" v-text="message" v-show="status"></div>
data: {
	status: 'active',
	fontColor: 'red',
	fontWeight: 'bold',
	message: 'Welcome',
}
Unutmadan, class ve inline style birlikte kullanılabilir.
<div class="ui" v-bind:class="status" v-bind:style="{ color: font.fontColor, fontWeight: font.fontWeight }" v-text="message" v-show="status"></div>
Style nesnesini doğrudan kullanabiliriz:
<div class="ui" v-bind:class="status" v-bind:style="styleObject" v-text="message" v-show="status"></div>
data: {
  styleObject: {
    fontColor: 'red',
    fontWeight: 'bold',
  }
}
Son örnekte de çoklu style object dahil edelim.
<div class="ui" v-bind:class="status" v-bind:style="[styleObject, newStyleObject]" v-text="message" v-show="status"></div>
data: {
  styleObject: {
    fontColor: 'red',
    fontWeight: 'bold',
  },
  newStyleObject: {
    fontColor: 'blue',
    fontWeight: 'bold',
  }
}
Çoklu kullanımda işlemler soldan sağa doğru uygulanacaktır. Bu nedenle son tanımlanan class ve/ya style bir öncekini ezecektir.
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.