@ryangjchandler/x-else NPM

✨ Help support the maintenance of this package by sponsoring me.

`x-else`

Quickly create else conditions for your x-if directives.

GitHub tag (latest by date) Build size Brotli

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/x-else@0.x.x/dist/x-else.js"></script>

NPM

npm install @ryangjchandler/x-else

Add 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-else element must be the next sibling of an x-if element.

License

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

@everything-registry/sub-chunk-798 @zalastax/nolb-_ryang @infinitebrahmanuniverse/nolb-_ryang

0.0.2

5 years ago

0.0.1

5 years ago