@mindfusion/common-ui

v1.2.0

Published

17 days ago

Common UI library

Downloads

581

0High
0Medium
0Low

mindfusion

common UI library

MindFusion JavaScript UI Controls

The collection includes Calendar, DateTimePicker, Dialogs, ImagePicker, ListView, Menu, TabControl, ToolStrip, Tooltip, TreeView, Window and WindowHost controls.

What's New in MindFusion Common.UI 1.0.2

MindFusion UI for React contains React functional wrapper components for ListView, TreeView, TabControl and ToolStrip controls from the @mindfusion/common-ui package. The components override core controls' DOM generation functions to generate React VDOM elements instead.

The React wrapperscan be installed from the @mindfusion/ui-react package on npm:

npm i @mindfusion/ui-react

All wrapper components expose a forwardRef that can be passed on to other components. To obtain a reference to the underlying core control, use the respective find method of the ref, for example list1.current.find().

Properties and events defined by core controls can be set directly in JSX syntax:

<ListView
    id="list1" ref={list1}
    height="100%" theme="pastel"
    data={data}
    itemSize={common.Unit.pixel(20)}
    onSelectionChanged={(sender, args) => onSelectionChanged(sender, args)} >
</ListView>

Several often-used methods such as addItem, removeItem, and selectItem are defined in the wrapper components' API. Other methods must be called through the respective core control:

list1.current.addItem(<ListItem imageSrc={na} title="unknown"></ListItem>);
index = list1.current.find().items.indexOfItem(item);

Documentation

MindFusion Pack for JavaScript

The UI libraries are part of MindFusion Pack for JavaScript. Learn about the Pack at the offical JS Pack page.

Samples

A variety of samples are included in the JS Pack distribution. You can download it from here.

Online Demos

Online demo pages for all JavaScript controls are uploaded at https://mindfusion.eu/javascript-demo.html.

Additional Information

Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via Twitter or our company blog.

Technical Support

Licensing

The end-user license agreement for all MindFusion Programming Libraries is here.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

MindFusion JavaScript UI Controls

MindFusion Calendar for JavaScript

MindFusion DateTimePicker for JavaScript

MindFusion Dialogs for JavaScript

MindFusion ImagePicker for JavaScript

MindFusion ListView for JavaScript

MindFusion Menu for JavaScript

MindFusion TabControl for JavaScript

MindFusion ToolStrip for JavaScript

MindFusion Tooltip for JavaScript

MindFusion TreeView for JavaScript

MindFusion Window for JavaScript

MindFusion WindowHost for JavaScript