Drawer
Drawer is a front-end library for creating dynamic file explorers.
Install
NPM:
npm install @kylehue/drawer
CDN:
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kylehue/drawer/build/styles/style.css">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/@kylehue/drawer/browser/Drawer.js"></script>
Usage
import { Drawer } from "@kylehue/drawer";
const drawer = new Drawer({
/* ...options */
});
const root = drawer.initRoot(document.querySelector("#drawer"));
// Adding items
root.add("src/classes/comps/sample.txt");
// Deleting items
root.delete("/src/classes/comps");
// Moving items
root.get("src/classes")?.move("/");
// Listen on item add
drawer.onDidAddItem((desc) => {
console.log(desc.item.source + " has been added!");
});
// Listen on error
drawer.onError((error) => {
console.error(error.reason);
});
Styling
Here are some of the styles that can be customized.
Class name | Description |
---|---|
.drawer-folder |
Container of folder item |
.drawer-folder-head |
Folder header container |
.drawer-folder-icon |
Folder icon |
.drawer-folder-icon-chevron |
Folder arrow icon |
.drawer-file |
Container of file item |
.drawer-file-icon |
File icon |
.drawer-indent-guide |
Vertical lines beside the folder tree |
.drawer-drop-target |
Current location of item on drag |
.drawer-drag-label |
The item that is being dragged |
.drawer-item-focused |
Selected item |