dodleui
v1.0.0
Published
A frontend library that simplifies UI functionality focusing on modern features.
Downloads
6
Maintainers
Readme
⚙️ Installation
Run the following command in your project directory :-
npm install dodleui
Also, you can download the zip file & then keep the dist
folder in your project directory. You can also rename the folder as you wish. For example we use dodleui
.
Download the zip file
📦 Importing
JavaScript: ES Module
Recommended and modern way to import the library in your project (eg. react).
import $ from "dodleui";
For HTML, import the library as follows:
<script type="module">
import $ from "./dodleui/dodleui.js";
</script>
Or, use import map:
<script type="importmap">
{
"imports": {
"dodleui": "/dodleui/dodleui.js"
}
}
</script>
<script type="module">
import $ from "dodleui";
</script>
JavaScript: Universal Module Definition
UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.
<script src="/dodleui/dodleui.umd.js" type="text/javascript">
<script>
DodleUI("#abc")...
</script>
CSS: Importing
<link rel="stylesheet" href="/dodleui/dodleui.css" />
...
<button class="m-5 button_red"></button>
📖 Documentation Guide
1.0. Selectors
// String for Element(s)
DodleUI("#abc").
DodleUI(".abc").
DodleUI("body > img")[0].
// Array for NodeList
DodleUI([".abc"]).
// Custom
DodleUI(document.getElementById("abc")).
1.1. Options
// for 'dragging'
DodleUI("#abc", {
highlight: true,
}).dragging(["#box1", "#box2"]);
1.2. Using Method
import $, {DodleUI} from "dodleui"; // You can change $ to any name
$(). // User Interface
DodleUI. // Utility
2.1. $().zoom
Creates a zoom effect for images.
$("#abc").zoom();
2.2. $().observer
Creates an intersection observer for elements.
$("#abc").observer(
(element) => {
// When observer is intersecting
},
(element) => {
// When observer is not intersecting
}
);
2.3. $().dragging
Drag and drop an element.
DodleUI("#abc").dragging(["#box1", "#box2"]);
DodleUI("#abc", {
highlight: true,
}).dragging(["#box1", "#box2"]);
3.1. DodleUI.keypress
Creates a keypress event for the user.
DodleUI.keypress((keyName, keyEvent) => {
if (keyName === "Ctrl+M") {
// When user presses control & m key
}
});
3.2. DodleUI.location
Gets the location of the user.
DodleUI.location((position, object) => {
console.log(position.lat, position.long);
});
3.3. DodleUI.accessible (beta)
Accessibility tool integration!
DodleUI.accessible({});
License
Released under the MIT License Copyright © 2024 Mohammad Sefatullah
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.