An awesome Bootstrap Card Editor for your dashboard or other usage !
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Bootstrap Card Editor is a simple card editor and render for business intelligence dashboard or other usage.
You have possibility to integrate editor in DOM element or use modal editor
With Bootstrap Card Editor you configure a static card or dynamic card with JSON integration.
Bootstrap Card Editor provide two editors :
- inline editor
- modal editor
After configuration, Bootstrap Card Editor dispatch an event cardEditorConfigure with a ful configuration for implementation.
Example :
Or dynamic example, a configuration for DynamicFetcher, a very simple ETL for JSON.
With this configuration, render card is very simple :
A list of commonly used resources that I find helpful are listed in the acknowledgements.
- npm
npm install npm@latest -g
-
Clone the repo
git clone https://github.com/jeremyrncp/bootstrap-card-editor.git
-
Install NPM packages
npm install
-
Install NPM packages
npm run build
or
-
Install NPM packages
npm install bootstrap-card-editor
import { CardEditor } from "./card-editor.js";
Render editor in modal
- Example: * // Render editor in modal const cardEditor = new CardEditor() cardEditor.modalEditor()
-
Returns:
void
—
Render editor in element
-
Parameters:
elm
—*
— : a valid element - Example: * // Render editor in element const cardEditor = new CardEditor() const elm = document.querySelector("div") cardEditor.inlineEditor(elm)
-
Returns:
void
—
Get render editor configuration
-
Returns:
object
— configuration of CardEditor
Render card in element with card editor configuration
-
Example: * // Render editor in element
const cardEditor = new CardEditor()
const elm = document.querySelector("div")
cardEditor.inlineEditor(elm)
elm.addEventListener("cardEditorConfigure", (event) => { const elementToRendered = document.querySelector("#element") const newCardEditor = new CardEditor(event.detail) newCardEditor.render(elm) })
-
Parameters:
elm
—*
— : a valid element
import { DynamicFetcher } from "./dynamic-fetcher";
Render editor in element
-
Parameters:
elm
—*
— : a valid element - Example: * // Render to div const div = document.querySelector("div") const dynamicFetcher = new DynamicFetcher() dynamicFetcher.render(div);
-
Returns:
void
—
Render result in element with configuration, render is refreshed
-
Parameters:
-
elm
—*
— : a valid element -
conf
—*
— : a valid configuration or null
-
- Example: * // Render to div const div = document.querySelector("div") const dynamicFetcher = new DynamicFetcher() dynamicFetcher.renderResult(div, {url:"https://gist.githubusercontent.com/rominirani/8235702/raw/a50f7c449c41b6dc8eb87d8d393eeff62121b392/employees.json", choice: { type: "last", data: "preferredFullName", parent: "Employees" }, refresh: 3600});
-
Returns:
void
—
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Jérémy Gaultier - contact@gaultierweb.com
Project Link: https://github.com/jeremyrncp/bootstrap-card-editor