# Alpine.js

Alpine.js دەستەبەری سروشتێکی کاردانەوەو ڕاگەیاندراوی گەورە چوارچێوەکارەکانی وەک Vue و React بە کەمترین تێچوون.

دەتوانیت DOM ەکەت لەشوێنی خۆیدا بپارێزیت و ئەو فرمان و کردارەی بۆ زیاد بکەیت، کە خۆت بەگونجاوی دەزانیت.

بیری لێ بکەرەوە وەک Tailwind بۆ جاڤاسکریپت.

تێبینی: سینتاکسی ئەم توڵئامرازە بە تەواوی وەرگیراوە لە Vue (هەروەها بەشێک لە Angular). من بۆ هەمیشە سوپاسگوزاری ئەو دیارییەی ئەوانم بۆ وێب

بەڵگەنامە وەرگێڕدراوەکان

زمان	بەستەر بۆ بەڵگەنامە
Arabic	التوثيق باللغة العربية
Chinese Simplified	简体中文文档
Chinese Traditional	繁體中文說明文件
Kurdish (Sorani) Traditional	بەڵگەنامە بەزمانی کوردیی
German	Dokumentation in Deutsch
Indonesian	Dokumentasi Bahasa Indonesia
Japanese	日本語ドキュメント
Norwegian	Dokumentasjon på norsk
Portuguese	Documentação em Português
Russian	Документация на русском
Spanish	Documentación en Español
Turkish	Türkçe Dokümantasyon
Français	Documentation en Français
Korean	한국어 문서

دامەزراندن

بە بەکارهێنانی CDN: ئەم سکریپتەی خوارەوە زیاد بکە بۆ بڕگەی <head>.

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

تەنها هەر ئەوەیە. خۆی دەست پێ دەکات.

بۆ ژینگەی بەرهەمهێنان، پێشنیار دەکرێت ژمارەیەکی وەشانێکی دیاریکراو لە بەستەرەکەدا جێگیر بکرێت، بۆئەوەی لە شکانێکی چاوەڕوان نەکراو لە وەشانەکانی نوێتر دوور بێت. بۆ نموونە، بۆ بەکارهێنانی وەشانی 2.8.2 (دواترین):

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

بە بەکارهێنانی npm: دامەزراندنی گورزەکە لە npm.

npm i alpinejs

بیخەرە ناو سکریپتەکەتەوە.

import 'alpinejs'

بۆ پاڵپشتی IE11 لەجیاتی ئەوە ئەم سکریپتانە بەکاربهێنە.

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

ئەو نمونەی سەرەوە module/nomodule pattern دەبێتە هۆی ئەوەی کە بە شێوەیەکی خۆکارانە لە وێبگەڕە هاوچەرخەکان باربکرێت و ئەو چەپکە بە خۆکارانە لەسەر IE11 و وێبگەڕە میراتیەکانی تر بارکراوە.

بەکارهێنان

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>

Tabs

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

تەنانەت دەتوانیت بەکاری بهێنیت بۆ شتە بێ بەهاکان(none-triviale): Pre-fetching a dropdown's HTML content on hover.

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

فێربوون

١٤ فەرمان بەردەستە بۆ بەکارهێنان:

هەروەها ٦ تایبەتمەندی جادوویی:

Community Projects

Alpine Devtools
Alpine Magic Helpers
Alpine Weekly Newsletter
Spruce (State Management)
Awesome Alpine
Turbolinks Adapter

Directives

`x-data`

نمونە: <div x-data="{ foo: 'bar' }">...</div>

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

x-data declares a new component scope. It tells the framework to initialize a new component with the following data object.

Think of it like the data property of a Vue component.

Extract Component Logic

You can extract data (and behavior) into reusable functions:

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

For bundler users, note that Alpine.js accesses functions that are in the global scope (window), you'll need to explicitly assign your functions to window in order to use them with x-data for example window.dropdown = function () {} (this is because with Webpack, Rollup, Parcel etc. function's you define will default to the module's scope not window).

You can also mix-in multiple data objects using object destructuring:

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

`x-init`

نمونە: <div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>

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

