xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 21:04:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Dragos 2018-09-18 16:30:16 +03:00
commit 76de2c8fa5
81 changed files with 1638 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/app.6baefbc1.css Normal file
View File

File diff suppressed because one or more lines are too long

5
css/chunk-vendors.590efd76.css Normal file
View File

File diff suppressed because one or more lines are too long

20
documentation/404.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<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.5048c924.js" defer></script>
</body>
</html>

24
documentation/assets/css/0.styles.9dcd5660.css Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/img/search.83621669.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 216 B

1
documentation/assets/js/10.c2cf77fa.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/11.28c85460.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/12.849d3916.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/13.78256c05.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/14.1c386190.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{238:function(e,t,i){"use strict";i.r(t);var s=i(0),n=Object(s.a)({},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[this._m(0),this._v(" "),t("p",[this._v("Currently, on "),t("a",{attrs:{href:"https://www.creative-tim.com/",target:"_blank",rel:"noopener noreferrer"}},[this._v("Creative Tim"),t("OutboundLink")],1),this._v(" you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our "),t("a",{attrs:{href:"https://www.creative-tim.com/license",target:"_blank",rel:"noopener noreferrer"}},[this._v("Official License Page"),t("OutboundLink")],1),this._v(".")])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"license"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#license","aria-hidden":"true"}},[this._v("#")]),this._v(" License")])}],!1,null,null,null);n.options.__file="license.md";t.default=n.exports}}]);

1
documentation/assets/js/15.1b04ba78.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{237:function(t,s,a){"use strict";a.r(s);var e=a(0),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._v(" "),a("p",[t._v("Through most of the examples in this dashboard, we have used the default Icons for the Material Design provided by Google. You can easily use them like this:")]),t._v(" "),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<md-icon>favorite</md-icon>\n",script:null,style:null}}},[a("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[a("md-icon",[t._v("favorite")])],1),t._v(" "),a("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("md-icon")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("</")]),t._v("md-icon")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])]),t._v(" "),a("blockquote",[a("p",[t._v("Note: for more details about the icons please see the "),a("strong",[t._v("Icon")]),t._v(" section from "),a("a",{attrs:{href:"https://vuematerial.io/components/icon",target:"_blank",rel:"noopener noreferrer"}},[t._v("vuematerial.io"),a("OutboundLink")],1)])])],1)},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"material-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#material-icons","aria-hidden":"true"}},[this._v("#")]),this._v(" Material Icons")])}],!1,null,null,null);n.options.__file="material-icons.md";s.default=n.exports}}]);

1
documentation/assets/js/16.f8f24f5e.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/17.6eb00717.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/18.6f8c9f24.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/19.99f9df8b.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/2.b8ce3833.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{221:function(n,w,o){}}]);

1
documentation/assets/js/20.8790f9a9.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/21.c3e74589.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/22.39971291.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/23.14765911.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/24.8764158e.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/3.5ab03cb4.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{182:function(t,e,n){},204:function(t,e,n){"use strict";var a=n(182);n.n(a).a},242:function(t,e,n){"use strict";n.r(e);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,a=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||a().default)}},i=(n(204),n(0)),o=Object(i.a)(a,void 0,void 0,!1,null,"099ab69c",null);o.options.__file="Badge.vue";e.default=o.exports}}]);

