@ryangjchandler/x-else
v0.0.2
Published
An `x-else` directive for use in Alpine components.
Downloads
2
Readme
✨ Help support the maintenance of this package by sponsoring me.
x-else
Quickly create else conditions for your x-if directives.
About
This plugin adds a new x-else directive to Alpine.js which can automatically create negated counterparts for your x-if directives.
Installation
CDN
Include the following <script> tag at the end of your <body>:
<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/x-else.js"></script>NPM
npm install @ryangjchandler/x-elseAdd the x-else directive to your project by importing the package before Alpine.js.
import "@ryangjchandler/x-else"
// import "alpinejs"Usage
To use the x-else directive, add it to a <template> tag directly after an x-if directive.
<div x-data="{ show: false }">
<template x-if="show">
<p>I'm showing!</p>
</template>
<template x-else>
<p>I'm showing because the other one is not!</p>
</template>
</div>The
x-elseelement must be the next sibling of anx-ifelement.
License
Copyright (c) 2021 Ryan Chandler and contributors
Licensed under the MIT license, see LICENSE.md for details.