2025-03-03 14:40:49 +01:00

35 KiB

Raw Blame History

Alpine.js

Alpine.js, Vue.js yada React gibi önemli framework' ların yüksek seviye programlama (reaktif ve deklaratif vb.) yapısını daha düşük bir maliyetle sunar.

DOM' unuza hükmedin ve uygun gördüğünüz şekilde düzenleyin.

Bunu Tailwind 'ın JavaScript versiyonu olarak düşünebilirsiniz.

Not: Bu kütüphanenin sentaksının neredeyse tamamında Vue (ve dolayısıyla Angular) 'dan esinlenilmiştir. Onlara, web' e yaptıkları katkılarından ötürü sonsuza dek minnettarım.

Translated documentation

Language	Link for documentation
Chinese Traditional	繁體中文說明文件
German	Dokumentation in Deutsch
Indonesian	Dokumentasi Bahasa Indonesia
Japanese	日本語ドキュメント
Portuguese	Documentação em Português
Russian	Документация на русском
Spanish	Documentación en Español
Turkish	Türkçe Dökümantasyon

Kurulum

CDN ile: Aşağıdaki script' i <head> alanının sonuna ekleyin.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

İşte bu kadar. Kendini başlatması için yeterli.

Gerçek ortamda kullanırken yeni çıkan sürümlerden kaynaklanabilecek bozukluklardan kaçınmak için bağlantıda versiyon numarasını tam olarak belirtmek önerilir. Örneğin, 2.8.2 (son sürüm) sürümünü kullanmak için:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>

Npm ile: Npm kullanarak paketi yükleyin.

npm i alpinejs

Kodunuza dahil edin.

import 'alpinejs'

IE11 desteği için O halde aşağıdaki script' leri kullanın.

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>

Yukarıdaki module/nomodule üslubu üslubu, modern tarayıcılarda otomatik olarak modern paketi, IE11 ve diğer eski tarayıcılarda ise ona uygun paketi yükleyecektir.

Kullanım

Dropdown/Modal Açılır menü ve pencere

<div x-data="{ open: false }">
    <button @click="open = true">Menüyü Göster</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Menü İçeriği
    </ul>
</div>

Tabs Sekmeler

<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'">Foo Sekmesi</div>
    <div x-show="tab === 'bar'">Bar Sekmesi</div>
</div>

Basit olmayan yapılar için bile kullanabilirsiniz: Daha hover event' i tetiklenirken açılır menünün içeriğini getirmeye başlayarak.

<div x-data="{ open: false }">
    <button
        @mouseenter.once="
            fetch('/dropdown-partial.html')
                .then(response => response.text())
                .then(html => { $refs.dropdown.innerHTML = html })
        "
        @click="open = true"
    >Show Dropdown</button>

    <div x-ref="dropdown" x-show="open" @click.away="open = false">
        Loading Spinner...
    </div>
</div>

Öğrenme

Sizin için 14 direktif var:

Direktif	Açıklaması
`x-data`	Yeni bir bileşenin kapsamını tanımlar.
`x-init`	Bileşen başlar başlamaz bir ifadeyi çalıştırır.
`x-show`	(true or false) durumuna göre elemente `display: none;` özelliği ekler çıkarır.
`x-bind`	JS ifadesinin sonucuna göre değişkene değer atar.
`x-on`	Elemente olay dinleyicisi ekler. Tetiklendiğinde JS ifadesini çalıştırır.
`x-model`	Elemente "çift yönlü bağlama" ekler. Bu input elementi ile bileşendeki datayı senkronize şekilde tutar.
`x-text`	'x-bind' ile benzer çalışır, yalnız bu elementin `innerText` özelliğini günceller.
`x-html`	'x-bind' ile benzer çalışır, yalnız bu elementin `innerHTML` özelliğini günceller.
`x-ref`	İşlenmemiş DOM elementleri bileşeninizin dışından tekrar almak için kullanışlı bir yöntem.
`x-if`	Elementi DOM' dan tamamen kaldırır. `<template>` etiketi üzerinde kullanılması gerekir.
`x-for`	Dizideki her bir eleman için yeni DOM düğümü oluşturur. `<template>` etiketi üzerinde kullanılması gerekir.
`x-transition`	Elementin çeşitli değişim aşamalarına sınıflar ekleyen direktifler.
`x-spread`	Daha iyi yeniden kullanılabilirlik için Alpine direktifler nesnesini bir elemente bağlamanızı sağlar.
`x-cloak`	Bu özellik Alpine başlatıldığında kaldırılır. Önceden yüklenmiş DOM' u gizlemek için kullanışlıdır.

