Spaces:
Running
Running
File size: 2,696 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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
x-show
======
`x-show` is one of the most useful and powerful directives in Alpine. It provides an expressive way to show and hide DOM elements.
Here's an example of a simple dropdown component using `x-show`.
<div x-data="{ open: false }"> <button x-on:click="open = ! open">Toggle Dropdown</button> <div x-show="open"> Dropdown Contents... </div></div>
<div x-data="{ open: false }">
<button x-on:click="open = ! open">Toggle Dropdown</button>
<div x-show="open">
Dropdown Contents...
</div>
</div>
When the "Toggle Dropdown" button is clicked, the dropdown will show and hide accordingly.
> If the "default" state of an `x-show` on page load is "false", you may want to use `x-cloak` on the page to avoid "page flicker" (The effect that happens when the browser renders your content before Alpine is finished initializing and hiding it.) You can learn more about `x-cloak` in its documentation.
[With transitions](#with-transitions)
-------------------------------------
If you want to apply smooth transitions to the `x-show` behavior, you can use it in conjunction with `x-transition`. You can learn more about that directive [here](/directives/transition), but here's a quick example of the same component as above, just with transitions applied.
<div x-data="{ open: false }"> <button x-on:click="open = ! open">Toggle Dropdown</button> <div x-show="open" x-transition> Dropdown Contents... </div></div>
<div x-data="{ open: false }">
<button x-on:click="open = ! open">Toggle Dropdown</button>
<div x-show="open" x-transition>
Dropdown Contents...
</div>
</div>
[Using the important modifier](#using-the-important-modifier)
-------------------------------------------------------------
Sometimes you need to apply a little more force to actually hide an element. In cases where a CSS selector applies the `display` property with the `!important` flag, it will take precedence over the inline style set by Alpine.
In these cases you may use the `.important` modifier to set the inline style to `display: none !important`.
<div x-data="{ open: false }"> <button x-on:click="open = ! open">Toggle Dropdown</button> <div x-show.important="open"> Dropdown Contents... </div></div>
<div x-data="{ open: false }">
<button x-on:click="open = ! open">Toggle Dropdown</button>
<div x-show.important="open">
Dropdown Contents...
</div>
</div>
[← x-init](/directives/init)
[x-bind →](/directives/bind)
Code highlighting provided by [Torchlight](https://torchlight.dev) |