# Alpine.js
[](https://alpinejs.codewithhugo.com/chat/)
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](https://tailwindcss.com/) 'ın JavaScript versiyonu olarak düşünebilirsiniz.
> Not: Bu kütüphanenin sentaksının neredeyse tamamında [Vue](https://vuejs.org/) (ve dolayısıyla [Angular](https://angularjs.org/)) '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 | [**繁體中文說明文件**](./README.zh-TW.md) |
| German | [**Dokumentation in Deutsch**](./README.de.md) |
| Indonesian | [**Dokumentasi Bahasa Indonesia**](./README.id.md) |
| Japanese | [**日本語ドキュメント**](./README.ja.md) |
| Portuguese | [**Documentação em Português**](./README.pt.md) |
| Russian | [**Документация на русском**](./README.ru.md) |
| Spanish | [**Documentación en Español**](./README.es.md) |
| Turkish | [**Türkçe Dökümantasyon**](./README.tr.md) |
## Kurulum
**CDN ile:** Aşağıdaki script' i `` alanının sonuna ekleyin.
```html
```
İş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:
```html
```
**Npm ile:** Npm kullanarak paketi yükleyin.
```js
npm i alpinejs
```
Kodunuza dahil edin.
```js
import 'alpinejs'
```
**IE11 desteği için** O halde aşağıdaki script' leri kullanın.
```html
```
Yukarıdaki [module/nomodule üslubu](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) ü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*
```html
Menü İçeriği
```
*Tabs Sekmeler*
```html
Foo Sekmesi
Bar Sekmesi
```
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.*
```html
Loading Spinner...
```
## Öğrenme
Sizin için 14 direktif var:
| Direktif | Açıklaması |
| --- | --- |
| [`x-data`](#x-data) | Yeni bir bileşenin kapsamını tanımlar. |
| [`x-init`](#x-init) | Bileşen başlar başlamaz bir ifadeyi çalıştırır. |
| [`x-show`](#x-show) | (true or false) durumuna göre elemente `display: none;` özelliği ekler çıkarır. |
| [`x-bind`](#x-bind) | JS ifadesinin sonucuna göre değişkene değer atar. |
| [`x-on`](#x-on) | Elemente olay dinleyicisi ekler. Tetiklendiğinde JS ifadesini çalıştırır. |
| [`x-model`](#x-model) | Elemente "çift yönlü bağlama" ekler. Bu input elementi ile bileşendeki datayı senkronize şekilde tutar. |
| [`x-text`](#x-text) | 'x-bind' ile benzer çalışır, yalnız bu elementin `innerText` özelliğini günceller. |
| [`x-html`](#x-html) | 'x-bind' ile benzer çalışır, yalnız bu elementin `innerHTML` özelliğini günceller. |
| [`x-ref`](#x-ref) | İşlenmemiş DOM elementleri bileşeninizin dışından tekrar almak için kullanışlı bir yöntem. |
| [`x-if`](#x-if) | Elementi DOM' dan tamamen kaldırır. `` etiketi üzerinde kullanılması gerekir. |
| [`x-for`](#x-for) | Dizideki her bir eleman için yeni DOM düğümü oluşturur. `` etiketi üzerinde kullanılması gerekir. |
| [`x-transition`](#x-transition) | Elementin çeşitli değişim aşamalarına sınıflar ekleyen direktifler. |
| [`x-spread`](#x-spread) | Daha iyi yeniden kullanılabilirlik için Alpine direktifler nesnesini bir elemente bağlamanızı sağlar. |
| [`x-cloak`](#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`](#el) | Kök bileşen DOM düğümünü getirir. |
| [`$refs`](#refs) | Bileşen içindeki `x-ref` ile işaretlenmiş DOM elementlerini getirir. |
| [`$event`](#event) | Olay dinleyicisine bağlı tarayıcıya ait "Event" nesnesini getirir. |
| [`$dispatch`](#dispatch) | `CustomEvent` oluşturur ve dahili olarak `.dispatchEvent()` kullanıp gönderir. |
| [`$nextTick`](#nexttick) | Alpine kendi reaktif DOM güncellemelerini yaptıktan SONRA verilen ifadeyi çalıştırır. |
| [`$watch`](#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](https://twitter.com/calebporzio)**
## Topluluk Projeleri
* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
### Direktifler
---
### `x-data`
**Örnek:** `
...
`
**Yapı:** `
...
`
`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:
```html
// Dropdown
```
> **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:
```html
```
---
### `x-init`
**Örnek:** ``
**Yapı:** ``
`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:** ``
**Yapı:** ``
`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.
```html
Bu içerik görünürken ve kaybolurken geçiş animasyonuna sahip olacak.
```
| 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:
```html
```
---
### `x-bind`
> Not: Daha kısa sentaks ":" kullanmakta özgürsünüz: `:type="..."`.
**Örnek:** ``
**Yapı:** ``
`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:
``
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:
```html
```
Bu, `myVar` true ya da false olduğunda sırasıyla `disabled` özelliğini ekler veya kaldırır.
[HTML specification](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute) '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:** `
**Logonuzun burda olmasını ister misiniz? [DM on Twitter](https://twitter.com/calebporzio)**
## Topluluk Projeleri
* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
### Direktifler
---
### `x-data`
**Örnek:** `