Ve altı sihirli özellik:

Sihirli Özellik	Açıklaması
`$el`	Kök bileşen DOM düğümünü getirir.
`$refs`	Bileşen içindeki `x-ref` ile işaretlenmiş DOM elementlerini getirir.
`$event`	Olay dinleyicisine bağlı tarayıcıya ait "Event" nesnesini getirir.
`$dispatch`	`CustomEvent` oluşturur ve dahili olarak `.dispatchEvent()` kullanıp gönderir.
`$nextTick`	Alpine kendi reaktif DOM güncellemelerini yaptıktan SONRA verilen ifadeyi çalıştırır.
`$watch`	"İzlediğiniz" bir bileşen özelliği değişir değişmez verilen bir callback fonksiyonu tetiklenecek.

Sponsorlar

Logonuzun burda olmasını ister misiniz? DM on Twitter

Topluluk Projeleri

Direktifler

`x-data`

Örnek: <div x-data="{ foo: 'bar' }">...</div>

Yapı: <div x-data="[object literal]">...</div>

x-data yeni bileşenin kapsamını tanımlar. Framework' a akabindeki veri nesnesiyle yeni bir bileşen oluşturmasını söyler.

Bunu Vue bileşenindeki data özelliği gibi düşünebilirsiniz.

Bileşenin Mantığını Ayırmak

Bileşenin veriyi (ve davranışı) yeniden kullanılabilir fonksiyonlara taşıyablirsiniz:

<div x-data="dropdown()">
    <button x-on:click="open">Open</button>

    <div x-show="isOpen()" x-on:click.away="close">
        // Dropdown
    </div>
</div>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
    }
</script>

Bundler aracı kullananlar için, Alpine.js global kapsamdaki (window) fonksiyonlara eriştiğinden, onları x-data ile kullanmak için açıkça window' a atamanız gerekir. Yani window.dropdown = function () {} şeklinde kullanmalısınız. (Bu durum, Webpack, Rollup, Parcel gibi bundler' lar kullandığınızda, tanımladığınız fonksiyonların window 'da değil de ilgili modülün kapsamında geçerli olmasından kaynaklanır.)

Ayrıca nesne parçalama kullanarak birden çok veriyi karıştırabilirsiniz:

<div x-data="{...dropdown(), ...tabs()}">

`x-init`

Örnek: <div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>

Yapı: <div x-data="..." x-init="[expression]"></div>

x-init bir bileşen başlar başlamaz bir ifadeyi çalıştırır.

Eğer Alpine' ın DOM üzerindeki kendi başlangıç güncellemelerinden sonra bir kod parçası çalıştırmak istiyorsanız (VueJS' deki hayat döngüsü olaylarından biri olan mounted() olayı gibi), x-init 'dan bir geri çağırma fonksiyonu döndürebilir ve sonrasında çalıştırabilirsiniz:

x-init="() => { // DOM' un ilk kez yüklendikten sonraki durumuna burda erişebilirsiniz. // }"

`x-show`

Örnek: <div x-show="open"></div>

Yapı: <div x-show="[expression]"></div>

x-show ifadenin (true or false) olup olmamasına göre elemente display: none; özelliği ekler veya çıkarır.

x-show.transition

x-show.transition CSS geçiş animasyonlarını kullanarak x-show' unuzu daha güzel hale getirmek için kullanışlı bir API' dir.

<div x-show.transition="open">
    Bu içerik görünürken ve kaybolurken geçiş animasyonuna sahip olacak.
</div>

Direktif	Açıklama
`x-show.transition`	Aynı anda solma efekti ve ölçeklendirme. (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms)
`x-show.transition.in`	Sadece içerik görünürken uygular.
`x-show.transition.out`	Sadece içerik kaybolurken uygular.
`x-show.transition.opacity`	Sadece solma efektini kullan.
`x-show.transition.scale`	Sadece ölçeklendirme efektini kullan.
`x-show.transition.scale.75`	CSS ölçeklendirme dönüşümünü `transform: scale(.75)` düzenler.
`x-show.transition.duration.200ms`	Giriş süresini 200ms' ye ayarlar. Bu durumda çıkış onun yarısı olacaktır (100ms).
`x-show.transition.origin.top.right`	CSS geçiş özelliğinin `transform-origin: top right` başlangıç noktasını düzenler.
`x-show.transition.in.duration.200ms.out.duration.50ms`	Giriş ve çıkış için ayrı ayrı süreler tanımlar.

