Laravel`de component yapısı . comonent nasıl kullanılır, laravel modal companent

laravel-component.md

views dizi altında comdizini oluşturdum. Bu dizin benim component'lerimi barındaracak.

com dizinine modal.blade.php dosyası oluşturdum.

bootstrap 4/5 modal tasarımıdır.

  <div class="modal fade text-start modal-{{ $config["class"] ?? 'primary' }}" id="{{ $config["id"]}}" tabindex="-1"
    aria-labelledby="{{ $config["id"]}}Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered {{ $type ?? '' }}">
        <div class="modal-content">
            @isset($config["route"])<form action="{{ route($config["route"]) }}" method="post"> @csrf @endisset
                <div class="modal-header">
                    <h5 class="modal-title" id="{{ $config["id"]}}Label">@lang($config["title"] ?? "Title")</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="@lang("Close")"></button>
                </div>
                <div class="modal-body">
                    {!! $body ?? '' !!}
                </div>
                <div class="modal-footer">
                    @isset($footer)
                        {!! $footer ?? '' !!}
                    @else
                        <button type="{{ isset($config["route"]) ? "submit": "button" }}" class="btn btn-{{ $class ?? 'primary' }}">
                            @isset($config["icon"])<i data-feather="{{ $config["icon"] }}" class="mr-2"></i>@endisset
                            @lang($config["button"] ?? "Save")
                        </button>
                    @endisset
                </div>
            @isset($config["route"])</form>@endisset
        </div>
    </div>
</div>

örnek component kullanımı

@slot("config",[ /* dizi değişkenleri */ ]) component dosyamıza değişken gönderimini sağlar.

• id modalın html id sini belirler
• title modalın başlık kısmı dil dosyasına göre çalışır yazdığınız içerik dil dosyasında varsa dile göre tanımlanır. Var sayılan olaral Title yazdım.
• button varsayılan olarak tanımlı olan butonun başlığıdır. Dil dosyasına göre tanımlanır. varsayılan olarak Save yazdım
• class Bootstrap 4/5 modal class değeridir. Boş bırakıla bilir.
• type Bootstrap 4/5 modal genişlik özelliğidir. örneğin: modal-lg gibi class alır
• route modalınız bir form içeriyorsa laravel route name tanımlanır. Tanımlanmaz ise form olmadığı anlamına gelir.
• icon butonun solunda bulunan icon ben feather icon setine göre ayarladım siz kullandığınız formatta düzenleye bilirsiniz.

@slot("body") @endslot

Bu kısım modalın içerik kısmını belir bu sebebten @endslotile tamamlanmaktadır. Bu kısıma gerek metin gerekte htmliçeriğini tanımlaya bilirsiniz

@slot("footer") @endslot

Bu kısım modalın alt kısmını belir bu sebebten @endslotile tamamlanmaktadır. Bu kısıma kullanarak tanımlı olan butonu geçersiz kılarak html olarak özel butonlarınızı tanımlaya bilirsiz.

Örnek Kullanımlar

• genel kullanım

  <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#createCategory">
      Modal Butonu
  </button>

  @component("components.modal")
      @slot('config', [
          "id"=>"createCategory", 
          "title"=>"Category", 
          "button"=>"Save",
          "class"=>"success", 
          "type"=>"modal-xl",
          "route"=>"categories.store",
          "icon"=>"save",
      ])
      @slot('body')
          <div class="form-row">
            <div class="col">
              <input type="text" class="form-control" placeholder="İsim">
            </div>
            <div class="col">
              <input type="text" class="form-control" placeholder="Soyisim">
            </div>
          </div>
      @endslot
  @endcomponent

• basit modal

  <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#showCategory">
      Modal Butonu
  </button>

  @component("components.modal")
      @slot('config', [
          "id"=>"showCategory", 
          "title"=>"İçerik Gösterimi", 
          "button"=>"Kapat",
          "icon"=>"close",
      ])
      @slot('body')
          <h2>Kategori Baslik</h2>
          <p>Kategori aciklama</p>
      @endslot
  @endcomponent

• footer örneği

  <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#deleteCategory">
      Modal Butonu
  </button>

  @component("components.modal")
      @slot('config', [
          "id"=>"deleteCategory", 
          "title"=>"İçerik Silme"
      ])
      @slot('body')
          <h2>Kategori Baslik</h2>
          <p>Kategori aciklama</p>
      @endslot
      @slot('footer')
         <button type="button" class="btn btn-primary">Kapat</button>
         <button type="button" class="btn btn-success">Sil</button>
      @endslot
  @endcomponent

Tartışmaya açıktır ☺️ . Bu kullanım sonsuz modal ihtiyaçnızı giderebiliriz :data: . Başka örnekler için yorum kısmında konuları belirte bilirsiniz. 🗣️