Genel Bilgiler
Geliştirme
Arayüz Elemanları
Modal
Liman eklentileri üzerinde kolay bir biçimde modal (açılır pencere) oluşturmanın yolları.
Modal componenti nedir?
Modal Componenti
Modal componenti, karmaşık akışları kolaylaştırmak ve sayfa içinde görünmesini istemediğimiz yapılar için kullanılabilecek bir bileşendir.
- Kullanıcıdan girdi alınması
- Kullanıcıya veri detayı gösterilmesi
Nasıl kullanılır?
Modal açmak
Modal düğmesi
Modal düğmesi componentini kullanarak oluşturduğunuz modalları açabilirsiniz. Aşağıdaki şekilde kullanılabilmektedir.
1
@include("modal-button", [
2
"text" => "Örnek Modal Aç",
3
"class" => "btn-primary",
4
"target_id" => "exampleModalWindow"
5
])
Copied!
Parametre
Açıklama
text
Modal açma düğmesinin üzerinde yazacak yazı
class
Düğmeye ait olan class parametresi
target_id
Açılması istenilen modalın id değeri
Javascript ile modal açmak
Modallar düğme ile açılabildiği gibi sizin belirlediğiniz özel Javascript eventleri, fonksiyonları ile de açılabilmektedir.
1
// Modal göster
2
$("#<MODAL_IDSI>").modal("show");
3
4
// Modal gizle
5
$("#<MODAL_IDSI>").modal("hide");
Copied!
Modal oluşturmak
Örnek bir modal oluşturmak için aşağıdaki yapıyı kullanabilirsiniz. @component ve @endcomponent tagları içerisinde kalan kısma checkbox, radio button, input, selectbox ve diğer tüm HTML elementlerini istediğiniz gibi yerleştirerek modal içeriğini oluşturabilirsiniz.
1
@component("modal-component", [
2
"id" => "exampleModalWindow",
3
"title" => "Örnek Modal",
4
"notSized" => true,
5
"modalDialogClasses" => "classExample",
6
"footer" => [
7
"class" => "btn-danger",
8
"onclick" => "modalDialogEvent()",
9
"text" => "What to do"
10
]
11
])
12
<input type="text" name="username" id="username_field" class="form-control">
13
<small>Eklemek istediğiniz kullanıcı adını giriniz</small>
14
15
<div class="mb-3"></div>
16
17
<input type="password" name="password" id="password_field" class="form-control">
18
<small>Kullanıcı şifresini giriniz</small>
19
@endcomponent
Copied!
Parametre
Açıklama
Veri Tipi
id
Modala ait olan id değeri. Benzersiz şekilde belirlenmelidir.
title
Modalda görünecek başlık değeri.
notSized
Boyut geniş mi dar mı olacak belirlediğimiz değer.
modalDialogClasses
Modal üzerine eklenmek istenen class değerleri.
footer
Modal içerisindeki düğmelerin bulunduğu alt kısım.
footer->class
Düğmeye ait class değeri. (Renkler için kullanıyoruz)
footer->onclick
Tıklandığında gerçekleştirilecek işlem.
footer->text
Butonda görünecek yazı.
Modaldan değer almak
Yukarıdaki örnekte iki adet input tanımlamıştık. Bir tanesinde kullanıcı adı, diğerinde ise şifre isteniyordu. Bunları kullanıcı tarafından alarak üzerinde nasıl işlem yaparız gelin bakalım.
1
function modalDialogEvent() {
2
showSwal("{{__('Yükleniyor...')}}", 'info');
3
let data = new FormData();
4
// exampleModalWindow modalının içerisinden username_field idsine sahip
5
// inputtan değeri alıyor ve gönderdiğimiz requestin içerisine ekliyoruz.
6
data.append("username", $("#exampleModalWindow").find("#username_field").val());
7
// benzer bir işlemi şifre için de yapıyoruz
8
// bu gönderdiğimiz değişkenlere controller tarafında
9
// request() yardımcı fonksiyonu ile erişeceğiz.
10
// örnek: request("password");
11
data.append("password", $("#exampleModalWindow").find("#password_field").val());
12
13
request("{{API('add_user')}}", data, function(response){
14
// işlem yapıldıktan sonra modal penceresini gizle.
15
$("#exampleModalWindow").modal("hide");
16
// Yükleniyor mesajını işlem bittiği için kapatıyoruz.
17
Swal.close();
18
// modal içerisindeki input değerlerini eski haline getiriyoruz.
19
$("#exampleModalWindow").find("input").val("");
20
response = JSON.parse(response);
21
// Başarılı olduğuna dair 2.5 saniyelik bir mesaj gösteriyoruz.
22
showSwal(response.message, 'success', 2500);
23
}, function(error){
24
error = JSON.parse(error);
25
showSwal(error.message, 'error');
26
});
27
}
Copied!
Last modified 3mo ago
Export as PDF
Copy link