x-init runs an expression when a component is initialized.

If you wish to run code AFTER Alpine has made its initial updates to the DOM (something like a mounted() hook in VueJS), you can return a callback from x-init, and it will be run after:

x-init="() => { // we have access to the post-dom-initialization state here // }"

`x-show`

نمونە: <div x-show="open"></div>

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

x-show toggles the display: none; style on the element depending if the expression resolves to true or false.

x-show.transition

x-show.transition is a convenience API for making your x-shows more pleasant using CSS transitions.

<div x-show.transition="open">
    These contents will be transitioned in and out.
</div>

Note: All of these transition modifiers can be used in conjunction with each other. This is possible (although ridiculous lol): x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95

Note: x-show will wait for any children to finish transitioning out. If you want to bypass this behavior, add the .immediate modifier:

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

`x-bind`

Note: You are free to use the shorter ":" syntax: :type="...".

نمونە: <input x-bind:type="inputType">

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

x-bind sets the value of an attribute to the result of a JavaScript expression. The expression has access to all the keys of the component's data object, and will update every-time its data is updated.

Note: attribute bindings ONLY update when their dependencies update. The framework is smart enough to observe data changes and detect which bindings care about them.

x-bind for class attributes

x-bind behaves a little differently when binding to the class attribute.

For classes, you pass in an object whose keys are class names, and values are boolean expressions to determine if those class names are applied or not.

For example: <div x-bind:class="{ 'hidden': foo }"></div>

In this example, the "hidden" class will only be applied when the value of the foo data attribute is true.

x-bind for boolean attributes

x-bind supports boolean attributes in the same way as value attributes, using a variable as the condition or any JavaScript expression that resolves to true or false.

For example:

<!-- Given: -->
<button x-bind:disabled="myVar">Click me</button>

<!-- When myVar == true: -->
<button disabled="disabled">Click me</button>

<!-- When myVar == false: -->
<button>Click me</button>

This will add or remove the disabled attribute when myVar is true or false respectively.

Boolean attributes are supported as per the HTML specification, for example disabled, readonly, required, checked, hidden, selected, open, etc.

Note: If you need a false state to show for your attribute, such as aria-*, chain .toString() to the value while binding to the attribute. For example: :aria-expanded="isOpen.toString()" would persist whether isOpen was true or false.

.camel modifier نمونە: <svg x-bind:view-box.camel="viewBox">

The camel modifier will bind to the camel case equivalent of the attribute name. In the example above, the value of viewBox will be bound the viewBox attribute as opposed to the view-box attribute.

`x-on`

Note: You are free to use the shorter "@" syntax: @click="...".

نمونە: <button x-on:click="foo = 'bar'"></button>

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

x-on attaches an event listener to the element it's declared on. When that event is emitted, the JavaScript expression set as its value is executed. You can use x-on with any event available for the element you're adding the directive on, for a full list of events, see the Event reference on MDN for a list of possible values.

If any data is modified in the expression, other element attributes "bound" to this data, will be updated.

Note: You can also specify a JavaScript function name.

نمونە: <button x-on:click="myFunction"></button>

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

keydown modifiers

نمونە: <input type="text" x-on:keydown.escape="open = false">

You can specify specific keys to listen for using keydown modifiers appended to the x-on:keydown directive. Note that the modifiers are kebab-cased versions of Event.key values.

نمونەکان: enter, escape, arrow-up, arrow-down

Note: You can also listen for system-modifier key combinations like: x-on:keydown.cmd.enter="foo"

.away modifier

نمونە: <div x-on:click.away="showModal = false"></div>

When the .away modifier is present, the event handler will only be executed when the event originates from a source other than itself, or its children.

This is useful for hiding dropdowns and modals when a user clicks away from them.

.prevent modifier نمونە: <input type="checkbox" x-on:click.prevent>

Adding .prevent to an event listener will call preventDefault on the triggered event. In the above example, this means the checkbox wouldn't actually get checked when a user clicks on it.

.stop modifier نمونە: <div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>