Not: Tüm bu geçişler birbirleriyle birlikte kullanılabilir. Note: All of these transition modifiers can be used in conjunction with each other. Aşırı komik olmasına rağmen bu mümkün: x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95

Not: x-show tüm çocuk elementlerin çıkış animasyonlarını bitirmesini bekler. Eğer bunu istemiyorsanız .immediate belirtecini ekleyin:

<div x-show.immediate="open">
    <div x-show.transition="open">
</div>

`x-bind`

Not: Daha kısa sentaks ":" kullanmakta özgürsünüz: :type="...".

Örnek: <input x-bind:type="inputType">

Yapı: <input x-bind:[attribute]="[expression]">

x-bind bir JavaScript ifadesinin sonucunu bir özelliğe eşitler. Bu ifade bileşenin tüm verilerinin anahtarlarına erişimine sahiptir ve bileşenin datası her ne zaman güncellenirse o da güncellenecektir.

Not: özellik bağlamalar, sadece kendini ilgilendiren datalar güncellendiğinde güncellenir. Bu çatı, veri değişikliklerini izlemek ve hangi bağlamaların onları ilgilendiriğini anlamak için yeterince zekidir.

Sınıf özellikleri için x-bind

x-bind direktifi class özelliğine baplandığında biraz farklı işlev görür.

CSS sınıfları için bir veri nesnesi girersiniz. Bu nesnenin anahtarı sınıfın ismi iken, değeri ise sınıfın uygulanıp uygulanmayacağını belirleyen boolean ifadelerdir.

Örneğin: <div x-bind:class="{ 'hidden': foo }"></div>

Bu örnekte, "hidden" sınıfı sadece foo veri özelliği true olduğunda uygulanır.

Boolean özellikler için x-bind

x-bind değer özellikleriyle aynı şekilde boolean özelliklerini de destekler. Bunlar bir değişkenin şartlı durum olarak kullanılması veya herhangi bir Javascript ifadesinin true or false olarak döndürülmesidir.

Örneğin:

<!-- Verilen ifade: -->
<button x-bind:disabled="myVar">Tıkla</button>

<!-- myVar == true olduğunda: -->
<button disabled="disabled">Tıkla</button>

<!-- myVar == false olduğunda: -->
<button>Tıkla</button>

Bu, myVar true ya da false olduğunda sırasıyla disabled özelliğini ekler veya kaldırır.

HTML specification 'e göre boolean ifadesinin hangi özelliklerde kullanılacağı görülebilir, örneğin disabled, readonly, required, checked, hidden, selected, open, vb.

Not: aria-* gibi özelliklerin false durumunu göstermeniz gerekiyorsa özelliğe bağlama yaparken .toString() de kullanın. Örneğin: isOpen ister true olsun ister false olsun :aria-expanded="isOpen.toString()" görünmeye devam eder.

.camel belirteci Örnek: <svg x-bind:view-box.camel="viewBox">

camel belirteci özelliğnin adının deve notasyonuna karşılık gelen ifadeye bağlama yapar. Yukardaki örnekte, viewBox özelliği view-box ' a değil viewBox 'a bağlanacak.

`x-on`

Not: Daha kısa sentaksı "@" kullanabilirsiniz: @click="...".

Örnek: <button x-on:click="foo = 'bar'"></button>

Yapı: <button x-on:[event]="[expression]"></button>

x-on tanımlandığı elemente bir olay dinleyici ekler. Bu olay tetiklendiği zaman, değeri olarak atanan Javascript ifadesi çalıştırılır. x-on özelliğini üzerine eklediğiniz elementin desteklediği bütün olayla için kullanabilirsiniz. Olayların tüm listesine ve muhtemel değerleri için the Event reference on MDN adresine bakınız.

Javascript ifadesinde herhangi bir data güncellenirse o dataya bağlı diğer element özellikleri de güncellenir.

Not: Ayrıca Javascript fonksiyon ismini de verebilirsiniz.

Örnek: <button x-on:click="myFunction"></button>

Yukardaki ifadeye denk: <button x-on:click="myFunction($event)"></button>

keydown belirteçleri

Örnek: <input type="text" x-on:keydown.escape="open = false">

Keydown belirteçlerini x-on:keydown direktifine ekleyip daha spesifik dinlemeler yapabilirsiniz. Bu belirteçler Event.key değerlerinin kebap notasyonu olduğuna dikkat edin.

