Vue.js Dark/Light Mode – Tema Seçeneği Yapma

Haziran 15, 2020 0 Views
Vue.js Dark/Light Mode - Tema Seçeneği Yapma vuejs Ayhan ALTINOK

Vue.js JavaScript Framework kullarak Dark/Light (Koyu / Açık) tema seçeneği nasıl yapılır onur göreceğiz. Bu çalışma yaparken Vue.js için  Lifecycle Hooks,Computed properties, State with data kullanacağız. Konuyu anlamanız adına temel seviye bir çalışma hazırladık ilerleyen süreçlerde daha gelişmiş sistemler hazırlıyor olacağız. Diğer vue.js çalışmalarımız için Vue.js kategorimi inceleyebilirsiniz.

1.Html Kodumuz

<div id="app"  :class="modeClass">  
  <div class="box content" >
    <h1>{{title}}</h1>
    <p>{{description}}</p>
    <label class="checkbox">
      <input type="checkbox" v-model="darkMode" />
      Karanlık Mod
    </label>
  </div> 
</div> 

2.CSS Kodumuz

html,body{
  height: 100%;
}

#app{
  min-height: 100%;
  margin: 0;
  display: grid;
  place-items: center; 
}
.box {
  width: 300px;
  position: relative;
  top: 0;
  transition: ease all 0.5s;
  box-shadow: 0 10px 20px #eee;
}
.box h1 {
  font-size: 20px;
}
/* Dark Theme Style Codes */ 
.dark-mode {
  background: #222;
}
.dark-mode .box{
  background: #222;
  box-shadow: 0 0px 20px #111;
  top: -20px;
  color:  white;
}
.dark-mode h1 {
  color:  white;
}
.dark-mode .checkbox:hover {
  color:  white;
}

3.JavaScript Kodumuz

new Vue({

  // Mount Vue instance to DOM with `el`
  // https://vuejs.org/v2/api/#el
  el: '#app',

  // State with data
  // http://vuejs.org/v2/guide/instance.html#Data-and-Methods
  data() {
    return {
      darkMode: true,
      title: 'Örnek',
      description: "React.Component'i genişleten bir Class bileşeni ile oluşturuldum."
    }
  },
  
  // Computed properties
  // https://vuejs.org/v2/guide/computed.html
  computed: {
    modeClass(){
      return this.darkMode ? 'dark-mode' : 'light-mode';
    }
  },
  
  // Lifecycle Hooks
  // https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
  
  beforeCreate(){},
  created(){},
  
  beforeMount(){},
  mounted(){},
  
  beforeUpdate(){},
  updated(){},
  
  beforeDestroy(){},
  destroyed(){}

});

vue.js dark/light mode tema değiştirme

4.Vue.js Önizleme

CSS Etiketleri ve Anlamları css3 Ayhan ALTINOK

CSS Etiketleri ve Anlamları

Bu yazımızda Css kodları nelerdir? Css3 ile gelen yeni Css özellikleri nelerdir? Bu Css kodları ne işe yarar? sorularının cevaplarını detaylı bir şekilde öğreneceğiz. Tüm Css kodlarını gruplayarak listeledim. Gruplamış olduğum her…

Brute Force Saldırılarına Karşı Web Sitenizi Koruma Önlemleri Nelerdir? blog cover brutal force Ayhan ALTINOK

Brute Force Saldırılarına Karşı Web Sitenizi Koruma Önlemleri Nelerdir?

Brute-force, Türkçe’de kelime anlamı olarak ‘kaba kuvvet’ anlamına gelir ve bu saldırıları yapan kişiler en basit anlatımıyla deneme yanılma yöntemiyle şifreleri çözmeyi amaçlar. WordPress’i indirmiş olan her kişi…

Yorumlar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yorum Yaz
Yukarı Kaydır
Beni takip edin
Tema
Diller
Müzik
Search results will appear here