{"id":213,"date":"2020-04-10T03:36:31","date_gmt":"2020-04-10T03:36:31","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/hulk\/?page_id=213"},"modified":"2020-04-13T11:45:06","modified_gmt":"2020-04-13T11:45:06","slug":"modals","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/hulk\/modals\/","title":{"rendered":"Modals"},"content":{"rendered":"\n<p>You can add the component on any page in the template. You need to follow the steps given below:<\/p>\n\n\n\n<p><strong>Step 1:<\/strong>\u00a0Please add the code given below in the page where you want to add the component.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;Button variant=\"outlined\" className=\"primary-bg-btn\" color=\"primary\" onClick={handleOpen}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Open Modal\n            \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Modal\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aria-labelledby=\"simple-modal-title\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aria-describedby=\"simple-modal-description\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0open={open}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClose={handleClose}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div style={modalStyle} className={classes.paper}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2 id=\"simple-modal-title\">Text in a modal&lt;\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p id=\"simple-modal-description\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Duis mollis, est non commodo luctus, nisi erat porttitor ligula.\n                \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Modal><\/pre>\n\n\n\n<p><strong>Step 2:<\/strong>\u00a0Now Import the component from its parent library.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import { Modal, Button } from '@material-ui\/core';<\/pre>\n\n\n\n<p>We have given you an example of adding a simple list in Dashboard.<\/p>\n\n\n\n<p>You can check some other layouts of list below. For adding any of the below layout in the template, please check their relative code in the\u00a0<code>src->routes->UiComponents->List->index.js<\/code>\u00a0file. <\/p>\n\n\n\n<p>We have given you an example of adding a simple list in Dashboard.<\/p>\n\n\n\n<p>You can check some other layouts of list below. For adding any of the below layout in the template, please check their relative code in the\u00a0<code>src->routes->UiComponents->Modals->index.js<\/code>\u00a0file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"353\" src=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_149-1024x353.png\" alt=\"\" class=\"wp-image-376\" srcset=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_149-1024x353.png 1024w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_149-300x103.png 300w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_149-768x265.png 768w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_149-1536x529.png 1536w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_149-1568x540.png 1568w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_149.png 1593w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"541\" src=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_151-1024x541.png\" alt=\"\" class=\"wp-image-377\" srcset=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_151-1024x541.png 1024w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_151-300x158.png 300w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_151-768x406.png 768w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_151-1536x811.png 1536w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_151-1568x828.png 1568w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_151.png 1855w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>You can add the component on any page in the template. You need to follow the steps given below: Step 1:\u00a0Please add the code given below in the page where you want to add the component. &lt;Button variant=&#8221;outlined&#8221; className=&#8221;primary-bg-btn&#8221; color=&#8221;primary&#8221; onClick={handleOpen}> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Open Modal \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Button> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Modal \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aria-labelledby=&#8221;simple-modal-title&#8221; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aria-describedby=&#8221;simple-modal-description&#8221; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0open={open} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClose={handleClose} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div style={modalStyle} className={classes.paper}> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2 id=&#8221;simple-modal-title&#8221;>Text [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/213"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":3,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/213\/revisions"}],"predecessor-version":[{"id":381,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/213\/revisions\/381"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/media?parent=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}