Örnekler: enter, escape, arrow-up, arrow-down

Not: Sistem-belirteci anahtar kombinasyonlarını da dinleyebilirsiniz: x-on:keydown.cmd.enter="foo"

.away belirteci

Örnek: <div x-on:click.away="showModal = false"></div>

.away belirteci kullanıldığında, olay yakalayıcı sadece kendi ve çocukları dışındaki bir kaynaktan gelen olayda çalıştırılır.

Bu, açılır menü ve diyalog pencelerinin dışına tıklandığında gizlenmesi için kullanışlıdır.

.prevent belirteci Örnek: <input type="checkbox" x-on:click.prevent>

Bir olay dinleyicisine .prevent eklemek tetiklenecek event üzerinde preventDefault çağırır. Yukarıdaki örneğe bakıldığında bu, kullanıcı checkbox 'a tıkladığında gerçek bir checked olayının gerçekleşmeyeceği anlamına gelir.

.stop belirteci Örnek: <div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>

Bir olay dinleyicisine .stop eklemek tetiklenecek event üzerinde stopPropagation çağırır. Adding .stop to an event listener will call stopPropagation on the triggered event. Yukarıdaki örneğe bakıldığında bu, dıştaki <div> 'den gelen "click" olayının tetiklenmeyeceiği anlamına gelir. Başka bir deyişle, kullanıcı butona bastığında foo özelliğine 'bar' atanmayacak.

.self belirteci Örnek: <div x-on:click.self="foo = 'bar'"><button></button></div>

Bir olay dinleyicisine .self eklersek olay yakalayıcısını sadece $event.target kendisi olması durumunda tetikleyecek. Yukarıdaki örnekte bu, butondan kaynaklanan "click" olayının dış <div>' deki yakalayıcıyı çalıştırmayacağı anlamına gelir.

.window belirteci Örnek: <div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>

Olay dinleyicisine .window eklemek onu tanımlandığı DOM düğümü üzerinde değil glonal window nesnesinde çalıştıracak.Bu, resize olayı gibi window' da bazı değişiklikler olduğunda bileşenin durumunu düzenlemek için kullanışlıdır. Yukardaki örnekte, pencere genişliği 768 pikselden daha geniş olduğunda açılır menüyü kapatırız, aksi halde aynı kalır.

Not: Ayrıca dinleyicileri window yerine document 'e eklemek için .document belirtecini kullanabilirsiniz.

.once belirteci Örnek: <button x-on:mouseenter.once="fetchSomething()"></button>

Bir olay dinleyicisine .once belirtecini eklersek, dinleyicinin sadece bir kez çalışacağından emin oluruz. Bu, HTML kısımlar vb. şeyleri çekmek gibi sadece bir kez yapılmasını istediğiniz şeyler için kullanışlıdır.

.passive belirteci Örnek: <button x-on:mousedown.passive="interactive = true"></button>

.passive belirtecini bir olay dinleyicisine eklersek bu belirteç o dinleyiciyi pasif hale getirir. Bu da preventDefault() fonksiyonunun işletilecek hiç bir event üzerinde çalışmayacağı anlamına gelir. Bu dokunmatik cihazlardaki scroll performansları gibi durumlarda yardım edebilir.

.debounce belirteci Örnek: <input x-on:input.debounce="fetchSomething()">

debounce belirteci bir olay yakalayıcısına "dalgalı tıklama engelleyici" eklemenize izin verir. Başka bir deyişle, olay yakalayıcısı, son olayın tetiklenmesi üzerinden belli bir zaman geçmedikçe çalışmaz. Yakalayıcı tekrar çağrılmaya hazır olduğunda, en son ki yakalayıcı cağrısı çalışır.

Varsayılan engelleme süresi 250 milisaniyedir.

Bunu değiştirmek isterseniz, aşağıdaki gibi özel bir bekleme süresi belirtebilirsiniz:

<input x-on:input.debounce.750="fetchSomething()">
<input x-on:input.debounce.750ms="fetchSomething()">

.camel belirteci Örnek: <input x-on:event-name.camel="doSomething()">

`camel` belirteci, olay dinleyiciye olay isminin deve notasyonuna denk gelen ifadesini ekler. Yukarıdaki örnekte, `eventName` olayı element üzerinde tetiklendiğinde, ifade çalıştırılacak.

`x-model`

Örnek: <input type="text" x-model="foo">

Yapı: <input type="text" x-model="[data item]">

x-model özelliği elemente "çift yönlü bağlama" ekler. Yani, input elementinin değeri bileşenin veri öğesiyle senkronize tutulur.

