1.1.3 • Published 5 months ago
dst-js-button v1.1.3
DSTButton
DSTButton is a lightweight JavaScript module for creating customizable button elements. It allows you to easily add buttons with custom styles, event listeners, and attributes to your web pages.
Features
- Easy to Use: Create buttons with a single function call.
- Customizable: Pass custom CSS styles, events, and HTML attributes.
- Lightweight: Minimal dependency and easy integration.
- CDN & npm Ready: Use it directly from a CDN or install via npm.
Installation
Using npm
npm install dst-js-buttonUsing a CDN
<script type="module">
import DSTButton from 'https://cdn.jsdelivr.net/npm/dst-js-button@latest/dist/index.js?v=1';
</script>Usage
Basic Example in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSTButton Demo</title>
</head>
<body>
<div id="button-container"></div>
<script type="module">
import DSTButton from './src/index.js';
const button = DSTButton({
label: "Click Me",
styles: {
padding: "0.5em 1em",
backgroundColor: "ButtonFace",
color: "initial"
},
events: {
click: () => alert("Button Clicked!")
},
attributes: {
id: "my-custom-button",
title: "Custom Button"
}
});
document.getElementById("button-container").appendChild(button);
</script>
</body>
</html>Usage in JavaScript (without HTML)
import DSTButton from 'dst-button';
const button = DSTButton({
label: "Submit",
styles: {
padding: "0.5em 1em",
border: "2px outset ButtonFace",
fontSize: "0.3125rem",
cursor: "pointer"
},
events: {
click: () => console.log("click event triggered")
},
attributes: {
id: "submit-btn"
}
});
document.body.appendChild(button);API
DSTButton(options)
Parameters
options(Object):label(string): The text to display on the button.styles(Object, optional): CSS styles to apply.events(Object, optional): Event listeners.attributes(Object, optional): HTML attributes.
Returns
HTMLButtonElement: The created button element.
License
This project is licensed under the MIT License.