Spaces:
Running
Running
File size: 1,049 Bytes
7da13d6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
x-if
====
`x-if` is used for toggling elements on the page, similarly to `x-show`, however it completely adds and removes the element it's applied to rather than just changing its CSS display property to "none".
Because of this difference in behavior, `x-if` should not be applied directly to the element, but instead to a `<template>` tag that encloses the element. This way, Alpine can keep a record of the element once it's removed from the page.
<template x-if="open"> <div>Contents...</div></template>
<template x-if="open">
<div>Contents...</div>
</template>
> Despite not being included in the above snippet, `x-if` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
Caveats
-------
Unlike `x-show`, `x-if`, does NOT support transitioning toggles with `x-transition`.
`<template>` tags can only contain one root element.
[← x-teleport](/directives/teleport)
[x-id →](/directives/id)
Code highlighting provided by [Torchlight](https://torchlight.dev) |