Not: x-model metin girişleri, onay kutuları, radyo düğmeleri, metin alanları, seçimler ve çoklu seçimler üzerindeki değişiklikleri tespit edecek kadar zekidir. Bu how Vue would adresindeki senaryolara uygun çalışması gerekir.

.number belirteci Örnek: <input x-model.number="age">

number belirteci girişin değerini bir numaraya çevirir. Eğer giriş değeri geçerli bir numaraya çevrilemeyecekse, orjinal değer döndürülür.

.debounce belirteci Example: <input x-model.debounce="search">

The debounce belirteci bir değer güncellemesine bir "dalgalı tıklama engelleyici" ekler. Başka bir deyişle, olay yakalayıcısı, son olayın tetiklenmesi üzerinden belli bir zaman geçmedikçe çalışmaz. Yakalayıcı tekrar çağrılmaya hazır olduğunda, en son ki yakalayıcı cağrısı çalışır.

Varsayılan engelleme süresi 250 milisaniyedir.

Bunu değiştirmek isterseniz, aşağıdaki gibi özel bir bekleme süresi belirtebilirsiniz:

<input x-model.debounce.750="search">
<input x-model.debounce.750ms="search">

`x-text`

Örnek: <span x-text="foo"></span>

Yapı: <span x-text="[expression]"

x-text direktifi x-bind ile benzer şekilde çalışır. Tek fark, x-text bir özelliğin değerini güncellemek yerine, bir elementin innerText özelliğini günceller.

`x-html`

Örnek: <span x-html="foo"></span>

Yapı: <span x-html="[expression]"

x-html direktifi x-bind ile benzer şekilde çalışır. Tek fark, x-text bir özelliğin değerini güncellemek yerine, bir elementin innerHTML özelliğini günceller.

:uyarı: Yalnızca güvenilir içerikte kullanın ve asla kullanıcı tarafından sağlanan içerikte kullanmayın. :uyarı:

Üçüncü şahıslardan gelen HTML' in dinamik olarak işlenmesi açıkça XSS zaaflarına yol açabilir.

`x-ref`

Örnek: <div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>

Yapı: <div x-ref="[ref name]"></div><button x-on:click="$refs.[ref name].innerText = 'bar'"></button>

x-ref bileşeninizin dışından işlenmemiş DOM elementlerini getirmek için kullanışlı bir yoldur. Bir element üzerinde x-ref kullanarak,onu, $refs denilen bir nesne içinde, tüm olay yakalayıcılarına erişebilir kılarsınız.

Bu bir elemente "id" ler atayıp document.querySelector ile her yerden erişme mantığına yardımcı bir alternatiftir.

Not: Ayrıca ihtiyacınız olduğunda x-ref' e dinamik değerler <span :x-ref="item.id"></span> verebilirsiniz.

`x-if`

Örnek: <template x-if="true"><div>Some Element</div></template>

Yapı: <template x-if="[expression]"><div>Some Element</div></template>

x-show 'in yetersiz olduğu durumlarda (x-show değeri false ise elemente display: none özelliği ekler), bir elementi tamamıyla DOM 'dan silmek için x-if kullanılabilir.

Alpine sanal DOM mantığını kullanmadığı için x-if 'in <template></template> etiketiyle kullanıldığına dikkat edin. Bu uygulama Alpine 'nın kararlı kalmasını ve büyüsünü gerçekleştirmek içingerçek DOM 'u kullanmasını sağlar.

Not: x-if direktifi <template></template> etiketi içindeki tek bir kök element için kullanılması gerekir.

Not: Bir svg etiketi içinde template kullanacaksanız, Alpine.js başlatılmadan önce bir polyfill eklemeniz gerekir.

`x-for`

Örnek:

<template x-for="item in items" :key="item">
    <div x-text="item"></div>
</template>

Not: :key ile atama isteğe bağlıdır ama Note: the :key binding is optional, ama ŞİDDETLE tavsiye edilir.

Bir dizinin her bir elemanı için yeni bir DOM düğümü oluşturmak istediğiniz durumlar için x-for vardır. Bu Vue 'deki x-for etiketine benzerdir. Tek fark, Alpine bu direktifi normal bir DOM elementi üzerinde kullanamaz. Bunun için bir template etiketinin varlığına ihtiyaç duyar.

Eğer iterasyonun o anki indeksine erişmek istiyorsanız aşağıdaki sentaksı kullanın:

<template x-for="(item, index) in items" :key="index">
    <!-- İhtiyacanız olduğunda iterasyon içinde "index" 'i ayrıca referans olarak gösterebilirsiniz. -->
    <div x-text="index"></div>
</template>

Bir nesne dizisinin (koleksiyon) iterasyonuna erişmek istiyorsanız aşağıdaki sentaksı kullanın:

<template x-for="(item, index, collection) in items" :key="index">
    <!-- İhtiyacınız olduğunda iterasyon içinde ayrıca "collection" 'a referans gösterebilirsiniz. -->
    <!-- Geçerli öğe. -->
    <div x-text="item"></div>
    <!-- Üsteki ile aynı. -->
    <div x-text="collection[index]"></div>
    <!-- Bir önceki öğe. -->
    <div x-text="collection[index - 1]"></div>
</template>

Not: x-for etiketi <template></template> etiketi içindeki tek bir kök element için kullanılması gerekir.

Not: Bir svg etiketi içinde template kullanacaksanız, Alpine.js başlatılmadan önce bir polyfill eklemeniz gerekir.

İç içe `x-for` lar

İç içe x-for döngüleri kullanabilirsiniz; ama her bir döngüyü bir elemente sarmanız ŞARTTIR. Örneğin:

<template x-for="item in items">
    <div>
        <template x-for="subItem in item.subItems">
            <div x-text="subItem"></div>
        </template>
    </div>
</template>

Bir aralık üzerinde iterasyoun

Alpine n bir tamsayı olduğu durumlar için i in n sentaksını destekler. Bu belirlenmiş bir dizi eleman üzerinde dolaşmanızı sağlar.

<template x-for="i in 10">
    <span x-text="i"></span>
</template>

`x-transition`

Örnek:

<div
    x-show="open"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform scale-90"
    x-transition:enter-end="opacity-100 transform scale-100"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 transform scale-100"
    x-transition:leave-end="opacity-0 transform scale-90"
>...</div>

<template x-if="open">
    <div
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform scale-90"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-90"
    >...</div>
</template>

Yukarıdaki örnek Tailwind CSS 'daki sınıfları kullanıyor.

Alpine, bir elementin "hidden" ve "shown" durumları arasındaki çeşitli aşamalara uygulamak için 6 farklı geçiş direktifi sunar. Bu direktifler hem x-show hem de x-if ile çalışır.

Bunlar farklı ve daha mantıklı isimli olmaları dışında, tam olarak VueJS 'in geçiş direktifleri gibi çalışır:

Direktif	Açıklama
`:enter`	Giriş aşaması boyunca uygulanır.
`:enter-start`	Element yerleştirilmeden önce eklenir ve yerleştikten bir kare sonra kaldırılır.
`:enter-end`	Element yerleştirildikten bir kare sonrası eklenir (aynı anda `enter-start` kaldırılır), geçiş/animasyon bittiğinde kaldırılır.
`:leave`	Ayrılma aşaması boyunca uygulanır.
`:leave-start`	Bir ayrılma geçişi tetiklenir tetiklenmez eklenir ve bir kare sonrası kaldırılır.
`:leave-end`	Bir ayrılma geçişi tetiklendikten bir kare sonrasında eklenir (aynı anda `leave-start` kaldırılır), geçiş/animasyon bittiğinde kaldırılır.

`x-spread`

Örnek:

<div x-data="dropdown()">
    <button x-spread="trigger">Menüyü aç</button>

    <span x-spread="dialogue">Menü içeriği</span>
</div>

<script>
    function dropdown() {
        return {
            open: false,
            trigger: {
                ['@click']() {
                    this.open = true
                },
            },
            dialogue: {
                ['x-show']() {
                    return this.open
                },
                ['@click.away']() {
                    this.open = false
                },
            }
        }
    }
</script>

x-spread direktifi, bir elementin Alpine bağlamalarını yeniden kullanılabilir bir nesneye çıkarmanızı sağlar.

Bu nesne anahtarları birer direktiflerdir (Belirteçler içeren herhangi bir direktif olabilir) ve değerleri Alpine tarafından çalıştırlabilecek geri çağırma fonksiyonlarıdır.

Not: x-spread için dikkat etmeniz gereken birkaç nokta var:

"spread" edilecek direktif x-for olduğu zaman, fonksiyondan düz bir string ifade döndürmeniz gerekir. Örneğin: ['x-for']() { return 'item in items' }

x-data ve x-init ise bir "spread" nesnesinde kullanılamaz.

`x-cloak`