Adding .stop to an event listener will call stopPropagation on the triggered event. In the above example, this means the "click" event won't bubble from the button to the outer <div>. Or in other words, when a user clicks the button, foo won't be set to 'bar'.

.self modifier نمونە: <div x-on:click.self="foo = 'bar'"><button></button></div>

Adding .self to an event listener will only trigger the handler if the $event.target is the element itself. In the above example, this means the "click" event that bubbles from the button to the outer <div> will not run the handler.

.window modifier نمونە: <div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>

Adding .window to an event listener will install the listener on the global window object instead of the DOM node on which it is declared. This is useful for when you want to modify component state when something changes with the window, like the resize event. In this example, when the window grows larger than 768 pixels wide, we will close the modal/dropdown, otherwise maintain the same state.

Note: You can also use the .document modifier to attach listeners to document instead of window

.once modifier نمونە: <button x-on:mouseenter.once="fetchSomething()"></button>

Adding the .once modifier to an event listener will ensure that the listener will only be handled once. This is useful for things you only want to do once, like fetching HTML partials and such.

.passive modifier نمونە: <button x-on:mousedown.passive="interactive = true"></button>

Adding the .passive modifier to an event listener will make the listener a passive one, which means preventDefault() will not work on any events being processed, this can help, for example with scroll performance on touch devices.

.debounce modifier نمونە: <input x-on:input.debounce="fetchSomething()">

The debounce modifier allows you to "debounce" an event handler. In other words, the event handler will NOT run until a certain amount of time has elapsed since the last event that fired. When the handler is ready to be called, the last handler call will execute.

The default debounce "wait" time is 250 milliseconds.

If you wish to customize this, you can specify a custom wait time like so:

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

.camel modifier نمونە: <input x-on:event-name.camel="doSomething()">

The camel modifier will attach an event listener for the camel case equivalent event name. In the example above, the expression will be evaluated when the eventName event is fired on the element.

`x-model`

نمونە: <input type="text" x-model="foo">

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

x-model adds "two-way data binding" to an element. In other words, the value of the input element will be kept in sync with the value of the data item of the component.

Note: x-model is smart enough to detect changes on text inputs, checkboxes, radio buttons, textareas, selects, and multiple selects. It should behave how Vue would in those scenarios.

.number modifier نمونە: <input x-model.number="age">

The number modifier will convert the input's value to a number. If the value cannot be parsed as a valid number, the original value is returned.

.debounce modifier نمونە: <input x-model.debounce="search">

The debounce modifier allows you to add a "debounce" to a value update. In other words, the event handler will NOT run until a certain amount of time has elapsed since the last event that fired. When the handler is ready to be called, the last handler call will execute.

The default debounce "wait" time is 250 milliseconds.

If you wish to customize this, you can specify a custom wait time like so:

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

`x-text`

نمونە: <span x-text="foo"></span>

Structure: <span x-text="[expression]"

x-text works similarly to x-bind, except instead of updating the value of an attribute, it will update the innerText of an element.

`x-html`

نمونە: <span x-html="foo"></span>

Structure: <span x-html="[expression]"

x-html works similarly to x-bind, except instead of updating the value of an attribute, it will update the innerHTML of an element.

⚠️ Only use on trusted content and never on user-provided content. ⚠️

Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.

`x-ref`

نمونە: <div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>

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

x-ref provides a convenient way to retrieve raw DOM elements out of your component. By setting an x-ref attribute on an element, you are making it available to all event handlers inside an object called $refs.

This is a helpful alternative to setting ids and using document.querySelector all over the place.

Note: you can also bind dynamic values for x-ref: <span :x-ref="item.id"></span> if you need to.

`x-if`

نمونە: <template x-if="true"><div>Some Element</div></template>

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

For cases where x-show isn't sufficient (x-show sets an element to display: none if it's false), x-if can be used to actually remove an element completely from the DOM.

It's important that x-if is used on a <template></template> tag because Alpine doesn't use a virtual DOM. This implementation allows Alpine to stay rugged and use the real DOM to work its magic.

Note: x-if must have a single root element inside the <template></template> tag.

Note: When using template in a svg tag, you need to add a polyfill that should be run before Alpine.js is initialized.

