Any documentation on best practices for using Webix in Vue or React?
Hello Marc_Gusmano
In general, the common requirements for complex widgets to work is:
the webix variable should be available in the global context (it should be available before the complex widget’s sources are included or imported).
The Webix libriary/complex widgets can be included either:
- via the script tag on some page (e.g., index.html ):
<script src="../node_modules/@xbs/webix-pro/webix.js" type="text/javascript"></script>
or
- via importing the required dependencies. The second approach requires for the webix variable to be defined in the global scope.
For example:
import * as webix from "@xbs/webix-pro";
window.webix = webix;
Here you can find instuctions about React with Webix: GitHub - webix-hub/react-demo-complex: This demo shows how to init Webix complex widgets in React components..
There is a demo of VueJS adapter for Webix UI. Now it includes Vue 3 but we plan to update it.
In general, webix components can be initialized in any container.
It is also important to handle destuction of component inside the framework
In the existing example for widgets, a common wrapper is written. It or even a simpler version (depending on needs) can be used for all UI elements
thank you for the information - I have implemented the webix-ui.js component for vue3 in my code and I have a question about how to maintain sizing of the webix component relative to its parent
I would like any webix component to support a ‘flex’ layout
I have the following vue3 template
and I added this to the template of the webix-ui app component code
app.component(‘webix-ui’, {
template: <div style='border: 5px solid green;flex: 1;'></div>,
the red border is the parent div in my vue page
the green border is the webix-ui component border
when I first load I get this: (scroll bar is correct)
but if I resize the parent - the webix component does not continue to completely fill the parent:
what is the correct way to do this?
Hello Marc_Gusmano,
To maintain sizing of the webix component relative to its parent you can use ResizeObserver on the container. Because when embedded in a container, theUI of a webix component by default takes the current size of the container as its fixed size.