{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/notification","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"0e7f4810-2497-55bc-9822-d7f5772215ec","title":"Notification","slug":"/contrast/angular/components/notification"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Notification\",\n  \"metaTitle\": \"Notification Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"Angular Bootstrap Push notifications to your visitors with a toast, a lightweight and easily customizable alert message\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Notification\"), mdx(\"p\", null, \"Angular Bootstrap Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.\"), mdx(\"p\", null, \"Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They\\u2019re built with flexbox, so they\\u2019re easy to align and position.\"), mdx(\"i\", null), mdx(\"h2\", null, \"Custom Notification Types\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"481px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/9edc3781d6c5bc2f048ec53b01ba5ddc/d024a/notification1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"99.22779922779922%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABJ0AAASdAHeZh94AAACXklEQVQ4y41UPW8TQRB1QQFC/AiLj8pRBAVKQAIhS0gIFBKFmvShC234Ba5cUJkKOip+A1ASK4mdlDh3gM8++77s8/nOX4+ZveyydhzjleZ293b27dt5s5MZj8dY1Hh9GZtMJsIyvKlUKmFzawuFQgGdTgc/azWcGQYMw1SO/7PhcCiABeCjx0+wsfESd1dz+FOvE5AhQGtnBpZtDDYajVLA3d03WMmt4NX2tvipNz599lqzJv0EIA/6/b5gFYahFrd/joPBQNi8JgEVQ7675/uwrAaCwEedeh43Gg202g5ZG7Zto9lM5+1Wi3wsmOYvdMPeFLAClEqP6WcvipAkxChJEMcxer2eslD2dBMWL4r6ij2biuHpSRVfPn9C+eCHWPA8D74fIKBNi1KFAZgQG+9TKj97sYnM9XWs3n8Iq/4bx5WqsEr1ZGmVGVwxzD99jszVNdzJ3UM/0oSZjJfKwakY8qRcPsDHD+/x/dvXhacvrfJwSLEYpQsuxc91PXiui043FAL4lAUc1243FYPjy35xnMxXmYNv2y2xse04KSADez4cxz0/JP3PPjanDr2oLh0mgM7ZqcROKEUcAuI0kKfpb5RNV5THfEVWlvdKUyrv7b3FzVu3sbPzWiTx4eERjo4rSmU9+JfN5SECcG39Aa5cu4FsNiuYcqyCIIBPNpkR4DKVp4pDsVhEPp/H/v67iyqSo7yqzmqhynrT4zIYpC+AnyAXEPkiEu2p6RVJAbKyXFD5ulaDC0OTikEzLQ6t+cXBME2h8oW04U/KiFgQE101ZiZNzmXPjGUvx8zyL4o85kfBG6imAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/9edc3781d6c5bc2f048ec53b01ba5ddc/d024a/notification1.png\",\n    \"srcSet\": [\"/static/9edc3781d6c5bc2f048ec53b01ba5ddc/a2ead/notification1.png 259w\", \"/static/9edc3781d6c5bc2f048ec53b01ba5ddc/d024a/notification1.png 481w\"],\n    \"sizes\": \"(max-width: 481px) 100vw, 481px\",\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(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBNotification [show]=true [fade]=true [autohide]='2' title=\\\"Contrast\\\" message=\\\"Hello, world! This is a primary message.\\\"\\n    text=\\\"11 mins ago\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true iconClassName=\\\"text-primary\\\" title=\\\"Contrast\\\"\\n    message=\\\"Hello, world! This is a primary message.\\\" text=\\\"11 mins ago\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true iconClassName=\\\"text-secondary\\\" title=\\\"Contrast\\\"\\n    message=\\\"Hello, world! This is a primary message.\\\" text=\\\"11 mins ago\\\" ></CDBNotification>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Notification with Hidden Message\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"462px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4060178bb9113ee449233dac822fa189/e389b/notification2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"105.01930501930504%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAABJ0AAASdAHeZh94AAACoUlEQVQ4y41VS2sTURQeXbgVXOhCQYXsRLQLFxED/gVjkVJosVvpHxCU4h/IQlCoWxcGf4GNuNSmD6FSUTqTR2PnmZmkk5nM5J3Pe+5kYhKnSS6cubkz53733PN950To9/ug0W610Ov1EDXo/bwm0IbNzXeIx+NIJpOQJBGiJOHw8CcODn7g1HY4KB18loWHdjqdAPBRchFLS8tYuHMLW1sZtFi0ZdOEbhhoNJuYd3S73QAwlUohFoshkUigWCxGOtLpNM+KUiDHYFNnCBA6TAKelePQn0dIi0rFQi5fhGVZUFUFqq5D1XRoqgarUoFpltn1y/wdrTVNgywrOJFlBtIbI49HOBpRk+WMjPJIc6PRgOd5Y7Pv+6jX63Bdl/u12+2h8Rzm8jl8fJ/G50+ZoSOfmbUGcqLrTFrIbGhDwPVn6xAuC7h4/RJ2v2VxJIrY3/+O7WwWVtWOzGtUHocsr62uQbgm4PyVC9jb3psKMJNl+rGzu4NXzzfw9vUbeL4XKZsu5XoGy2OyCUej4bMc1lFzXJ5Lf0CGM8grEUVzYN6YlDggoVuWycotx+VARhIxrQoMPZCJWS6zyrHYt2Cts/eKouDPiczJwODaPIeTEUY1hrBKuMAZk6NMh/IKpcZzmE5/wP0HD7Gy+hSl0jGOSyXkCwWIosSvHgKHBPTIelOaw+MnK1i8J+DuDQGZL19hn1ZRKBQh5XKoe/5cshlrDi9ebiB29RwWbt/Er99i5LWnta8xlulBpXQklaCoRmSDoJOpCvr9OWRDD9dxeP8jYMPQOctkxHKlWoXFvvH+qBt8bbA+qagqZMb0f82BR8h0Zts1rj/XdVjePK4/0hppMKhtpkVGULh2WBB2rcYjH61nIdDP5H/Dv+KfZrR3FIz2/AVzfy6xqg/t5QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/4060178bb9113ee449233dac822fa189/e389b/notification2.png\",\n    \"srcSet\": [\"/static/4060178bb9113ee449233dac822fa189/a2ead/notification2.png 259w\", \"/static/4060178bb9113ee449233dac822fa189/e389b/notification2.png 462w\"],\n    \"sizes\": \"(max-width: 462px) 100vw, 462px\",\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(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBNotification [show]=true [fade]=true [hideMessages]=true [autohide]='5' title=\\\"Contrast\\\"\\n    message=\\\"Hello, world! This is a primary message.\\\" text=\\\"11 mins ago\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true [hideMessages]=true iconClassName=\\\"text-success\\\" title=\\\"Contrast\\\"\\n    message=\\\"Hello, world! This is a primary message.\\\" text=\\\"11 mins ago\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true [hideMessages]=true iconClassName=\\\"text-warning\\\" title=\\\"Contrast\\\"\\n    message=\\\"Hello, world! This is a primary message.\\\" text=\\\"11 mins ago\\\" ></CDBNotification>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Change Color of Icon Box\"), mdx(\"p\", null, \"Simply add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" boolean attribute to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBNotification\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"462px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4060178bb9113ee449233dac822fa189/e389b/notification2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"105.01930501930504%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAABJ0AAASdAHeZh94AAACoUlEQVQ4y41VS2sTURQeXbgVXOhCQYXsRLQLFxED/gVjkVJosVvpHxCU4h/IQlCoWxcGf4GNuNSmD6FSUTqTR2PnmZmkk5nM5J3Pe+5kYhKnSS6cubkz53733PN950To9/ug0W610Ov1EDXo/bwm0IbNzXeIx+NIJpOQJBGiJOHw8CcODn7g1HY4KB18loWHdjqdAPBRchFLS8tYuHMLW1sZtFi0ZdOEbhhoNJuYd3S73QAwlUohFoshkUigWCxGOtLpNM+KUiDHYFNnCBA6TAKelePQn0dIi0rFQi5fhGVZUFUFqq5D1XRoqgarUoFpltn1y/wdrTVNgywrOJFlBtIbI49HOBpRk+WMjPJIc6PRgOd5Y7Pv+6jX63Bdl/u12+2h8Rzm8jl8fJ/G50+ZoSOfmbUGcqLrTFrIbGhDwPVn6xAuC7h4/RJ2v2VxJIrY3/+O7WwWVtWOzGtUHocsr62uQbgm4PyVC9jb3psKMJNl+rGzu4NXzzfw9vUbeL4XKZsu5XoGy2OyCUej4bMc1lFzXJ5Lf0CGM8grEUVzYN6YlDggoVuWycotx+VARhIxrQoMPZCJWS6zyrHYt2Cts/eKouDPiczJwODaPIeTEUY1hrBKuMAZk6NMh/IKpcZzmE5/wP0HD7Gy+hSl0jGOSyXkCwWIosSvHgKHBPTIelOaw+MnK1i8J+DuDQGZL19hn1ZRKBQh5XKoe/5cshlrDi9ebiB29RwWbt/Er99i5LWnta8xlulBpXQklaCoRmSDoJOpCvr9OWRDD9dxeP8jYMPQOctkxHKlWoXFvvH+qBt8bbA+qagqZMb0f82BR8h0Zts1rj/XdVjePK4/0hppMKhtpkVGULh2WBB2rcYjH61nIdDP5H/Dv+KfZrR3FIz2/AVzfy6xqg/t5QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/4060178bb9113ee449233dac822fa189/e389b/notification2.png\",\n    \"srcSet\": [\"/static/4060178bb9113ee449233dac822fa189/a2ead/notification2.png 259w\", \"/static/4060178bb9113ee449233dac822fa189/e389b/notification2.png 462w\"],\n    \"sizes\": \"(max-width: 462px) 100vw, 462px\",\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(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBNotification [show]=true [fade]=true color=\\\"success\\\" title=\\\"Contrast\\\" message=\\\"Hello, world! This is a primary message.\\\"\\n    text=\\\"11 mins ago\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true color=\\\"danger\\\" title=\\\"Contrast\\\" message=\\\"Hello, world! This is a primary message.\\\"\\n    text=\\\"11 mins ago\\\" ></CDBNotification>\\n\\n<CDBNotification [show]=true [fade]=true color=\\\"secondary\\\" title=\\\"Contrast\\\" message=\\\"Hello, world! This is a primary message.\\\"\\n    text=\\\"11 mins ago\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true color=\\\"primary\\\" title=\\\"Contrast\\\" message=\\\"Hello, world! This is a primary message.\\\"\\n    text=\\\"11 mins ago\\\" ></CDBNotification>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Notification with Icons\"), mdx(\"p\", null, \"Simply add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" boolean attribute to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBNotification\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"473px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1150136333e05e78ee9b054f11e7f84d/c7c3c/notification3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"133.97683397683397%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAABJ0AAASdAHeZh94AAADIElEQVRIx6VVS08TURSepYlsSFRC0ISACcTEJa7FsMAFJlprZI1/QnYYNFE38gdcuRE1JiaGncYFkhhUhJaHbVOItjPTznSmD2g7j36ec9uZvgZLwk1O79w7535zzvnO/SrVajWwHR4ewrZtdA5+57ruiU3iQwsLjzA2NoZwOIx0Oo1INIqtSBQbvzZRtSwf+Djj4TiOMAF4ffIGRkZHcWloEL9jMRSLRWiajkw2S05uV8RBg/d9wMXFRYyPj+NuKCRS73TkUrBxSkFArVFK/NPuUH/Bhzk6ni1Ku1qtin2vpkGpC0DXsaFmMojHE1DVDP78TYk6KoqCtKyItBVFhaIqkGlP07LCZ//ggPbUtmAEYCezIrVGhDxXKhVhHGHrfHR0hHK5LNae8VlRw7W1r3jx/Anev3uLEtVQ0zTkcoYgxmrUrlkGx39uXTOYT8rt0D1I0iguDF9BIraL7e0d0TLr33/4bdNreOAC8E4oTIBDOH/xMjKqHMhiL/NryA9RauTlVy/x5fOnwK97aR3Xf20s27YFmw80Wkyn2um6TjXMIWcYKBQKMEwTBj2b+bxoel3Pifrm84VulvmHD3CbMBFZQUgOedrTCJiBGID3GMQ0ySer1VuI9juJkZxGk9rMWs2td3ZAuq3WynBg2zycn8dgfz9uTk8jlUohEokIcfi5sUGOVtcdbiUikOXJqSkMSBIGz/Yhsb+PUqkkUs+yOLjuiVn3AZeWlnBtYgIP5uboBpQDVcS7v50Xv6c48GAxYPPEgetTLlfaxCFIIHxxYAFIJJriIMsyNbiKVJrmTFYwqtJalpvikKTS8H5PceDI6l9vRlcXhYovFK0WyPLq6iqePX6KN6+XSRxKoic5WpYny7J98P9ZmzjM3JqB1Cfh3PAA4nsxxOJx7OzuYXMrIgBPMtpYnr0/C+mMhJGrJA6KenpxSCaTWPnwEevf1k8vDg7lzsUtk7m0yffWF4dcXRxYJHjNd57XOj1z47NYBIiDTU5F0RZ8gJ3NvEmqUgcyDFPMeTrMoAzIIsH+7NslDp3y3i3z3e+8pvb+EZsXwcE/FcbxAhetKWwAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/1150136333e05e78ee9b054f11e7f84d/c7c3c/notification3.png\",\n    \"srcSet\": [\"/static/1150136333e05e78ee9b054f11e7f84d/a2ead/notification3.png 259w\", \"/static/1150136333e05e78ee9b054f11e7f84d/c7c3c/notification3.png 473w\"],\n    \"sizes\": \"(max-width: 473px) 100vw, 473px\",\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(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBNotification [show]=true [fade]=true title=\\\"Contrast\\\" icon=\\\"award\\\" message=\\\"Hello, world! This is a primary message.\\\"\\n    text=\\\"11 mins ago\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true iconClassName=\\\"text-primary\\\" title=\\\"Contrast\\\" icon=\\\"bus\\\"\\n    message=\\\"Hello, world! This is a primary message.\\\" text=\\\"11 mins ago\\\" ></CDBNotification>\\n\\n<CDBNotification [show]=true [fade]=true iconClassName=\\\"text-danger\\\" title=\\\"Contrast\\\" icon=\\\"burn\\\"\\n    message=\\\"Hello, world! This is a primary message.\\\" text=\\\"11 mins ago\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true iconClassName=\\\"text-success\\\" icon=\\\"car-crash\\\" title=\\\"Contrast\\\"\\n    message=\\\"Hello, world! This is a primary message.\\\" text=\\\"11 mins ago\\\" ></CDBNotification>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Positioning\"), mdx(\"p\", null, \"Simply add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" boolean attribute to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBNotification\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\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\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/48095599e1bfb27f713d46d5bfce33f8/6fa81/notification4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"20.077220077220076%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABJ0AAASdAHeZh94AAAAjUlEQVQY042OTQrDIBBGc/8bCB5B8CcgeAC9gQbjosZklULSG3ypKe5s6eIxw8w3jxkopbDO4TxfOI4D+/6EMQZKKYzj+JNeZnBvmfce0zQhhHBXrTWEEJBSfqXKWo5zflP7oQ7boNEOetRd/YQxBkII5nnGuq7Ytg0xxo+wJ/hHaq3FI2fkZUEpBSklXPQ4/qMm3Q8BAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/48095599e1bfb27f713d46d5bfce33f8/e3189/notification4.png\",\n    \"srcSet\": [\"/static/48095599e1bfb27f713d46d5bfce33f8/a2ead/notification4.png 259w\", \"/static/48095599e1bfb27f713d46d5bfce33f8/6b9fd/notification4.png 518w\", \"/static/48095599e1bfb27f713d46d5bfce33f8/e3189/notification4.png 1035w\", \"/static/48095599e1bfb27f713d46d5bfce33f8/44d59/notification4.png 1553w\", \"/static/48095599e1bfb27f713d46d5bfce33f8/6fa81/notification4.png 1856w\"],\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(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBNotification [show]=true [fade]=true title=\\\"Contrast\\\" message=\\\"Hello, world! This is a positioned notification.\\\"\\n    text=\\\"11 mins ago\\\" position=\\\"top-left\\\" ></CDBNotification>\\n<CDBNotification [show]=true [fade]=true title=\\\"Contrast\\\" message=\\\"Hello, world! This is a positioned notification.\\\"\\n    text=\\\"11 mins ago\\\" position=\\\"bottom-right\\\" ></CDBNotification>\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.\"), mdx(\"h2\", null, \"Contrast Notification Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {NotificationModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Notification Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Notification component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"bodyClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom className to the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"body\"), \" section of notification component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"bodyClassName=\\\"p-5 font-weight-bold\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"bodyColor\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Set color to the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"body\"), \" section of notification component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"bodyColor=\\\"black\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes to the wrapper\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Class=\\\"stylish-color-dark\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"closeClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"text-dark\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes to the Close button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"closeClassName=\\\"blue-grey-text\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fade\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds a fade effect when you close the notification\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"fade=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"hideMessages\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Hides messages in the component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"hideMessages=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"autohide\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets time in ms when box hide. \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"0 = infinity\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"autoHide=3000\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"square\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets a custom icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"bell\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes to the Icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"iconClassName=\\\"green-text\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"message\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets message of the notification\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"message=\\\"Hello there! This is a toast message\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"position\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"position=\\\"top-right\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"show\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Shows your component. If you do not use this setting, your component will exist, but it will be hidden.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"show=false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"text\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets text of the notification\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"text=\\\"11 minutes ago\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"title\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Set header text of the notification\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"title=\\\"Someone sent you an email\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"titleClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes to the title text\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"titleClassName=\\\"elegant-color-dark-white-text\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"titleColor\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets the color of the title\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"titleColor=\\\"white\\\"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#notification","title":"Notification","items":[{"url":"#custom-notification-types","title":"Custom Notification Types","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#notification-with-hidden-message","title":"Notification with Hidden Message","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#change-color-of-icon-box","title":"Change Color of Icon Box","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#notification-with-icons","title":"Notification with Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#positioning","title":"Positioning","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-notification-bootstrap-modules-used","title":"Contrast Notification Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/notification.md"},"frontmatter":{"metaTitle":"Notification Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Push notifications to your visitors with a toast, a lightweight and easily customizable alert message"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"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/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"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":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"0e7f4810-2497-55bc-9822-d7f5772215ec"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}