Skip to content

EscuelaIt/Search-UI-Plugin-Alpine.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Search UI Plugin Alpine.js

This plugin creates a custom directive x-search-ui to implement a search user interface on an input.

How to use

Installation

Via CDN

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Via npm

npm i alpine-plugin-search-ui
import Alpine from 'alpinejs'
import searchUiPlugin from 'alpine-plugin-search-ui'; 

window.Alpine = Alpine
Alpine.plugin(searchUiPlugin)
Alpine.start()

Using the x-search-ui directive

<div x-data>
  <div x-search-ui class="search-container">
    <input type="text" placeholder="Search...">
  </div>
</div>

Modifiers

To change icon color use these modifiers:

  • black
  • white
<div x-data>
  <div x-search-ui.black class="search-container">
    <input type="text" placeholder="Search...">
  </div>
</div>

About

Developing a Apline.js demo plugin: Search UI Plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published