text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[182],{d050:function(t,e,o){"use strict";o.r(e);var n=function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("doc-page",{attrs:{title:"Body classes",nav:t.nav}},[o("p",[t._v("Quasar attaches some very useful helper CSS classes to document.body which you can take advantage of:")]),o("q-markup-table",{staticStyle:{width:"fit-content","max-width":"100%"},attrs:{"wrap-cells":!0,flat:!0,bordered:!0}},[o("thead",[o("tr",[o("th",{staticClass:"text-left"},[t._v("Name")]),o("th",{staticClass:"text-left"},[t._v("Description")])])]),o("tbody",[o("tr",[o("td",[t._v("body–dark")]),o("td",[t._v("When in "),o("doc-link",{attrs:{to:"/style/dark-mode"}},[t._v("dark mode")])],1)]),o("tr",[o("td",[t._v("body–light")]),o("td",[t._v("When not in "),o("doc-link",{attrs:{to:"/style/dark-mode"}},[t._v("dark mode")])],1)]),o("tr",[o("td",[t._v("desktop")]),o("td",[t._v("When client is on a desktop")])]),o("tr",[o("td",[t._v("mobile")]),o("td",[t._v("When client is on a mobile device")])]),o("tr",[o("td",[t._v("touch")]),o("td",[t._v("When client has touch support")])]),o("tr",[o("td",[t._v("no-touch")]),o("td",[t._v("When client does NOT have touch support")])]),o("tr",[o("td",[t._v("platform-android")]),o("td",[t._v("When client is on an Android device")])]),o("tr",[o("td",[t._v("platform-ios")]),o("td",[t._v("When client is on an iOS device")])]),o("tr",[o("td",[t._v("native-mobile")]),o("td",[t._v("When client is on a "),o("doc-link",{attrs:{to:"/quasar-cli/developing-cordova-apps/introduction"}},[t._v("Cordova")]),t._v(" or "),o("doc-link",{attrs:{to:"/quasar-cli/developing-capacitor-apps/introduction"}},[t._v("Capacitor")]),t._v(" app")],1)]),o("tr",[o("td",[t._v("electron")]),o("td",[t._v("When client is on an "),o("doc-link",{attrs:{to:"/quasar-cli/developing-electron-apps/introduction"}},[t._v("Electron")]),t._v(" app")],1)]),o("tr",[o("td",[t._v("bex")]),o("td",[t._v("When app runs from a browser extension")])]),o("tr",[o("td",[t._v("within-iframe")]),o("td",[t._v("When app runs from an iframe")])]),o("tr",[o("td",[o("code",{staticClass:"doc-token"},[t._v("screen--*")])]),o("td",[t._v("If "),o("doc-link",{attrs:{to:"/options/screen-plugin#How-to-enable-body-classes"}},[t._v("enabled (only)")]),t._v(", tells current window breakpoint ("),o("code",{staticClass:"doc-token"},[t._v("screen--xs")]),t._v(", "),o("code",{staticClass:"doc-token"},[t._v("screen--sm")]),t._v(", …, "),o("code",{staticClass:"doc-token"},[t._v("screen--xl")]),t._v(") ("),o("strong",[t._v("Quasar v1.5.3+")]),t._v(")")],1)])])])],1)},a=[],i=o("8669"),s="Body classes | Quasar Framework",d="Quasar's helper classes that get added to document.body.",r={meta:{title:"Body classes",meta:{title:{name:"title",content:s},ogTitle:{name:"og:title",content:s},twitterTitle:{name:"twitter:title",content:s},description:{name:"description",content:d},ogDesc:{name:"og:description",content:d},twitterDesc:{name:"twitter:description",content:d}}},preFetch:function(t){var e=t.store;e.commit("updateToc",[])},created:function(){this.nav=[{name:"Breakpoints",category:"Style & Identity",path:"/style/breakpoints",dir:"left"},{name:"Visibility",category:"Style & Identity",path:"/style/visibility",dir:"right"}]},methods:{copyHeading:i["a"]}},c=r,l=o("2877"),v=Object(l["a"])(c,n,a,!1,null,null,null);e["default"]=v.exports}}]);