Comments (3)
in another words, it would be great to see a step-by-step custom wiki instructions on adding a widget as such:
< a href = " some.link " >
< img src="some-image.png" >
< / a >
in practice, this creates a clickable picture ( click on the picture and the href link will happen ).
from the wiki, I understand that we can either do this via the components or the widgets ( .js files ) and adding a template for the properties as well at the indexhtml ..
I would appreciate if anyone could point me ..
thanks for any help,
from vvvebjs.
from vvvebjs.
Hi
Thank you, make sure that if the html string defined in the component has multiple lines every line has \
at the end like in the example below.
If you want a new group let's say Custom components you can create a components-custom.js and include it in editor.hml
<script src="libs/builder/components-bootstrap4.js"></script>
<script src="libs/builder/components-custom.js"></script>
After adding a new component inside components-custom.js
Vvveb.Components.extend("_base", "custom/clickableimage", {
html: '< a href = " some.link " >\
< img src="some-image.png" >\
< / a >',
...
};
you also need to add it to component group
Vvveb.ComponentsGroup['Custom components'] = [ "custom/clickableimage", "custom/component2",];
Or if you want to add the component to an existing group like bootstrap 4 just edit components-bootstrap4.js add the component code in the file and then append the name at the end of the Vvveb.ComponentsGroup['Bootstrap 4'] array
Vvveb.ComponentsGroup['Bootstrap 4'] =
["html/container", "html/gridrow", ... , "custom/clickableimage"]
I think the easiest way is to copy an existing component that is similar as a base, change the name and add it to a group and then start making changes.
from vvvebjs.
Related Issues (20)
- how to add new component like code editor ? HOT 1
- Media Manager files from S3 HOT 3
- Project improvements and doubts - invitation HOT 1
- Add NewPage Error?
- adding my own custom components HOT 1
- how to add text input to right area HOT 2
- PayloadTooLargeError: request entity too large HOT 1
- The model `text-davinci-003` has been deprecated HOT 1
- Adding a component using PHP and dynamically changing its attributes from the database HOT 1
- VvebJS Use Case Audit HOT 3
- Some bugs HOT 4
- Designer mode HOT 1
- Localhost XAMP HOT 7
- Vulnerabilities [VvvebJs] HOT 2
- VvvebJs 1.7.4 has a reflective XSS vulnerability HOT 2
- VvvebJs 1.7.4 has an arbitrary file upload vulnerability HOT 2
- docker-compose error HOT 1
- Can't update image or svg icon if I select element in second time HOT 3
- Body can be cloned..Fix
- Node gets inserted after body tag.. Fix
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vvvebjs.