Ahmet Yılmaz
Ahmet Ankara'da yaşayan deneyimli bir yazılımcıdır.
Örnekler
İnteraktif Demolar
1. Butonlar ve Kartlar (Buttons & Cards)
Semantic UI'ın doğal dil sınıf isimlendirmeleri ile oluşturulmuş çeşitli buton ve kart bileşenleri.
Butonlar
Katılma: 2021
75 Arkadaş
Ayşe Demir
Ayşe yeni bir proje üzerinde çalışmak istiyor.
<!-- Butonlar -->
<button class="ui button">Standart Buton</button>
<button class="ui primary button">Birincil (Primary)</button>
<div class="ui animated button" tabindex="0">
<div class="visible content">Sonraki</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
<!-- Kartlar -->
<div class="ui cards">
<div class="card">
<div class="image">
<img src="resim.jpg">
</div>
<div class="content">
<div class="header">Ahmet Yılmaz</div>
<div class="meta"><span>Yazılım Geliştirici</span></div>
<div class="description">Ahmet bir yazılımcıdır.</div>
</div>
</div>
</div>2. Modal ve Arka Plan Karartma (Modal & Dimmer)
Buton tıklamasıyla tetiklenen ve arka planı karartan şık iletişim (modal) kutuları.
Profil Fotoğrafını Değiştir
Bu fotoğrafı profiliniz için yüklemek ister misiniz?
Yeni bir fotoğraf yüklerseniz, mevcut fotoğrafınız kalıcı olarak silinecektir.
Devam etmek istediğinizden emin misiniz?
Kayıt Silme İşlemi
Bu kaydı kalıcı olarak silmek istediğinize emin misiniz?
<button class="ui primary button" id="btn-show-modal">Modalı Aç</button>
<div class="ui modal" id="demo-modal">
<i class="close icon"></i>
<div class="header">Başlık Alanı</div>
<div class="content">İçerik açıklaması burada yer alır.</div>
<div class="actions">
<div class="ui black deny button">Vazgeç</div>
<div class="ui positive button">Onayla</div>
</div>
</div>
<script>
// Modalı göstermek için jQuery kullanılır
$('#btn-show-modal').on('click', function() {
$('#demo-modal').modal('show');
});
</script>3. Açılır Menü ve Arama (Dropdown & Search)
Arama özellikli seçim kutuları ve çoklu seçime (multiple selection) izin veren interaktif bileşenler.
Ülke Seçiniz...
<!-- Arama Özellikli Dropdown -->
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Ülke Seçiniz...</div>
<div class="menu">
<div class="item" data-value="tr"><i class="tr flag"></i>Türkiye</div>
<div class="item" data-value="us"><i class="us flag"></i>ABD</div>
</div>
</div>
<!-- Çoklu Seçim (Multiple) Dropdown -->
<select name="skills" multiple="" class="ui fluid dropdown">
<option value="">Yetenek Seçiniz</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
<script>
// Semantic UI Dropdown bileşenlerini başlatma
$('.ui.dropdown').dropdown();
</script>4. Form ve Doğrulama (Form & Validation)
Semantic UI'ın dahili form doğrulama (validation) sistemi, odaklanma (blur) ve başarılı mesaj gösterimi.
$('.ui.form').form({
inline: true,
on: 'blur', // İnput'tan çıkıldığında anında doğrulama
fields: {
'first-name': {
identifier: 'first-name',
rules: [
{ type: 'empty', prompt: 'Lütfen adınızı giriniz' }
]
},
'email': {
identifier: 'email',
rules: [
{ type: 'empty', prompt: 'Lütfen bir e-posta adresi giriniz' },
{ type: 'email', prompt: 'Lütfen geçerli bir e-posta giriniz' }
]
},
'terms': {
identifier: 'terms',
rules: [
{ type: 'checked', prompt: 'Kuralları kabul etmelisiniz' }
]
}
},
onSuccess: function(event) {
event.preventDefault(); // Sayfa yenilenmesini engeller
$(this).addClass('success');
}
});
// Checkbox başlatma
$('.ui.checkbox').checkbox();