Örnek: <div x-data="{}" x-cloak></div>

x-cloak özellikleri, Alpine başlatılır başlatılmaz elementlerden kaldırılır. Bu önceden yüklenmiş DOM 'u gizlemek için kullanışlıdır. attributes are removed from elements when Alpine initializes. This is useful for hiding pre-initialized DOM. Bunun çalışması için yaygın kullanım, aşağıdaki global stili eklemektir.

<style>
    [x-cloak] { display: none; }
</style>

Sihirli Özellikler

$el hariç diğer sihirli özellikler, bileşen henüz başlatılmadığı için x-data içinde kullanılamaz.

`$el`

Örnek:

<div x-data>
    <button @click="$el.innerHTML = 'foo'">Beni "foo" ile yer değiştir</button>
</div>

$el, kök DOM düğümünü getirmek için kullanılan bir sihirli özelliktir.

`$refs`

Örnek:

<span x-ref="foo"></span>

<button x-on:click="$refs.foo.innerText = 'bar'"></button>

$refs bileşen içinde x-ref ile işaretlenmiş DOM elementlerini getirmek için kullanılan shirili bir özelliktir. Bu, DOM elementlerini manuel olarak işlemeniz gerektiğinde kullanışlıdır.

`$event`

Örnek:

<input x-on:input="alert($event.target.value)">

$event tarayıcının kendi "Event" nesnesini getirmek için bir olay dinleyici içinde kullanılabilir.

Not: $event özelliği yalnızca DOM ifadelerinde kullanılabilir.

Eğer $event 'a bir JavaScript fonksiyonu içinde erişmek istiyorsanız doğrudan parametre olarak verebilirsiniz:

<button x-on:click="myFunction($event)"></button>

`$dispatch`

Örnek:

<div @custom-event="console.log($event.detail.foo)">
    <button @click="$dispatch('custom-event', { foo: 'bar' })">
    <!-- Tıklandığında console.log "bar" durumuna dönüşecek -->
</div>

Olay yayılımı üzerine notlar

olay köpürme 'den dolayı dikkat edin; aynı hiyerarşik seviyeden dağıtılan olayları yakalamanız gerektiğinde, .window belirtecini kullanmanız gerekir.

Örnek:

<div x-data>
    <span @custom-event="console.log($event.detail.foo)"></span>
    <button @click="$dispatch('custom-event', { foo: 'bar' })">
<div>

Yukarıdaki örnek çalışmayacaktır; çünkü custom-event event dağıtıldığında ortak ataları olan div 'e yayılacak.

Bileşenlere Dağıtmak

Bileşenleri birbiriyle konuşturmak için bir önceki teknikten de faydalanabilirsiniz.

Örnek:

<div x-data @custom-event.window="console.log($event.detail)"></div>

<button x-data @click="$dispatch('custom-event', 'Hello World!')">
<!-- Tıklandığında console.log "Hello World!" durumuna dönüşecek. -->

$dispatch, bir CustomEvent oluşturmanın ve dahili olan dispatchEvent() fonksiyonunu kullanarak onu iletmenin kısa yoludur. Özel olayları kullanarak bileşenlerde ve birbirleri arasında veri göndermenin birçok yararlı kullanım durumları vardır. Tarayıcılardaki CustomEvent sisteminin altında yatan daha fazla bilgi için Bakınız.

Dikkat edeceğiniz nokta; $dispatch('some-event', { some: 'data' }) için ikinci parametre olarak verdiğiniz herhangi bir data, yeni bir olayın "detail" özelliğyle erişilebilir hale gelir:$event.detail.some. Özel olay verisinin detail özelliğine eklenmesi tarayıcılardaki CustomEvent 'lar için standart bir uygulamadır. Daha fazla bilgi için Bakınız

Ayrıca x-model bağlamaları için veri güncellemelerini tetiklemekte $dispatch() 'i kullanabilirsiniz. Örneğin:

<div x-data="{ foo: 'bar' }">
    <span x-model="foo">
        <button @click="$dispatch('input', 'baz')">
        <!-- Butona tıklandığında, `x-model` köpüren "input" olayını yakalar ve foo 'yu "baz" olarak günceller. -->
    </span>
</div>

Not: Bu $dispatch özelliği yalnızca DOM ifadelerinde kullanılabilir.

Eğer $dispatch 'a bir JavaScript fonksiyonu içinde erişmek istiyorsanız doğrudan parametre olarak verebilirsiniz:

<button x-on:click="myFunction($dispatch)"></button>

