@invopop/alpine-kit
v0.0.34
Published
A collection of reusable Alpine components ready to use inside Invopop modules
Downloads
11
Readme
Invopop Alpine Kit
This repository contains a collection of reusable components for Alpine.js and a centralized stylesheet for common elements such as inputs and buttons.
Getting Started
Prerequisites
1. Include Alpine.js
Make sure to include Alpine.js in your module. You can include it from a CDN.
<script src="https://cdn.jsdelivr.net/npm/alpinejs@v3"></script>2. Include common CSS stylesheet
Include the stylesheet for common elements, such as inputs and buttons.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@invopop/[email protected]/style.css"
/>3. Include Inter font from Google Fonts
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>Usage
Components
Browse through the components directory to find reusable Alpine.js components. Each component is self-contained, including logic and styles, and can be easily integrated into your module. Just copy and paste the html content. Make sure to replace any reference to placeholders to actual implementation.
<!-- image-picker-html -->
<div class="ui-image-picker">
<img x-show="config.logo_url" :src="config.logo_url" />
<div x-show="!config.logo_url" class="ui-logo-placeholder"></div>
<span x-text="loading ? 'Uploading...' : 'Select logo'"></span>
<button
class="ui-save-button ui-button-small"
@click="selectImage"
:disabled="loading"
>
Upload
</button>
<button
class="ui-secondary-button ui-button-small"
@click="deleteImage"
:disabled="loading || !config.logo_url"
>
Remove
</button>
</div>Common Styles
The global stylesheet provides styling for common elements like inputs and buttons and complex component described above. Simply include it in your project, and use the styles accordingly.