`x-for`

نمونە:

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

Note: the :key binding is optional, but HIGHLY recommended.

x-for is available for cases when you want to create new DOM nodes for each item in an array. This should appear similar to v-for in Vue, with one exception of needing to exist on a template tag, and not a regular DOM element.

If you want to access the current index of the iteration, use the following syntax:

<template x-for="(item, index) in items" :key="index">
    <!-- You can also reference "index" inside the iteration if you need. -->
    <div x-text="index"></div>
</template>

If you want to access the array object (collection) of the iteration, use the following syntax:

<template x-for="(item, index, collection) in items" :key="index">
    <div>
        <!-- You can also reference "collection" inside the iteration if you need. -->
        <!-- Current item. -->
        <div x-text="item"></div>
        <!-- Same as above. -->
        <div x-text="collection[index]"></div>
        <!-- Previous item. -->
        <div x-text="collection[index - 1]"></div>
    </div>
</template>

Note: x-for must have a single root element inside of the <template></template> tag.

Note: When using template in a svg tag, you need to add a polyfill that should be run before Alpine.js is initialized.

Nesting `x-for`s

You can nest x-for loops, but you MUST wrap each loop in an element. For example:

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

Iterating over a range

Alpine supports the i in n syntax, where n is an integer, allowing you to iterate over a fixed range of elements.

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

`x-transition`

نمونە:

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

The example above uses classes from Tailwind CSS.

Alpine offers 6 different transition directives for applying classes to various stages of an element's transition between "hidden" and "shown" states. These directives work both with x-show AND x-if.

These behave exactly like VueJS's transition directives, except they have different, more sensible names:

`x-spread`

نمونە:

<div x-data="dropdown()">
    <button x-spread="trigger">Open Dropdown</button>

    <span x-spread="dialogue">Dropdown Contents</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 allows you to extract an element's Alpine bindings into a reusable object.

The object keys are the directives (Can be any directive including modifiers), and the values are callbacks to be evaluated by Alpine.

Note: There are a couple of caveats to x-spread:

When the directive being "spread" is x-for, you should return a normal expression string from the callback. For example: ['x-for']() { return 'item in items' }.

x-data and x-init can't be used inside a "spread" object.

`x-cloak`

نمونە: <div x-data="{}" x-cloak></div>

x-cloak attributes are removed from elements when Alpine initializes. This is useful for hiding pre-initialized DOM. It's typical to add the following global style for this to work:

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

Magic Properties

With the exception of $el, magic properties are not available within x-data as the component isn't initialized yet.

`$el`

نمونە:

<div x-data>
    <button @click="$el.innerHTML = 'foo'">Replace me with "foo"</button>
</div>

$el is a magic property that can be used to retrieve the root component DOM node.

`$refs`

نمونە:

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

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

$refs is a magic property that can be used to retrieve DOM elements marked with x-ref inside the component. This is useful when you need to manually manipulate DOM elements.

`$event`

نمونە:

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

$event is a magic property that can be used within an event listener to retrieve the native browser "Event" object.

Note: The $event property is only available in DOM expressions.

If you need to access $event inside of a JavaScript function you can pass it in directly:

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

`$dispatch`

نمونە:

<div @custom-event="console.log($event.detail.foo)">
    <button @click="$dispatch('custom-event', { foo: 'bar' })">
    <!-- When clicked, will console.log "bar" -->
</div>

Note on Event Propagation

Notice that, because of event bubbling, when you need to capture events dispatched from nodes that are under the same nesting hierarchy, you'll need to use the .window modifier:

نمونە:

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

This won't work because when custom-event is dispatched, it'll propagate to its common ancestor, the div.

Dispatching to Components

You can also take advantage of the previous technique to make your components talk to each other:

نمونە:

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

<button x-data @click="$dispatch('custom-event', 'Hello World!')">
<!-- When clicked, will console.log "Hello World!". -->

$dispatch is a shortcut for creating a CustomEvent and dispatching it using .dispatchEvent() internally. There are lots of good use cases for passing data around and between components using custom events. Read here for more information on the underlying CustomEvent system in browsers.