`$nextTick`

Örnek:

<div x-data="{ fruit: 'apple' }">
    <button
        x-on:click="
            fruit = 'pear';
            $nextTick(() => { console.log($event.target.innerText) });
        "
        x-text="fruit"
    ></button>
</div>

$nextTick, verilen bir ifadeyi sadece, Alpine 'nın kendi reaktif DOM güncellemelerini yaptıktan SONRA çalıştırmanıza olanak sağlayan sihirli bir özelliktir. Bu, yaptığınız herhangi bir güncellemenin yansıltılmasından sonraki DOM durumuyla iletişim kurmak istediğinizde kullanışlıdır.

`$watch`

Örnek:

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">Aç Kapa</button>
</div>

$watch sihirli metoduyla bir bileşen özelliğini "izleye" bilirsiniz. Yukarıdaki örnekte, butona tıklanıp open değiştiğinde, verilen geri çağırma fonksiyonu ateşlenir ve yeni değer console.log ile basılır.

Güvenlik

Eğer güvenlik zaafları bulursanız lütfen calebporzio@gmail.com adresine gönderin.

Alpine kendi direktiflerini çalıştırmak için Function nesnesinin özel bir uygulamasına dayanır. eval() fonksiyonundan daha güvenli olmasına rağmen, Google Chrome App gibi sınırlandırılmış İçerik Güvenliği Politikası (İGP) kullanan bazı ortamlarda kullanımı yasaktır.

Eğer Alpine 'ı hassas verilerle ilgilenen ve CSP gerektiren bir sitede kullanırsanız, politikanıza unsafe-eval 'i dahil etmeniz gerekir. Doğru şekilde yapılandırılmış sağlam bir politika, kişisel veya finansal verileri kullanırken kullanıcılarınızın korunmasına yardımcı olacaktır.

Bu politika, sayfanızdaki tüm kodlara uygulanacağından, sitenize eklediğiniz diğer dış kütüphanelerin güvenilir olduklarını ve sayfanıza ya eval() fonksiyonunu kullanarak ya da zararlı kod enjekte edip DOM 'u yöneterek Siteler Arası Betik Çalıştırma zaafını uygulamadığından emin olmak için söz konusu bu kütüphaneleri dikkatlice gözden geçirmek önemlidir.

V3 Yol Haritası

Vue benzerliği için "x-ref" ten "ref" e geçilsin mi?
Alpine.directive() Eklemek
Alpine.component('foo', {...}) Eklemek (Sihirli __init() metoduyla birlikte)
"loaded", "transition-start" vb. için Alpine olaylarını iletmek... (#299) ?
x-bind:class="{ 'foo': true }" 'dan "object" (ve array) sentaksını kaldırmak (#236 style özelliği için nesne sentaksını desteklemek)
x-for reaktif değişimi geliştirmek (#165)
V3 'te "derin izleme" desteği eklemek (#294)
$el kısayolu eklemek
@click.away 'i @click.outside olarak değiştirmek?

Lisans

MIT lisansı altında lisanslanmıştır, detaylar için LICENSE.md 'e bakınız.

35 KiB Raw Blame History Unescape Escape

Alpine.js

Translated documentation

Kurulum

Kullanım

Öğrenme

Sponsorlar

Topluluk Projeleri

Direktifler

x-data

x-init

x-show

x-bind

x-on

camel belirteci, olay dinleyiciye olay isminin deve notasyonuna denk gelen ifadesini ekler. Yukarıdaki örnekte, eventName olayı element üzerinde tetiklendiğinde, ifade çalıştırılacak.

x-model

x-text

x-html

x-ref

x-if

x-for

İç içe x-for lar

Bir aralık üzerinde iterasyoun

x-transition

x-spread

x-cloak

Sihirli Özellikler

$el

$refs

$event

$dispatch

$nextTick

$watch

Güvenlik

V3 Yol Haritası

Lisans

35 KiB

Raw Blame History

`x-data`

`x-init`

`x-show`

`x-bind`

`x-on`

`camel` belirteci, olay dinleyiciye olay isminin deve notasyonuna denk gelen ifadesini ekler. Yukarıdaki örnekte, `eventName` olayı element üzerinde tetiklendiğinde, ifade çalıştırılacak.

`x-model`

`x-text`

`x-html`

`x-ref`

`x-if`

`x-for`

İç içe `x-for` lar

`x-transition`

`x-spread`

`x-cloak`

`$el`

`$refs`

`$event`

`$dispatch`

`$nextTick`

`$watch`