THEMETRIAL

Build UI Components From JSON – HyderJS

Author:imprakashraghu
Views Total:0 views
Official Page:Go to website
Last Update:August 1, 2020
License:MIT

Preview:

Build UI Components From JSON – HyderJS

Description:

HyderJS is a modern open-source JavaScript library that allows you to quickly build reusable UI components from JSON.

How to use it:

1. Load the minified version of the HyderJS library in the document.

<script src="https://www.cssscript.com/./lib/hyder.min.js"></script>

2. Construct your UI components as follows. Supported components:

  • heading
  • text
  • image
  • button
  • input
  • container
  • link
  • list
  • dropdown
  • break
  • form
  • card
// heading
let title = {
    type: "heading",
    data: {
      text: "Text/HTML Here",
      style: {
        textAlign: "center",
        // more CSS styles here
      }
    }
};

// text
let description = {
    type: "text",
    data: {
      text: "Text/HTML Here",
      style: {
        textAlign: "center",
        // more CSS styles here
      }
    }
};

// image
let image = {
    type: "image",
    data: {
        id: "image-id",
        alt: "image-alt",
        src: "path/to/image.png",
        style: {
          width: "100%",
          // more CSS styles here
        }
    }
};

// buttons
let image = {
    "type": "button",
    "data": {
      "text": "Elegant",
      "type": "elegant",
      "style": {
            "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// input
let input = {
    "type": "input",
    "data": {
      "input": "url",
      "placeholder": "url here",
      "style": {
        "color": "black",
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// container
let container = {
    "type": "container",
    "data": {
      "arrange": "row",
      "align": "column",
      "items": [],
      "style": {
        "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// link
let link = {
    "type": "link",
    "data": {
      "href": "URL_LINK",
      "style": {
        "color": "black",
        "backgroundColor": "transparent",
        "textDecoration": "underline"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// list
let list = {
    "type": "list",
    "data": {
      "items": [{
        "text": "item1"
      }],
      "style": {
        "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// dropdown
let dropdown = {
    "type": "dropdown",
    "data": {
      "options": [{
        "text": "Text of option",
        "value": "Value of option",
        "style": {}
      }],
      "style": {
        "color": "black",
        "backgroundColor": "transparent",
        "textDecoration": "underline"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// Break
let break = {
    "type": "list",
    "data": {
      "type": "br"
    }
};

// form
let form = {
    "type": "dropdown",
    "data": {
      "action": "",
      "method": "POST",
      "items": [],
      "style": {
        "color": "black",
        "backgroundColor": "transparent"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};

// card
let form = {
    "type": "card",
    "data": {
      "shadow": "large",
      "items": [],
      "margin": {
          "x": 2,
          "y": 2
      },
      "padding": 2
    }
};

3. Add these UI components to a JSON array.

let blocks = [
    {
      type: "container",
      data: {
        margin: {
          y: 4
        },
        arrange: "column",
        align: "center",
        items: [
          image,
          title,
          description,
          ... more components here ...
        ]
      }
    }
];

Initialize the library and render the data into the document.

new HyderJS({

    // your JSON array
    bricks: blocks, 

    // id of the root container for rendering
    wall: "app" 
    
});


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.