You will notice that any data passed as the second parameter to $dispatch('some-event', { some: 'data' }), becomes available through the new events "detail" property: $event.detail.some. Attaching custom event data to the .detail property is standard practice for CustomEvents in browsers. Read here for more info.

You can also use $dispatch() to trigger data updates for x-model bindings. For example:

<div x-data="{ foo: 'bar' }">
    <span x-model="foo">
        <button @click="$dispatch('input', 'baz')">
        <!-- After the button is clicked, `x-model` will catch the bubbling "input" event, and update foo to "baz". -->
    </span>
</div>

Note: The $dispatch property is only available in DOM expressions.

If you need to access $dispatch inside of a JavaScript function you can pass it in directly:

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

`$nextTick`

نمونە:

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

$nextTick is a magic property that allows you to only execute a given expression AFTER Alpine has made its reactive DOM updates. This is useful for times you want to interact with the DOM state AFTER it's reflected any data updates you've made.

`$watch`

نمونە:

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

You can "watch" a component property with the $watch magic method. In the above example, when the button is clicked and open is changed, the provided callback will fire and console.log the new value.

Security

If you find a security vulnerability, please send an email to calebporzio@gmail.com.

Alpine relies on a custom implementation using the Function object to evaluate its directives. Despite being more secure then eval(), its use is prohibited in some environments, such as Google Chrome App, using restrictive Content Security Policy (CSP).

If you use Alpine in a website dealing with sensitive data and requiring CSP, you need to include unsafe-eval in your policy. A robust policy correctly configured will help protecting your users when using personal or financial data.

Since a policy applies to all scripts in your page, it's important that other external libraries included in the website are carefully reviewed to ensure that they are trustworthy and they won't introduce any Cross Site Scripting vulnerability either using the eval() function or manipulating the DOM to inject malicious code in your page.

V3 Roadmap