1
documentation/assets/js/4.c9e1df19.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{183:function(t,n,e){},205:function(t,n,e){"use strict";var r=e(6),i=e(206)(5),a=!0;"find"in[]&&Array(1).find(function(){a=!1}),r(r.P+r.F*a,"Array",{find:function(t){return i(this,t,arguments.length>1?arguments[1]:void 0)}}),e(70)("find")},206:function(t,n,e){var r=e(14),i=e(69),a=e(51),o=e(68),s=e(207);t.exports=function(t,n){var e=1==t,u=2==t,c=3==t,f=4==t,p=6==t,v=5==t||p,d=n||s;return function(n,s,l){for(var h,_,y=a(n),m=i(y),b=r(s,l,3),w=o(m.length),A=0,D=e?d(n,w):u?d(n,0):void 0;w>A;A++)if((v||A in m)&&(_=b(h=m[A],A,y),t))if(e)D[A]=_;else if(_)switch(t){case 3:return!0;case 5:return h;case 6:return A;case 2:D.push(h)}else if(f)return!1;return p?-1:c||f?f:D}}},207:function(t,n,e){var r=e(208);t.exports=function(t,n){return new(r(t))(n)}},208:function(t,n,e){var r=e(4),i=e(209),a=e(2)("species");t.exports=function(t){var n;return i(t)&&("function"!=typeof(n=t.constructor)||n!==Array&&!i(n.prototype)||(n=void 0),r(n)&&null===(n=n[a])&&(n=void 0)),void 0===n?Array:n}},209:function(t,n,e){var r=e(15);t.exports=Array.isArray||function(t){return"Array"==r(t)}},210:function(t,n,e){"use strict";var r=e(183);e.n(r).a},232:function(t,n,e){"use strict";e.r(n);e(205),e(20);var r=e(88),i=(e(11),e(16),e(19),{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)}}}),a=(e(210),e(0)),o=Object(a.a)(i,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 ")])])}))]):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);o.options.__file="propsTable.vue";n.default=o.exports}}]);

1
documentation/assets/js/5.df14ef11.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{241:function(e,t,r){"use strict";r.r(t);var a=r(0),n=Object(a.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 Dashboard PRO 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(". It will help you get started developing dashboards in no time. Vue Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard PRO.")]),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(".babelrc")]),e._v(", "),r("code",[e._v(".eslintrc.js")]),e._v(" and "),r("code",[e._v(".postcssrc.js")])]),e._v(" "),e._m(5),e._v(" "),r("p",[e._v("Vue Now Material Dashboard 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 dashboard.")])])},[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);n.options.__file="README.md";t.default=n.exports}}]);

