{"componentChunkName":"component---src-templates-windframedocs-js","path":"/windframe/docs/element-quick-actions/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"742e11ec-40c3-5342-8ad3-e1d309f9737f","title":"Element Quick Action","slug":"/docs/element-quick-actions/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Element Quick Action\",\n  \"metaTitle\": \"Elements Qucik Action\",\n  \"metaDescription\": \"How to use some elements qucik actions found on the rendernote using Windframe\",\n  \"canonicalUrl\": \"https://windframe.dev/docs/element-quick-actions\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"The Windframe Editor Quick Action feature allows you to perform various actions quickly and efficiently, saving you time and enhancing your workflow. With Quick Actions, you can access commonly used functions and tools without navigating through menus or searching for specific options. This feature is designed to streamline your editing process and make it more intuitive.\"), mdx(\"h2\", null, \"How to access the Element quick action\"), mdx(\"p\", null, \"To use the Quick Action feature in the Windframe Editor, follow these steps:\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 1:\"), \" Open Windframe and navigate to the editor.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 2:\"), \" Upload or select a template\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Step 3:\"), \" Select any component on your template you want to edit and you will see the element quick action panel.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"910px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5a2bc6285981c62423a1346fa47cadef/c6bbc/element-quick-actions.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"58.301158301158296%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAACEUlEQVQoz42Ty2sTURSHZ+1GcOOqW/8CF1IQhIhuhFKhEBUEoaB0pSBRrJAiYtA2KKRVkYJQoYi4kG4MRawUVy2F1qZtmkdJMonFpnnMTCaZzOtzkiFjk0r1wO+ce+Ge7z7OPYJt2xylv1n3Gg5EEHqT7ANqWbNSJp9KIMbjZNY3UIr7HhQv9w9DaDndNmnYBpoj7CZYjnS1vSC/EmPy8m3eBcO8DI2zvbDoISzHGY4zLDe25kJd1/g69Z75QIS5wCT+0Rkujn3EF/zE1Yk5kok0S9EFUptJVte2WI/FSaXTTozxa2+vDbdsF2o6EiqqxOeRV3zzhfhy4SHHrn1AGI4iDEQYHrxBJrbK9+UlfmyLLCcVdgoSdbWGLMtomuZd2bRsFyjX6syOPuDW3SD9/X7ejJ/mXDDE8ZN9RM/3UczlUBo65VIZRapQrVYplatUqlI7GobRRnrAfQnWnp0luehjcOQOqdcC4sZbhq5cZ/7SCcoFB+icSJFbEJlyRaam1mlozbYsy+oBVlSm7w8xGx5gIvyCSOAUM9OPGXv0hOf+M2xtpohnGySyCrKioTowWVGpNzQajg4BTUPnZ7HKTq5IPi8i7spksnlEUaQkS6zEJW4+LXBvapd03gHVa+imk2y7RehUWDfdqgv8h5mm++gda1W1W3hNIPyrU7o+vje3e9rAHdtHnbADOrxBd6v16jeERmvPQP6SBgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Element Quick action panel\",\n    \"title\": \"Element Quick action panel\",\n    \"src\": \"/static/5a2bc6285981c62423a1346fa47cadef/c6bbc/element-quick-actions.png\",\n    \"srcSet\": [\"/static/5a2bc6285981c62423a1346fa47cadef/a2ead/element-quick-actions.png 259w\", \"/static/5a2bc6285981c62423a1346fa47cadef/6b9fd/element-quick-actions.png 518w\", \"/static/5a2bc6285981c62423a1346fa47cadef/c6bbc/element-quick-actions.png 910w\"],\n    \"sizes\": \"(max-width: 910px) 100vw, 910px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Here are some common Quick Actions available in Windframe:\"), mdx(\"h2\", null, \"Delete Button\"), mdx(\"p\", null, \"The Delete button within the Element Quick Action Panel allows you to remove selected elements from your design.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"716px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/849463ffa7ce0680094e7503026732f6/6bbf7/delete-button.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.86486486486486%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACcUlEQVQ4y42TW0hTcRzHDz0E0UNQLz4ERU/10FsSUSSBlkU+9GCIWU+RD70EEV0oAokgUirSUKJAy0Snlu7qHF4KS4MugyKn07kL7mKac5vbzs45n/7bdA4K6w8ffvwP5/f9/64S6xxN03JWU1fI+/a3I2mqiqooOVIZ1DwU0q45hJAqfDKPrLB6zwjyP0cWDp/9aPYA/8pI8jhd2F68YbjNyJCwTS8N1L6y8qC1j9oWEw3dQ4QXwjhMo8wMfsXv8+AY/47H48br9eKansHpdBKPJ7IRjr22YSi5wtDxWwwUXaagrB6pogOpsh2pysieUzcJuRzo9D30WszY3k+gs3xjeMzB9NQkMy43ExOTyLKcFfykH6T5xD16Kuoxl16j8EIj0vVBNlQ9Yceh0+iO7iUa8hNeihIKhlha1oiIYJJKtqhKun6iWekI07WURjr7qLtUQvHtOrbsPkl3zUYa28+z+fBZCrdKvCveznwohG82KFL0iVQ9eNxpvMz6gwSDcwTEQ3M/F7KCH7v6CTVIjH+5SlH5RUbuiz6NV/Ks20bpvp3YywuILi7+0YBkUiaRTGZElBUyTbG2dNJ4RqLn+Tlu1DziYbWErm4/TW16qsuP0XBgEz63G5O1n7aOTnoNRppbu5icchOJxpj/FRZ2maVITIgLQbvdjl5vwGA0YrZYsAgMBkMGk0k0wWpmYOQHu0qa2XbwKWVH7vC45i7Wtx+IxWVkUctESssgK9r/zWEkDsZRGeOYyqg9CYEAi+EIywkZoUFKRCZGVaQtupypgdiG9cjuCDmrxmJCJbU6zfl7tH6E+XurKGvkr2H6lzULvwGDDZMcvMylMAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Delete element\",\n    \"title\": \"Delete element\",\n    \"src\": \"/static/849463ffa7ce0680094e7503026732f6/6bbf7/delete-button.png\",\n    \"srcSet\": [\"/static/849463ffa7ce0680094e7503026732f6/a2ead/delete-button.png 259w\", \"/static/849463ffa7ce0680094e7503026732f6/6b9fd/delete-button.png 518w\", \"/static/849463ffa7ce0680094e7503026732f6/6bbf7/delete-button.png 716w\"],\n    \"sizes\": \"(max-width: 716px) 100vw, 716px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Export Button\"), mdx(\"p\", null, \"The Export button within the Element Quick Action Panel enables you to export the code of selected elements. This is useful when you want to extract the code of specific elements for further customization or use in other projects.\\n\", mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"913px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/05cc3229592ade77331c65b2e70dc9a8/0eb6d/export-code.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"60.61776061776062%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAACCUlEQVQoz4WTy2sTURTGZ+/ahRuX/gHuRNyI4KIo3QQshS4USkEEN4K2sYsW6yMLkUILYjYS0FC0VbEFsyhSXVioUmrVqpk0haSax0ySMTN5zNyfdyaTt9QDH/ec4ZzvnDvnu4ojwHbwTAhaJmQg/A+e73TH7bz2WZc8SoPQLXBwbNtDXXZwUZOwJdwa4RM5PnEnmk18QpnUMdk/LWdCXDsgQbQndB2rVmd9Mcba/AIrEpMPXzEefsOV+RiR1U1SG5/ZfLGG+lNla/sryWQSNa56p9M7oRtoZYPlsVk+nAry9MxNlMAzlJEllLMhQjem+ZH4zur7d3z8lmF9O0NqP4uuaWiaLn+B009YNMpEJma4NHqPwOkA0w+GODJ6ixOHD7FzfZiM5ZDN5MjlNPJ5nUKhSKn0B10vYppWP2G2AFv3T/J2+RwDw+fJRxWer0S4cPwoO8FBym5BIYud/Y1ZqUoyA8uqUJG+LZfYT6hZPB4fZGF2iNDdKR4FjxF5EiY4NsLLyYtEY5+4dvkOM1NzRBdfUzJMeSsTo1zBqtZ6twyVapV0RiOR/EUqlWYvXWB3N8leah/dKDEXVRm4usHt8BfiaoKSJLJlXU0SVO2eLbu6+q9seszNb8hN9G+5KWypbE/cQnTAi0XjGbSE7Pgypyn3ViOP0PbHds96F4SPhl+zu+O230Dz+n8BlqBx+hOkLQ8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"export quick code\",\n    \"title\": \"export quick code\",\n    \"src\": \"/static/05cc3229592ade77331c65b2e70dc9a8/0eb6d/export-code.png\",\n    \"srcSet\": [\"/static/05cc3229592ade77331c65b2e70dc9a8/a2ead/export-code.png 259w\", \"/static/05cc3229592ade77331c65b2e70dc9a8/6b9fd/export-code.png 518w\", \"/static/05cc3229592ade77331c65b2e70dc9a8/0eb6d/export-code.png 913w\"],\n    \"sizes\": \"(max-width: 913px) 100vw, 913px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Add Element Button\"), mdx(\"p\", null, \"The Add Element button within the Element Quick Action Panel allows you to easily add new elements to your design.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"801px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3937d87cecb53203b31319124193352d/2ad15/elements-add.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"60.231660231660236%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB/UlEQVQoz32TS2hTQRSGbxdSVy5EXLlz4U43RXAlFgSxCO4qFjfdKEiXLrS1VkWozbamqBVKBVetRQsB39ZQEEy0hLZ5mkRTtLl53OTm3iQ3k+Rzegs1r/bAzxlmOP/8Z/4zCi1Rr9d3ciMaz3aryaTTKLVajU7YIelA3npJEyF7hW6BUdn1uFV5eosw/jNGLBIlJBGMxAiGwgSivyiZJTSXj7w7SNHQ0fNZjEIBXdfRNA3LstoVZjIoHy6O4Oy7RfflabqvzNI1uMDhASc/vB7mX83zdukL79w+5lxf8a6sEgmF8Hq/k8vl2ggrlQrKpwsTzPSNsm/oNcp1F4pcj/aeJuFdZmMzRTy+wd+sYFOrUSoLhKhSrcp1qWznxpaFECinhhyc7DnB0vOjnBu+y4FDB1ns2U9i5RtZo4yaVCWSpNQkqpqS7ebIZjU7b5nXRvjx/TiXBs5ivlSI+xfpH7zKmzNdJNe8tsNVYdleC1lrmEXKZUu2Jmy0mmITzjhHGLtzg+mbR3j25CFjD8ZxnD+Gx/0Zx6MXDN+f5N7EFI8nn6JJZfmCiSkNM4uy5U4K1/0hwuEI/vAf1tYDBANBIr8T+KMqvdc8HO9f5vbUKr6FOSLBKGVZK5+SooRV3Z7UJsK9xtAS27DDMBDSiNZBb1O490/5j+Zv17jfTPgPbPhoPPK+vWAAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Add Element button\",\n    \"title\": \"Add Element button\",\n    \"src\": \"/static/3937d87cecb53203b31319124193352d/2ad15/elements-add.png\",\n    \"srcSet\": [\"/static/3937d87cecb53203b31319124193352d/a2ead/elements-add.png 259w\", \"/static/3937d87cecb53203b31319124193352d/6b9fd/elements-add.png 518w\", \"/static/3937d87cecb53203b31319124193352d/2ad15/elements-add.png 801w\"],\n    \"sizes\": \"(max-width: 801px) 100vw, 801px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Move Up Button\"), mdx(\"p\", null, \"The Move Up button within the Element Quick Action Panel enables you to change the stacking order of elements by moving them up. This is useful when you want to bring an element forward in the visual hierarchy.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a97fd525678609a9b372e0a03793624d/23725/move-up.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"59.07335907335908%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAACYElEQVQoz6VT60tTcRg+f0cQWJQUXprDdfHSDeco+hZFYNGHIJC+KWRYoyiqD34VTEoFiTBpW0530U09m81Z88PGpm1rc+7iCWNMYubOOTvnPP3O2YoFWh96Dw8/3vd33uc87+VQD5/0YcZJwzhhxcSUHRabE1b7rHJOO2i8GTNgYHAY0+Qdi82BOZcH9MIS7I55mMx2dD21offZKGrUrag60gLKQpL/ZaIg7HmX54DPXzZQ23gWre1XQRmIMtnYAosix4MnYLliGTxESOQBeL6IYlGGgCL5gCCIii9bIrGGo+oz0Jy+BMo0afu7vDxJ+s7trlwUlTMWTyiEB2uaQBnLCoNOL/wvjTCPWPHg9QJ6Rj0YnAkgsxxCwO5FKBxHOBJDKpUCwzAQJek3YWI9CXWTDtqLV0jJJosSNN57BYOqC91telDX34Fq1qP7RidSyRg++oPwR7KIp7LY2sohl9tSSpckScnNbHxFw6l27D+kJoTvp5Tg3MAjdPbcwe0ODd6abqFO0wJXh1q541iO9JDFdj6PfP4HwTbx+QpCBipCuO+ASi65RDjbdxmWoQt4fPc8Vkw66HvvY+zmcUTX0pinF+Hx+pBhNlEocNghkBX+KjlNCNXNOlRVa8hQzKWhLPt8cNE0lryLcLlpuN0fEPJ/wvPhALTXxjHUP45QJAqWl1DgRXACmX6ZUFbYQHpYXVcxlL2MbAsK8hqSUsXCDoTyMGQI5f1MZxgcO6ktEU5aHfhf2/yWVXp4uJYQ9r8YwXoyjUBwFaHVyK4IroQr/PAf8Ug0rvyO9SfaUN94Dj8BHQwoT/cjnEYAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"move up element\",\n    \"title\": \"move up element\",\n    \"src\": \"/static/a97fd525678609a9b372e0a03793624d/e3189/move-up.png\",\n    \"srcSet\": [\"/static/a97fd525678609a9b372e0a03793624d/a2ead/move-up.png 259w\", \"/static/a97fd525678609a9b372e0a03793624d/6b9fd/move-up.png 518w\", \"/static/a97fd525678609a9b372e0a03793624d/e3189/move-up.png 1035w\", \"/static/a97fd525678609a9b372e0a03793624d/23725/move-up.png 1105w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Move Down Button\"), mdx(\"p\", null, \"The Move Down button within the Element Quick Action Panel enables you to change the stacking order of elements by moving them down. This is useful when you want to take an element backward in the visual hierarchy.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"935px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/913af17003bb54f81c447579b66d8570/eb390/move-down1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"67.56756756756756%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACPUlEQVQ4y52Ty2tTQRTG7/+gf4AbN9JNwaUgUtqdILoSobgRXanUjRu7qGIFURBBfNVXVdpaQWKhWhpvSQx9p7W0KahJ04c2iX2YpPf9+Dn35sYmtkj1wMc5M+fMN2dmvpFcoKBoKJqBqptYDgKuD9P2shCfnGJuftGPvblyjZf21nnolgtce5ZD8opct7SwHHvDP311js0c1eYT2raNYzslOA52GWJcXuTDCcYVCDI4IrZEyxI7saIJhrNtqnw6n9AJCPNr68wlvrI4myQx84Wx2RTjM0mGEmlWVgss98bJjn4mt5LhRy5HNpMlk8mQLxR+k5YIgyOPhWQ6D55jtK6JuvpWpKNPkU50IDW0EO0PE4lFiA7HCQ+KTSZTzKfTLMwvsCYa2SRkk3CiZ4Bbx1q5d/gqpxovsLu5C6m+ifM1e1iPvSdX1FhaWia7qrCytoGyoVAsKuTzRSzLqjhyQPgp1MPbh7XUnm3m5hmJb0PH2X/kJNf3SqjxAXRRo6kqlmn4fkMQqpqGJlB9hwFhrKMD+ZJE24MbXD69i9GXDVy5087FGonFSIiZ5BzDw4N8HBxhZHyKn/kCiqoJUt1XwhbCxPQ0vT2vCcsyA+Fe+t6F6P8gIwsfjU1woDHEvkP3ud1ylz5ZdKwbQl6uL7dtO/ybefunvrskM+KXiPtDKW4Rc0mHFY+i6zqG4cGogjdvWUKDWD5sEZuKIgRs+49RCdO00A1rh8L+B5PaO9/Q1v6KR8+7/xuPA//kRTe/AKwl9v4n+39QAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"move down element\",\n    \"title\": \"move down element\",\n    \"src\": \"/static/913af17003bb54f81c447579b66d8570/eb390/move-down1.png\",\n    \"srcSet\": [\"/static/913af17003bb54f81c447579b66d8570/a2ead/move-down1.png 259w\", \"/static/913af17003bb54f81c447579b66d8570/6b9fd/move-down1.png 518w\", \"/static/913af17003bb54f81c447579b66d8570/eb390/move-down1.png 935w\"],\n    \"sizes\": \"(max-width: 935px) 100vw, 935px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Copy Code Button\"), mdx(\"p\", null, \"The Copy Code button in the Element Quick Action Panel allows you to quickly copy the code of selected elements to your clipboard. This is handy when you want to reuse or share the code of specific elements.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"897px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e67d867d8df61f76be1164e5f0b51c73/3a737/copy-code2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"65.25096525096525%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACN0lEQVQ4y42SzUtUURjG765di2jV39CmFkHQohYWWFCrNgZ9LqKGSiUIKtQWjVSShWRIXzhkRYMGkZkVlmGR46TjyGihiQTzpXNn1Jl778z9+HXuHe84NBkdeO55z/ve5+F5z3mloc/DDH1ZxUhwTCDkICDi0dAE/e8GuP+w04nt3Mi3EKFwhPHwJCOjYQKBYbpeDHOq6SMS/7lURflnvWDCXAIk0zQxbBjGmrBMyyEVz6YDm+fCPoMNq+jQsiz7U4LNd2HXLPd3O/4LbCF7NwVBKiaKhIJTck/GSkbkpmWssZgIzIpWXb67Ow4XU2m6z99koO42d860sv1CFzsv+tlc76e9Z5DQ4Cf6u3v5Gozw9kOASGSKifEwU1PfRRdmpaAcS+Crukyg6go3djciHX+DdOgZ63ec5qW3iWgyQTgyyWxMZSamsZxV0FQNRVEpFPRKwdRckrZzNew962X/rq30+Pex6WAdBzZIRFtqkQUnGU8yn5KR43FS8wukM0vIctoRpXS/K4KxmSWCjRK9fbUcrtmG8Xodj1/1cWzLRmZbTji3aenL6JkFMj+myQoRTcs77uyXr3D4azbKrfo9+DoaaGm+xL2r1dx95KPBc5SBB9dp7nhP9ZFWPJ5rPO18QiYn2s6pQlhDzeuVDvN5URD5nFIQsY6SByWXRRXTaop3b3se5aT3J76+JJmlDItZDV2QC8Jc3ih/aVbHxh2YynitZZXhj5bXGlgXhmGhCxhmeZ6ynZLD39FSsocdIso2AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Copy code Button\",\n    \"title\": \"Copy code Button\",\n    \"src\": \"/static/e67d867d8df61f76be1164e5f0b51c73/3a737/copy-code2.png\",\n    \"srcSet\": [\"/static/e67d867d8df61f76be1164e5f0b51c73/a2ead/copy-code2.png 259w\", \"/static/e67d867d8df61f76be1164e5f0b51c73/6b9fd/copy-code2.png 518w\", \"/static/e67d867d8df61f76be1164e5f0b51c73/3a737/copy-code2.png 897w\"],\n    \"sizes\": \"(max-width: 897px) 100vw, 897px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Drag Button\"), mdx(\"p\", null, \"The Drag button within the Element Quick Action Panel enables you to easily move elements to new positions on the canvas.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"839px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e6bfc7f26e9d4070286e177fdc72206f/d26aa/drag-button.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.28185328185329%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACCUlEQVQoz4WSSWhTURSG30Zw5U7cunIjxoUbcdGFBRERxZCFiFgXQncubIVulEKpUG1K1dKWtAtBUiTFCLZgJXVoraBFWwIipQ4ZGpKQ4b1ML9MbPm/mhFa98N9zDpz73//c+0vssUzTbEbTMDvret7qrUXRhmaApGs6hkAlltugCVR6GzAMQxyqEVZzgdoFVdoWIf9aeQ22EpAs/LWlobhJ+NG1xBf3Mq/mXzPhfseUe5WHrhWevtkgGYyw9fwDYe82v30/CPh87ASD+Hx+/H4/mq43aKvqq4SLXX1sdt+m7/Qg0iUn0uU5JKuT7qt32Nn+xuLyEqvrXt6uB1nbCBAKhYiEw0Sj0bb3bBt53DbKhG2MAetNjg45kK47OHy8C4/1JFlFJh5LEo8ryNkyqWyJfL6IqubJ5SpQdyv0TFs4cWsY25kDKO+PcO3uMMcO7efrFQuKkkaW0yQSMnJSFjFRzTOZLKlUGjVf2E3oG5V4uTBL/w0LAec+1j6t0GM9i+fCQdRshrgcRZEjhMMRYgmFXEWdQLFYplQq1z1Ai3ByqIeZ2WkmH91jxt7LlMPB2P0R5kYGcC185vy5QU5dfEBvv51n8y9Ii1FVQVZBvqS12cb8v202fxYYf/wd+5Mw3l8qsVgUOZ1DnKMstpK+h21MU68bVFTNXKBhiWJGbFrHRQ2Dd/5yTeEf3YgUb33Cx2YAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Drag button\",\n    \"title\": \"Drag button\",\n    \"src\": \"/static/e6bfc7f26e9d4070286e177fdc72206f/d26aa/drag-button.png\",\n    \"srcSet\": [\"/static/e6bfc7f26e9d4070286e177fdc72206f/a2ead/drag-button.png 259w\", \"/static/e6bfc7f26e9d4070286e177fdc72206f/6b9fd/drag-button.png 518w\", \"/static/e6bfc7f26e9d4070286e177fdc72206f/d26aa/drag-button.png 839w\"],\n    \"sizes\": \"(max-width: 839px) 100vw, 839px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \".\"), mdx(\"h2\", null, \"Ask AI Edit\"), mdx(\"p\", null, \"The \\\"Ask AI Edit\\\" button within the Element Quick Action Panel enables users to utilize AI in editing of the selected element within their projects using prompts. It comes with some predefined prompts. Whether you need to center your element, enable light mode, apply responsiveness or add color, the \\\"Ask AI Edit\\\" button provides a seamless and efficient editing experience.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"925px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/22d616b4917998bfb21b9ac6130e089b/2a50c/ask-ai-edit.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.75675675675676%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABWUlEQVQoz62PS0sCYRSG/VEtg5a1b1ktuixSU1NrsjHNyTK6YNC+VZsgqE1/ISFRiiRo1yIUc8Yg5urMN/P2zVHCcFbigYfzzhm+h3NCU9NzSKRFRDd3EU3tIZLIIBwTEI7vUBayRSSFfSS2ckhnJET4XBBLKF9eoXBUxrZYxEZShJgvYWZ2HqHl9RSqtRfc3j/g7voGrWYb45Z0fIHQwkoMutnDZ7OFj1odbd5bXzJUzQBzXdgOQ4+jGxbNVN2grukmQTOOX2LhhAtXY/TRaLzhsVpHtf6MSuUJr+8Kvn9c+udysSwrA7rodGRCUbqEpmp9oXTaF7oB67se+IYeZY83TXe4OPhUxhj1rC9c5EKbeTAsmzB7DscmLMrD2KPwNyo//Z/QL8dxAmFsKAfgzy3LIkfugAuX1uKDs7yxsbmUhMWzUeE45QyE+cPzyWz4J5zEhsNCqVTGL58ZHktUBs/SAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Ask-AI-edit\",\n    \"title\": \"Ask-AI-edit\",\n    \"src\": \"/static/22d616b4917998bfb21b9ac6130e089b/2a50c/ask-ai-edit.png\",\n    \"srcSet\": [\"/static/22d616b4917998bfb21b9ac6130e089b/a2ead/ask-ai-edit.png 259w\", \"/static/22d616b4917998bfb21b9ac6130e089b/6b9fd/ask-ai-edit.png 518w\", \"/static/22d616b4917998bfb21b9ac6130e089b/2a50c/ask-ai-edit.png 925w\"],\n    \"sizes\": \"(max-width: 925px) 100vw, 925px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Section Code Editor\"), mdx(\"p\", null, \"The Windframe section code editor is a powerful tool that allows you to select and edit specific parts of your user interface (UI). This feature is particularly useful when you want to make changes to a particular UI component without affecting the rest of your project.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"880px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/12860fc04061ec0f6f93a8542a5563b2/9c177/section-code-editor.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"57.91505791505792%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAABZUlEQVQoz62TS0/CQBSF+Y/ufCz9J2oiCoSCBhATWejOxIUbJTSy1YSNJhCCDboQSwjQ57SdmR6nFyEu1MTYSb507p3TM2eaaaZQrmJnv4i9A+0LJexmNeS0GgrHdWSLFRxqVeTLJ6icnuPqWsfZxSVK1Qb1cyWlU2s5Nc/gj6Pb6+Gh0wGk+HadDC3bAWMMQRjC83xEIVNdgTCKSDQwXlCuNZA/qmN9axsba5t47BvwWISp7WLmMLCQI1J6Mrxp6mjqbdy22mjpd2jf92GYAkJKMpxaLgbPQxjDV7y/mTCfuhiNxhiZE5jjCSYzG4EKHMdyYej7PqXzVcowSckEHF8qweIYjqpNiyNUNVN7MB6DRRKqTXOPgwyxNOScY/l2TE9JSLlACKmOL8CFSk1ISr/is060ZOg4Ln3DnwgSAvarJiHZbJUwSZYGqRqurk2UdsLl9UhjkOHcsuG43r9w1Q8xnc3xAQR0jPefViVtAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Section-Code-editor\",\n    \"title\": \"Section-Code-editor\",\n    \"src\": \"/static/12860fc04061ec0f6f93a8542a5563b2/9c177/section-code-editor.png\",\n    \"srcSet\": [\"/static/12860fc04061ec0f6f93a8542a5563b2/a2ead/section-code-editor.png 259w\", \"/static/12860fc04061ec0f6f93a8542a5563b2/6b9fd/section-code-editor.png 518w\", \"/static/12860fc04061ec0f6f93a8542a5563b2/9c177/section-code-editor.png 880w\"],\n    \"sizes\": \"(max-width: 880px) 100vw, 880px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \".\"), mdx(\"p\", null, \"To learn in detail on how to use the section code editor you can check out this \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://windframe.dev/docs/section-code-editor/\"\n  }, \"link\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#how-to-access-the-element-quick-action","title":"How to access the Element quick action"},{"url":"#delete-button","title":"Delete Button"},{"url":"#export-button","title":"Export Button"},{"url":"#add-element-button","title":"Add Element Button"},{"url":"#move-up-button","title":"Move Up Button"},{"url":"#move-down-button","title":"Move Down Button"},{"url":"#copy-code-button","title":"Copy Code Button"},{"url":"#drag-button","title":"Drag Button"},{"url":"#ask-ai-edit","title":"Ask AI Edit"},{"url":"#section-code-editor","title":"Section Code Editor"}]},"parent":{"__typename":"File","relativePath":"docs/element-quick-actions.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Elements Qucik Action","metaDescription":"How to use some elements qucik actions found on the rendernote using Windframe"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/javascript/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/Installation/","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/react/chart/","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel/","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe/","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown/","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask/","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal/","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress/","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio/","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/select/","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating/","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll/","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider/","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2/","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner/","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination/","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader/","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker/","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper/","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable/","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar/","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/components/","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/javascript/widgets/","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/sections/","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/angular/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown/","title":"Dropdown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe/","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal/","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio/","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress/","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating/","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select/","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner/","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2/","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider/","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask/","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper/","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination/","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar/","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable/","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables/","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert/","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion/","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations/","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete/","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb/","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge/","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup/","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar/","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel/","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox/","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse/","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker/","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons/","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card/","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon/","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown/","title":"Dropdown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe/","title":"IFrame"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup/","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup/","title":"ListGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer/","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input/","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask/","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect/","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification/","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels/","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane/","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal/","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover/","title":"Popover"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating/","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress/","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio/","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select/","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider/","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2/","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch/","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner/","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar/","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper/","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination/","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar/","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs/","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker/","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/table/","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/fixed_datatables/","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box/","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/react/forms/","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables/","title":"DataTable"}}},{"node":{"fields":{"slug":"/components/index/","title":"Tailwind Components"}}},{"node":{"fields":{"slug":"/components/tailwind-alerts/","title":"Tailwind CSS Alert"}}},{"node":{"fields":{"slug":"/components/tailwind-badge/","title":"Tailwind CSS Badge"}}},{"node":{"fields":{"slug":"/components/tailwind-button/","title":"Tailwind CSS Button"}}},{"node":{"fields":{"slug":"/components/tailwind-card/","title":"Tailwind CSS Cards"}}},{"node":{"fields":{"slug":"/components/tailwind-footer/","title":"Tailwind CSS Footer"}}},{"node":{"fields":{"slug":"/components/tailwind-forms/","title":"Tailwind CSS Forms"}}},{"node":{"fields":{"slug":"/components/tailwind-gallery/","title":"Tailwind CSS Gallery"}}},{"node":{"fields":{"slug":"/components/tailwind-indicator/","title":"Tailwind CSS Indicator"}}},{"node":{"fields":{"slug":"/components/tailwind-modal/","title":"Tailwind CSS Modal"}}},{"node":{"fields":{"slug":"/components/tailwind-navbar/","title":"Tailwind CSS Navbar"}}},{"node":{"fields":{"slug":"/components/tailwind-pagination/","title":"Tailwind CSS Pagination"}}},{"node":{"fields":{"slug":"/components/tailwind-progressbar/","title":"Tailwind CSS Progress Bar"}}},{"node":{"fields":{"slug":"/components/tailwind-rating/","title":"Tailwind CSS Rating"}}},{"node":{"fields":{"slug":"/components/tailwind-sidebar/","title":"Tailwind CSS Sidebar"}}},{"node":{"fields":{"slug":"/components/tailwind-stepper/","title":"Tailwind CSS Stepper"}}},{"node":{"fields":{"slug":"/components/tailwind-tabs/","title":"Tailwind CSS Tab"}}},{"node":{"fields":{"slug":"/components/tailwind-table/","title":"Tailwind CSS Table"}}},{"node":{"fields":{"slug":"/docs/adding-custom-template/","title":"Adding Custom Template on Windframe"}}},{"node":{"fields":{"slug":"/docs/adding-elements/","title":"Adding Elements"}}},{"node":{"fields":{"slug":"/docs/adding-ui-library/","title":"Adding UI library in Windframe"}}},{"node":{"fields":{"slug":"/docs/ai-experiments/","title":"AI Experiments"}}},{"node":{"fields":{"slug":"/docs/built-in-templates/","title":"Built in Templates"}}},{"node":{"fields":{"slug":"/docs/canvas-toolbar/","title":"Canvas Toolbar"}}},{"node":{"fields":{"slug":"/docs/creating-new-project/","title":"Creating New Project"}}},{"node":{"fields":{"slug":"/docs/editing-existing-project/","title":"Editing Existing Project"}}},{"node":{"fields":{"slug":"/docs/editing-templates/","title":"Editing Templates"}}},{"node":{"fields":{"slug":"/docs/element-quick-actions/","title":"Element Quick Action"}}},{"node":{"fields":{"slug":"/docs/exporting-project/","title":"Exporting Projects"}}},{"node":{"fields":{"slug":"/docs/history/","title":"History"}}},{"node":{"fields":{"slug":"/docs/import-external-css/","title":"Importing your CSS code into Windframe"}}},{"node":{"fields":{"slug":"/docs/import-tailwind-config/","title":"Importing Tailwind CSS configuration into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-component/","title":"Import your JSX Components into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-jsscript/","title":"Importing JS/Script into Windframe"}}},{"node":{"fields":{"slug":"/docs/importing-templates/","title":"Importing HTML Component/Template into Windframe"}}},{"node":{"fields":{"slug":"/docs/index/","title":"Getting Started"}}},{"node":{"fields":{"slug":"/docs/layers/","title":"Layers"}}},{"node":{"fields":{"slug":"/docs/publish-project/","title":"Publishing Projects"}}},{"node":{"fields":{"slug":"/docs/section-code-editor/","title":"Section Code Editor"}}},{"node":{"fields":{"slug":"/docs/windframe-ai/","title":"AI-Generated Templates"}}},{"node":{"fields":{"slug":"/docs/toolbar/","title":"Windframe Toolbar"}}},{"node":{"fields":{"slug":"/Tailwind-css-slider/","title":"Tailwind Slider: Elevate Your Website Design with Dynamic Content"}}},{"node":{"fields":{"slug":"/How-to-add-color-to-Tailwind/","title":"How to add Fonts in Tailwind CSS"}}},{"node":{"fields":{"slug":"/awesome-10-projects-built-with-tailwind/","title":"10 Awesome Project built with Tailwind CSS"}}},{"node":{"fields":{"slug":"/bootstrap-5-all-you-need-to-know/","title":"All you need to know about Bootstrap 5"}}},{"node":{"fields":{"slug":"/Tailwind-width/","title":"Tailwind CSS Width: Complete Guide to Width Classes, Full Width, Fit Content & More"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes/","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/create-animation-with-tailwind-css/","title":"How to create Tailwind CSS Animations"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast/","title":"Bootstrap 5 navbar-How To Create A Beautiful Navbar Using Bootstrap 5."}}},{"node":{"fields":{"slug":"/create-datatable-in-angular-10/","title":"How To Create A Data table Using Angular Bootstrap"}}},{"node":{"fields":{"slug":"/create-bootstrap-charts-using-bootstrap5/","title":"Bootstrap Charts: How To Create Bootstrap 5 Charts with Chart.js (Line, Bar, Pie & Doughnut)"}}},{"node":{"fields":{"slug":"/create-datepicker-with-contrast/","title":"How to create a React datepicker using React Bootstrap."}}},{"node":{"fields":{"slug":"/create-datatable-with-contrast/","title":"How to create a beautiful Bootstrap Data table with Icons"}}},{"node":{"fields":{"slug":"/create-multiselect-with-contrast/","title":"How to create a beautiful React multiselect."}}},{"node":{"fields":{"slug":"/create-forms-with-contrast/","title":"React bootstrap 5 form- How to create React Bootstrap 5 Forms"}}},{"node":{"fields":{"slug":"/create-progress-with-contrast/","title":"React Bootstrap Progress bar-How to create a beautiful React Bootstrap 5 progress bar."}}},{"node":{"fields":{"slug":"/create-select-with-contrast/","title":"How to create a beautiful React Bootstrap select with icons."}}},{"node":{"fields":{"slug":"/create-responsive-sidebar-in-react/","title":"How to create a responsive React Bootstrap Sidebar"}}},{"node":{"fields":{"slug":"/create-stepper-with-contrast/","title":"Bootstrap 5 stepper-How to create a beautiful Bootstrap 5 stepper"}}},{"node":{"fields":{"slug":"/create-tables-with-contrast/","title":"How to create a beautiful React Bootstrap table."}}},{"node":{"fields":{"slug":"/create-tabs-with-contrast/","title":"How to create beautiful React Bootstrap 5 tabs"}}},{"node":{"fields":{"slug":"/create-timepicker-with-contrast/","title":"How to create a React Timepicker using React Bootstrap."}}},{"node":{"fields":{"slug":"/css-animations/","title":"Introduction to CSS Animations"}}},{"node":{"fields":{"slug":"/css-backgrounds/","title":"CSS Backgrounds"}}},{"node":{"fields":{"slug":"/css-borders/","title":"CSS Borders"}}},{"node":{"fields":{"slug":"/css-colors/","title":"CSS Colors"}}},{"node":{"fields":{"slug":"/css-combinators/","title":"CSS Combinators"}}},{"node":{"fields":{"slug":"/css-font/","title":" CSS Fonts"}}},{"node":{"fields":{"slug":"/css-flexbox/","title":"CSS Flexbox"}}},{"node":{"fields":{"slug":"/css-grid/","title":"CSS Grid"}}},{"node":{"fields":{"slug":"/css-height-and-width/","title":"CSS Height And Width"}}},{"node":{"fields":{"slug":"/css-margins/","title":"CSS Margins"}}},{"node":{"fields":{"slug":"/css-icons/","title":"HTML Icons: How to Add Icons to Your HTML Page Using CSS and Icon Libraries"}}},{"node":{"fields":{"slug":"/css-overflow/","title":"CSS Overflow"}}},{"node":{"fields":{"slug":"/css-padding/","title":"CSS Padding"}}},{"node":{"fields":{"slug":"/css-pagination/","title":"Tutorial: CSS Pagination"}}},{"node":{"fields":{"slug":"/css-syntax-and-selector/","title":"CSS Syntax and Selector"}}},{"node":{"fields":{"slug":"/css-text-and-layout/","title":"CSS Text and Layout"}}},{"node":{"fields":{"slug":"/css-transform-translate/","title":"CSS transform and translate"}}},{"node":{"fields":{"slug":"/css-tutorial-1/","title":"Introduction to CSS"}}},{"node":{"fields":{"slug":"/css-website-layout/","title":"Full Website Layout"}}},{"node":{"fields":{"slug":"/css-z-index/","title":"CSS Z-Index"}}},{"node":{"fields":{"slug":"/css.outlines/","title":"CSS Outlines"}}},{"node":{"fields":{"slug":"/differences-between-tailwind-css-and-sass/","title":"Differences between Tailwind CSS and SASS/SCSS"}}},{"node":{"fields":{"slug":"/diffrences-between-tailwind-css-and-bootstrap/","title":"Differences Between Tailwind CSS and Bootstrap"}}},{"node":{"fields":{"slug":"/how-to-add-icons-to-your-bootstrap-5-project/","title":"Bootstrap 5 icons-How to add Icons to your Bootstrap 5 Project"}}},{"node":{"fields":{"slug":"/how-to-add-tailwind-css-colors-and-fonts-to-your-project/","title":"How to add tailwind CSS colors to your project"}}},{"node":{"fields":{"slug":"/how-to-add-tailwind-css-grid-to-your-project/","title":"How to use Tailwind CSS Grid."}}},{"node":{"fields":{"slug":"/how-to-build-tailwindcss-progressbar/","title":"How to build Tailwind Progress Bar."}}},{"node":{"fields":{"slug":"/how-to-build-tailwindcss-timepicker-with-tailwind-element/","title":"How to build Tailwind css timepicker with Tailwind elements"}}},{"node":{"fields":{"slug":"/how-to-create-a-bootstrap5-modal/","title":"How to create a Bootstrap 5 Modal."}}},{"node":{"fields":{"slug":"/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/","title":"How to create a Responsive Navigation bar Using Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-a-react-modal-using-tailwind-css/","title":"How to create a React Modal using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-create-a-responsive-bootstrap-5-sidebar/","title":"Bootstrap 5 Sidebar-How to create a Responsive Bootstrap 5 Sidebar"}}},{"node":{"fields":{"slug":"/how-to-create-a-responsive-react-sidebar-design-using-tailwind-css/","title":"How to Create a Responsive React Sidebar Design Using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-create-an-angular-bootstrap-sidebar/","title":"How to create a Angular Bootstrap Sidebar"}}},{"node":{"fields":{"slug":"/how-to-create-and-style-a-responsive-form-using-tailwindcss/","title":"Tailwind form-How to create and style a Responsive Form using Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-5-checkbox/","title":"How to create Beautiful Bootstrap 5 Checkboxes and Radios."}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-5-navbars/","title":"How to create Beautiful Bootstrap 5 Navbars"}}},{"node":{"fields":{"slug":"/how-to-create-beautiful-bootstrap-tabs-in-bootstrap-5/","title":"How to create Beautiful Bootstrap Tabs in Bootstrap 5"}}},{"node":{"fields":{"slug":"/how-to-create-react-forms-using-tailwind-css/","title":"How to create Tailwind CSS React Forms."}}},{"node":{"fields":{"slug":"/how-to-create-react-tables-using-tailwind-css/","title":"How to create Tailwind Tables using React."}}},{"node":{"fields":{"slug":"/how-to-create-react-tabs-with-tailwind-css/","title":"How to Create React Tabs with Tailwind CSS"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-dropdown/","title":"How to create Tailwind CSS dropdown"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-components-for-your-website/","title":"How to create Tailwind CSS Components for your Website"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-modal/","title":"How to create Tailwind CSS Modal:A Step-by-Step Guide"}}},{"node":{"fields":{"slug":"/how-to-create-tailwind-css-tables/","title":"How to Create Tailwind CSS Table-Comprehensive Guide with Templates & Examples"}}},{"node":{"fields":{"slug":"/how-to-implement-a-react-step-progress-bar-using-tailwind-css/","title":"How to Implement a React Step Progress Bar Using Tailwind CSS."}}},{"node":{"fields":{"slug":"/how-to-implement-dark-mode-in-tailwind-css/","title":"How to implement dark mode in React using tailwind css."}}},{"node":{"fields":{"slug":"/how-to-install-tailwind-css-in-laravel/","title":"How to install Tailwind CSS with Laravel"}}},{"node":{"fields":{"slug":"/how-to-install-tailwind-css-in-vuejs/","title":"How to Install Tailwind CSS in Vue.js"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-flex/","title":"How to use Tailwind CSS Flex"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-in-HTML/","title":"How to use Tailwind CSS in HTML"}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-in-react/","title":"How To Use Tailwind CSS In React."}}},{"node":{"fields":{"slug":"/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/","title":"How to use tailwind css padding, margin and border in your project."}}},{"node":{"fields":{"slug":"/how-to-use-the-tailwind-css-JIT-CDN/","title":"Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN"}}},{"node":{"fields":{"slug":"/html-5-formating/","title":"Html 5 formating"}}},{"node":{"fields":{"slug":"/html-5-layout/","title":"Html 5 Layout"}}},{"node":{"fields":{"slug":"/html-basic-tags-example/","title":"Html 5 Basic Tags Example"}}},{"node":{"fields":{"slug":"/html-editors/","title":"Html Editors"}}},{"node":{"fields":{"slug":"/html-element/","title":"All you need to know about Html Elements"}}},{"node":{"fields":{"slug":"/html-file-path/","title":"HTML File path, Charset and Meta"}}},{"node":{"fields":{"slug":"/html-forms/","title":"HTML Forms"}}},{"node":{"fields":{"slug":"/html-javascript/","title":"Including JavaScript in your HTML project."}}},{"node":{"fields":{"slug":"/html-quotations/","title":"HTML Quotations and comments"}}},{"node":{"fields":{"slug":"/html-responsive/","title":"Creating Responsive HTML web design"}}},{"node":{"fields":{"slug":"/html-table/","title":"HTML Tables, Classes and Ids"}}},{"node":{"fields":{"slug":"/introduction-to-html/","title":"Introducing HTML"}}},{"node":{"fields":{"slug":"/javascript-array-method/","title":"Tutorial: Javascript Array Method"}}},{"node":{"fields":{"slug":"/javascript-arrays/","title":"Tutorial: Javascript Arrays"}}},{"node":{"fields":{"slug":"/javascript-arrow-functions/","title":"Tutorial: Javascript Arrow Functions"}}},{"node":{"fields":{"slug":"/javascript-basics/","title":"Basics of Javascript"}}},{"node":{"fields":{"slug":"/javascript-booleans/","title":"Tutorial: Javascript Boolean"}}},{"node":{"fields":{"slug":"/javascript-class/","title":"Tutorial: Javascript Classes"}}},{"node":{"fields":{"slug":"/javascript-control-flow/","title":"Tutorial: Javascript Control Flow"}}},{"node":{"fields":{"slug":"/javascript-data-type/","title":"Tutorial: Javascript Data Type"}}},{"node":{"fields":{"slug":"/javascript-date-object/","title":"Tutorial: Javascript Date Objects"}}},{"node":{"fields":{"slug":"/javascript-display/","title":"Tutorial: Javascript Data Output"}}},{"node":{"fields":{"slug":"/javascript-events/","title":"Tutorial: Javascript Events"}}},{"node":{"fields":{"slug":"/javascript-for-loop/","title":"Tutorial: Javascript Loop"}}},{"node":{"fields":{"slug":"/javascript-functions/","title":"Tutorial: Javascript Functions"}}},{"node":{"fields":{"slug":"/javascript-how-it-works/","title":"Tutorial: How Javascript Works"}}},{"node":{"fields":{"slug":"/javascript-html-dom-events/","title":"Tutorial: Javascript Dom Events"}}},{"node":{"fields":{"slug":"/javascript-html-dom-methods/","title":"Tutorial: Javascript Dom Methods"}}},{"node":{"fields":{"slug":"/javascript-iteration/","title":"Tutorial: Javascript Array Iteration"}}},{"node":{"fields":{"slug":"/javascript-let-and-const/","title":"Tutorial: Javascript Let And Const"}}},{"node":{"fields":{"slug":"/javascript-math-object/","title":"Tutorial: Javascript Math Object"}}},{"node":{"fields":{"slug":"/javascript-number-methods/","title":"Tutorial: Javascript Number Methods"}}},{"node":{"fields":{"slug":"/javascript-object/","title":"Tutorial: Javascript Objects"}}},{"node":{"fields":{"slug":"/javascript-operator/","title":"Tutorial: Javascript Operator"}}},{"node":{"fields":{"slug":"/javascript-scope/","title":"Tutorial: Javascript Scope"}}},{"node":{"fields":{"slug":"/javascript-sort/","title":"Tutorial: Sorting In Javascript"}}},{"node":{"fields":{"slug":"/javascript-statement/","title":"Tutorial: Javascript statement, syntax and comments"}}},{"node":{"fields":{"slug":"/javascript-string-methods/","title":"Tutorial: Javascript String Methods"}}},{"node":{"fields":{"slug":"/javascript-this-keyword/","title":"Tutorial: Javascript This Keyword"}}},{"node":{"fields":{"slug":"/javascript-tutorial-1/","title":"Introduction to Javascript"}}},{"node":{"fields":{"slug":"/javascript-variables/","title":"Tutorial: Javascript Variables"}}},{"node":{"fields":{"slug":"/setting-up-your-first-project-using-tailwind-css/","title":"How to set up your first Tailwind CSS Project"}}},{"node":{"fields":{"slug":"/tailwind-3.0-is-finally-out/","title":"Tailwind 3.0 is finally available. here are all the major changes"}}},{"node":{"fields":{"slug":"/tailwind-css-10-templates-and-themes/","title":"10 tailwind CSS templates and themes"}}},{"node":{"fields":{"slug":"/tailwind-css-in-nextjs/","title":"How to use and set up Tailwind CSS with Nextjs."}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react/","title":"How to use Bootstrap in React Using a React Library"}}},{"node":{"fields":{"slug":"/what-is-nodejs-and-express/","title":"What is Nodejs, Express and When Should It Be Used."}}},{"node":{"fields":{"slug":"/why-tailwind-css-is-good/","title":"Why is Tailwind CSS better than other CSS framework"}}},{"node":{"fields":{"slug":"/classes/Z-index/","title":"Tailwind CSS Z-index"}}},{"node":{"fields":{"slug":"/classes/index/","title":"Tailwind CSS Classes"}}},{"node":{"fields":{"slug":"/classes/tailwind-align-items/","title":"Tailwind Align Items"}}},{"node":{"fields":{"slug":"/classes/tailwind-align-self/","title":"Tailwind Align Self"}}},{"node":{"fields":{"slug":"/classes/tailwind-animation/","title":"Tailwind Animation"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-attachment/","title":"Tailwind Background Attachment"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-clip/","title":"Tailwind Background Clip"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-color/","title":"Tailwind Background Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-image/","title":"Tailwind CSS Background Image"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-origin/","title":"Tailwind CSS Background Origin"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-position/","title":"Tailwind CSS Background Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-repeat/","title":"Tailwind CSS Background Repeat"}}},{"node":{"fields":{"slug":"/classes/tailwind-background-size/","title":"Tailwind CSS Background Size"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-collapse/","title":"Tailwind Border Collapse"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-radius/","title":"Tailwind CSS Border Radius"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-spacing/","title":"Tailwind CSS Border Spacing"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-style/","title":"Tailwind CSS Border Style"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-width/","title":"Tailwind CSS Border Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-box-shadow-color/","title":"Tailwind CSS Box Shadow Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-box-shadow/","title":"Tailwind CSS Box Shadow"}}},{"node":{"fields":{"slug":"/classes/tailwind-content/","title":"Tailwind CSS Content"}}},{"node":{"fields":{"slug":"/classes/tailwind-display/","title":"Tailwind CSS Display"}}},{"node":{"fields":{"slug":"/classes/tailwind-fill/","title":"Tailwind CSS Fill"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-direction/","title":"Tailwind CSS Flex Direction"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-grow/","title":"Tailwind CSS Flex Grow"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-shrink/","title":"Tailwind CSS Flex Shrink"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex-wrap/","title":"Tailwind CSS Flex wrap"}}},{"node":{"fields":{"slug":"/classes/tailwind-flex/","title":"Tailwind CSS Flex"}}},{"node":{"fields":{"slug":"/classes/tailwind-floats/","title":"Tailwind CSS Floats"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-family/","title":"Tailwind Font Family"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-size/","title":"Tailwind CSS Font size"}}},{"node":{"fields":{"slug":"/classes/tailwind-font-weight/","title":"Tailwind CSS Font Weight"}}},{"node":{"fields":{"slug":"/classes/tailwind-gap/","title":"Tailwind CSS Gap"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-columns/","title":"Tailwind CSS Grid Auto Columns"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-flow/","title":"Tailwind CSS Grid Auto Flow"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-auto-rows/","title":"Tailwind CSS Grid Auto Rows"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-column-start-end/","title":"Tailwind CSS Grid Column Start/End"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-column/","title":"Tailwind CSS Grid Template Column"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-row-start-end/","title":"Tailwind CSS Grid Row Start/End"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid-row/","title":"Tailwind CSS Grid Template Row"}}},{"node":{"fields":{"slug":"/classes/tailwind-grid/","title":"Tailwind Grid"}}},{"node":{"fields":{"slug":"/classes/tailwind-height/","title":"Tailwind Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-hyphens/","title":"Tailwind CSS Hyphens"}}},{"node":{"fields":{"slug":"/classes/tailwind-invisible/","title":"Tailwind CSS Invisibility"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-content/","title":"Tailwind CSS Justify Content"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-items/","title":"Tailwind CSS Justify-items"}}},{"node":{"fields":{"slug":"/classes/tailwind-justify-self/","title":"Tailwind CSS Justify Self"}}},{"node":{"fields":{"slug":"/classes/tailwind-letter-spacing/","title":"Tailwind CSS Letter-spacing"}}},{"node":{"fields":{"slug":"/classes/tailwind-line-clamp/","title":"Tailwind CSS Line Clamp"}}},{"node":{"fields":{"slug":"/classes/tailwind-lineheight/","title":"Tailwind CSS Line-height"}}},{"node":{"fields":{"slug":"/classes/tailwind-list-style-position/","title":"Tailwind CSS List Style Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-list-style-type/","title":"Tailwind CSS List Style Type"}}},{"node":{"fields":{"slug":"/classes/tailwind-margin/","title":"Tailwind Margin"}}},{"node":{"fields":{"slug":"/classes/tailwind-max-height/","title":"Tailwind CSS Max-Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-max-width/","title":"Tailwind CSS Max-Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-min-height/","title":"Tailwind CSS Min-Height"}}},{"node":{"fields":{"slug":"/classes/tailwind-min-width/","title":"Tailwind CSS Min-Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-object-fit/","title":"Tailwind CSS Object Fit"}}},{"node":{"fields":{"slug":"/classes/tailwind-object-positions/","title":"Tailwind CSS Object Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-opacity/","title":"Tailwind CSS Opacity"}}},{"node":{"fields":{"slug":"/classes/tailwind-order/","title":"Tailwind CSS Order"}}},{"node":{"fields":{"slug":"/classes/tailwind-overflow/","title":"Tailwind CSS Overflow"}}},{"node":{"fields":{"slug":"/classes/tailwind-overscroll-behaviour/","title":"Tailwind CSS Overscroll Behaviour"}}},{"node":{"fields":{"slug":"/classes/tailwind-padding/","title":"Tailwind Padding"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-content/","title":"Tailwind CSS Place-content"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-items/","title":"Tailwind CSS Place-items"}}},{"node":{"fields":{"slug":"/classes/tailwind-place-self/","title":"Tailwind CSS Place-self"}}},{"node":{"fields":{"slug":"/classes/tailwind-position/","title":"Tailwind CSS Position"}}},{"node":{"fields":{"slug":"/classes/tailwind-rotate/","title":"Tailwind CSS Rotate"}}},{"node":{"fields":{"slug":"/classes/tailwind-scale/","title":"Tailwind CSS Scale"}}},{"node":{"fields":{"slug":"/classes/tailwind-screen-readers/","title":"Tailwind CSS Screen Reader"}}},{"node":{"fields":{"slug":"/classes/tailwind-skew/","title":"Tailwind CSS Skew"}}},{"node":{"fields":{"slug":"/classes/tailwind-stroke-width/","title":"Tailwind CSS Stroke Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-stroke/","title":"Tailwind CSS Stroke"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-align/","title":"Tailwind CSS Text-align"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-color/","title":"Tailwind CSS Text Color"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration-style/","title":"Tailwind CSS Text Decoration Style"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration-thickness/","title":"Tailwind CSS Text Decoration Thickness"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-decoration/","title":"Tailwind CSS Text Decoration"}}},{"node":{"fields":{"slug":"/classes/tailwind-text-indent/","title":"Tailwind CSS Text Indent"}}},{"node":{"fields":{"slug":"/classes/tailwind-transform-origin/","title":"Tailwind CSS Transform Origin"}}},{"node":{"fields":{"slug":"/classes/tailwind-transform/","title":"Tailwind CSS Transform"}}},{"node":{"fields":{"slug":"/classes/tailwind-translate/","title":"Tailwind CSS Translate"}}},{"node":{"fields":{"slug":"/classes/tailwind-vertical-align/","title":"Tailwind CSS Vertical Align"}}},{"node":{"fields":{"slug":"/classes/tailwind-whitespace/","title":"Tailwind CSS Whitespace"}}},{"node":{"fields":{"slug":"/classes/tailwind-width/","title":"Tailwind CSS Width"}}},{"node":{"fields":{"slug":"/classes/tailwind-word-break/","title":"Tailwind CSS Word Break"}}},{"node":{"fields":{"slug":"/classes/tailwind-border-color/","title":"Tailwind Border Color"}}},{"node":{"fields":{"slug":"/unit/first-block-page/","title":"Contrast Headers Blocks Page"}}}]}},"pageContext":{"id":"742e11ec-40c3-5342-8ad3-e1d309f9737f"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","956403285"]}