MyBBCode

**tedem** · 08-14-2020, 11:35 PM

Web hızla gelişiyor... Uzun yıllar severek kullandığımız jQuery'nin yerini şimdi bir çok JavaScript kütüphanesi aldı; Alpine.js de bunların popülerlerinden birisidir.

jQuery'ye göre çok daha minimal ve kullanışlı olan Alpine.js ile bir web sitesi üzerinde istediğiniz her şeyi hemen hemen çok az bir kod yapısıyla yapabilirsiniz. Bunlara örnek verecek olursak; dropdown, modal, tab, vb.

MyBB için de Alpine.js bence olmazsa olmazlardan birisi durumda diyebilirim. Alpine.js kullanabilmek için biraz da olsa JavaScript bilginizin olması gerekiyor, bunu baştan belirtmiş olayım.

MyBB için Alpine.js Kurulumu

Kurulum çok basit. HTML <script> etiketi ile CDN olarak kolayca ekleyebiliriz.

Temanızın headerinclude veya footer şablonuna aşağıdaki kodu uygun şekilde eklemeniz yeterli.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

Alpine.js Kullanım Örnekleri

Dropdown / Modal

<div x-data="{ open: false }">

    <button @click="open = true">Open Dropdown</button>



    <ul

        x-show="open"

        @click.away="open = false"

    >

        Dropdown Body

    </ul>

</div>

Tab

<div x-data="{ tab: 'foo' }">

    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>

    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>



    <div x-show="tab === 'foo'">Tab Foo</div>

    <div x-show="tab === 'bar'">Tab Bar</div>

</div>

Bunlar yetmez, bana daha ayrıntılı bilgi lazım diyenler için kütüphane sayfasının bağlantısını bırakıyorum 🤞

Bkz: Alpine.js

Mutlu kodlamalar 💪🚀