mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 12:14:22 +08:00
Updates
This commit is contained in:
Dragos
parent
e1f4614f65
commit
fa0b2c12f9
File diff suppressed because one or more lines are too long
@ -10,11 +10,11 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>That's a Four-Oh-Four.</blockquote> <a href="/vue-material-kit/documentation/" class="router-link-active">Take me home.</a></div></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/vue-material-kit/documentation/" class="router-link-active">Take me home.</a></div></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{238:function(e,t,i){"use strict";i.r(t);var s=i(0),n=Object(s.a)({},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[this._m(0),this._v(" "),t("p",[this._v("Currently, on "),t("a",{attrs:{href:"https://www.creative-tim.com/",target:"_blank",rel:"noopener noreferrer"}},[this._v("Creative Tim"),t("OutboundLink")],1),this._v(" you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our "),t("a",{attrs:{href:"https://www.creative-tim.com/license",target:"_blank",rel:"noopener noreferrer"}},[this._v("Official License Page"),t("OutboundLink")],1),this._v(".")])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"license"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#license","aria-hidden":"true"}},[this._v("#")]),this._v(" License")])}],!1,null,null,null);n.options.__file="license.md";t.default=n.exports}}]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{237:function(e,t,i){"use strict";i.r(t);var s=i(0),n=Object(s.a)({},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[this._m(0),this._v(" "),t("p",[this._v("Currently, on "),t("a",{attrs:{href:"https://www.creative-tim.com/",target:"_blank",rel:"noopener noreferrer"}},[this._v("Creative Tim"),t("OutboundLink")],1),this._v(" you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our "),t("a",{attrs:{href:"https://www.creative-tim.com/license",target:"_blank",rel:"noopener noreferrer"}},[this._v("Official License Page"),t("OutboundLink")],1),this._v(".")])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"license"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#license","aria-hidden":"true"}},[this._v("#")]),this._v(" License")])}],!1,null,null,null);n.options.__file="license.md";t.default=n.exports}}]);
|
||||
@ -1 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{237:function(t,s,a){"use strict";a.r(s);var e=a(0),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._v(" "),a("p",[t._v("Through most of the examples in this dashboard, we have used the default Icons for the Material Design provided by Google. You can easily use them like this:")]),t._v(" "),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<md-icon>favorite</md-icon>\n",script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("md-icon",[t._v("favorite")])],1),t._v(" "),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("md-icon")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("md-icon")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])]),t._v(" "),a("blockquote",[a("p",[t._v("Note: for more details about the icons please see the "),a("strong",[t._v("Icon")]),t._v(" section from "),a("a",{attrs:{href:"https://vuematerial.io/components/icon",target:"_blank",rel:"noopener noreferrer"}},[t._v("vuematerial.io"),a("OutboundLink")],1)])])],1)},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"material-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#material-icons","aria-hidden":"true"}},[this._v("#")]),this._v(" Material Icons")])}],!1,null,null,null);n.options.__file="material-icons.md";s.default=n.exports}}]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{238:function(t,s,a){"use strict";a.r(s);var e=a(0),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._v(" "),a("p",[t._v("Through most of the examples in this dashboard, we have used the default Icons for the Material Design provided by Google. You can easily use them like this:")]),t._v(" "),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<md-icon>favorite</md-icon>\n",script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("md-icon",[t._v("favorite")])],1),t._v(" "),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("md-icon")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("md-icon")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])]),t._v(" "),a("blockquote",[a("p",[t._v("Note: for more details about the icons please see the "),a("strong",[t._v("Icon")]),t._v(" section from "),a("a",{attrs:{href:"https://vuematerial.io/components/icon",target:"_blank",rel:"noopener noreferrer"}},[t._v("vuematerial.io"),a("OutboundLink")],1)])])],1)},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"material-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#material-icons","aria-hidden":"true"}},[this._v("#")]),this._v(" Material Icons")])}],!1,null,null,null);n.options.__file="material-icons.md";s.default=n.exports}}]);
|
||||
1
documentation/assets/js/16.70882196.js
Normal file
1
documentation/assets/js/16.70882196.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{182:function(t,e,n){},204:function(t,e,n){"use strict";var a=n(182);n.n(a).a},242:function(t,e,n){"use strict";n.r(e);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,a=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||a().default)}},i=(n(204),n(0)),o=Object(i.a)(a,void 0,void 0,!1,null,"099ab69c",null);o.options.__file="Badge.vue";e.default=o.exports}}]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{182:function(t,e,n){},204:function(t,e,n){"use strict";var a=n(182);n.n(a).a},243:function(t,e,n){"use strict";n.r(e);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,a=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||a().default)}},i=(n(204),n(0)),o=Object(i.a)(a,void 0,void 0,!1,null,"099ab69c",null);o.options.__file="Badge.vue";e.default=o.exports}}]);
|
||||
@ -1 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{241:function(e,t,r){"use strict";r.r(t);var n=r(0),i=Object(n.a)({},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"content"},[e._m(0),e._v(" "),r("p",[e._v("Vue Material Kit is a beautiful resource built over "),r("a",{attrs:{href:"https://vuematerial.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue Material"),r("OutboundLink")],1),e._v(" and "),r("a",{attrs:{href:"https://vuejs.org/v2/guide/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuejs"),r("OutboundLink")],1),e._v(" with a fresh, new design inspired by Google's material design. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components.\n. Vue Material Kit is the official Vuejs version of the Original Material Kit.")]),e._v(" "),e._m(1),e._v(" "),r("ul",[r("li",[e._v("Install Nodejs from "),r("a",{attrs:{href:"https://nodejs.org/en/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Nodejs Official Page"),r("OutboundLink")],1)]),e._v(" "),r("li",[e._v("Open your terminal")]),e._v(" "),r("li",[e._v("Navigate to the project")]),e._v(" "),r("li",[e._v("Run "),r("code",[e._v("npm install")]),e._v(" or "),r("code",[e._v("yarn install")]),e._v(" if you use "),r("a",{attrs:{href:"https://yarnpkg.com/en/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Yarn"),r("OutboundLink")],1)]),e._v(" "),e._m(2),e._v(" "),r("li",[e._v("A new tab will be opened in your browser")])]),e._v(" "),r("p",[e._v("You can also run additional npm tasks such as")]),e._v(" "),e._m(3),e._v(" "),e._m(4),e._v(" "),r("p",[e._v("We used the latest 3.x "),r("a",{attrs:{href:"https://github.com/vuejs/vue-cli",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue CLI"),r("OutboundLink")],1),e._v(" which aims to reduce project configuration\nto as little as possible. Almost everything is inside "),r("code",[e._v("package.json")]),e._v(" + some other related files such as\n"),r("code",[e._v("babel.config.js")]),e._v(", "),r("code",[e._v(".eslintrc.js")]),e._v(", "),r("code",[e._v(".postcssrc.js")]),e._v(", "),r("code",[e._v(".browserslistrc")])]),e._v(" "),e._m(5),e._v(" "),r("p",[e._v("Vue Material Kit also uses "),r("a",{attrs:{href:"https://vuematerial.io/ui-elements/elevation",target:"_blank",rel:"noopener noreferrer"}},[e._v("element-ui"),r("OutboundLink")],1),e._v(" components and restyles them to achieve consistent and homogenous interface with the existing custom components and general UI of the kit.")])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"short-description-and-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#short-description-and-usage","aria-hidden":"true"}},[this._v("#")]),this._v(" Short Description and Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting Started")])},function(){var e=this.$createElement,t=this._self._c||e;return t("li",[this._v("Run "),t("code",[this._v("npm run dev")]),this._v(" or "),t("code",[this._v("yarn serve")]),this._v(" to start a local development server")])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("code",[this._v("npm run build")]),this._v(" to build your app for production")]),this._v(" "),t("li",[t("code",[this._v("npm run lint")]),this._v(" to run linting.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"vue-cli"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vue-cli","aria-hidden":"true"}},[this._v("#")]),this._v(" Vue-cli")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"element-ui"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#element-ui","aria-hidden":"true"}},[this._v("#")]),this._v(" Element-UI")])}],!1,null,null,null);i.options.__file="README.md";t.default=i.exports}}]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{244:function(e,t,r){"use strict";r.r(t);var n=r(0),i=Object(n.a)({},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"content"},[e._m(0),e._v(" "),r("p",[e._v("Vue Material Kit is a beautiful resource built over "),r("a",{attrs:{href:"https://vuematerial.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue Material"),r("OutboundLink")],1),e._v(" and "),r("a",{attrs:{href:"https://vuejs.org/v2/guide/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuejs"),r("OutboundLink")],1),e._v(" with a fresh, new design inspired by Google's material design. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components.\n. Vue Material Kit is the official Vuejs version of the Original Material Kit.")]),e._v(" "),e._m(1),e._v(" "),r("ul",[r("li",[e._v("Install Nodejs from "),r("a",{attrs:{href:"https://nodejs.org/en/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Nodejs Official Page"),r("OutboundLink")],1)]),e._v(" "),r("li",[e._v("Open your terminal")]),e._v(" "),r("li",[e._v("Navigate to the project")]),e._v(" "),r("li",[e._v("Run "),r("code",[e._v("npm install")]),e._v(" or "),r("code",[e._v("yarn install")]),e._v(" if you use "),r("a",{attrs:{href:"https://yarnpkg.com/en/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Yarn"),r("OutboundLink")],1)]),e._v(" "),e._m(2),e._v(" "),r("li",[e._v("A new tab will be opened in your browser")])]),e._v(" "),r("p",[e._v("You can also run additional npm tasks such as")]),e._v(" "),e._m(3),e._v(" "),e._m(4),e._v(" "),r("p",[e._v("We used the latest 3.x "),r("a",{attrs:{href:"https://github.com/vuejs/vue-cli",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue CLI"),r("OutboundLink")],1),e._v(" which aims to reduce project configuration\nto as little as possible. Almost everything is inside "),r("code",[e._v("package.json")]),e._v(" + some other related files such as\n"),r("code",[e._v("babel.config.js")]),e._v(", "),r("code",[e._v(".eslintrc.js")]),e._v(", "),r("code",[e._v(".postcssrc.js")]),e._v(", "),r("code",[e._v(".browserslistrc")])]),e._v(" "),e._m(5),e._v(" "),r("p",[e._v("Vue Material Kit also uses "),r("a",{attrs:{href:"https://vuematerial.io/ui-elements/elevation",target:"_blank",rel:"noopener noreferrer"}},[e._v("element-ui"),r("OutboundLink")],1),e._v(" components and restyles them to achieve consistent and homogenous interface with the existing custom components and general UI of the kit.")])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"short-description-and-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#short-description-and-usage","aria-hidden":"true"}},[this._v("#")]),this._v(" Short Description and Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting Started")])},function(){var e=this.$createElement,t=this._self._c||e;return t("li",[this._v("Run "),t("code",[this._v("npm run dev")]),this._v(" or "),t("code",[this._v("yarn serve")]),this._v(" to start a local development server")])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("code",[this._v("npm run build")]),this._v(" to build your app for production")]),this._v(" "),t("li",[t("code",[this._v("npm run lint")]),this._v(" to run linting.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"vue-cli"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vue-cli","aria-hidden":"true"}},[this._v("#")]),this._v(" Vue-cli")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"element-ui"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#element-ui","aria-hidden":"true"}},[this._v("#")]),this._v(" Element-UI")])}],!1,null,null,null);i.options.__file="README.md";t.default=i.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{243:function(s,e,t){"use strict";t.r(e);var r=t(0),a=Object(r.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("div",{staticClass:"content"},[t("h1",{attrs:{id:"brand-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#brand-colors","aria-hidden":"true"}},[s._v("#")]),s._v(" Brand Colors")]),s._v(" "),t("ol",[t("li",[t("p",[s._v("You can find the colors in "),t("code",[s._v("assets/scss/material-kit/_variables.scss")]),s._v(" starting with line 28 where is the primary color set: "),t("code",[s._v("$brand-primary: $purple !default;")]),s._v(".")])]),s._v(" "),t("li",[t("p",[s._v("All the possible colors are in "),t("code",[s._v("assets/scss/material-kit/_colors.scss")]),s._v(".")])])])])}],!1,null,null,null);a.options.__file="brand-colors.md";e.default=a.exports}}]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{240:function(s,e,t){"use strict";t.r(e);var r=t(0),a=Object(r.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("div",{staticClass:"content"},[t("h1",{attrs:{id:"brand-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#brand-colors","aria-hidden":"true"}},[s._v("#")]),s._v(" Brand Colors")]),s._v(" "),t("ol",[t("li",[t("p",[s._v("You can find the colors in "),t("code",[s._v("assets/scss/material-kit/_variables.scss")]),s._v(" starting with line 28 where is the primary color set: "),t("code",[s._v("$brand-primary: $purple !default;")]),s._v(".")])]),s._v(" "),t("li",[t("p",[s._v("All the possible colors are in "),t("code",[s._v("assets/scss/material-kit/_colors.scss")]),s._v(".")])])])])}],!1,null,null,null);a.options.__file="brand-colors.md";e.default=a.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.df387569.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.df387569.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="active sidebar-link">Badge</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/badge.html#badges-color" class="sidebar-link">Badges Color</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="badge"><a href="#badge" aria-hidden="true" class="header-anchor">#</a> Badge</h1> <p>To use the custom button you need to import the custom made component, you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Badge<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="active sidebar-link">Badge</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/badge.html#badges-color" class="sidebar-link">Badges Color</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="badge"><a href="#badge" aria-hidden="true" class="header-anchor">#</a> Badge</h1> <p>To use the custom button you need to import the custom made component, you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Badge<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
|
||||
</code></pre></div><h3 id="local-usage"><a href="#local-usage" aria-hidden="true" class="header-anchor">#</a> Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
Badge
|
||||
<span class="token punctuation">}</span>
|
||||
@ -36,13 +36,13 @@
|
||||
|
||||
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span class="showText" style="display:none;">Show</span></div></div></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="prev">
|
||||
Tooltips
|
||||
<a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="prev">
|
||||
Mobile Menu
|
||||
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/material-icons.html">
|
||||
Material Icons
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/6.bdb412a0.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.df387569.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/6.0e5453ce.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.df387569.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/7.2920afca.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="active sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="brand-colors"><a href="#brand-colors" aria-hidden="true" class="header-anchor">#</a> Brand Colors</h1> <ol><li><p>You can find the colors in <code>assets/scss/material-kit/_variables.scss</code> starting with line 28 where is the primary color set: <code>$brand-primary: $purple !default;</code>.</p></li> <li><p>All the possible colors are in <code>assets/scss/material-kit/_colors.scss</code>.</p></li></ol></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="active sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="brand-colors"><a href="#brand-colors" aria-hidden="true" class="header-anchor">#</a> Brand Colors</h1> <ol><li><p>You can find the colors in <code>assets/scss/material-kit/_variables.scss</code> starting with line 28 where is the primary color set: <code>$brand-primary: $purple !default;</code>.</p></li> <li><p>All the possible colors are in <code>assets/scss/material-kit/_colors.scss</code>.</p></li></ol></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/vue-material-kit/documentation/component-docs/switch.html" class="prev">
|
||||
Switch
|
||||
@ -27,6 +27,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/7.68a502ac.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/7.2920afca.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/8.031149ba.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="active sidebar-link">Buttons</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#colors" class="sidebar-link">Colors</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#style-buttons" class="sidebar-link">Style Buttons</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#sizes" class="sidebar-link">Sizes</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#extra-mile" class="sidebar-link">Extra Mile</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="buttons"><a href="#buttons" aria-hidden="true" class="header-anchor">#</a> Buttons</h1> <p>To use the custom button you don't need to import the custom made component, you can easily use it like this:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="active sidebar-link">Buttons</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#colors" class="sidebar-link">Colors</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#style-buttons" class="sidebar-link">Style Buttons</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#sizes" class="sidebar-link">Sizes</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#extra-mile" class="sidebar-link">Extra Mile</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="buttons"><a href="#buttons" aria-hidden="true" class="header-anchor">#</a> Buttons</h1> <p>To use the custom button you don't need to import the custom made component, you can easily use it like this:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span><span class="token punctuation">></span></span>
|
||||
Button
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
</code></pre></div><h2 id="colors"><a href="#colors" aria-hidden="true" class="header-anchor">#</a> Colors</h2> <p>We has changed the predefined button styles from vuematerial.io, each serving its own semantic purpose, with a few extras thrown in for more control.</p> <div class="demo-block demo-box demo-component-docs demo-buttons.html"><div class="source"><button type="button" class="md-button md-theme-default"><div class="md-ripple"><div class="md-button-content">Default</div> </div></button> <button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content">Primary</div> </div></button> <button type="button" class="md-button md-info md-theme-default"><div class="md-ripple"><div class="md-button-content">Info</div> </div></button> <button type="button" class="md-button md-success md-theme-default"><div class="md-ripple"><div class="md-button-content">Success</div> </div></button> <button type="button" class="md-button md-warning md-theme-default"><div class="md-ripple"><div class="md-button-content">Warning</div> </div></button> <button type="button" class="md-button md-danger md-theme-default"><div class="md-ripple"><div class="md-button-content">Danger</div> </div></button> <button type="button" class="md-button md-rose md-theme-default"><div class="md-ripple"><div class="md-button-content">Rose</div> </div></button> <button type="button" class="md-button md-simple md-theme-default"><div class="md-ripple"><div class="md-button-content">Simple</div> </div></button></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
@ -48,6 +48,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/8.031149ba.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,20 +10,20 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.df387569.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.df387569.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="active sidebar-link">Cards</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/cards.html#login-card" class="sidebar-link">Login card</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="cards"><a href="#cards" aria-hidden="true" class="header-anchor">#</a> Cards</h1> <p>We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>LoginCard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="active sidebar-link">Cards</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/cards.html#login-card" class="sidebar-link">Login card</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="cards"><a href="#cards" aria-hidden="true" class="header-anchor">#</a> Cards</h1> <p>We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>LoginCard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
|
||||
</code></pre></div><h3 id="local-usage"><a href="#local-usage" aria-hidden="true" class="header-anchor">#</a> Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
LoginCard
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre></div><h3 id="global-usage"><a href="#global-usage" aria-hidden="true" class="header-anchor">#</a> Global Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>LoginCard<span class="token punctuation">)</span>
|
||||
</code></pre></div><h2 id="login-card"><a href="#login-card" aria-hidden="true" class="header-anchor">#</a> Login card</h2> <div class="demo-block demo-box demo-component-docs demo-cards.html"><div class="source"><div class="md-card md-card-login md-theme-default md-card-hidden"><div class="md-card-header md-card-header-green"><h4 class="title">Log in</h4> <div class="social-line"><a href="/vue-material-kit/documentation/component-docs/cards.html#facebook" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-facebook-square"></i></div> </div></a> <a href="/vue-material-kit/documentation/component-docs/cards.html#twitter" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-twitter"></i></div> </div></a> <a href="/vue-material-kit/documentation/component-docs/cards.html#google" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-google-plus-g"></i></div> </div></a></div></div> <div class="md-card-content"><p class="description">Or Be Classical</p> <div class="md-field md-form-group md-theme-default"><i class="md-icon md-icon-font md-theme-default">face</i> <label>First Name...</label> <input type="text" id="md-input-34dqhj5fy" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-form-group md-theme-default"><i class="md-icon md-icon-font md-theme-default">email</i> <label>Email...</label> <input type="email" id="md-input-9et1l1sn9" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-form-group md-theme-default"><i class="md-icon md-icon-font md-theme-default">lock_outline</i> <label>Password...</label> <input type="text" id="md-input-0r0n5atd" class="md-input"> <!----> <!----> <!----></div></div> <div class="md-card-actions md-alignment-right"><button type="button" class="md-button md-simple md-success md-lg md-theme-default"><div class="md-ripple"><div class="md-button-content">
|
||||
</code></pre></div><h2 id="login-card"><a href="#login-card" aria-hidden="true" class="header-anchor">#</a> Login card</h2> <div class="demo-block demo-box demo-component-docs demo-cards.html"><div class="source"><div class="md-card md-card-login md-theme-default md-card-hidden"><div class="md-card-header md-card-header-green"><h4 class="title">Log in</h4> <div class="social-line"><a href="/vue-material-kit/documentation/component-docs/cards.html#facebook" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-facebook-square"></i></div> </div></a> <a href="/vue-material-kit/documentation/component-docs/cards.html#twitter" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-twitter"></i></div> </div></a> <a href="/vue-material-kit/documentation/component-docs/cards.html#google" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-google-plus-g"></i></div> </div></a></div></div> <div class="md-card-content"><p class="description">Or Be Classical</p> <div class="md-field md-form-group md-theme-default"><i class="md-icon md-icon-font md-theme-default">face</i> <label>First Name...</label> <input type="text" id="md-input-l6bn8b23n" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-form-group md-theme-default"><i class="md-icon md-icon-font md-theme-default">email</i> <label>Email...</label> <input type="email" id="md-input-fixgjww7c" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-form-group md-theme-default"><i class="md-icon md-icon-font md-theme-default">lock_outline</i> <label>Password...</label> <input type="text" id="md-input-517dyoqzs" class="md-input"> <!----> <!----> <!----></div></div> <div class="md-card-actions md-alignment-right"><button type="button" class="md-button md-simple md-success md-lg md-theme-default"><div class="md-ripple"><div class="md-button-content">
|
||||
Lets Go
|
||||
</div> </div></button></div></div> <div><!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>login-card</span> <span class="token attr-name">header-color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -85,6 +85,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.df387569.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/9.4f40f4db.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.df387569.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/12.849d3916.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.df387569.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/12.892b076b.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.df387569.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="active sidebar-link">Dropdown</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="dropdown"><a href="#dropdown" aria-hidden="true" class="header-anchor">#</a> Dropdown</h1> <p>To use the custom dropdown you don't need to import the custom made component because it's global registered, so you can use it like this:</p> <h3 id="as-list-item"><a href="#as-list-item" aria-hidden="true" class="header-anchor">#</a> As List Item</h3> <div class="demo-block demo-box demo-component-docs demo-dropdown.html"><div class="source"><div class="md-list"><li class="md-list-item"><a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown"><div class="md-list-item-content"><div class="dropdown"><button type="button" data-toggle="dropdown" class="md-button md-button md-button-link md-simple dropdown-toggle md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="material-icons">apps</i> <p>Components</p></div> </div></button> <ul class="dropdown-menu dropdown-with-icons"><li><a href="javascript:void(0)"><i class="material-icons">layers</i> <p>All Components</p></a></li> <li><a href="javascript:void(0)"><i class="material-icons">content_paste</i> <p>Documentation</p></a></li></ul></div></div></a></li></div> <div><!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="active sidebar-link">Dropdown</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="dropdown"><a href="#dropdown" aria-hidden="true" class="header-anchor">#</a> Dropdown</h1> <p>To use the custom dropdown you don't need to import the custom made component because it's global registered, so you can use it like this:</p> <h3 id="as-list-item"><a href="#as-list-item" aria-hidden="true" class="header-anchor">#</a> As List Item</h3> <div class="demo-block demo-box demo-component-docs demo-dropdown.html"><div class="source"><div class="md-list"><li class="md-list-item"><a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown"><div class="md-list-item-content"><div class="dropdown"><button type="button" data-toggle="dropdown" class="md-button md-button md-button-link md-simple dropdown-toggle md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="material-icons">apps</i> <p>Components</p></div> </div></button> <ul class="dropdown-menu dropdown-with-icons"><li><a href="javascript:void(0)"><i class="material-icons">layers</i> <p>All Components</p></a></li> <li><a href="javascript:void(0)"><i class="material-icons">content_paste</i> <p>Documentation</p></a></li></ul></div></div></a></li></div> <div><!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-list-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:void(0)<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-list-item-router md-list-item-container md-button-clean dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -59,6 +59,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/12.849d3916.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.df387569.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/12.892b076b.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.df387569.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/13.78256c05.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="active sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="inputs"><a href="#inputs" aria-hidden="true" class="header-anchor">#</a> Inputs</h1> <p>To use the custom form group inputs you don't need to import the custom made component, you can use it like this:</p> <div class="demo-block demo-box demo-component-docs demo-inputs.html"><div class="source"><div class="md-field md-theme-default"><label>Initial Value</label> <input type="text" id="md-input-36kxv5xi" value="Initial Value" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-theme-default"><label>Type here!</label> <input type="text" id="md-input-czzbvf1x4" class="md-input"> <span class="md-helper-text">Helper text</span> <!----> <!----> <!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-field</span><span class="token punctuation">></span></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="active sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="inputs"><a href="#inputs" aria-hidden="true" class="header-anchor">#</a> Inputs</h1> <p>To use the custom form group inputs you don't need to import the custom made component, you can use it like this:</p> <div class="demo-block demo-box demo-component-docs demo-inputs.html"><div class="source"><div class="md-field md-theme-default"><label>Initial Value</label> <input type="text" id="md-input-zk1oxeu3l" value="Initial Value" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-theme-default"><label>Type here!</label> <input type="text" id="md-input-dussa9mx" class="md-input"> <span class="md-helper-text">Helper text</span> <!----> <!----> <!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-field</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Initial Value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>initial<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-field</span><span class="token punctuation">></span></span>
|
||||
@ -44,6 +44,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/13.78256c05.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/13.1a665fe0.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/14.1c386190.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="active sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="license"><a href="#license" aria-hidden="true" class="header-anchor">#</a> License</h1> <p>Currently, on <a href="https://www.creative-tim.com/" target="_blank" rel="noopener noreferrer">Creative Tim<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our <a href="https://www.creative-tim.com/license" target="_blank" rel="noopener noreferrer">Official License Page<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="active sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="license"><a href="#license" aria-hidden="true" class="header-anchor">#</a> License</h1> <p>Currently, on <a href="https://www.creative-tim.com/" target="_blank" rel="noopener noreferrer">Creative Tim<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our <a href="https://www.creative-tim.com/license" target="_blank" rel="noopener noreferrer">Official License Page<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/vue-material-kit/documentation/" class="prev router-link-active">
|
||||
Short Description and Usage
|
||||
@ -27,6 +27,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/14.1c386190.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/14.6b9b5731.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="active sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="material-icons"><a href="#material-icons" aria-hidden="true" class="header-anchor">#</a> Material Icons</h1> <p>Through most of the examples in this dashboard, we have used the default Icons for the Material Design provided by Google. You can easily use them like this:</p> <div class="demo-block demo-box demo-component-docs demo-material-icons.html"><div class="source"><i class="md-icon md-icon-font md-theme-default">favorite</i></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-icon</span><span class="token punctuation">></span></span>favorite<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-icon</span><span class="token punctuation">></span></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="active sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="material-icons"><a href="#material-icons" aria-hidden="true" class="header-anchor">#</a> Material Icons</h1> <p>Through most of the examples in this dashboard, we have used the default Icons for the Material Design provided by Google. You can easily use them like this:</p> <div class="demo-block demo-box demo-component-docs demo-material-icons.html"><div class="source"><i class="md-icon md-icon-font md-theme-default">favorite</i></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-icon</span><span class="token punctuation">></span></span>favorite<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-icon</span><span class="token punctuation">></span></span>
|
||||
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span class="showText" style="display:none;">Show</span></div></div> <blockquote><p>Note: for more details about the icons please see the <strong>Icon</strong> section from <a href="https://vuematerial.io/components/icon" target="_blank" rel="noopener noreferrer">vuematerial.io<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></blockquote></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/vue-material-kit/documentation/component-docs/badge.html" class="prev">
|
||||
@ -28,6 +28,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/15.1b04ba78.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/15.8577f30a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
68
documentation/component-docs/mobile-menu.html
Normal file
68
documentation/component-docs/mobile-menu.html
Normal file
File diff suppressed because one or more lines are too long
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="active sidebar-link">Modal</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/modal.html#clasic-modal" class="sidebar-link">Clasic Modal</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="modal"><a href="#modal" aria-hidden="true" class="header-anchor">#</a> Modal</h1> <p>If you want to display some content on demand in a very subtle way, the Vue Material Kit Modal is the perfect choice for this. We created custom modal component and you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="active sidebar-link">Modal</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/modal.html#clasic-modal" class="sidebar-link">Clasic Modal</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="modal"><a href="#modal" aria-hidden="true" class="header-anchor">#</a> Modal</h1> <p>If you want to display some content on demand in a very subtle way, the Vue Material Kit Modal is the perfect choice for this. We created custom modal component and you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
|
||||
</code></pre></div><h3 id="local-usage"><a href="#local-usage" aria-hidden="true" class="header-anchor">#</a> Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
Modal
|
||||
<span class="token punctuation">}</span>
|
||||
@ -53,6 +53,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/16.6dc2a907.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/17.10f485c6.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="active sidebar-link">Notifications</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="notifications"><a href="#notifications" aria-hidden="true" class="header-anchor">#</a> Notifications</h1> <p>We crafted a simple yet effective notifications alert.</p> <h3 id="trigger-notifications"><a href="#trigger-notifications" aria-hidden="true" class="header-anchor">#</a> Trigger Notifications</h3> <div class="demo-block demo-box demo-component-docs demo-notifications.html"><div class="source"><div class="wrapper"><div id="notifications"><div class="alert alert-info"><div class="container"><button type="button" aria-hidden="true" class="close"><i class="md-icon md-icon-font md-theme-default">clear</i></button> <div class="alert-icon"><i class="md-icon md-icon-font md-theme-default">info_outline</i></div> <b> INFO ALERT </b> : You've got some friends nearby, stop looking at your phone and find them...
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="active sidebar-link">Notifications</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="notifications"><a href="#notifications" aria-hidden="true" class="header-anchor">#</a> Notifications</h1> <p>We crafted a simple yet effective notifications alert.</p> <h3 id="trigger-notifications"><a href="#trigger-notifications" aria-hidden="true" class="header-anchor">#</a> Trigger Notifications</h3> <div class="demo-block demo-box demo-component-docs demo-notifications.html"><div class="source"><div class="wrapper"><div id="notifications"><div class="alert alert-info"><div class="container"><button type="button" aria-hidden="true" class="close"><i class="md-icon md-icon-font md-theme-default">clear</i></button> <div class="alert-icon"><i class="md-icon md-icon-font md-theme-default">info_outline</i></div> <b> INFO ALERT </b> : You've got some friends nearby, stop looking at your phone and find them...
|
||||
</div></div> <div class="alert alert-success"><div class="container"><button type="button" aria-hidden="true" class="close"><i class="md-icon md-icon-font md-theme-default">clear</i></button> <div class="alert-icon"><i class="md-icon md-icon-font md-theme-default">check</i></div> <b> SUCCESS ALERT </b> : Yuhuuu! You've got your $11.99 album from The Weeknd
|
||||
</div></div> <div class="alert alert-warning"><div class="container"><button type="button" aria-hidden="true" class="close"><i class="md-icon md-icon-font md-theme-default">clear</i></button> <div class="alert-icon"><i class="md-icon md-icon-font md-theme-default">warning</i></div> <b> WARNING ALERT </b> : Hey, it looks like you still have the "copyright © 2015" in your footer. Please update it!
|
||||
</div></div> <div class="alert alert-danger"><div class="container"><button type="button" aria-hidden="true" class="close"><i class="md-icon md-icon-font md-theme-default">clear</i></button> <div class="alert-icon"><i class="md-icon md-icon-font md-theme-default">info_outline</i></div> <b> ERROR ALERT </b> : Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
|
||||
@ -99,6 +99,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/17.6eb00717.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.df387569.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/19.64626947.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.df387569.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="active sidebar-link">Pagination</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#default-pagination" class="sidebar-link">Default Pagination</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#with-arrows-pagination" class="sidebar-link">With Arrows Pagination</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#colors-pagination" class="sidebar-link">Colors Pagination</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="pagination"><a href="#pagination" aria-hidden="true" class="header-anchor">#</a> Pagination</h1> <p>To use the custom pagination you need to import the custom made component, you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Pagination<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="active sidebar-link">Pagination</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#default-pagination" class="sidebar-link">Default Pagination</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#with-arrows-pagination" class="sidebar-link">With Arrows Pagination</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#colors-pagination" class="sidebar-link">Colors Pagination</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="pagination"><a href="#pagination" aria-hidden="true" class="header-anchor">#</a> Pagination</h1> <p>To use the custom pagination you need to import the custom made component, you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Pagination<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
|
||||
</code></pre></div><h3 id="local-usage"><a href="#local-usage" aria-hidden="true" class="header-anchor">#</a> Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
Pagination
|
||||
<span class="token punctuation">}</span>
|
||||
@ -112,6 +112,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.df387569.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/19.64626947.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.df387569.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="active sidebar-link">Switch</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/switch.html#simple-example" class="sidebar-link">Simple Example</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="switch"><a href="#switch" aria-hidden="true" class="header-anchor">#</a> Switch</h1> <p>To use the custom switch you don't need to import component, you can easily use it like this:</p> <h2 id="simple-example"><a href="#simple-example" aria-hidden="true" class="header-anchor">#</a> Simple Example</h2> <div class="demo-block demo-box demo-component-docs demo-switch.html"><div class="source"><div class="md-switch md-theme-default md-checked"><div class="md-switch-container"><div class="md-switch-thumb"><div class="md-ripple"><input id="md-switch-kotum3kdi" type="checkbox"> </div></div></div> <label for="md-switch-kotum3kdi" class="md-switch-label">Toogle is on</label></div> <div class="md-switch md-theme-default"><div class="md-switch-container"><div class="md-switch-thumb"><div class="md-ripple"><input id="md-switch-u294fc4m9" type="checkbox"> </div></div></div> <label for="md-switch-u294fc4m9" class="md-switch-label">Toogle is off</label></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="active sidebar-link">Switch</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/switch.html#simple-example" class="sidebar-link">Simple Example</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="switch"><a href="#switch" aria-hidden="true" class="header-anchor">#</a> Switch</h1> <p>To use the custom switch you don't need to import component, you can easily use it like this:</p> <h2 id="simple-example"><a href="#simple-example" aria-hidden="true" class="header-anchor">#</a> Simple Example</h2> <div class="demo-block demo-box demo-component-docs demo-switch.html"><div class="source"><div class="md-switch md-theme-default md-checked"><div class="md-switch-container"><div class="md-switch-thumb"><div class="md-ripple"><input id="md-switch-fp70bing" type="checkbox"> </div></div></div> <label for="md-switch-fp70bing" class="md-switch-label">Toogle is on</label></div> <div class="md-switch md-theme-default"><div class="md-switch-container"><div class="md-switch-thumb"><div class="md-ripple"><input id="md-switch-vycel5mn" type="checkbox"> </div></div></div> <label for="md-switch-vycel5mn" class="md-switch-label">Toogle is off</label></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>switch1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toogle is on<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-switch</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>switch2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toogle is off<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-switch</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -44,6 +44,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/20.8790f9a9.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="active sidebar-link">Tabs</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/tabs.html#nav-tabs-card" class="sidebar-link">Nav Tabs Card</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="tabs"><a href="#tabs" aria-hidden="true" class="header-anchor">#</a> Tabs</h1> <p>If you have information that you don't need to show at once, we suggest you use tabs. We carefully re-styled the custom tabs component from vuematerial.io which you can easily use.</p> <p>In order to use the tabs, import the necessary components:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>NavTabsCard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'src/components'</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="active sidebar-link">Tabs</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/tabs.html#nav-tabs-card" class="sidebar-link">Nav Tabs Card</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="tabs"><a href="#tabs" aria-hidden="true" class="header-anchor">#</a> Tabs</h1> <p>If you have information that you don't need to show at once, we suggest you use tabs. We carefully re-styled the custom tabs component from vuematerial.io which you can easily use.</p> <p>In order to use the tabs, import the necessary components:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>NavTabsCard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'src/components'</span>
|
||||
</code></pre></div><h3 id="global-usage"><a href="#global-usage" aria-hidden="true" class="header-anchor">#</a> Global Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>NavTabsCard<span class="token punctuation">)</span>
|
||||
</code></pre></div><h3 id="for-local-usage"><a href="#for-local-usage" aria-hidden="true" class="header-anchor">#</a> For Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -89,6 +89,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/21.c3e74589.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/22.64c056e7.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/22.39971291.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="active sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="textarea"><a href="#textarea" aria-hidden="true" class="header-anchor">#</a> Textarea</h1> <p>To use the custom form group inputs you don't need to import the custom made component, you can use it like this:</p> <div class="demo-block demo-box demo-component-docs demo-textarea.html"><div class="source"><div class="md-field md-theme-default"><label>About Me</label> <textarea id="md-textarea-3cw6vh23y" class="md-textarea" style="height:false;">null</textarea> <!----> <!----> <!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-field</span><span class="token punctuation">></span></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="active sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="textarea"><a href="#textarea" aria-hidden="true" class="header-anchor">#</a> Textarea</h1> <p>To use the custom form group inputs you don't need to import the custom made component, you can use it like this:</p> <div class="demo-block demo-box demo-component-docs demo-textarea.html"><div class="source"><div class="md-field md-theme-default"><label>About Me</label> <textarea id="md-textarea-8wk554nndu" class="md-textarea" style="height:false;">null</textarea> <!----> <!----> <!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-field</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>About Me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-textarea</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aboutme<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-textarea</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-field</span><span class="token punctuation">></span></span>
|
||||
@ -38,6 +38,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/22.39971291.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -10,15 +10,15 @@
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/vue-material-kit/documentation/favicon.png">
|
||||
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/24.8764158e.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.8c7941c7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.68a502ac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.918d1f56.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.6dc2a907.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.1688c564.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.21344004.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.9167033d.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/25.cf31fcea.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.892b076b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.dd46bb2d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.df387569.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.5bd054fd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.0e5453ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.2920afca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.ee2fbf33.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.4f40f4db.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.3acee8ab.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.77099a49.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1a665fe0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.6b9b5731.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.8577f30a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.70882196.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.10f485c6.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.bb39e9ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.64626947.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3c0d97ca.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.f5b2d7f8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.64c056e7.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.b2f01aa3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.6b26a095.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.5eb63527.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
GitHub
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="active sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="tooltips"><a href="#tooltips" aria-hidden="true" class="header-anchor">#</a> Tooltips</h1> <p>We used, Tooltip from vuematerial.io and customized the look of it. It's a really handy component and can be integrated very easily.</p> <div class="demo-block demo-box demo-component-docs demo-tooltips.html"><div class="source"><button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="active sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html" class="sidebar-link">Mobile Menu</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="tooltips"><a href="#tooltips" aria-hidden="true" class="header-anchor">#</a> Tooltips</h1> <p>We used, Tooltip from vuematerial.io and customized the look of it. It's a really handy component and can be integrated very easily.</p> <div class="demo-block demo-box demo-component-docs demo-tooltips.html"><div class="source"><button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content">
|
||||
Tooltip on top
|
||||
<!----></div> </div></button> <button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content">
|
||||
Tooltip on bottom
|
||||
@ -46,11 +46,11 @@
|
||||
←
|
||||
<a href="/vue-material-kit/documentation/component-docs/pagination.html" class="prev">
|
||||
Pagination
|
||||
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/badge.html">
|
||||
Badge
|
||||
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/mobile-menu.html">
|
||||
Mobile Menu
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/24.8764158e.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5bb58c58.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/25.cf31fcea.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.9167033d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 827 KiB |
BIN
img/leaf1.2a5da8d8.png
Normal file
BIN
img/leaf1.2a5da8d8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
img/leaf2.3b1af9de.png
Normal file
BIN
img/leaf2.3b1af9de.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
img/leaf3.2c91d484.png
Normal file
BIN
img/leaf3.2c91d484.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
img/leaf4.676d9333.png
Normal file
BIN
img/leaf4.676d9333.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
img/vue-mk-header.98fb6ce8.jpg
Normal file
BIN
img/vue-mk-header.98fb6ce8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-material-kit/favicon.png><title>Vue Material Kit by Creative Tim</title><link rel=stylesheet type=text/css href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"><link rel=stylesheet href="//fonts.googleapis.com/icon?family=Material+Icons"><link href=https://use.fontawesome.com/releases/v5.0.8/css/all.css rel=stylesheet><link href=/vue-material-kit/css/app.088f762f.css rel=preload as=style><link href=/vue-material-kit/css/chunk-vendors.590efd76.css rel=preload as=style><link href=/vue-material-kit/js/app.99c2346f.js rel=preload as=script><link href=/vue-material-kit/js/chunk-vendors.4245ea39.js rel=preload as=script><link href=/vue-material-kit/css/chunk-vendors.590efd76.css rel=stylesheet><link href=/vue-material-kit/css/app.088f762f.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-material-kit doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-material-kit/js/chunk-vendors.4245ea39.js></script><script src=/vue-material-kit/js/app.99c2346f.js></script></body></html>
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-material-kit/favicon.png><title>Vue Material Kit by Creative Tim</title><link rel=canonical href=https://www.creative-tim.com/product/vue-material-dashboard-pro><meta name=keywords content="vue material dashboard pro, material vue admin, material vue dashboard pro, material design admin, material design, creative tim, vue dashboard pro, vue css dashboard pro, web dashboard pro, dashboard pro, css3 dashboard pro, vue admin, vue dashboard pro, frontend, responsive vue dashboard pro"><meta name=description content="Vue Material Dashboard PRO is a beautiful resource built over Vue Material and Vuejs. It will help you get started developing dashboards in no time. Vue Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard PRO."><meta itemprop=name content="Vue Material Dashboard Pro by Creative Tim"><meta itemprop=description content="Vue Material Dashboard PRO is a beautiful resource built over Vue Material and Vuejs. It will help you get started developing dashboards in no time. Vue Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard PRO."><meta itemprop=image content=https://s3.amazonaws.com/creativetim_bucket/products/87/original/opt_mdp_vue_thumbnail.jpg><meta name=twitter:card content=product><meta name=twitter:site content=@creativetim><meta name=twitter:title content="Vue Material Dashboard Pro by Creative Tim"><meta name=twitter:description content="Vue Material Dashboard PRO is a beautiful resource built over Vue Material and Vuejs. It will help you get started developing dashboards in no time. Vue Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard PRO."><meta name=twitter:creator content=@creativetim><meta name=twitter:image content=https://s3.amazonaws.com/creativetim_bucket/products/87/original/opt_mdp_vue_thumbnail.jpg><meta name=twitter:data1 content="Vue Material Dashboard Pro by Creative Tim"><meta name=twitter:label1 content="Product Type"><meta name=twitter:label2 content=Price><meta property=fb:app_id content=655968634437471><meta property=og:title content="Vue Material Dashboard Pro by Creative Tim"><meta property=og:type content=article><meta property=og:url content=https://demos.creative-tim.com/vue-material-dashboard-pro><meta property=og:image content=https://s3.amazonaws.com/creativetim_bucket/products/87/original/opt_mdp_vue_thumbnail.jpg><meta property=og:description content="Vue Material Dashboard PRO is a beautiful resource built over Vue Material and Vuejs. It will help you get started developing dashboards in no time. Vue Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard PRO."><meta property=og:site_name content="Creative Tim"><link rel=stylesheet type=text/css href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"><link rel=stylesheet href="//fonts.googleapis.com/icon?family=Material+Icons"><link href=https://use.fontawesome.com/releases/v5.0.8/css/all.css rel=stylesheet><link href=/vue-material-kit/css/app.036a16e6.css rel=preload as=style><link href=/vue-material-kit/css/chunk-vendors.590efd76.css rel=preload as=style><link href=/vue-material-kit/js/app.b5cbe09b.js rel=preload as=script><link href=/vue-material-kit/js/chunk-vendors.4245ea39.js rel=preload as=script><link href=/vue-material-kit/css/chunk-vendors.590efd76.css rel=stylesheet><link href=/vue-material-kit/css/app.036a16e6.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-material-kit doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-material-kit/js/chunk-vendors.4245ea39.js></script><script src=/vue-material-kit/js/app.b5cbe09b.js></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
js/app.b5cbe09b.js
Normal file
2
js/app.b5cbe09b.js
Normal file
File diff suppressed because one or more lines are too long
1
js/app.b5cbe09b.js.map
Normal file
1
js/app.b5cbe09b.js.map
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user