-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
release 1.0.6. adding support for paramSeparator
- Loading branch information
Raj Nandan Sharma
authored and
Raj Nandan Sharma
committed
Jul 30, 2022
1 parent
69f35d8
commit c2028fe
Showing
6 changed files
with
201 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,20 +14,31 @@ You can register any key. To trigger, it will bind an event with your specified | |
## Installation | ||
From CDN | ||
``` | ||
<script src="https://cdn.jsdelivr.net/gh/rajnandan1/[email protected].5/dist/floodlight.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/gh/rajnandan1/[email protected].6/dist/floodlight.min.js"></script> | ||
``` | ||
From NPM | ||
``` | ||
npm i floodlightjs | ||
import floodlight from 'floodlightjs'; | ||
``` | ||
## Demo + Documentation | ||
[Live instance of Floodlight](https://rajnandan1.github.io/floodlightjs/index.html) | ||
|
||
## Instantiation | ||
#### ES5 | ||
``` | ||
let fl = new FloodLight(); | ||
``` | ||
#### ES6 | ||
``` | ||
import floodlight from 'floodlightjs' | ||
if (typeof window !== 'undefined') { | ||
let fl = floodlight(); | ||
} | ||
``` | ||
## Basic Usage - Implement a quick google search `g` | ||
|
||
The below code implements a google search using floodgate. It will listen for the `g` key. When someone presses `g` it will show a search box. | ||
``` | ||
//import floodlight from 'floodlightjs' | ||
let fl = new FloodLight(); | ||
//this takes to parameters. first parameter is the `key`, second is the description | ||
|
@@ -97,6 +108,21 @@ fl.run(); | |
## Customizations | ||
|
||
Floodlightjs gives you control over how the UI elements look. You can pass a class for advanced handling or use simple colors. | ||
#### Separator | ||
``` | ||
let config = { | ||
paramSeparator: " " //search box will break multiple inputs using space. Default is ',' | ||
} | ||
let fl = new FloodLight(config); | ||
``` | ||
#### Simple theme set | ||
By default it will autodetect browser theme | ||
``` | ||
let config = { | ||
theme: "dark" //or light | ||
} | ||
let fl = new FloodLight(config); | ||
``` | ||
#### Simple Colors light or dark theme | ||
``` | ||
let config = { | ||
|
Oops, something went wrong.