Move from x-ref to ref for Vue parity?
Add Alpine.directive()
Add Alpine.component('foo', {...}) (With magic __init() method)
Dispatch Alpine events for "loaded", "transition-start", etc... (#299) ?
Remove "object" (and array) syntax from x-bind:class="{ 'foo': true }" (#236 to add support for object syntax for the style attribute)
Improve x-for mutation reactivity (#165)
Add "deep watching" support in V3 (#294)
Add $el shortcut
Change @click.away to @click.outside?

License

Licensed under the MIT license, see LICENSE.md for details.

فەرمان	باسکردن
`x-data`	ڕاگەیاندنی پێکهاتەیەکی نوێی بوار (scope)
`x-init`	دەربڕینێک ئیش پێدەکات کاتێک پێکهاتەیەک دەست پێ دەکات.
`x-show`	دەستەبەری `display: none;` لەسەر توخمەکە پشت دەبەستێت بە دەربڕینی (true or false).
`x-bind`	بەهای تایبەتمەندییەک (attribute) بۆ ئەنجامی دەربڕینی JS دادەنێت.
`x-on`	گوێگری ڕووداو (event listener) بە توخمەکەوە (element) گرێ دەدات. جێبەجێکردنی دەربڕینی JS کاتێک نێردرا.
`x-model`	زیادکردنی "two-way data binding" بۆ توخمێک (element). ڕاگرتنی دەرخواردەی توخم لەناو هاوکاتکردن(sync) لەگەڵ داتای پێکهاتە.
`x-text`	بەهەمانشێوە کاردەکات بۆ `x-bind`, بەڵام دەق نوێ دەکاتەوە بۆ `innerText` لەناو توخمێک.
`x-html`	بەهەمانشێوە کاردەکات بۆ `x-bind`, بەڵام دەق نوێ دەکاتەوە بۆ `innerHTML` لەناو توخمێک.
`x-ref`	ڕێگەیەکی گونجاو بۆ گەڕاندنەوەی توخمە خاوەکانی DOM لە دەرەوەی پێکهاتەکەت.
`x-if`	توخمێک بە تەواوی لە DOM دەسڕێتەوە. پێویستە لەسەر تاگی '' بەکاربهێنرێت.
`x-for`	دروستکردنی گرێی نوێی DOM بۆ هەر دانەیەک لە ریزێک. پێویستە لەسەر تاگی '' بەکاربهێنرێت.
`x-transition`	رێنیشاندەر بۆ جێبەجێکردنی پۆلەکان بۆ چەند قۆناغی جیاواز لە گواستنەوەی توخمێک
`x-spread`	ڕێگەت پێدەدات بۆ ئەوەی ئامانجێک ببەستیت لە Apline بە توخمێک بۆ توانای باشتر.
`x-cloak`	ئەم تایبەتمەندیە لادەبرێت کاتێک Apline دەست پێ دەکات. بەسوودە بۆ شاردنەوەی DOM ی پێش ئامادەکراو.
تایبەتمەندییە جادووییەکان	پێناسە
`$el`	گەڕاندنەوەی ڕەگی پێکهاتەی گرێی DOM.
`$refs`	گەڕاندنەوەی توخمە دیاریکراوەکانی DOM لەگەڵ `x-ref` لەناو پێکهاتەیەک.
`$event`	Retrieve the native browser "Event" object within an event listener.
`$dispatch`	Create a `CustomEvent` and dispatch it using `.dispatchEvent()` internally.
`$nextTick`	Execute a given expression AFTER Alpine has made its reactive DOM updates.
`$watch`	Will fire a provided callback when a component property you "watched" gets changed.
Directive	Description
`x-show.transition`	A simultaneous fade and scale. (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`	Only transition in.
`x-show.transition.out`	Only transition out.
`x-show.transition.opacity`	Only use the fade.
`x-show.transition.scale`	Only use the scale.
`x-show.transition.scale.75`	Customize the CSS scale transform `transform: scale(.75)`.
`x-show.transition.duration.200ms`	Sets the "in" transition to 200ms. The out will be set to half that (100ms).
`x-show.transition.origin.top.right`	Customize the CSS transform origin `transform-origin: top right`.
`x-show.transition.in.duration.200ms.out.duration.50ms`	Different durations for "in" and "out".
Directive	Description
`:enter`	Applied during the entire entering phase.
`:enter-start`	Added before element is inserted, removed one frame after element is inserted.
`:enter-end`	Added one frame after element is inserted (at the same time `enter-start` is removed), removed when transition/animation finishes.
`:leave`	Applied during the entire leaving phase.
`:leave-start`	Added immediately when a leaving transition is triggered, removed after one frame.
`:leave-end`	Added one frame after a leaving transition is triggered (at the same time `leave-start` is removed), removed when the transition/animation finishes.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.ckb.md

README.ckb.md

بەڵگەنامە وەرگێڕدراوەکان

دامەزراندن

بەکارهێنان

فێربوون

Sponsors

Community Projects

Directives

`x-data`

`x-init`

`x-show`

`x-bind`

`x-on`

`x-model`

`x-text`

`x-html`

`x-ref`

`x-if`

`x-for`

Nesting `x-for`s

Iterating over a range

`x-transition`

`x-spread`

`x-cloak`

Magic Properties

`$el`

`$refs`

`$event`

`$dispatch`

`$nextTick`

`$watch`

Security

V3 Roadmap

License

Files

README.ckb.md

Latest commit

History

README.ckb.md

File metadata and controls

بەڵگەنامە وەرگێڕدراوەکان

دامەزراندن

بەکارهێنان

فێربوون

Sponsors

Community Projects

Directives

x-data

x-init

x-show

x-bind

x-on

x-model

x-text

x-html

x-ref

x-if

x-for

Nesting x-fors

Iterating over a range

x-transition

x-spread

x-cloak

Magic Properties

$el

$refs

$event

$dispatch

$nextTick

$watch

Security

V3 Roadmap

License

`x-data`

`x-init`

`x-show`

`x-bind`

`x-on`

`x-model`

`x-text`

`x-html`

`x-ref`

`x-if`

`x-for`

Nesting `x-for`s

`x-transition`

`x-spread`

`x-cloak`

`$el`

`$refs`

`$event`

`$dispatch`

`$nextTick`

`$watch`