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
507fb4511a
commit
e180f365ae
File diff suppressed because one or more lines are too long
16
css/app.52795ad3.css
Normal file
16
css/app.52795ad3.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
22
css/chunk-vendors.80a9e6ca.css
Normal file
22
css/chunk-vendors.80a9e6ca.css
Normal file
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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.49ddd20a.js" defer></script>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>How did we get 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.d299cf35.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
21
documentation/assets/css/0.styles.4a0e108c.css
Normal file
21
documentation/assets/css/0.styles.4a0e108c.css
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
1
documentation/assets/js/10.d1d00300.js
Normal file
1
documentation/assets/js/10.d1d00300.js
Normal file
File diff suppressed because one or more lines are too long
1
documentation/assets/js/11.55e9cebd.js
Normal file
1
documentation/assets/js/11.55e9cebd.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
1
documentation/assets/js/12.21eb5fac.js
Normal file
1
documentation/assets/js/12.21eb5fac.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
@ -1 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{175:function(t,n,e){},196:function(t,n,e){"use strict";var a=e(175);e.n(a).a},234:function(t,n,e){"use strict";e.r(n);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,n){var e=n.props,a=n.slots;return t("span",{class:["badge",e.type,e.vertical]},e.text||a().default)}},r=(e(196),e(0)),i=Object(r.a)(a,void 0,void 0,!1,null,"099ab69c",null);n.default=i.exports}}]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{175:function(t,n,e){},196:function(t,n,e){"use strict";var a=e(175);e.n(a).a},224:function(t,n,e){"use strict";e.r(n);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,n){var e=n.props,a=n.slots;return t("span",{class:["badge",e.type,e.vertical]},e.text||a().default)}},r=(e(196),e(0)),i=Object(r.a)(a,void 0,void 0,!1,null,"099ab69c",null);n.default=i.exports}}]);
|
||||
@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{233: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);t.default=i.exports}}]);
|
||||
1
documentation/assets/js/14.9f5fd545.js
Normal file
1
documentation/assets/js/14.9f5fd545.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{225:function(e,t,r){"use strict";r.r(t);var n=r(0),s=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"}},[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"}},[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"}},[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"}},[this._v("#")]),this._v(" Element-UI")])}],!1,null,null,null);t.default=s.exports}}]);
|
||||
1
documentation/assets/js/15.2c8c3d74.js
Normal file
1
documentation/assets/js/15.2c8c3d74.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
1
documentation/assets/js/16.1706c11f.js
Normal file
1
documentation/assets/js/16.1706c11f.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{227:function(s,t,e){"use strict";e.r(t);var r=e(0),a=Object(r.a)({},(function(){var s=this.$createElement;this._self._c;return this._m(0)}),[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"brand-colors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#brand-colors"}},[s._v("#")]),s._v(" Brand Colors")]),s._v(" "),e("ol",[e("li",[e("p",[s._v("You can find the colors in "),e("code",[s._v("assets/scss/material-kit/_variables.scss")]),s._v(" starting with line 28 where is the primary color set: "),e("code",[s._v("$brand-primary: $purple !default;")]),s._v(".")])]),s._v(" "),e("li",[e("p",[s._v("All the possible colors are in "),e("code",[s._v("assets/scss/material-kit/_colors.scss")]),s._v(".")])])])])}],!1,null,null,null);t.default=a.exports}}]);
|
||||
@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{224: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);e.default=a.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
1
documentation/assets/js/17.f2b138ba.js
Normal file
1
documentation/assets/js/17.f2b138ba.js
Normal file
File diff suppressed because one or more lines are too long
1
documentation/assets/js/18.440dad98.js
Normal file
1
documentation/assets/js/18.440dad98.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
1
documentation/assets/js/19.908006a9.js
Normal file
1
documentation/assets/js/19.908006a9.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{230:function(e,t,s){"use strict";s.r(t);var i=s(0),n=Object(i.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"}},[this._v("#")]),this._v(" License")])}],!1,null,null,null);t.default=n.exports}}]);
|
||||
@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{230:function(e,t,i){"use strict";i.r(t);var s=i(0),r=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);t.default=r.exports}}]);
|
||||
1
documentation/assets/js/2.02c6569f.js
Normal file
1
documentation/assets/js/2.02c6569f.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{197:function(t,n,e){"use strict";var r=e(8),a=e(198)(5),i=!0;"find"in[]&&Array(1).find((function(){i=!1})),r(r.P+r.F*i,"Array",{find:function(t){return a(this,t,arguments.length>1?arguments[1]:void 0)}}),e(72)("find")},198:function(t,n,e){var r=e(15),a=e(71),i=e(25),o=e(19),s=e(199);t.exports=function(t,n){var e=1==t,u=2==t,c=3==t,f=4==t,p=6==t,d=5==t||p,v=n||s;return function(n,s,h){for(var l,_,y=i(n),m=a(y),b=r(s,h,3),w=o(m.length),A=0,D=e?v(n,w):u?v(n,0):void 0;w>A;A++)if((d||A in m)&&(_=b(l=m[A],A,y),t))if(e)D[A]=_;else if(_)switch(t){case 3:return!0;case 5:return l;case 6:return A;case 2:D.push(l)}else if(f)return!1;return p?-1:c||f?f:D}}},199:function(t,n,e){var r=e(200);t.exports=function(t,n){return new(r(t))(n)}},200:function(t,n,e){var r=e(4),a=e(201),i=e(2)("species");t.exports=function(t){var n;return a(t)&&("function"!=typeof(n=t.constructor)||n!==Array&&!a(n.prototype)||(n=void 0),r(n)&&null===(n=n[i])&&(n=void 0)),void 0===n?Array:n}},201:function(t,n,e){var r=e(16);t.exports=Array.isArray||function(t){return"Array"==r(t)}},223:function(t,n,e){"use strict";e.r(n);e(197),e(21);var r=e(90),a=(e(11),e(17),e(20),{name:"props-table",props:{componentName:{type:String,default:""}},data:function(){return{parsedData:{}}},computed:{hasProps:function(){return this.parsedData.props&&Object.keys(this.parsedData.props).length>0}},methods:{getType:function(t){var n=t.type?t.type:t;return"object"===Object(r.a)(n)?n.map((function(t){return t.name})).join(" | "):n.name||"N/A"},getDefault:function(t){return t.default?"function"==typeof t.default?t.default():t.default:"N/A"}},mounted:function(){var t=this;try{var n=this.$docs.find((function(n){return n.name===t.componentName}))||{};n&&(this.parsedData=n||{})}catch(t){console.warn(t)}}}),i=e(0),o=Object(i.a)(a,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[t.hasProps?e("table",[t._m(0),t._v(" "),e("tbody",t._l(t.parsedData.props,(function(n,r){return e("tr",{key:r},[r?e("td",[t._v("\n "+t._s(r)+"\n ")]):t._e(),t._v(" "),e("td",[t._v("\n "+t._s(t.getType(n))+"\n ")]),t._v(" "),e("td",[t._v("\n "+t._s(t.getDefault(n))+"\n ")]),t._v(" "),e("td",[t._v("\n "+t._s(n.description)+"\n ")])])})),0)]):t._e()])}),[function(){var t=this.$createElement,n=this._self._c||t;return n("thead",[n("tr",[n("th",[this._v("Prop Name")]),this._v(" "),n("th",[this._v("Type")]),this._v(" "),n("th",[this._v("Default")]),this._v(" "),n("th",[this._v("Description")])])])}],!1,null,null,null);n.default=o.exports}}]);
|
||||
@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{197:function(t,n,e){"use strict";var r=e(7),a=e(198)(5),i=!0;"find"in[]&&Array(1).find(function(){i=!1}),r(r.P+r.F*i,"Array",{find:function(t){return a(this,t,arguments.length>1?arguments[1]:void 0)}}),e(72)("find")},198:function(t,n,e){var r=e(15),a=e(71),i=e(25),o=e(19),s=e(199);t.exports=function(t,n){var e=1==t,u=2==t,c=3==t,f=4==t,p=6==t,d=5==t||p,v=n||s;return function(n,s,h){for(var l,_,y=i(n),m=a(y),b=r(s,h,3),w=o(m.length),A=0,D=e?v(n,w):u?v(n,0):void 0;w>A;A++)if((d||A in m)&&(_=b(l=m[A],A,y),t))if(e)D[A]=_;else if(_)switch(t){case 3:return!0;case 5:return l;case 6:return A;case 2:D.push(l)}else if(f)return!1;return p?-1:c||f?f:D}}},199:function(t,n,e){var r=e(200);t.exports=function(t,n){return new(r(t))(n)}},200:function(t,n,e){var r=e(4),a=e(201),i=e(2)("species");t.exports=function(t){var n;return a(t)&&("function"!=typeof(n=t.constructor)||n!==Array&&!a(n.prototype)||(n=void 0),r(n)&&null===(n=n[i])&&(n=void 0)),void 0===n?Array:n}},201:function(t,n,e){var r=e(16);t.exports=Array.isArray||function(t){return"Array"==r(t)}},223:function(t,n,e){"use strict";e.r(n);e(197),e(21);var r=e(90),a=(e(11),e(17),e(20),{name:"props-table",props:{componentName:{type:String,default:""}},data:function(){return{parsedData:{}}},computed:{hasProps:function(){return this.parsedData.props&&Object.keys(this.parsedData.props).length>0}},methods:{getType:function(t){var n=t.type?t.type:t;return"object"===Object(r.a)(n)?n.map(function(t){return t.name}).join(" | "):n.name||"N/A"},getDefault:function(t){return t.default?"function"==typeof t.default?t.default():t.default:"N/A"}},mounted:function(){var t=this;try{var n=this.$docs.find(function(n){return n.name===t.componentName})||{};n&&(this.parsedData=n||{})}catch(t){console.warn(t)}}}),i=e(0),o=Object(i.a)(a,function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[t.hasProps?e("table",[t._m(0),t._v(" "),e("tbody",t._l(t.parsedData.props,function(n,r){return e("tr",{key:r},[r?e("td",[t._v("\n "+t._s(r)+"\n ")]):t._e(),t._v(" "),e("td",[t._v("\n "+t._s(t.getType(n))+"\n ")]),t._v(" "),e("td",[t._v("\n "+t._s(t.getDefault(n))+"\n ")]),t._v(" "),e("td",[t._v("\n "+t._s(n.description)+"\n ")])])}),0)]):t._e()])},[function(){var t=this.$createElement,n=this._self._c||t;return n("thead",[n("tr",[n("th",[this._v("Prop Name")]),this._v(" "),n("th",[this._v("Type")]),this._v(" "),n("th",[this._v("Default")]),this._v(" "),n("th",[this._v("Description")])])])}],!1,null,null,null);n.default=o.exports}}]);
|
||||
1
documentation/assets/js/2.d1446818.js
Normal file
1
documentation/assets/js/2.d1446818.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{197:function(t,n,e){"use strict";var r=e(8),a=e(198)(5),i=!0;"find"in[]&&Array(1).find((function(){i=!1})),r(r.P+r.F*i,"Array",{find:function(t){return a(this,t,arguments.length>1?arguments[1]:void 0)}}),e(72)("find")},198:function(t,n,e){var r=e(15),a=e(71),i=e(25),o=e(19),s=e(199);t.exports=function(t,n){var e=1==t,u=2==t,c=3==t,f=4==t,p=6==t,d=5==t||p,v=n||s;return function(n,s,h){for(var l,_,y=i(n),m=a(y),b=r(s,h,3),w=o(m.length),A=0,D=e?v(n,w):u?v(n,0):void 0;w>A;A++)if((d||A in m)&&(_=b(l=m[A],A,y),t))if(e)D[A]=_;else if(_)switch(t){case 3:return!0;case 5:return l;case 6:return A;case 2:D.push(l)}else if(f)return!1;return p?-1:c||f?f:D}}},199:function(t,n,e){var r=e(200);t.exports=function(t,n){return new(r(t))(n)}},200:function(t,n,e){var r=e(4),a=e(201),i=e(2)("species");t.exports=function(t){var n;return a(t)&&("function"!=typeof(n=t.constructor)||n!==Array&&!a(n.prototype)||(n=void 0),r(n)&&null===(n=n[i])&&(n=void 0)),void 0===n?Array:n}},201:function(t,n,e){var r=e(16);t.exports=Array.isArray||function(t){return"Array"==r(t)}},223:function(t,n,e){"use strict";e.r(n);e(197),e(21);var r=e(89),a=(e(11),e(17),e(20),{name:"props-table",props:{componentName:{type:String,default:""}},data:function(){return{parsedData:{}}},computed:{hasProps:function(){return this.parsedData.props&&Object.keys(this.parsedData.props).length>0}},methods:{getType:function(t){var n=t.type?t.type:t;return"object"===Object(r.a)(n)?n.map((function(t){return t.name})).join(" | "):n.name||"N/A"},getDefault:function(t){return t.default?"function"==typeof t.default?t.default():t.default:"N/A"}},mounted:function(){var t=this;try{var n=this.$docs.find((function(n){return n.name===t.componentName}))||{};n&&(this.parsedData=n||{})}catch(t){console.warn(t)}}}),i=e(0),o=Object(i.a)(a,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[t.hasProps?e("table",[t._m(0),t._v(" "),e("tbody",t._l(t.parsedData.props,(function(n,r){return e("tr",{key:r},[r?e("td",[t._v("\n "+t._s(r)+"\n ")]):t._e(),t._v(" "),e("td",[t._v("\n "+t._s(t.getType(n))+"\n ")]),t._v(" "),e("td",[t._v("\n "+t._s(t.getDefault(n))+"\n ")]),t._v(" "),e("td",[t._v("\n "+t._s(n.description)+"\n ")])])})),0)]):t._e()])}),[function(){var t=this.$createElement,n=this._self._c||t;return n("thead",[n("tr",[n("th",[this._v("Prop Name")]),this._v(" "),n("th",[this._v("Type")]),this._v(" "),n("th",[this._v("Default")]),this._v(" "),n("th",[this._v("Description")])])])}],!1,null,null,null);n.default=o.exports}}]);
|
||||
@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{229: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",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("md-icon")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("md-icon")]),a("span",{pre:!0,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);s.default=n.exports}}]);
|
||||
1
documentation/assets/js/20.d21ce81f.js
Normal file
1
documentation/assets/js/20.d21ce81f.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{231: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",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("md-icon")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("md-icon")]),a("span",{pre:!0,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"}},[this._v("#")]),this._v(" Material Icons")])}],!1,null,null,null);s.default=n.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
1
documentation/assets/js/21.a20d3108.js
Normal file
1
documentation/assets/js/21.a20d3108.js
Normal file
File diff suppressed because one or more lines are too long
1
documentation/assets/js/22.28564edf.js
Normal file
1
documentation/assets/js/22.28564edf.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
1
documentation/assets/js/24.428f188a.js
Normal file
1
documentation/assets/js/24.428f188a.js
Normal file
File diff suppressed because one or more lines are too long
1
documentation/assets/js/3.2af625af.js
Normal file
1
documentation/assets/js/3.2af625af.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
1
documentation/assets/js/4.661d45b8.js
Normal file
1
documentation/assets/js/4.661d45b8.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
1
documentation/assets/js/5.d202a7af.js
Normal file
1
documentation/assets/js/5.d202a7af.js
Normal file
File diff suppressed because one or more lines are too long
1
documentation/assets/js/6.7cba7bd9.js
Normal file
1
documentation/assets/js/6.7cba7bd9.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
1
documentation/assets/js/7.a1e2b42c.js
Normal file
1
documentation/assets/js/7.a1e2b42c.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
1
documentation/assets/js/8.8d33c864.js
Normal file
1
documentation/assets/js/8.8d33c864.js
Normal file
File diff suppressed because one or more lines are too long
1
documentation/assets/js/9.1ffda26a.js
Normal file
1
documentation/assets/js/9.1ffda26a.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
40
documentation/assets/js/app.25e307d7.js
Normal file
40
documentation/assets/js/app.25e307d7.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
40
documentation/assets/js/app.d299cf35.js
Normal file
40
documentation/assets/js/app.d299cf35.js
Normal file
File diff suppressed because one or more lines are too long
@ -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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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>
|
||||
<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" 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" 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>
|
||||
</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>Badge<span class="token punctuation">)</span>
|
||||
</code></pre></div><h2 id="badges-color"><a href="#badges-color" aria-hidden="true" class="header-anchor">#</a> Badges Color</h2> <p>We made our own badge component for a better visual experience.</p> <div class="demo-block demo-box demo-component-docs demo-badge.html"><div class="source"><span class="badge badge-success">Another Title</span> <span class="badge badge-danger">Another Title</span> <span class="badge badge-warning">Another Title</span> <span class="badge badge-rose">Another Title</span> <span class="badge badge-info">Another Title</span> <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>
|
||||
</code></pre></div><h3 id="global-usage"><a href="#global-usage" 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>Badge<span class="token punctuation">)</span>
|
||||
</code></pre></div><h2 id="badges-color"><a href="#badges-color" class="header-anchor">#</a> Badges Color</h2> <p>We made our own badge component for a better visual experience.</p> <div class="demo-block demo-box demo-component-docs demo-badge.html"><div class="source"><span class="badge badge-success">Another Title</span> <span class="badge badge-danger">Another Title</span> <span class="badge badge-warning">Another Title</span> <span class="badge badge-rose">Another Title</span> <span class="badge badge-info">Another Title</span> <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>badge</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Another Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>badge</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Another Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>badge</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Another Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>badge</span><span class="token punctuation">></span></span>
|
||||
@ -43,6 +43,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/15.b9dc0216.js" defer></script><script src="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js" defer></script><script src="/vue-material-kit/documentation/assets/js/2.02c6569f.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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">
|
||||
<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" 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/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/16.4fc0da55.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/16.1706c11f.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,18 +10,18 @@
|
||||
<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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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>
|
||||
<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" 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>
|
||||
</code></pre></div><h2 id="colors"><a href="#colors" 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>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
@ -29,15 +29,15 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-rose<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Rose<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-simple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Simple<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></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span class="showText" style="display:none;">Show</span></div></div> <h2 id="style-buttons"><a href="#style-buttons" aria-hidden="true" class="header-anchor">#</a> Style Buttons</h2> <div class="demo-block demo-box demo-component-docs demo-buttons.html"><div class="source"><button type="button" class="md-button md-primary 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-round md-theme-default"><div class="md-ripple"><div class="md-button-content">Round</div> </div></button> <button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="md-icon md-icon-font md-theme-default">favorite</i> With Icon</div> </div></button> <button type="button" class="md-button md-primary md-just-icon md-round md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="md-icon md-icon-font md-theme-default">favorite</i></div> </div></button> <button type="button" class="md-button md-primary 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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary<span class="token punctuation">"</span></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>
|
||||
</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> <h2 id="style-buttons"><a href="#style-buttons" class="header-anchor">#</a> Style Buttons</h2> <div class="demo-block demo-box demo-component-docs demo-buttons.html"><div class="source"><button type="button" class="md-button md-primary 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-round md-theme-default"><div class="md-ripple"><div class="md-button-content">Round</div> </div></button> <button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="md-icon md-icon-font md-theme-default">favorite</i> With Icon</div> </div></button> <button type="button" class="md-button md-primary md-just-icon md-round md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="md-icon md-icon-font md-theme-default">favorite</i></div> </div></button> <button type="button" class="md-button md-primary 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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary<span class="token punctuation">"</span></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>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-round<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Round<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary<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-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> With Icon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-just-icon md-round<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-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><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-simple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Simple<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></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span class="showText" style="display:none;">Show</span></div></div> <h2 id="sizes"><a href="#sizes" aria-hidden="true" class="header-anchor">#</a> Sizes</h2> <p>Fancy larger or smaller buttons? Add the classes <code>md-lg</code> or <code>md-sm</code> for additional sizes.</p> <div class="demo-block demo-box demo-component-docs demo-buttons.html"><div class="source"><button type="button" class="md-button md-primary md-lg md-theme-default"><div class="md-ripple"><div class="md-button-content">Large</div> </div></button> <button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content">Normal</div> </div></button> <button type="button" class="md-button md-primary md-sm md-theme-default"><div class="md-ripple"><div class="md-button-content">Small</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<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></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span class="showText" style="display:none;">Show</span></div></div> <h2 id="sizes"><a href="#sizes" class="header-anchor">#</a> Sizes</h2> <p>Fancy larger or smaller buttons? Add the classes <code>md-lg</code> or <code>md-sm</code> for additional sizes.</p> <div class="demo-block demo-box demo-component-docs demo-buttons.html"><div class="source"><button type="button" class="md-button md-primary md-lg md-theme-default"><div class="md-ripple"><div class="md-button-content">Large</div> </div></button> <button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content">Normal</div> </div></button> <button type="button" class="md-button md-primary md-sm md-theme-default"><div class="md-ripple"><div class="md-button-content">Small</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Normal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<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></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span class="showText" style="display:none;">Show</span></div></div> <h2 id="extra-mile"><a href="#extra-mile" aria-hidden="true" class="header-anchor">#</a> Extra Mile</h2> <p>We added extra classes that can help you better customise the look. Please see the examples:</p> <div class="demo-block demo-box demo-component-docs demo-buttons.html"><div class="source"><button type="button" class="md-button md-primary md-block md-theme-default"><div class="md-ripple"><div class="md-button-content">md-block</div> </div></button> <button type="button" class="md-button md-primary md-wd md-theme-default"><div class="md-ripple"><div class="md-button-content">md-wd</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>md-block<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></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span class="showText" style="display:none;">Show</span></div></div> <h2 id="extra-mile"><a href="#extra-mile" class="header-anchor">#</a> Extra Mile</h2> <p>We added extra classes that can help you better customise the look. Please see the examples:</p> <div class="demo-block demo-box demo-component-docs demo-buttons.html"><div class="source"><button type="button" class="md-button md-primary md-block md-theme-default"><div class="md-ripple"><div class="md-button-content">md-block</div> </div></button> <button type="button" class="md-button md-primary md-wd md-theme-default"><div class="md-ripple"><div class="md-button-content">md-wd</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>md-block<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-wd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>md-wd<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></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 buttons props and attributes please see the <strong>Button</strong> section from <a href="https://vuematerial.io/components/button" 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">
|
||||
←
|
||||
@ -48,6 +48,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/17.3a3fd187.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/17.f2b138ba.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/3.2af625af.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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>
|
||||
<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" 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" 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="#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="#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="#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-t7jc5xudm" 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-qq9db249" 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-af6qfzelc" 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><h3 id="global-usage"><a href="#global-usage" 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" 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="#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="#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="#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-1dyqflky" 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-xoxkekgs" 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-45hmcde9n" 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>
|
||||
@ -62,7 +62,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</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 punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
@ -72,11 +72,11 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>props-table</span> <span class="token attr-name">component-name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>login-card<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>props-table</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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> <h3 id="logincard-slots"><a href="#logincard-slots" aria-hidden="true" class="header-anchor">#</a> LoginCard Slots</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>title</td> <td>Default card title</td></tr> <tr><td>description</td> <td>Default card description</td></tr> <tr><td>buttons</td> <td>card buttons</td></tr> <tr><td>footer</td> <td>Content for card footer</td></tr></tbody></table></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
</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> <h3 id="logincard-slots"><a href="#logincard-slots" class="header-anchor">#</a> LoginCard Slots</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>title</td> <td>Default card title</td></tr> <tr><td>description</td> <td>Default card description</td></tr> <tr><td>buttons</td> <td>card buttons</td></tr> <tr><td>footer</td> <td>Content for card footer</td></tr></tbody></table></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/vue-material-kit/documentation/component-docs/buttons.html" class="prev">
|
||||
Buttons
|
||||
@ -85,6 +85,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/3.ac1252e1.js" defer></script><script src="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/3.2af625af.js" defer></script><script src="/vue-material-kit/documentation/assets/js/2.02c6569f.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/18.440dad98.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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>
|
||||
<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" 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" 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>
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>props-table</span> <span class="token attr-name">component-name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>drop-down<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>props-table</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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: Drop-down uses a click outside directive internally. You will get a warning if the directive is not imported. You can find the declaration of this directive in <strong>src/globalDirectives.js</strong></p></blockquote> <h3 id="dropdown-slots"><a href="#dropdown-slots" aria-hidden="true" class="header-anchor">#</a> Dropdown Slots</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>title</td> <td>Content for dropdown title</td></tr></tbody></table></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
</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: Drop-down uses a click outside directive internally. You will get a warning if the directive is not imported. You can find the declaration of this directive in <strong>src/globalDirectives.js</strong></p></blockquote> <h3 id="dropdown-slots"><a href="#dropdown-slots" class="header-anchor">#</a> Dropdown Slots</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>title</td> <td>Content for dropdown title</td></tr></tbody></table></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/vue-material-kit/documentation/component-docs/radios.html" class="prev">
|
||||
Radios
|
||||
@ -59,6 +59,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/18.90ec3f96.js" defer></script><script src="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/18.440dad98.js" defer></script><script src="/vue-material-kit/documentation/assets/js/2.02c6569f.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/inputs.html#colors" class="sidebar-link">Colors</a></li></ul></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-77q6h0i6m" value="Initial Value" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-theme-default"><label>Type here!</label> <input type="text" id="md-input-w72kf3jbyn" 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><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/inputs.html#colors" class="sidebar-link">Colors</a></li></ul></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" 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-d33n50vywi" value="Initial Value" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-theme-default"><label>Type here!</label> <input type="text" id="md-input-9lulr9jro" 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>
|
||||
@ -27,15 +27,15 @@
|
||||
<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>type<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>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-helper-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Helper text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</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>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
data<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
initial<span class="token punctuation">:</span> <span class="token string">'Initial Value'</span><span class="token punctuation">,</span>
|
||||
type<span class="token punctuation">:</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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> <h2 id="colors"><a href="#colors" aria-hidden="true" class="header-anchor">#</a> Colors</h2> <p>If you want to change the color of the inputs focus you have just to add one of the classes <code>has-danger</code>, <code>has-white</code>, <code>has-rose</code>, <code>has-green</code>, <code>has-warning</code>, <code>has-info</code> on the component parent tag like in the example below. By default the color is <code>purple</code>.</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-field</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>has-danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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> <h2 id="colors"><a href="#colors" class="header-anchor">#</a> Colors</h2> <p>If you want to change the color of the inputs focus you have just to add one of the classes <code>has-danger</code>, <code>has-white</code>, <code>has-rose</code>, <code>has-green</code>, <code>has-warning</code>, <code>has-info</code> on the component parent tag like in the example below. By default the color is <code>purple</code>.</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-field</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>has-danger<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>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>
|
||||
@ -48,6 +48,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/6.c5617e47.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/6.7cba7bd9.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/19.908006a9.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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">
|
||||
<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" 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/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/19.e8d976ce.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/19.908006a9.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/20.3b780394.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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>
|
||||
<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" 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/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/20.3b780394.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/20.d21ce81f.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/7.029836f2.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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>
|
||||
<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" 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" 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>
|
||||
</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>Modal<span class="token punctuation">)</span>
|
||||
</code></pre></div><h2 id="clasic-modal"><a href="#clasic-modal" aria-hidden="true" class="header-anchor">#</a> Clasic Modal</h2> <div class="demo-block demo-box demo-component-docs demo-modal.html"><div class="source"><button type="button" class="md-button md-primary md-round classic-modal md-theme-default"><div class="md-ripple"><div class="md-button-content">Classic Modal</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>template</span><span class="token punctuation">></span></span>
|
||||
</code></pre></div><h3 id="global-usage"><a href="#global-usage" 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>Modal<span class="token punctuation">)</span>
|
||||
</code></pre></div><h2 id="clasic-modal"><a href="#clasic-modal" class="header-anchor">#</a> Clasic Modal</h2> <div class="demo-block demo-box demo-component-docs demo-modal.html"><div class="source"><button type="button" class="md-button md-primary md-round classic-modal md-theme-default"><div class="md-ripple"><div class="md-button-content">Classic Modal</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>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-primary md-round classic-modal<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>classicModal = true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Classic Modal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>modal</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>classicModal<span class="token punctuation">"</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>classicModalHide<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>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -44,7 +44,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>modal</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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> <h3 id="modal-slots"><a href="#modal-slots" aria-hidden="true" class="header-anchor">#</a> Modal Slots</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>header</td> <td>Default card header</td></tr> <tr><td>body</td> <td>Default card body</td></tr> <tr><td>footer</td> <td>Content for card footer</td></tr></tbody></table></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
</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> <h3 id="modal-slots"><a href="#modal-slots" class="header-anchor">#</a> Modal Slots</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>header</td> <td>Default card header</td></tr> <tr><td>body</td> <td>Default card body</td></tr> <tr><td>footer</td> <td>Content for card footer</td></tr></tbody></table></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="prev">
|
||||
Date Pickers
|
||||
@ -53,6 +53,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/7.029836f2.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/7.a1e2b42c.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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...
|
||||
<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" class="header-anchor">#</a> Notifications</h1> <p>We crafted a simple yet effective notifications alert.</p> <h3 id="trigger-notifications"><a href="#trigger-notifications" 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...
|
||||
@ -28,7 +28,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notifications<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>alert alert-info<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<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>close<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>event => removeNotify(event,<span class="token punctuation">'</span>alert-info<span class="token punctuation">'</span>)<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<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>close<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>event => removeNotify(event,'alert-info')<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-icon</span><span class="token punctuation">></span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</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>alert-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -39,7 +39,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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>alert alert-success<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<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>close<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>event => removeNotify(event,<span class="token punctuation">'</span>alert-success<span class="token punctuation">'</span>)<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<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>close<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>event => removeNotify(event,'alert-success')<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-icon</span><span class="token punctuation">></span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</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>alert-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -51,7 +51,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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>alert alert-warning<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<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>close<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>event => removeNotify(event,<span class="token punctuation">'</span>alert-warning<span class="token punctuation">'</span>)<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<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>close<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>event => removeNotify(event,'alert-warning')<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-icon</span><span class="token punctuation">></span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</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>alert-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -62,7 +62,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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>alert alert-danger<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<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>close<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>event => removeNotify(event,<span class="token punctuation">'</span>alert-danger<span class="token punctuation">'</span>)<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<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>close<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>event => removeNotify(event,'alert-danger')<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-icon</span><span class="token punctuation">></span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</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>alert-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -75,10 +75,10 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<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>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">removeNotify</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> notifyClass<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">removeNotify</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> notifyClass</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> target <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
|
||||
<span class="token keyword">while</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>notifyClass<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
target <span class="token operator">=</span> target<span class="token punctuation">.</span>parentNode<span class="token punctuation">;</span>
|
||||
@ -88,7 +88,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
@ -99,6 +99,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/8.1e10a248.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/8.8d33c864.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/9.aec10448.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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>
|
||||
<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" 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" 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>
|
||||
</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>Pagination<span class="token punctuation">)</span>
|
||||
</code></pre></div><h2 id="default-pagination"><a href="#default-pagination" aria-hidden="true" class="header-anchor">#</a> Default Pagination</h2> <p>We made our own pagination component for a better visual experience.</p> <div class="demo-block demo-box demo-component-docs demo-pagination.html"><div class="source"><ul class="pagination pagination-primary"><li class="page-item prev-page disabled no-arrows"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item active"><a class="page-link">1</a></li><li class="page-item"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li><li class="page-item"><a class="page-link">4</a></li><li class="page-item"><a class="page-link">5</a></li> <li class="page-item page-pre next-page no-arrows"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <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>
|
||||
</code></pre></div><h3 id="global-usage"><a href="#global-usage" 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>Pagination<span class="token punctuation">)</span>
|
||||
</code></pre></div><h2 id="default-pagination"><a href="#default-pagination" class="header-anchor">#</a> Default Pagination</h2> <p>We made our own pagination component for a better visual experience.</p> <div class="demo-block demo-box demo-component-docs demo-pagination.html"><div class="source"><ul class="pagination pagination-primary"><li class="page-item prev-page disabled no-arrows"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item active"><a class="page-link">1</a></li><li class="page-item"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li><li class="page-item"><a class="page-link">4</a></li><li class="page-item"><a class="page-link">5</a></li> <li class="page-item page-pre next-page no-arrows"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <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>pagination</span>
|
||||
<span class="token attr-name">no-arrows</span>
|
||||
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>defaultPagination<span class="token punctuation">"</span></span>
|
||||
@ -33,7 +33,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>props-table</span> <span class="token attr-name">component-name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pagination<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>props-table</span><span class="token punctuation">></span></span>
|
||||
<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>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
@ -41,16 +41,16 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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> <h2 id="with-arrows-pagination"><a href="#with-arrows-pagination" aria-hidden="true" class="header-anchor">#</a> With Arrows Pagination</h2> <p>We made our own pagination component for a better visual experience.</p> <div class="demo-block demo-box demo-component-docs demo-pagination.html"><div class="source"><ul class="pagination pagination-primary"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul></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>
|
||||
</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> <h2 id="with-arrows-pagination"><a href="#with-arrows-pagination" class="header-anchor">#</a> With Arrows Pagination</h2> <p>We made our own pagination component for a better visual experience.</p> <div class="demo-block demo-box demo-component-docs demo-pagination.html"><div class="source"><ul class="pagination pagination-primary"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul></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>pagination</span>
|
||||
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>infoPagination<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<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>pagination</span><span class="token punctuation">></span></span>
|
||||
<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>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
@ -58,9 +58,9 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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> <h2 id="colors-pagination"><a href="#colors-pagination" aria-hidden="true" class="header-anchor">#</a> Colors Pagination</h2> <p>We made our own pagination component for a better visual experience.</p> <div class="demo-block demo-box demo-component-docs demo-pagination.html"><div class="source"><ul class="pagination pagination-danger"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-warning"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-primary"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-success"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-rose"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-info"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul></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>
|
||||
</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> <h2 id="colors-pagination"><a href="#colors-pagination" class="header-anchor">#</a> Colors Pagination</h2> <p>We made our own pagination component for a better visual experience.</p> <div class="demo-block demo-box demo-component-docs demo-pagination.html"><div class="source"><ul class="pagination pagination-danger"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-warning"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-primary"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-success"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-rose"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul> <ul class="pagination pagination-info"><li class="page-item prev-page"><a aria-label="Previous" class="page-link"><i class="fas fa-angle-double-left"></i></a></li> <li class="page-item"><a class="page-link">1</a></li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item"><a class="page-link">3</a></li> <li class="page-item page-pre next-page"><a aria-label="Next" class="page-link"><i class="fas fa-angle-double-right"></i></a></li></ul></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>pagination</span>
|
||||
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>colorPagination<span class="token punctuation">"</span></span>
|
||||
@ -93,7 +93,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pagination</span><span class="token punctuation">></span></span>
|
||||
<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>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
@ -101,7 +101,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
@ -112,6 +112,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/9.aec10448.js" defer></script><script src="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/9.1ffda26a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/2.02c6569f.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -10,21 +10,21 @@
|
||||
<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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/11.664a047a.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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-8ott4rww" type="checkbox"> </div></div></div> <label for="md-switch-8ott4rww" 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-rwwljm1xh" type="checkbox"> </div></div></div> <label for="md-switch-rwwljm1xh" 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" 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" 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-ftqktgdb" type="checkbox"> </div></div></div> <label for="md-switch-ftqktgdb" 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-ks0d66qmy7" type="checkbox"> </div></div></div> <label for="md-switch-ks0d66qmy7" 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>
|
||||
|
||||
<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>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
@ -33,7 +33,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
@ -44,6 +44,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/11.664a047a.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/11.55e9cebd.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,23 +10,23 @@
|
||||
<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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/22.28564edf.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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>
|
||||
<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" 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" 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" 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>
|
||||
NavTabsCard
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
</code></pre></div><h2 id="nav-tabs-card"><a href="#nav-tabs-card" aria-hidden="true" class="header-anchor">#</a> Nav Tabs Card</h2> <div class="demo-block demo-box demo-component-docs demo-tabs.html"><div class="source"><div class="md-layout"><div class="md-layout-item md-size-100"><div class="md-card md-card-nav-tabs md-theme-default no-label"><div class="md-card-content"><div class="md-tabs md-primary md-alignment-left md-no-transition md-theme-default"><div class="md-tabs-navigation md-elevation-0"> <span class="md-tabs-indicator"></span></div> <div class="md-content md-tabs-content md-theme-default" style="display:none;height:0px;"><div class="md-tabs-container"><div id="tab-home" class="md-tab"><p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p></div> <div id="tab-pages" class="md-tab"><p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p></div> <div id="tab-posts" class="md-tab"><p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p></div></div></div></div></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>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-layout<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre></div><h2 id="nav-tabs-card"><a href="#nav-tabs-card" class="header-anchor">#</a> Nav Tabs Card</h2> <div class="demo-block demo-box demo-component-docs demo-tabs.html"><div class="source"><div class="md-layout"><div class="md-layout-item md-size-100"><div class="md-card md-card-nav-tabs md-theme-default no-label"><div class="md-card-content"><div class="md-tabs md-primary md-alignment-left md-no-transition md-theme-default"><div class="md-tabs-navigation md-elevation-0"> <span class="md-tabs-indicator"></span></div> <div class="md-content md-tabs-content md-theme-default" style="display:none;height:0px;"><div class="md-tabs-container"><div id="tab-home" class="md-tab"><p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p></div> <div id="tab-pages" class="md-tab"><p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p></div> <div id="tab-posts" class="md-tab"><p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p></div></div></div></div></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>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-layout<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>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-layout-item md-size-100<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>nav-tabs-card</span> <span class="token attr-name">no-label</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -48,7 +48,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav-tabs-card</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 punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<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">'@/components'</span>
|
||||
@ -79,8 +79,8 @@
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token punctuation">}</span>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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> <h3 id="navtabscard-slots"><a href="#navtabscard-slots" aria-hidden="true" class="header-anchor">#</a> NavTabsCard Slots</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>content</td> <td>Default card content</td></tr></tbody></table> <blockquote><p>Note: for more details about the tabs that can you use please see the <strong>Tabs</strong> section from <a href="https://vuematerial.io/components/tabs/" 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">
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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> <h3 id="navtabscard-slots"><a href="#navtabscard-slots" class="header-anchor">#</a> NavTabsCard Slots</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>content</td> <td>Default card content</td></tr></tbody></table> <blockquote><p>Note: for more details about the tabs that can you use please see the <strong>Tabs</strong> section from <a href="https://vuematerial.io/components/tabs/" 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/notifications.html" class="prev">
|
||||
Notifications
|
||||
@ -89,6 +89,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/22.7657b7d1.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/22.28564edf.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,25 +10,25 @@
|
||||
<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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.428f188a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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-s3f7zz5dq" class="md-textarea">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" 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-4c23iact" class="md-textarea">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>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
data<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
aboutme<span class="token punctuation">:</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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 textarea please see the <strong>Input & Textarea</strong> section from <a href="https://vuematerial.io/components/input" 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/inputs.html" class="prev">
|
||||
@ -38,6 +38,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/12.8f0191e5.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/12.21eb5fac.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.679f3478.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/24.18bd4d66.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.23a30f0e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.664a047a.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.8f0191e5.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.1283328f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.27a7110b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.b9dc0216.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.4fc0da55.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.3a3fd187.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.90ec3f96.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.e8d976ce.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.7b2d8ed3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.3b780394.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.9ba910f4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.7657b7d1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a3b1b206.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.a87f19b1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.ac1252e1.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.4e4bbeb9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.076a8367.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.c5617e47.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.029836f2.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.1e10a248.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.aec10448.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.679f3478.css">
|
||||
<link rel="preload" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.d299cf35.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/24.428f188a.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.d1d00300.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.55e9cebd.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.21eb5fac.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.807e5565.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.9f5fd545.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.2c8c3d74.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.1706c11f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.f2b138ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.440dad98.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.908006a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.02c6569f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.d21ce81f.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.a20d3108.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.28564edf.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.a402f45d.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/25.217a7c13.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.2af625af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.661d45b8.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.d202a7af.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.7cba7bd9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.a1e2b42c.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.8d33c864.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.1ffda26a.js">
|
||||
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.4a0e108c.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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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.2.0</a></div> <a href="https://github.com/creativetimofficial/vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||||
<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.2.2</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/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">
|
||||
<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" 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
|
||||
@ -51,6 +51,6 @@
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </div> <!----></div></div>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.49ddd20a.js" defer></script><script src="/vue-material-kit/documentation/assets/js/24.18bd4d66.js" defer></script>
|
||||
<script src="/vue-material-kit/documentation/assets/js/app.d299cf35.js" defer></script><script src="/vue-material-kit/documentation/assets/js/24.428f188a.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
19
index.html
19
index.html
@ -1,4 +1,19 @@
|
||||
<!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-kit><meta name=keywords content="creative tim, creativetim, vue material, vue material ui kit, vue material kit, material, material kit, material template, vue kit, vue css template, web template, vue css3 template, frontend, responsive vue template, vue ui kit, responsive vue ui kit"><meta name=description content="A Badass Vue.js UI Kit made with Material Design."><meta itemprop=name content="Vue Material Kit by Creative Tim"><meta itemprop=description content="A Badass Vue.js UI Kit made with Material Design."><meta itemprop=image content=https://s3.amazonaws.com/creativetim_bucket/products/97/original/opt_mk_vue_thumbnail.jpg><meta name=twitter:card content=product><meta name=twitter:site content=@creativetim><meta name=twitter:title content="Vue Material Kit by Creative Tim"><meta name=twitter:description content="A Badass Vue.js UI Kit made with Material Design."><meta name=twitter:creator content=@creativetim><meta name=twitter:image content=https://s3.amazonaws.com/creativetim_bucket/products/97/original/opt_mk_vue_thumbnail.jpg><meta property=fb:app_id content=655968634437471><meta property=og:title content="Vue Material Kit by Creative Tim"><meta property=og:type content=article><meta property=og:url content=https://demos.creative-tim.com/vue-material-kit><meta property=og:image content=https://s3.amazonaws.com/creativetim_bucket/products/97/original/opt_mk_vue_thumbnail.jpg><meta property=og:description content="A Badass Vue.js UI Kit made with Material Design."><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.365e21be.css rel=preload as=style><link href=/vue-material-kit/css/chunk-vendors.00c394d1.css rel=preload as=style><link href=/vue-material-kit/js/app.31a15ca3.js rel=preload as=script><link href=/vue-material-kit/js/chunk-vendors.b2c3c507.js rel=preload as=script><link href=/vue-material-kit/css/chunk-vendors.00c394d1.css rel=stylesheet><link href=/vue-material-kit/css/app.365e21be.css rel=stylesheet></head><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
<!--
|
||||
=========================================================
|
||||
* Vue Material Kit - v1.2.2
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/vue-material-kit
|
||||
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://github.com/creativetimofficial/vue-material-kit/blob/master/LICENSE.md)
|
||||
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
<!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-kit><meta name=keywords content="creative tim, creativetim, vue material, vue material ui kit, vue material kit, material, material kit, material template, vue kit, vue css template, web template, vue css3 template, frontend, responsive vue template, vue ui kit, responsive vue ui kit"><meta name=description content="A Badass Vue.js UI Kit made with Material Design."><meta itemprop=name content="Vue Material Kit by Creative Tim"><meta itemprop=description content="A Badass Vue.js UI Kit made with Material Design."><meta itemprop=image content=https://s3.amazonaws.com/creativetim_bucket/products/97/original/opt_mk_vue_thumbnail.jpg><meta name=twitter:card content=product><meta name=twitter:site content=@creativetim><meta name=twitter:title content="Vue Material Kit by Creative Tim"><meta name=twitter:description content="A Badass Vue.js UI Kit made with Material Design."><meta name=twitter:creator content=@creativetim><meta name=twitter:image content=https://s3.amazonaws.com/creativetim_bucket/products/97/original/opt_mk_vue_thumbnail.jpg><meta property=fb:app_id content=655968634437471><meta property=og:title content="Vue Material Kit by Creative Tim"><meta property=og:type content=article><meta property=og:url content=https://demos.creative-tim.com/vue-material-kit><meta property=og:image content=https://s3.amazonaws.com/creativetim_bucket/products/97/original/opt_mk_vue_thumbnail.jpg><meta property=og:description content="A Badass Vue.js UI Kit made with Material Design."><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.52795ad3.css rel=preload as=style><link href=/vue-material-kit/css/chunk-vendors.80a9e6ca.css rel=preload as=style><link href=/vue-material-kit/js/app.dd764151.js rel=preload as=script><link href=/vue-material-kit/js/chunk-vendors.347e303c.js rel=preload as=script><link href=/vue-material-kit/css/chunk-vendors.80a9e6ca.css rel=stylesheet><link href=/vue-material-kit/css/app.52795ad3.css rel=stylesheet></head><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
@ -15,4 +30,4 @@
|
||||
|
||||
}catch(err) {
|
||||
console.log('Facebook Track Error:', err);
|
||||
}</script><noscript><img height=1 width=1 style=display:none src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1"></noscript><script src=/vue-material-kit/js/chunk-vendors.b2c3c507.js></script><script src=/vue-material-kit/js/app.31a15ca3.js></script></body></html>
|
||||
}</script><noscript><img height=1 width=1 style=display:none src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1"></noscript><script src=/vue-material-kit/js/chunk-vendors.347e303c.js></script><script src=/vue-material-kit/js/app.dd764151.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
19
js/app.dd764151.js
Normal file
19
js/app.dd764151.js
Normal file
File diff suppressed because one or more lines are too long
1
js/app.dd764151.js.map
Normal file
1
js/app.dd764151.js.map
Normal file
File diff suppressed because one or more lines are too long
102
js/chunk-vendors.347e303c.js
Normal file
102
js/chunk-vendors.347e303c.js
Normal file
File diff suppressed because one or more lines are too long
1
js/chunk-vendors.347e303c.js.map
Normal file
1
js/chunk-vendors.347e303c.js.map
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
Loading…
x
Reference in New Issue
Block a user