Nobody Preheats Microwaves

    @mindfusion/common-ui
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    MindFusion JavaScript UI Controls

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

    MindFusion Calendar for JavaScript

    Official page of the Calendar library for JavaScript

    MindFusion DateTimePicker for JavaScript

    Official page of the DateTimePicker library for JavaScript.

    MindFusion Dialogs for JavaScript

    Official page of the Dialogs library for JavaScript.

    MindFusion ImagePicker for JavaScript

    Official page of the ImagePicker library for JavaScript.

    MindFusion ListView for JavaScript

    Official page of the ListView library for JavaScript.

    MindFusion Menu for JavaScript

    Official page of the Menu library for JavaScript.

    MindFusion TabControl for JavaScript

    Official page of the TabControl library for JavaScript.

    MindFusion ToolStrip for JavaScript

    Official page of the ToolStrip library for JavaScript.

    MindFusion Tooltip for JavaScript

    Official page of the Tooltip library for JavaScript.

    MindFusion TreeView for JavaScript

    Official page of the TreeView library for JavaScript.

    MindFusion Window for JavaScript

    Official page of the Window library for JavaScript.

    MindFusion WindowHost for JavaScript

    Official page of the WindowHost library for JavaScript.

    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

    1. Detailed API Reference
    2. Tutorials and Step-by-step Guides

    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.

    Install

    npm i @mindfusion/common-ui

    DownloadsWeekly Downloads

    7

    Version

    1.0.2

    License

    SEE LICENSE IN LICENSE.txt

    Unpacked Size

    1.54 MB

    Total Files

    33

    Last publish

    Collaborators

    • mindfusion