You need to enable JavaScript to run this app.

Skip to main content

MyBB için Alpine.js Kurulumu

Full-Stack Developer
MyBB için Alpine.js Kurulumu
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.

[Image: 59030169?s=200&v=4]

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.

Code:
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
Alpine.js Kullanım Örnekleri

Dropdown / Modal

Code:
<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

Code:
<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 💪🚀
Sic semper tyrannis.