**[ This description is mirrored from README.md at [github.com/isuwang/metaui](https://github.com//isuwang/metaui/blob/v1.0.0-rc.1/README.md) on 2019-05-22 ]** [](https://www.webcomponents.org/element/isuwang/metaui) ## [Wiki](https://github.com/isuwang/metaui/wiki) ## Introduces > A metadata-driven front-end framework, which you can easily create a component in your web app with metadata. ## Tutorials ### Installation - [Install Polymer from Bower][1] - Install metaui ``` bower install git://github.com/isuwang/metaui.git ``` ### [_Demos and API docs_][2] ### Example ```html ``` ```javascript metadata = { query: { formUrl: "/query.do", fields: [ { name: "username", label: "Username", editable: true } ] }, result: { grids: [ { name: "username", label: "Username" }, { name: "phone", label: "Phone" }, { name: "addr", label: "Addr" }, { metaType: {type: "ACTION"}, name: "actions", label: "Actions" } ], actions: { "record-delete": { actionId: "record-delete", actionName: "DELETE", operType: 2, formMeta: { formUrl: "/url-to-send-form", confirm: "Sure to submit?", fields: [ { name: "phone", label: "Phone" }, ], } }, "record-edit": { actionId: "record-edit", actionName: "Edit", operType: 2, formMeta: { formUrl: "/url-to-send-form", confirm: "Sure to submit?", fields: [ { name: "username", label: "Username", visible:true, editable:true }, { name: "phone", label: "Phone", visible:true, editable:true }, { name: "addr", label: "Addr", visible:true, editable:true } ], } } } } }; ``` > ![ui][3] ### Create custom style > In most of ```` components, you can custom your own style sheets, use the selectors just like you used in the ``