1
documentation/assets/js/6.bdb412a0.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/7.e2821e1e.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{243:function(s,e,r){"use strict";r.r(e);var t=r(0),a=Object(t.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,e=s.$createElement,r=s._self._c||e;return r("div",{staticClass:"content"},[r("h1",{attrs:{id:"brand-colors"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#brand-colors","aria-hidden":"true"}},[s._v("#")]),s._v(" Brand Colors")]),s._v(" "),r("ol",[r("li",[r("p",[s._v("You can find the colors in "),r("code",[s._v("assets/scss/md/_variables.scss")]),s._v(" starting with line 28 where is the primary color set: "),r("code",[s._v("$brand-primary: $purple !default;")]),s._v(".")])]),s._v(" "),r("li",[r("p",[s._v("All the possible colors are in "),r("code",[s._v("assets/scss/md/_colors.scss")]),s._v(".")])])])])}],!1,null,null,null);a.options.__file="brand-colors.md";e.default=a.exports}}]);

1
documentation/assets/js/8.031149ba.js Normal file
View File

File diff suppressed because one or more lines are too long

1
documentation/assets/js/9.e06ab1b3.js Normal file
View File

File diff suppressed because one or more lines are too long

73
documentation/assets/js/app.5048c924.js Normal file
View File

File diff suppressed because one or more lines are too long

48
documentation/component-docs/badge.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Badge | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="active sidebar-link">Badge</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/badge.html#badges-color" class="sidebar-link">Badges Color</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="badge"><a href="#badge" aria-hidden="true" class="header-anchor">#</a> Badge</h1> <p>To use the custom button you need to import the custom made component, you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Badge<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
</code></pre></div><h3 id="local-usage"><a href="#local-usage" aria-hidden="true" class="header-anchor">#</a> Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
Badge
<span class="token punctuation">}</span>
</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">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>badge</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>badge</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>badge</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>badge</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>badge</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>badge</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>badge</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rose<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>badge</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>badge</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Another Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>badge</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>badge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>props-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="prev">
Tooltips
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/material-icons.html">
Material Icons
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/6.bdb412a0.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.c9e1df19.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

32
documentation/component-docs/brand-colors.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Brand Colors | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="active sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="brand-colors"><a href="#brand-colors" aria-hidden="true" class="header-anchor">#</a> Brand Colors</h1> <ol><li><p>You can find the colors in <code>assets/scss/md/_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/md/_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
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/date-pickers.html">
Date Pickers
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/7.e2821e1e.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

53
documentation/component-docs/buttons.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Buttons | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/8.031149ba.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="active sidebar-link">Buttons</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#colors" class="sidebar-link">Colors</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#style-buttons" class="sidebar-link">Style Buttons</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#sizes" class="sidebar-link">Sizes</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/buttons.html#extra-mile" class="sidebar-link">Extra Mile</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="buttons"><a href="#buttons" aria-hidden="true" class="header-anchor">#</a> Buttons</h1> <p>To use the custom button you don't need to import the custom made component, you can easily use it like this:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-button</span><span class="token punctuation">&gt;</span></span>
Button
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</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">&lt;</span>md-button</span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-rose<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Rose<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-simple<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Simple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</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">&lt;</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">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary md-round<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Round<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span> <span class="token punctuation">&gt;</span></span>favorite<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span> With Icon<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary md-just-icon md-round<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span> <span class="token punctuation">&gt;</span></span>favorite<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary md-simple<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Simple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</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">&lt;</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">&quot;</span>md-primary md-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Normal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary md-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</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">&lt;</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">&quot;</span>md-primary md-block<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>md-block<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary md-wd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>md-wd<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/license.html" class="prev">
License
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/cards.html">
Cards
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/8.031149ba.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

90
documentation/component-docs/cards.html Normal file
View File

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cards | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="active sidebar-link">Cards</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/cards.html#login-card" class="sidebar-link">Login card</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="cards"><a href="#cards" aria-hidden="true" class="header-anchor">#</a> Cards</h1> <p>We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>LoginCard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
</code></pre></div><h3 id="local-usage"><a href="#local-usage" aria-hidden="true" class="header-anchor">#</a> Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
LoginCard
<span class="token punctuation">}</span>
</code></pre></div><h3 id="global-usage"><a href="#global-usage" aria-hidden="true" class="header-anchor">#</a> Global Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>LoginCard<span class="token punctuation">)</span>
</code></pre></div><h2 id="login-card"><a href="#login-card" aria-hidden="true" class="header-anchor">#</a> Login card</h2> <div class="demo-block demo-box demo-component-docs demo-cards.html"><div class="source"><div class="md-card md-card-login md-theme-default md-card-hidden"><div class="md-card-header md-card-header-green"><h4 class="title">Log in</h4> <div class="social-line"><a href="/vue-material-kit/documentation/component-docs/cards.html#facebook" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-facebook-square"></i></div> </div></a> <a href="/vue-material-kit/documentation/component-docs/cards.html#twitter" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-twitter"></i></div> </div></a> <a href="/vue-material-kit/documentation/component-docs/cards.html#google" class="md-button md-just-icon md-simple md-white md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="fab fa-google-plus-g"></i></div> </div></a></div></div> <div class="md-card-content"><p class="description">Or Be Classical</p> <div class="md-field md-form-group md-theme-default"><i class="md-icon md-icon-font md-theme-default">face</i> <label>First Name...</label> <input type="text" id="md-input-xiimw06pc" 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-ewoc52okl" 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-vhk6tcnu8" 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">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>green<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Log in<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>buttons<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-button</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>#facebook<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-just-icon md-simple md-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fab fa-facebook-square<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-button</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>#twitter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-just-icon md-simple md-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fab fa-twitter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-button</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>#google<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-just-icon md-simple md-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fab fa-google-plus-g<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>description<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Or Be Classical<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>inputs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-form-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>face<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>First Name...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>firstname<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-form-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>Email...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>email<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>email<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-form-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>lock_outline<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>Password...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>password<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-simple md-success md-lg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Lets Go
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>login-card</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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>
password<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
firstname<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
email<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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>login-card<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>props-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/buttons.html" class="prev">
Buttons
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/checkboxes.html">
Checkboxes
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.c9e1df19.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

70
documentation/component-docs/checkboxes.html Normal file
View File

File diff suppressed because one or more lines are too long

50
documentation/component-docs/date-pickers.html Normal file
View File

File diff suppressed because one or more lines are too long

64
documentation/component-docs/dropdown.html Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dropdown | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/12.849d3916.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="active sidebar-link">Dropdown</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="dropdown"><a href="#dropdown" aria-hidden="true" class="header-anchor">#</a> Dropdown</h1> <p>To use the custom dropdown you don't need to import the custom made component because it's global registered, so you can use it like this:</p> <h3 id="as-list-item"><a href="#as-list-item" aria-hidden="true" class="header-anchor">#</a> As List Item</h3> <div class="demo-block demo-box demo-component-docs demo-dropdown.html"><div class="source"><div class="md-list"><li class="md-list-item"><a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown"><div class="md-list-item-content"><div class="dropdown"><button type="button" data-toggle="dropdown" class="md-button md-button md-button-link md-simple dropdown-toggle md-theme-default"><div class="md-ripple"><div class="md-button-content"><i class="material-icons">apps</i> <p>Components</p></div> </div></button> <ul class="dropdown-menu dropdown-with-icons"><li><a href="javascript:void(0)"><i class="material-icons">layers</i> <p>All Components</p></a></li> <li><a href="javascript:void(0)"><i class="material-icons">content_paste</i> <p>Documentation</p></a></li></ul></div></div></a></li></div> <div><!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-list-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>javascript:void(0)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-list-item-router md-list-item-container md-button-clean dropdown<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-list-item-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drop-down</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>down<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-button md-button-link md-simple dropdown-toggle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-toggle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dropdown<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>material-icons<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>apps<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Components<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dropdown-menu dropdown-with-icons<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>javascript:void(0)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>material-icons<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>layers<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>All Components<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>javascript:void(0)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>material-icons<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>content_paste<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Documentation<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>drop-down</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>drop-down<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>props-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/radios.html" class="prev">
Radios
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/inputs.html">
Inputs
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/12.849d3916.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.c9e1df19.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

49
documentation/component-docs/inputs.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Inputs | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/13.78256c05.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="active sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="inputs"><a href="#inputs" aria-hidden="true" class="header-anchor">#</a> Inputs</h1> <p>To use the custom form group inputs you don't need to import the custom made component, you can use it like this:</p> <div class="demo-block demo-box demo-component-docs demo-inputs.html"><div class="source"><div class="md-field md-theme-default"><label>Initial Value</label> <input type="text" id="md-input-gynls2q95" value="Initial Value" class="md-input"> <!----> <!----> <!----></div> <div class="md-field md-theme-default"><label>Type here!</label> <input type="text" id="md-input-xr7cil1zk" 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">&lt;</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>Initial Value<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>initial<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>Type here!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>type<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-helper-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Helper text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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">=&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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 all inputs that you can use please see the <strong>Input &amp; 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/dropdown.html" class="prev">
Dropdown
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/textarea.html">
Textarea
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/13.78256c05.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

32
documentation/component-docs/license.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>License | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/14.1c386190.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="active sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="license"><a href="#license" aria-hidden="true" class="header-anchor">#</a> License</h1> <p>Currently, on <a href="https://www.creative-tim.com/" target="_blank" rel="noopener noreferrer">Creative Tim<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our <a href="https://www.creative-tim.com/license" target="_blank" rel="noopener noreferrer">Official License Page<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vue-material-kit/documentation/" class="prev router-link-active">
Short Description and Usage
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/buttons.html">
Buttons
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/14.1c386190.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

33
documentation/component-docs/material-icons.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Material Icons | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="active sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="material-icons"><a href="#material-icons" aria-hidden="true" class="header-anchor">#</a> Material Icons</h1> <p>Through most of the examples in this dashboard, we have used the default Icons for the Material Design provided by Google. You can easily use them like this:</p> <div class="demo-block demo-box demo-component-docs demo-material-icons.html"><div class="source"><i class="md-icon md-icon-font md-theme-default">favorite</i></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>favorite<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</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">
Badge
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/toolbar.html">
Toolbar
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/15.1b04ba78.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

58
documentation/component-docs/modal.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Modal | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="active sidebar-link">Modal</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/modal.html#clasic-modal" class="sidebar-link">Clasic Modal</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="modal"><a href="#modal" aria-hidden="true" class="header-anchor">#</a> Modal</h1> <p>If you want to display some content on demand in a very subtle way, the Vue Material Dashboard Pro Modal is the perfect choice for this. We created custom modal component and you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
</code></pre></div><h3 id="local-usage"><a href="#local-usage" aria-hidden="true" class="header-anchor">#</a> Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
Modal
<span class="token punctuation">}</span>
</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">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary md-round classic-modal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>classicModal = true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Classic Modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>classicModal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>classicModalHide<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>modal-title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Modal Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-simple md-just-icon md-round modal-default-button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>classicModalHide<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>body<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-simple<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Nice Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-danger md-simple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>classicModalHide<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>modal</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="prev">
Date Pickers
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/pagination.html">
Pagination
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

104
documentation/component-docs/notifications.html Normal file
View File

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Notifications | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="active sidebar-link">Notifications</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="notifications"><a href="#notifications" aria-hidden="true" class="header-anchor">#</a> Notifications</h1> <p>We crafted a simple yet effective notifications alert.</p> <h3 id="trigger-notifications"><a href="#trigger-notifications" aria-hidden="true" class="header-anchor">#</a> Trigger Notifications</h3> <div class="demo-block demo-box demo-component-docs demo-notifications.html"><div class="source"><div class="wrapper"><div id="notifications"><div class="alert alert-info"><div class="container"><button type="button" aria-hidden="true" class="close"><i class="md-icon md-icon-font md-theme-default">clear</i></button> <div class="alert-icon"><i class="md-icon md-icon-font md-theme-default">info_outline</i></div> <b> INFO ALERT </b> : You've got some friends nearby, stop looking at your phone and find them...
</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 &quot;copyright © 2015&quot; 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...
</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">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>notifications<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert alert-info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>close<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>event =&gt; removeNotify(event,<span class="token punctuation">'</span>alert-info<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>info_outline<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">&gt;</span></span> INFO ALERT <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">&gt;</span></span> : You've got some friends nearby, stop looking at your phone and find them...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert alert-success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>close<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>event =&gt; removeNotify(event,<span class="token punctuation">'</span>alert-success<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>check<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">&gt;</span></span> SUCCESS ALERT <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">&gt;</span></span> : Yuhuuu! You've got your $11.99 album from The Weeknd
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert alert-warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>close<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>event =&gt; removeNotify(event,<span class="token punctuation">'</span>alert-warning<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">&gt;</span></span> WARNING ALERT <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">&gt;</span></span> : Hey, it looks like you still have the &quot;copyright © 2015&quot; in your footer. Please update it!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert alert-danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>close<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>event =&gt; removeNotify(event,<span class="token punctuation">'</span>alert-danger<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert-icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-icon</span><span class="token punctuation">&gt;</span></span>info_outline<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">&gt;</span></span> ERROR ALERT <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">&gt;</span></span> : Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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 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>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> target<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/textarea.html" class="prev">
Textarea
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/tabs.html">
Tabs
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/17.6eb00717.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

117
documentation/component-docs/pagination.html Normal file
View File

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pagination | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="active sidebar-link">Pagination</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#default-pagination" class="sidebar-link">Default Pagination</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#with-arrows-pagination" class="sidebar-link">With Arrows Pagination</a></li><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/pagination.html#colors-pagination" class="sidebar-link">Colors Pagination</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="pagination"><a href="#pagination" aria-hidden="true" class="header-anchor">#</a> Pagination</h1> <p>To use the custom pagination you need to import the custom made component, you can easily use it like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Pagination<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components'</span>
</code></pre></div><h3 id="local-usage"><a href="#local-usage" aria-hidden="true" class="header-anchor">#</a> Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
Pagination
<span class="token punctuation">}</span>
</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">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>defaultPagination<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>pagination<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>props-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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>
defaultPagination<span class="token punctuation">:</span> <span class="token number">1</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>infoPagination<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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>
infoPagination<span class="token punctuation">:</span> <span class="token number">2</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pagination</span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>colorPagination<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pagination</span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>colorPagination<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pagination</span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>colorPagination<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pagination</span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>colorPagination<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pagination</span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rose<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>colorPagination<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pagination</span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>colorPagination<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">:page-count</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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>
colorPagination<span class="token punctuation">:</span> <span class="token number">2</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/modal.html" class="prev">
Modal
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/tooltips.html">
Tooltips
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js" defer></script><script src="/vue-material-kit/documentation/assets/js/4.c9e1df19.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

50
documentation/component-docs/radios.html Normal file
View File

File diff suppressed because one or more lines are too long

49
documentation/component-docs/switch.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Switch | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="active sidebar-link">Switch</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/switch.html#simple-example" class="sidebar-link">Simple Example</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="switch"><a href="#switch" aria-hidden="true" class="header-anchor">#</a> Switch</h1> <p>To use the custom switch you don't need to import component, you can easily use it like this:</p> <h2 id="simple-example"><a href="#simple-example" aria-hidden="true" class="header-anchor">#</a> Simple Example</h2> <div class="demo-block demo-box demo-component-docs demo-switch.html"><div class="source"><div class="md-switch md-theme-default md-checked"><div class="md-switch-container"><div class="md-switch-thumb"><div class="md-ripple"><input id="md-switch-ehqznqbsw" type="checkbox"> </div></div></div> <label for="md-switch-ehqznqbsw" 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-ybnr05u3m" type="checkbox"> </div></div></div> <label for="md-switch-ybnr05u3m" 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">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>switch1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toogle is on<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-switch</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>switch2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Toogle is off<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-switch</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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>
switch1<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
switch2<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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/tabs.html" class="prev">
Tabs
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/brand-colors.html">
Brand Colors
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/20.8790f9a9.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

94
documentation/component-docs/tabs.html Normal file
View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tabs | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="active sidebar-link">Tabs</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-material-kit/documentation/component-docs/tabs.html#nav-tabs-card" class="sidebar-link">Nav Tabs Card</a></li></ul></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="tabs"><a href="#tabs" aria-hidden="true" class="header-anchor">#</a> Tabs</h1> <p>If you have information that you don't need to show at once, we suggest you use tabs. We carefully re-styled the custom tabs component from vuematerial.io which you can easily use.</p> <p>In order to use the tabs, import the necessary components:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>NavTabsCard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'src/components'</span>
</code></pre></div><h3 id="global-usage"><a href="#global-usage" aria-hidden="true" class="header-anchor">#</a> Global Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code>Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>NavTabsCard<span class="token punctuation">)</span>
</code></pre></div><h3 id="for-local-usage"><a href="#for-local-usage" aria-hidden="true" class="header-anchor">#</a> For Local Usage</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
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">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-layout<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-layout-item md-size-100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav-tabs-card</span> <span class="token attr-name">no-label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-tabs</span> <span class="token attr-name">md-sync-route</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md-alignment</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-tab</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tab-home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Profile<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md-icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>face<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>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.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-tab</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tab-pages<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Messages<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md-icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>chat<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>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.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-tab</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tab-posts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Settings<span class="token punctuation">&quot;</span></span> <span class="token attr-name">md-icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>build<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>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.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-tabs</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav-tabs-card</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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>
<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>
<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>
selected<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
firstTabs<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Sign contract for &quot;What are conference organizers afraid of?&quot;'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Lines From Great Russian Literature? Or E-mails From My Boss?'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
secondTabs<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Sign contract for &quot;What are conference organizers afraid of?&quot;'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Lines From Great Russian Literature? Or E-mails From My Boss?'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
thirdTabs<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Sign contract for &quot;What are conference organizers afraid of?&quot;'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Lines From Great Russian Literature? Or E-mails From My Boss?'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> tab<span class="token punctuation">:</span> <span class="token string">'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">
←
<a href="/vue-material-kit/documentation/component-docs/notifications.html" class="prev">
Notifications
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/switch.html">
Switch
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/21.c3e74589.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

43
documentation/component-docs/textarea.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Textarea | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/22.39971291.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/24.8764158e.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="active sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="textarea"><a href="#textarea" aria-hidden="true" class="header-anchor">#</a> Textarea</h1> <p>To use the custom form group inputs you don't need to import the custom made component, you can use it like this:</p> <div class="demo-block demo-box demo-component-docs demo-textarea.html"><div class="source"><div class="md-field md-theme-default"><label>About Me</label> <textarea id="md-textarea-manuhayl" class="md-textarea" style="height:false;">null</textarea> <!----> <!----> <!----></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>About Me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>aboutme<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-textarea</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-field</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script 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">=&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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 &amp; 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">
Inputs
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/notifications.html">
Notifications
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/22.39971291.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

258
documentation/component-docs/toolbar.html Normal file
View File

File diff suppressed because one or more lines are too long

56
documentation/component-docs/tooltips.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tooltips | Vue Material Kit</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<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.9dcd5660.css" as="style"><link rel="preload" href="/vue-material-kit/documentation/assets/js/app.5048c924.js" as="script"><link rel="preload" href="/vue-material-kit/documentation/assets/js/24.8764158e.js" as="script"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/11.28c85460.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/2.b8ce3833.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/3.5ab03cb4.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/4.c9e1df19.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/5.df14ef11.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/6.bdb412a0.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/7.e2821e1e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/8.031149ba.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/9.e06ab1b3.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/10.c2cf77fa.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/12.849d3916.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/13.78256c05.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/14.1c386190.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/15.1b04ba78.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/16.f8f24f5e.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/17.6eb00717.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/18.6f8c9f24.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/19.99f9df8b.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/20.8790f9a9.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/21.c3e74589.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/22.39971291.js"><link rel="prefetch" href="/vue-material-kit/documentation/assets/js/23.14765911.js">
<link rel="stylesheet" href="/vue-material-kit/documentation/assets/css/0.styles.9dcd5660.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-material-kit/documentation/" class="home-link router-link-active"><!----> <span class="site-name">Vue Material Kit</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-material-kit/documentation/#" class="nav-link">v1.0.0</a></div> <a href="https://github.com/creativetimofficial/ct-vue-material-kit" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>General Information</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/" class="sidebar-link">Short Description and Usage</a></li><li><a href="/vue-material-kit/documentation/component-docs/license.html" class="sidebar-link">License</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Components</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-material-kit/documentation/component-docs/buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/vue-material-kit/documentation/component-docs/cards.html" class="sidebar-link">Cards</a></li><li><a href="/vue-material-kit/documentation/component-docs/checkboxes.html" class="sidebar-link">Checkboxes</a></li><li><a href="/vue-material-kit/documentation/component-docs/radios.html" class="sidebar-link">Radios</a></li><li><a href="/vue-material-kit/documentation/component-docs/dropdown.html" class="sidebar-link">Dropdown</a></li><li><a href="/vue-material-kit/documentation/component-docs/inputs.html" class="sidebar-link">Inputs</a></li><li><a href="/vue-material-kit/documentation/component-docs/textarea.html" class="sidebar-link">Textarea</a></li><li><a href="/vue-material-kit/documentation/component-docs/notifications.html" class="sidebar-link">Notifications</a></li><li><a href="/vue-material-kit/documentation/component-docs/tabs.html" class="sidebar-link">Tabs</a></li><li><a href="/vue-material-kit/documentation/component-docs/switch.html" class="sidebar-link">Switch</a></li><li><a href="/vue-material-kit/documentation/component-docs/brand-colors.html" class="sidebar-link">Brand Colors</a></li><li><a href="/vue-material-kit/documentation/component-docs/date-pickers.html" class="sidebar-link">Date Pickers</a></li><li><a href="/vue-material-kit/documentation/component-docs/modal.html" class="sidebar-link">Modal</a></li><li><a href="/vue-material-kit/documentation/component-docs/pagination.html" class="sidebar-link">Pagination</a></li><li><a href="/vue-material-kit/documentation/component-docs/tooltips.html" class="active sidebar-link">Tooltips</a></li><li><a href="/vue-material-kit/documentation/component-docs/badge.html" class="sidebar-link">Badge</a></li><li><a href="/vue-material-kit/documentation/component-docs/material-icons.html" class="sidebar-link">Material Icons</a></li><li><a href="/vue-material-kit/documentation/component-docs/toolbar.html" class="sidebar-link">Toolbar</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="tooltips"><a href="#tooltips" aria-hidden="true" class="header-anchor">#</a> Tooltips</h1> <p>We used, Tooltip from vuematerial.io and customized the look of it. It's a really handy component and can be integrated very easily.</p> <div class="demo-block demo-box demo-component-docs demo-tooltips.html"><div class="source"><button type="button" class="md-button md-primary md-theme-default"><div class="md-ripple"><div class="md-button-content">
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
<!----></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 right
<!----></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 left
<!----></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">&lt;</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">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Tooltip on top
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-tooltip</span> <span class="token attr-name">md-direction</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>on top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-tooltip</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Tooltip on bottom
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-tooltip</span> <span class="token attr-name">md-direction</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>on bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-tooltip</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Tooltip on right
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-tooltip</span> <span class="token attr-name">md-direction</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>on right<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-tooltip</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>md-primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Tooltip on left
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-tooltip</span> <span class="token attr-name">md-direction</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>on left<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-tooltip</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-button</span><span class="token punctuation">&gt;</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 tooltip props and attributes that you can use, please see the <strong>Tooltip</strong> section from <a href="https://vuematerial.io/components/tooltip" 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/pagination.html" class="prev">
Pagination
</a></span> <span class="next"><a href="/vue-material-kit/documentation/component-docs/badge.html">
Badge
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-material-kit/documentation/assets/js/24.8764158e.js" defer></script><script src="/vue-material-kit/documentation/assets/js/app.5048c924.js" defer></script>
</body>
</html>

BIN
documentation/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
documentation/img/card-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 KiB

BIN
documentation/img/faces/avatar.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
documentation/img/faces/card-profile1-square.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

30
documentation/index.html Normal file
View File

File diff suppressed because one or more lines are too long

BIN
favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
img/avatar.cc93a967.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
img/bg.50f15a1c.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
img/bg2.a1c1aea8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 827 KiB

BIN
img/bg3.7f7796d8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 KiB

BIN
img/bg7.1e2e17e7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 KiB

BIN
img/christian.b23f7205.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
img/city-profile.e035d6de.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 654 KiB

BIN
img/city.98a5d076.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

BIN
img/clem-onojegaw.0d005146.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 KiB

BIN
img/clem-onojeghuo.f8f6718a.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
img/cynthia-del-rio.3a7ae9b9.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
img/kendall.5a0e395b.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
img/landing.2b3c2086.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

BIN
img/mariya-georgieva.a30894f5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
img/olu-eletu.d9bcce95.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
img/profile.c41733a7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

BIN
img/profile_city.34978eae.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 KiB

BIN
img/studio-1.81052b5d.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
img/studio-2.e5575124.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 KiB

BIN
img/studio-3.a0bb3376.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

BIN
img/studio-4.fb23554d.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
img/studio-5.733c99d7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

1
index.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.png><title>Vue Material Kit by Creative Tim</title><link rel=stylesheet type=text/css href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"><link rel=stylesheet href="//fonts.googleapis.com/icon?family=Material+Icons"><link href=https://use.fontawesome.com/releases/v5.0.8/css/all.css rel=stylesheet><link href=/css/app.6baefbc1.css rel=preload as=style><link href=/css/chunk-vendors.590efd76.css rel=preload as=style><link href=/js/app.845f3a7d.js rel=preload as=script><link href=/js/chunk-vendors.829fdb7d.js rel=preload as=script><link href=/css/chunk-vendors.590efd76.css rel=stylesheet><link href=/css/app.6baefbc1.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-material-kit doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.829fdb7d.js></script><script src=/js/app.845f3a7d.js></script></body></html>

2
js/app.845f3a7d.js Normal file
View File

File diff suppressed because one or more lines are too long

1
js/app.845f3a7d.js.map Normal file
View File

File diff suppressed because one or more lines are too long

89
js/chunk-vendors.829fdb7d.js Normal file
View File

File diff suppressed because one or more lines are too long

1
js/chunk-vendors.829fdb7d.js.map Normal file
View File

File diff suppressed because one or more lines are too long