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

packgage.json updated all + lint all

Browse Source
This commit is contained in:
Dragos 2019-02-12 10:58:11 +02:00
parent 0c901bcf16
commit ca05dde708
26 changed files with 1339 additions and 745 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
package.json
View File

@ -1,33 +1,33 @@
{
"name": "vue-material-kit",
"author": "Dragos Ct <dragos@creative-tim.com>",
"author": "Creative Tim https://www.creative-tim.com/",
"description": "Vue Material Kit",
"version": "1.0.1",
"version": "1.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"dev": "npm run serve",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run dev"
},
"dependencies": {
"nouislider": "11.1.0",
"nouislider": "13.1.0",
"v-tooltip": "2.0.0-rc.33",
"vue": "2.5.17",
"vue-carousel": "0.13.1",
"vue": "2.6.6",
"vue-carousel": "0.17.0",
"vue-clickaway": "2.2.2",
"vue-lazyload": "1.2.6",
"vue-material": "1.0.0-beta-10.2",
"vue-router": "3.0.1"
"vue-router": "3.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "3.0.1",
"@vue/cli-plugin-eslint": "3.0.1",
"@vue/cli-service": "3.0.1",
"@vue/eslint-config-prettier": "3.0.1",
"node-sass": "4.9.3",
"@vue/cli-plugin-babel": "3.4.0",
"@vue/cli-plugin-eslint": "3.4.0",
"@vue/cli-service": "3.4.0",
"@vue/eslint-config-prettier": "4.0.1",
"node-sass": "4.11.0",
"sass-loader": "7.1.0",
"vue-template-compiler": "2.5.17"
"vue-template-compiler": "2.6.6"
}
}

3
src/components/Badge.vue
View File

@ -30,5 +30,4 @@ export default {
}
};
</script>
<style>
</style>
<style></style>

16
src/components/Dropdown.vue
View File

@ -1,13 +1,19 @@
<template>
<div :class="[
<div
:class="[
{ open: isOpen },
{'dropdown': direction === 'down'},
{'dropup': direction ==='up'}
{ dropdown: direction === 'down' },
{ dropup: direction === 'up' }
]"
@click="toggleDropDown"
v-click-outside="closeDropDown">
v-click-outside="closeDropDown"
>
<slot name="title">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
<a
class="dropdown-toggle"
data-toggle="dropdown"
href="javascript:void(0)"
>
<i :class="icon"></i>
<p>{{ title }}</p>
</a>

1
src/components/Modal.vue
View File

@ -3,7 +3,6 @@
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container" v-click-outside="closeModal">
<div class="modal-header">
<slot name="header"></slot>
</div>

24
src/components/Pagination.vue
View File

@ -1,20 +1,32 @@
<template>
<ul class="pagination" :class="paginationClass">
<li class="page-item prev-page" :class="{'disabled': value === 1, 'no-arrows': noArrows}">
<li
class="page-item prev-page"
:class="{ disabled: value === 1, 'no-arrows': noArrows }"
>
<a class="page-link" aria-label="Previous" @click="prevPage">
<template v-if="withText">Prev</template>
<template v-if="withText"
>Prev</template
>
<i class="fas fa-angle-double-left" v-else></i>
</a>
</li>
<li class="page-item"
<li
class="page-item"
v-for="item in range(minPage, maxPage)"
:key="item"
:class="{active: value === item}">
:class="{ active: value === item }"
>
<a class="page-link" @click="changePage(item)">{{ item }}</a>
</li>
<li class="page-item page-pre next-page" :class="{ 'disabled': value === totalPages, 'no-arrows': noArrows}">
<li
class="page-item page-pre next-page"
:class="{ disabled: value === totalPages, 'no-arrows': noArrows }"
>
<a class="page-link" aria-label="Next" @click="nextPage">
<template v-if="withText">Next</template>
<template v-if="withText"
>Next</template
>
<i class="fas fa-angle-double-right" v-else></i>
</a>
</li>

9
src/components/Slider.vue
View File

@ -1,9 +1,5 @@
<template>
<div class="slider"
:class="[`slider-${type}`]"
:disabled="disabled">
</div>
<div class="slider" :class="[`slider-${type}`]" :disabled="disabled"></div>
</template>
<script>
import noUiSlider from "nouislider";
@ -86,5 +82,4 @@ export default {
}
};
</script>
<style>
</style>
<style></style>

20
src/components/Tabs.vue
View File

@ -1,13 +1,13 @@
<template>
<md-card class="md-card-tabs"
<md-card
class="md-card-tabs"
:class="[
{ 'flex-column': flexColumn },
{ 'nav-pills-icons': navPillsIcons },
{ 'md-card-plain': plain }
]">
<md-card-header slot="header-title">
</md-card-header>
]"
>
<md-card-header slot="header-title"> </md-card-header>
<md-card-content>
<md-list class="nav-tabs">
@ -17,7 +17,9 @@
:key="item"
:class="[
{ active: isActivePanel(tabName[index]) },
{[getColorButton(colorButton)]: isActivePanel(tabName[index])}]">
{ [getColorButton(colorButton)]: isActivePanel(tabName[index]) }
]"
>
{{ tabName[index] }}
<md-icon v-if="navPillsIcons">{{ tabIcon[index] }}</md-icon>
</md-list-item>
@ -29,7 +31,8 @@
:class="getTabContent(index + 1)"
v-for="(item, index) in tabName"
:key="item"
v-if="isActivePanel(tabName[index])">
v-if="isActivePanel(tabName[index])"
>
<slot :name="getTabContent(index + 1)">
This is the default text!
</slot>
@ -75,5 +78,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>

3
src/components/cards/LoginCard.vue
View File

@ -46,5 +46,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>

5
src/components/cards/NavTabsCard.vue
View File

@ -1,5 +1,8 @@
<template>
<md-card class="md-card-nav-tabs" :class="{'no-label': noLabel, 'md-card-plain': tabsPlain}">
<md-card
class="md-card-nav-tabs"
:class="{ 'no-label': noLabel, 'md-card-plain': tabsPlain }"
>
<md-card-content>
<slot name="content"></slot>
</md-card-content>

12
src/layout/MainFooter.vue
View File

@ -1,7 +1,9 @@
<template>
<footer class="footer"
<footer
class="footer"
:class="{ [`footer-${type}`]: type }"
:data-background-color="backgroundColor">
:data-background-color="backgroundColor"
>
<div class="container">
<nav>
<ul>
@ -29,7 +31,8 @@
</nav>
<div class="copyright">
&copy; {{ year }}, made with <md-icon>favorite</md-icon> by
<a href="https://www.creative-tim.com/" target="_blank">Creative Tim</a> for a better web.
<a href="https://www.creative-tim.com/" target="_blank">Creative Tim</a>
for a better web.
</div>
</div>
</footer>
@ -47,5 +50,4 @@ export default {
}
};
</script>
<style>
</style>
<style></style>

79
src/layout/MainNavbar.vue
View File

@ -1,11 +1,21 @@
<template>
<md-toolbar id="toolbar" md-elevation="0" class="md-transparent md-absolute" :class="extraNavClasses" :color-on-scroll="colorOnScroll">
<md-toolbar
id="toolbar"
md-elevation="0"
class="md-transparent md-absolute"
:class="extraNavClasses"
:color-on-scroll="colorOnScroll"
>
<div class="md-toolbar-row md-collapse-lateral">
<div class="md-toolbar-section-start">
<h3 class="md-title">Vue Material Kit</h3>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-toolbar-toggle" :class="{toggled: toggledClass}" @click="toggleNavbarMobile()">
<md-button
class="md-just-icon md-simple md-toolbar-toggle"
:class="{ toggled: toggledClass }"
@click="toggleNavbarMobile()"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@ -18,10 +28,17 @@
</mobile-menu>
<md-list>
<li class="md-list-item" v-if="!showDownload">
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
<a
href="javascript:void(0)"
class="md-list-item-router md-list-item-container md-button-clean dropdown"
>
<div class="md-list-item-content">
<drop-down direction="down">
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
<md-button
slot="title"
class="md-button md-button-link md-white md-simple dropdown-toggle"
data-toggle="dropdown"
>
<i class="material-icons">apps</i>
<p>Components</p>
</md-button>
@ -33,7 +50,9 @@
</a>
</li>
<li>
<a href="https://demos.creative-tim.com/vue-material-kit/documentation/" >
<a
href="https://demos.creative-tim.com/vue-material-kit/documentation/"
>
<i class="material-icons">content_paste</i>
<p>Documentation</p>
</a>
@ -44,21 +63,36 @@
</a>
</li>
<md-list-item href="https://demos.creative-tim.com/vue-material-kit/documentation/" target="_blank" v-if="showDownload">
<md-list-item
href="https://demos.creative-tim.com/vue-material-kit/documentation/"
target="_blank"
v-if="showDownload"
>
<i class="material-icons">content_paste</i>
<p>Documentation</p>
</md-list-item>
<md-list-item href="javascript:void(0)" @click="scrollToElement()" v-if="showDownload">
<md-list-item
href="javascript:void(0)"
@click="scrollToElement()"
v-if="showDownload"
>
<i class="material-icons">cloud_download</i>
<p>Download</p>
</md-list-item>
<li class="md-list-item" v-else>
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
<a
href="javascript:void(0)"
class="md-list-item-router md-list-item-container md-button-clean dropdown"
>
<div class="md-list-item-content">
<drop-down direction="down">
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
<md-button
slot="title"
class="md-button md-button-link md-white md-simple dropdown-toggle"
data-toggle="dropdown"
>
<i class="material-icons">view_carousel</i>
<p>Examples</p>
</md-button>
@ -87,20 +121,35 @@
</a>
</li>
<md-list-item href="https://twitter.com/CreativeTim" target="_blank">
<md-list-item
href="https://twitter.com/CreativeTim"
target="_blank"
>
<i class="fab fa-twitter"></i>
<p class="hidden-lg">Twitter</p>
<md-tooltip md-direction="bottom">Follow us on Twitter</md-tooltip>
<md-tooltip md-direction="bottom"
>Follow us on Twitter</md-tooltip
>
</md-list-item>
<md-list-item href="https://www.facebook.com/CreativeTim" target="_blank">
<md-list-item
href="https://www.facebook.com/CreativeTim"
target="_blank"
>
<i class="fab fa-facebook-square"></i>
<p class="hidden-lg">Facebook</p>
<md-tooltip md-direction="bottom">Like us on Facebook</md-tooltip>
<md-tooltip md-direction="bottom"
>Like us on Facebook</md-tooltip
>
</md-list-item>
<md-list-item href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
<md-list-item
href="https://www.instagram.com/CreativeTimOfficial"
target="_blank"
>
<i class="fab fa-instagram"></i>
<p class="hidden-lg">Instagram</p>
<md-tooltip md-direction="bottom">Follow us on Instagram</md-tooltip>
<md-tooltip md-direction="bottom"
>Follow us on Instagram</md-tooltip
>
</md-list-item>
</md-list>
</div>

5
src/layout/MobileMenu.vue
View File

@ -1,5 +1,8 @@
<template>
<md-list class="nav-mobile-menu nav-mobile-section-start" v-if="navMobileSectionStart === 'true'">
<md-list
class="nav-mobile-menu nav-mobile-section-start"
v-if="navMobileSectionStart === 'true'"
>
<slot></slot>
</md-list>
</template>

145
src/views/Index.vue
View File

@ -4,16 +4,15 @@
<div class="md-layout">
<div class="md-layout-item">
<div class="image-wrapper">
<img :src="leaf4" alt="leaf4" class="leaf4" v-show="leafShow">
<img :src="leaf3" alt="leaf3" class="leaf3" v-show="leafShow">
<img :src="leaf2" alt="leaf2" class="leaf2" v-show="leafShow">
<img :src="leaf1" alt="leaf1" class="leaf1" v-show="leafShow">
<img :src="leaf4" alt="leaf4" class="leaf4" v-show="leafShow" />
<img :src="leaf3" alt="leaf3" class="leaf3" v-show="leafShow" />
<img :src="leaf2" alt="leaf2" class="leaf2" v-show="leafShow" />
<img :src="leaf1" alt="leaf1" class="leaf1" v-show="leafShow" />
<div class="brand">
<h1>Vue Material Kit</h1>
<h3>A Badass Vue.js UI Kit made with Material Design.</h3>
</div>
</div>
</div>
</div>
</parallax>
@ -63,9 +62,16 @@
<div class="section">
<div class="container text-center">
<div class="md-layout">
<div class="md-layout-item md-size-66 md-xsmall-size-100 ml-auto mr-auto text-center">
<div
class="md-layout-item md-size-66 md-xsmall-size-100 ml-auto mr-auto text-center"
>
<h2>Completed with examples</h2>
<h4>The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.</h4>
<h4>
The kit comes with three pre-built pages to help you get started
faster. You can change the text and images and you're good to
go. More importantly, looking at them will give you a picture of
what you can built with this powerful kit.
</h4>
</div>
</div>
</div>
@ -73,16 +79,30 @@
<div class="section section-signup page-header" :style="signupImage">
<div class="container">
<div class="md-layout">
<div class="md-layout-item md-size-33 md-medium-size-40 md-small-size-50 md-xsmall-size-70 mx-auto text-center">
<div
class="md-layout-item md-size-33 md-medium-size-40 md-small-size-50 md-xsmall-size-70 mx-auto text-center"
>
<login-card header-color="green">
<h4 slot="title" class="card-title">Login</h4>
<md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
<md-button
slot="buttons"
href="javascript:void(0)"
class="md-just-icon md-simple md-white"
>
<i class="fab fa-facebook-square"></i>
</md-button>
<md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
<md-button
slot="buttons"
href="javascript:void(0)"
class="md-just-icon md-simple md-white"
>
<i class="fab fa-twitter"></i>
</md-button>
<md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
<md-button
slot="buttons"
href="javascript:void(0)"
class="md-just-icon md-simple md-white"
>
<i class="fab fa-google-plus-g"></i>
</md-button>
<p slot="description" class="description">Or Be Classical</p>
@ -111,7 +131,9 @@
</div>
<div class="md-layout">
<div class="md-layout-item text-center">
<md-button href="#/login" class="md-simple md-success md-lg">View Login Page</md-button>
<md-button href="#/login" class="md-simple md-success md-lg"
>View Login Page</md-button
>
</div>
</div>
<div class="section section-examples">
@ -119,15 +141,27 @@
<div class="md-layout">
<div class="md-layout-item">
<a href="#/landing" target="_blank">
<img :src="landing" alt="Rounded Image" class="img-raised rounded img-fluid">
<img
:src="landing"
alt="Rounded Image"
class="img-raised rounded img-fluid"
/>
</a>
<md-button href="#/landing" class="md-simple md-success md-lg">View Landing Page</md-button>
<md-button href="#/landing" class="md-simple md-success md-lg"
>View Landing Page</md-button
>
</div>
<div class="md-layout-item">
<a href="#/profile" target="_blank">
<img :src="profile" alt="Rounded Image" class="img-raised rounded img-fluid">
<img
:src="profile"
alt="Rounded Image"
class="img-raised rounded img-fluid"
/>
</a>
<md-button href="#/profile" class="md-simple md-success md-lg">View Profile Page</md-button>
<md-button href="#/profile" class="md-simple md-success md-lg"
>View Profile Page</md-button
>
</div>
</div>
</div>
@ -137,24 +171,71 @@
<div class="md-layout text-center">
<div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
<h2>Do you love this UI Kit?</h2>
<h4>Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from <a href="https://themeisle.com/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" target="_blank">ThemeIsle</a> created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!</h4>
<h4>
Cause if you do, it can be yours for FREE. Hit the buttons below
to navigate to our website where you can find the kit. Our
friends from
<a
href="https://themeisle.com/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website"
target="_blank"
>ThemeIsle</a
>
created a Wordpress Theme which can be also downloaded for free.
Start a new project or give an old Bootstrap project a new look!
</h4>
</div>
<div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
<md-button href="https://www.creative-tim.com/product/material-kit" target="_blank" class="md-success md-lg"><i class="fab fa-html5"></i> Free HTML Download</md-button>
<md-button href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" class="md-success md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button>
<md-button
href="https://www.creative-tim.com/product/material-kit"
target="_blank"
class="md-success md-lg"
><i class="fab fa-html5"></i> Free HTML Download</md-button
>
<md-button
href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website"
class="md-success md-lg"
target="_blank"
><i class="fab fa-wordpress"></i> Wordpress Theme</md-button
>
</div>
</div>
<br><br>
<br /><br />
<div class="md-layout text-center">
<div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
<h2>Want more?</h2>
<h4>We've just launched <a href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-mk-demos" target="_blank">Vue Material Dashboard PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
<h4>
We've just launched
<a
href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-mk-demos"
target="_blank"
>Vue Material Dashboard PRO</a
>
and
<a
href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos"
target="_blank"
>Vue Material Kit PRO</a
>. Every product has a huge number of components, sections and
example pages. Start Your Development With A Badass Bootstrap UI
Kit inspired by Material Design.
</h4>
</div>
<div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
<div class="btn-container">
<md-button href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos" class="md-button md-success md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button>
<md-button href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmd-demos" class="md-button md-success md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Dashboard PRO</md-button>
<md-button
href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos"
class="md-button md-success md-lg md-upgrade"
target="_blank"
><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button
>
<md-button
href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmd-demos"
class="md-button md-success md-lg md-upgrade"
target="_blank"
><md-icon>unarchive</md-icon>Vue Material Dashboard
PRO</md-button
>
</div>
</div>
</div>
@ -166,17 +247,23 @@
</div>
</div>
<md-button class="md-twitter"><i class="fab fa-twitter"></i>Tweet</md-button>
<md-button class="md-facebook"><i class="fab fa-facebook-square"></i> Share</md-button>
<md-button class="md-google"><i class="fab fa-google-plus"></i> Share</md-button>
<md-button class="md-github"><i class="fab fa-github"></i> Star</md-button>
<md-button class="md-twitter"
><i class="fab fa-twitter"></i>Tweet</md-button
>
<md-button class="md-facebook"
><i class="fab fa-facebook-square"></i> Share</md-button
>
<md-button class="md-google"
><i class="fab fa-google-plus"></i> Share</md-button
>
<md-button class="md-github"
><i class="fab fa-github"></i> Star</md-button
>
</div>
</div>
</div>
</div>
</div>
</template>
<script>

155
src/views/Landing.vue
View File

@ -3,11 +3,23 @@
<parallax class="section page-header header-filter" :style="headerStyle">
<div class="container">
<div class="md-layout">
<div class="md-layout-item md-size-50 md-small-size-70 md-xsmall-size-100">
<div
class="md-layout-item md-size-50 md-small-size-70 md-xsmall-size-100"
>
<h1 class="title">Your Story Starts With Us.</h1>
<h4>Every landing page needs a small description after the big bold title, that's why we added this text here. Add here all the information that can make you or your product create the first impression.</h4>
<br>
<md-button href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="md-success md-lg" target="_blank"><i class="fas fa-play"></i> Watch video</md-button>
<h4>
Every landing page needs a small description after the big bold
title, that's why we added this text here. Add here all the
information that can make you or your product create the first
impression.
</h4>
<br />
<md-button
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
class="md-success md-lg"
target="_blank"
><i class="fas fa-play"></i> Watch video</md-button
>
</div>
</div>
</div>
@ -16,9 +28,17 @@
<div class="section">
<div class="container">
<div class="md-layout">
<div class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto text-center">
<div
class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto text-center"
>
<h2 class="title text-center">Let's talk product</h2>
<h5 class="description">This is the paragraph where you can write more details about your product. Keep you user engaged by providing meaningful information. Remember that by this time, the user is curious, otherwise he wouldn't scroll to get here. Add a button if you want the user to see more.</h5>
<h5 class="description">
This is the paragraph where you can write more details about
your product. Keep you user engaged by providing meaningful
information. Remember that by this time, the user is curious,
otherwise he wouldn't scroll to get here. Add a button if you
want the user to see more.
</h5>
</div>
</div>
<div class="features text-center">
@ -29,7 +49,11 @@
<md-icon>chat</md-icon>
</div>
<h4 class="info-title">Free Chat</h4>
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
<p>
Divide details about your product or agency work into parts.
Write a few lines about each one. A paragraph describing a
feature will be enough.
</p>
</div>
</div>
<div class="md-layout-item md-medium-size-33 md-small-size-100">
@ -38,7 +62,11 @@
<md-icon>verified_user</md-icon>
</div>
<h4 class="info-title">Verified Users</h4>
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
<p>
Divide details about your product or agency work into parts.
Write a few lines about each one. A paragraph describing a
feature will be enough.
</p>
</div>
</div>
<div class="md-layout-item md-medium-size-33 md-small-size-100">
@ -47,7 +75,11 @@
<md-icon>fingerprint</md-icon>
</div>
<h4 class="info-title">Fingerprint</h4>
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
<p>
Divide details about your product or agency work into parts.
Write a few lines about each one. A paragraph describing a
feature will be enough.
</p>
</div>
</div>
</div>
@ -63,25 +95,44 @@
<div class="team-player">
<md-card class="md-card-plain">
<div class="md-layout-item md-size-50 mx-auto">
<img :src="teamImg1" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
<img
:src="teamImg1"
alt="Thumbnail Image"
class="img-raised rounded-circle img-fluid"
/>
</div>
<h4 class="card-title">Gigi Hadid
<br>
<h4 class="card-title">
Gigi Hadid
<br />
<small class="card-description text-muted">Model</small>
</h4>
<md-card-content>
<p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
<p class="card-description">
You can write here details about one of your team
members. You can give more details about what they do.
Feel free to add some <a href="#">links</a> for people
to be able to follow them outside the site.
</p>
</md-card-content>
<md-card-actions class="text-center">
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple"
>
<i class="fab fa-twitter"></i>
</md-button>
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple"
>
<i class="fab fa-instagram"></i>
</md-button>
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple"
>
<i class="fab fa-facebook-square"></i>
</md-button>
</md-card-actions>
@ -92,22 +143,40 @@
<div class="team-player">
<md-card class="md-card-plain">
<div class="md-layout-item md-size-50 mx-auto">
<img :src="teamImg2" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
<img
:src="teamImg2"
alt="Thumbnail Image"
class="img-raised rounded-circle img-fluid"
/>
</div>
<h4 class="card-title">Carla Hortensia
<br>
<small class="card-description text-muted">Designer</small>
<h4 class="card-title">
Carla Hortensia
<br />
<small class="card-description text-muted"
>Designer</small
>
</h4>
<md-card-content>
<p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
<p class="card-description">
You can write here details about one of your team
members. You can give more details about what they do.
Feel free to add some <a href="#">links</a> for people
to be able to follow them outside the site.
</p>
</md-card-content>
<md-card-actions class="text-center">
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple"
>
<i class="fab fa-twitter"></i>
</md-button>
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple"
>
<i class="fab fa-linkedin"></i>
</md-button>
</md-card-actions>
@ -118,25 +187,44 @@
<div class="team-player">
<md-card class="md-card-plain">
<div class="md-layout-item md-size-50 mx-auto">
<img :src="teamImg3" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
<img
:src="teamImg3"
alt="Thumbnail Image"
class="img-raised rounded-circle img-fluid"
/>
</div>
<h4 class="card-title">Kendall Jenner
<br>
<h4 class="card-title">
Kendall Jenner
<br />
<small class="card-description text-muted">Model</small>
</h4>
<md-card-content>
<p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
<p class="card-description">
You can write here details about one of your team
members. You can give more details about what they do.
Feel free to add some <a href="#">links</a> for people
to be able to follow them outside the site.
</p>
</md-card-content>
<md-card-actions class="text-center">
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple"
>
<i class="fab fa-twitter"></i>
</md-button>
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple"
>
<i class="fab fa-instagram"></i>
</md-button>
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple"
>
<i class="fab fa-facebook-square"></i>
</md-button>
</md-card-actions>
@ -152,7 +240,12 @@
<div class="md-layout">
<div class="md-layout-item md-size-66 md-xsmall-size-100 mx-auto">
<h2 class="text-center title">Work with us</h2>
<h4 class="text-center description">Divide details about your product or agency work into parts. Write a few lines about each one and contact us about any further collaboration. We will responde get back to you in a couple of hours.</h4>
<h4 class="text-center description">
Divide details about your product or agency work into parts.
Write a few lines about each one and contact us about any
further collaboration. We will responde get back to you in a
couple of hours.
</h4>
<form class="contact-form">
<div class="md-layout">
<div class="md-layout-item md-size-50">

25
src/views/Login.vue
View File

@ -3,16 +3,30 @@
<div class="section page-header header-filter" :style="headerStyle">
<div class="container">
<div class="md-layout">
<div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto">
<div
class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto"
>
<login-card header-color="green">
<h4 slot="title" class="card-title">Login</h4>
<md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
<md-button
slot="buttons"
href="javascript:void(0)"
class="md-just-icon md-simple md-white"
>
<i class="fab fa-facebook-square"></i>
</md-button>
<md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
<md-button
slot="buttons"
href="javascript:void(0)"
class="md-just-icon md-simple md-white"
>
<i class="fab fa-twitter"></i>
</md-button>
<md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
<md-button
slot="buttons"
href="javascript:void(0)"
class="md-just-icon md-simple md-white"
>
<i class="fab fa-google-plus-g"></i>
</md-button>
<p slot="description" class="description">Or Be Classical</p>
@ -73,5 +87,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>

68
src/views/Profile.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="wrapper">
<parallax class="section page-header header-filter" :style="headerStyle"></parallax>
<parallax
class="section page-header header-filter"
:style="headerStyle"
></parallax>
<div class="main main-raised">
<div class="section profile-content">
<div class="container">
@ -8,20 +11,41 @@
<div class="md-layout-item md-size-50 mx-auto">
<div class="profile">
<div class="avatar">
<img :src="img" alt="Circle Image" class="img-raised rounded-circle img-fluid">
<img
:src="img"
alt="Circle Image"
class="img-raised rounded-circle img-fluid"
/>
</div>
<div class="name">
<h3 class="title">Carla Hortensia</h3>
<h6>Designer</h6>
<md-button href="javascript:void(0)" class="md-just-icon md-simple md-dribbble"><i class="fab fa-dribbble"></i></md-button>
<md-button href="javascript:void(0)" class="md-just-icon md-simple md-twitter"><i class="fab fa-twitter"></i></md-button>
<md-button href="javascript:void(0)" class="md-just-icon md-simple md-pinterest"><i class="fab fa-pinterest"></i></md-button>
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple md-dribbble"
><i class="fab fa-dribbble"></i
></md-button>
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple md-twitter"
><i class="fab fa-twitter"></i
></md-button>
<md-button
href="javascript:void(0)"
class="md-just-icon md-simple md-pinterest"
><i class="fab fa-pinterest"></i
></md-button>
</div>
</div>
</div>
</div>
<div class="description text-center">
<p>An artist of considerable range, Chet Faker — the name taken by Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. </p>
<p>
An artist of considerable range, Chet Faker — the name taken by
Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs
and records all of his own music, giving it a warm, intimate feel
with a solid groove structure.
</p>
</div>
<div class="profile-tabs">
<tabs
@ -29,44 +53,44 @@
:tab-icon="['camera', 'palette', 'favorite']"
plain
nav-pills-icons
color-button="success">
color-button="success"
>
<!-- here you can add your content for tab-content -->
<template slot="tab-pane-1">
<div class="md-layout">
<div class="md-layout-item md-size-25 ml-auto">
<img :src="tabPane1[0].image" class="rounded">
<img :src="tabPane1[1].image" class="rounded">
<img :src="tabPane1[0].image" class="rounded" />
<img :src="tabPane1[1].image" class="rounded" />
</div>
<div class="md-layout-item md-size-25 mr-auto">
<img :src="tabPane1[3].image" class="rounded">
<img :src="tabPane1[2].image" class="rounded">
<img :src="tabPane1[3].image" class="rounded" />
<img :src="tabPane1[2].image" class="rounded" />
</div>
</div>
</template>
<template slot="tab-pane-2">
<div class="md-layout">
<div class="md-layout-item md-size-25 ml-auto">
<img :src="tabPane2[0].image" class="rounded">
<img :src="tabPane2[1].image" class="rounded">
<img :src="tabPane2[2].image" class="rounded">
<img :src="tabPane2[0].image" class="rounded" />
<img :src="tabPane2[1].image" class="rounded" />
<img :src="tabPane2[2].image" class="rounded" />
</div>
<div class="md-layout-item md-size-25 mr-auto">
<img :src="tabPane2[3].image" class="rounded">
<img :src="tabPane2[4].image" class="rounded">
<img :src="tabPane2[3].image" class="rounded" />
<img :src="tabPane2[4].image" class="rounded" />
</div>
</div>
</template>
<template slot="tab-pane-3">
<div class="md-layout">
<div class="md-layout-item md-size-25 ml-auto">
<img :src="tabPane3[0].image" class="rounded">
<img :src="tabPane3[1].image" class="rounded">
<img :src="tabPane3[0].image" class="rounded" />
<img :src="tabPane3[1].image" class="rounded" />
</div>
<div class="md-layout-item md-size-25 mr-auto">
<img :src="tabPane3[2].image" class="rounded">
<img :src="tabPane3[3].image" class="rounded">
<img :src="tabPane3[4].image" class="rounded">
<img :src="tabPane3[2].image" class="rounded" />
<img :src="tabPane3[3].image" class="rounded" />
<img :src="tabPane3[4].image" class="rounded" />
</div>
</div>
</template>

105
src/views/components/BasicElementsSection.vue
View File

@ -2,7 +2,8 @@
<div class="wrapper">
<div id="buttons">
<div class="title">
<h3>Buttons <br>
<h3>
Buttons <br />
<small>Pick your style</small>
</h3>
</div>
@ -10,8 +11,12 @@
<div class="md-layout-item md-size-66 mx-auto">
<md-button class="md-primary">Default</md-button>
<md-button class="md-primary md-round">Round</md-button>
<md-button class="md-primary"><md-icon >favorite</md-icon> With Icon</md-button>
<md-button class="md-primary md-just-icon md-round"><md-icon >favorite</md-icon></md-button>
<md-button class="md-primary"
><md-icon>favorite</md-icon> With Icon</md-button
>
<md-button class="md-primary md-just-icon md-round"
><md-icon>favorite</md-icon></md-button
>
<md-button class="md-primary md-simple">Simple</md-button>
</div>
</div>
@ -51,41 +56,59 @@
<h3>Inputs</h3>
</div>
<div class="md-layout">
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<md-field>
<md-input v-model="initial" placeholder="Regular"></md-input>
</md-field>
</div>
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<md-field>
<label>With Floating Label</label>
<md-input v-model="floatingLabel" type="text"></md-input>
</md-field>
</div>
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<md-field class="md-valid">
<label>Success Input</label>
<md-input v-model="success" type="text"></md-input>
<md-icon>done</md-icon>
</md-field>
</div>
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<md-field class="md-error">
<label>Error Input</label>
<md-input v-model="error" type="text"></md-input>
<md-icon>clear</md-icon>
</md-field>
</div>
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<md-field class="md-form-group">
<md-icon>face</md-icon>
<md-input v-model="withMIcon" placeholder="With Material Icons"></md-input>
<md-input
v-model="withMIcon"
placeholder="With Material Icons"
></md-input>
</md-field>
</div>
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<md-field class="md-form-group">
<i class="fas fa-users"></i>
<md-input v-model="withFaIcon" placeholder="With Font Awesome Icons"></md-input>
<md-input
v-model="withFaIcon"
placeholder="With Font Awesome Icons"
></md-input>
</md-field>
</div>
</div>
@ -97,29 +120,43 @@
<!-- Checkboxes/Radios/Toggle -->
<div id="checkRadios">
<div class="md-layout">
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<div class="title">
<h3>Checkboxes</h3>
</div>
<div class="flex-column">
<md-checkbox v-model="checkbox1">Checked</md-checkbox>
<md-checkbox v-model="checkbox2">Unchecked</md-checkbox>
<md-checkbox v-model="checkbox3" disabled>Disabled Checked</md-checkbox>
<md-checkbox v-model="checkbox4" disabled>Disabled Unchecked</md-checkbox>
<md-checkbox v-model="checkbox3" disabled
>Disabled Checked</md-checkbox
>
<md-checkbox v-model="checkbox4" disabled
>Disabled Unchecked</md-checkbox
>
</div>
</div>
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<div class="title">
<h3>Radios</h3>
</div>
<div class="flex-column">
<md-radio v-model="radio1" :value="true">Radio is on</md-radio>
<md-radio v-model="radio1" :value="false">Radio is off</md-radio>
<md-radio v-model="radio2" :value="true" disabled>Disabled Radio is on</md-radio>
<md-radio v-model="radio2" :value="false" disabled>Disabled Radio is off</md-radio>
<md-radio v-model="radio2" :value="true" disabled
>Disabled Radio is on</md-radio
>
<md-radio v-model="radio2" :value="false" disabled
>Disabled Radio is off</md-radio
>
</div>
</div>
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
<div
class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25"
>
<div class="title">
<h3>Toggle Buttons</h3>
</div>
@ -141,24 +178,33 @@
<div class="title">
<h3>Progress</h3>
</div>
<md-progress-bar class="md-primary" :md-value="amount"></md-progress-bar>
<md-progress-bar class="md-info" :md-value="amount2"></md-progress-bar>
<md-progress-bar class="md-warning" md-mode="buffer" :md-value="buffer" :md-buffer="buffer"></md-progress-bar>
<md-progress-bar
class="md-primary"
:md-value="amount"
></md-progress-bar>
<md-progress-bar
class="md-info"
:md-value="amount2"
></md-progress-bar>
<md-progress-bar
class="md-warning"
md-mode="buffer"
:md-value="buffer"
:md-buffer="buffer"
></md-progress-bar>
</div>
<div class="md-layout-item md-size-50 md-xsmall-size-100">
<div class="title">
<h3>Pagination</h3>
</div>
<pagination
no-arrows
v-model="defaultPagination"
:page-count="5">
<pagination no-arrows v-model="defaultPagination" :page-count="5">
</pagination>
<pagination
class="pagination-info"
v-model="infoPagination"
with-text
:page-count="5">
:page-count="5"
>
</pagination>
</div>
</div>
@ -174,12 +220,9 @@
<div class="title">
<h3>Sliders</h3>
</div>
<slider v-model="sliders.simple">
</slider>
<slider v-model="sliders.simple"> </slider>
<slider v-model="sliders.rangeSlider"
type="info"
:connect="true">
<slider v-model="sliders.rangeSlider" type="info" :connect="true">
</slider>
</div>
<div class="md-layout-item md-size-50 md-xsmall-size-100">

80
src/views/components/JavascriptComponentsSection.vue
View File

@ -11,22 +11,45 @@
</div>
<div class="md-layout">
<div class="md-layout-item md-size-33">
<md-button class="md-success md-block" @click="classicModal = true"><md-icon>library_books</md-icon> Classic</md-button>
<md-button
class="md-success md-block"
@click="classicModal = true"
><md-icon>library_books</md-icon> Classic</md-button
>
<modal v-if="classicModal" @close="classicModalHide">
<template slot="header">
<h4 class="modal-title">Modal Title</h4>
<md-button class="md-simple md-just-icon md-round modal-default-button" @click="classicModalHide">
<md-button
class="md-simple md-just-icon md-round modal-default-button"
@click="classicModalHide"
>
<md-icon>clear</md-icon>
</md-button>
</template>
<template slot="body">
<p>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.</p>
<p>
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.
</p>
</template>
<template slot="footer">
<md-button class="md-simple">Nice Button</md-button>
<md-button class="md-danger md-simple" @click="classicModalHide">Close</md-button>
<md-button
class="md-danger md-simple"
@click="classicModalHide"
>Close</md-button
>
</template>
</modal>
</div>
@ -48,48 +71,45 @@
</div>
<div class="md-layout">
<div class="md-layout-item">
<v-popover
offset="8"
placement="left"
>
<v-popover offset="8" placement="left">
<md-button>On left</md-button>
<template slot="popover">
<h3 class="popover-header">Popover on left</h3>
<div class="popover-body">Here will be some very useful information about his popover. Here will be some very useful information about his popover.</div>
<div class="popover-body">
Here will be some very useful information about his popover.
Here will be some very useful information about his popover.
</div>
</template>
</v-popover>
<v-popover
offset="4"
placement="top"
>
<v-popover offset="4" placement="top">
<md-button>On top</md-button>
<template slot="popover">
<h3 class="popover-header">Popover on top</h3>
<div class="popover-body">Here will be some very useful information about his popover.</div>
<div class="popover-body">
Here will be some very useful information about his popover.
</div>
</template>
</v-popover>
<v-popover
offset="4"
placement="bottom"
>
<v-popover offset="4" placement="bottom">
<md-button>On bottom</md-button>
<template slot="popover">
<h3 class="popover-header">Popover on bottom</h3>
<div class="popover-body">Here will be some very useful information about his popover.</div>
<div class="popover-body">
Here will be some very useful information about his popover.
</div>
</template>
</v-popover>
<v-popover
offset="8"
placement="right"
>
<v-popover offset="8" placement="right">
<md-button>On right</md-button>
<template slot="popover">
<h3 class="popover-header">Popover on right</h3>
<div class="popover-body">Here will be some very useful information about his popover.</div>
<div class="popover-body">
Here will be some very useful information about his popover.
</div>
</template>
</v-popover>
</div>
@ -122,7 +142,7 @@
</div>
</div>
</div>
<br>
<br />
<div class="title">
<h3>Carousel</h3>
</div>
@ -138,7 +158,8 @@
:mouse-drag="false"
navigationEnabled
navigationNextLabel="<i class='material-icons'>keyboard_arrow_right</i>"
navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>">
navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>"
>
<slide>
<div class="carousel-caption">
<h4>
@ -146,7 +167,7 @@
Somewhere Beyond, United States
</h4>
</div>
<img :src="carousel1" alt="carousel1">
<img :src="carousel1" alt="carousel1" />
</slide>
<slide>
<div class="carousel-caption">
@ -155,7 +176,7 @@
Yellowstone National Park, United States
</h4>
</div>
<img :src="carousel2" alt="carousel2">
<img :src="carousel2" alt="carousel2" />
</slide>
<slide>
<div class="carousel-caption">
@ -164,11 +185,10 @@
Yellowstone National Park, United States
</h4>
</div>
<img :src="carousel3" alt="carousel3">
<img :src="carousel3" alt="carousel3" />
</slide>
</carousel>
</md-card>
</div>
</div>
</div>

54
src/views/components/NavPillsSection.vue
View File

@ -14,23 +14,31 @@
:tab-icon="['dashboard', 'schedule', 'list']"
plain
nav-pills-icons
color-button="primary">
color-button="primary"
>
<!-- here you can add your content for tab-content -->
<template slot="tab-pane-1">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
<br><br>
Dramatically visualize customer directed convergence without revolutionary ROI.
Collaboratively administrate empowered markets via plug-and-play
networks. Dynamically procrastinate B2C users after installed base
benefits.
<br /><br />
Dramatically visualize customer directed convergence without
revolutionary ROI.
</template>
<template slot="tab-pane-2">
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
<br><br>
Dramatically maintain clicks-and-mortar solutions without functional solutions.
Efficiently unleash cross-media information without cross-media
value. Quickly maximize timely deliverables for real-time schemas.
<br /><br />
Dramatically maintain clicks-and-mortar solutions without
functional solutions.
</template>
<template slot="tab-pane-3">
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
<br><br>
Dynamically innovate resource-leveling customer service for state of the art customer service.
Completely synergize resource taxing relationships via premier
niche markets. Professionally cultivate one-to-one customer
service with robust ideas.
<br /><br />
Dynamically innovate resource-leveling customer service for state
of the art customer service.
</template>
</tabs>
</div>
@ -41,18 +49,23 @@
plain
flex-column
nav-pills-icons
color-button="primary">
color-button="primary"
>
<!-- here you can add your content for tab-content -->
<template slot="tab-pane-1">
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
<br><br>
Dramatically visualize customer directed convergence without revolutionary ROI.
Collaboratively administrate empowered markets via plug-and-play
networks. Dynamically procrastinate B2C users after installed base
benefits.
<br /><br />
Dramatically visualize customer directed convergence without
revolutionary ROI.
</template>
<template slot="tab-pane-2">
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
<br><br>
Dramatically maintain clicks-and-mortar solutions without functional solutions.
Efficiently unleash cross-media information without cross-media
value. Quickly maximize timely deliverables for real-time schemas.
<br /><br />
Dramatically maintain clicks-and-mortar solutions without
functional solutions.
</template>
</tabs>
</div>
@ -71,5 +84,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>

89
src/views/components/NavigationSection.vue
View File

@ -17,19 +17,24 @@
<p>Link</p>
</md-list-item>
</md-list>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
<md-button
class="md-just-icon md-simple md-white md-toolbar-toggle"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</md-button>
<div class="md-collapse">
<div class="md-autocomplete">
<md-autocomplete class="search has-white" v-model="selectedEmployee" :md-options="employees" :md-open-on-focus="false">
<md-autocomplete
class="search has-white"
v-model="selectedEmployee"
:md-options="employees"
:md-open-on-focus="false"
>
<label>Search...</label>
</md-autocomplete>
</div>
@ -43,13 +48,14 @@
<h3 class="md-title">Info Color</h3>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
<md-button
class="md-just-icon md-simple md-white md-toolbar-toggle"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</md-button>
<div class="md-collapse">
<md-list>
<md-list-item to="/">
@ -74,13 +80,14 @@
<h3 class="md-title">Primary Color</h3>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
<md-button
class="md-just-icon md-simple md-white md-toolbar-toggle"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</md-button>
<div class="md-collapse">
<md-list>
<md-list-item to="/">
@ -108,13 +115,14 @@
<h3 class="md-title">Navbar with notification</h3>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
<md-button
class="md-just-icon md-simple md-white md-toolbar-toggle"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</md-button>
<div class="md-collapse">
<md-list>
<md-list-item href="javascript:void(0)">
@ -126,25 +134,47 @@
</md-list-item>
<li class="md-list-item">
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean">
<a
href="javascript:void(0)"
class="md-list-item-router md-list-item-container md-button-clean"
>
<div class="md-list-item-content">
<md-button class="md-rose md-just-icon md-round"><md-icon>email</md-icon></md-button>
<md-button class="md-rose md-just-icon md-round"
><md-icon>email</md-icon></md-button
>
</div>
</a>
</li>
<li class="md-list-item">
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
<a
href="javascript:void(0)"
class="md-list-item-router md-list-item-container md-button-clean dropdown"
>
<div class="md-list-item-content">
<drop-down direction="down" class="profile-photo">
<div class="profile-photo-small" slot="title" data-toggle="dropdown">
<img :src="img" alt="Circle Image">
<div
class="profile-photo-small"
slot="title"
data-toggle="dropdown"
>
<img :src="img" alt="Circle Image" />
</div>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Dropdown header</li>
<li><a href="#pablo" class="dropdown-item">Me</a></li>
<li> <a href="#pablo" class="dropdown-item">Settings and other stuff</a></li>
<li><a href="#pablo" class="dropdown-item">Sign Out</a></li>
<li>
<a href="#pablo" class="dropdown-item">Me</a>
</li>
<li>
<a href="#pablo" class="dropdown-item"
>Settings and other stuff</a
>
</li>
<li>
<a href="#pablo" class="dropdown-item"
>Sign Out</a
>
</li>
</ul>
</drop-down>
</div>
@ -161,13 +191,14 @@
<h3 class="md-title">Navbar with profile</h3>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
<md-button
class="md-just-icon md-simple md-white md-toolbar-toggle"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</md-button>
<div class="md-collapse">
<md-list>
<md-list-item href="javascript:void(0)">
@ -179,9 +210,14 @@
</md-list-item>
<li class="md-list-item">
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean">
<a
href="javascript:void(0)"
class="md-list-item-router md-list-item-container md-button-clean"
>
<div class="md-list-item-content">
<md-button class="md-rose md-round">Register</md-button>
<md-button class="md-rose md-round"
>Register</md-button
>
</div>
</a>
</li>
@ -196,13 +232,14 @@
<h3 class="md-title">Transparent</h3>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
<md-button
class="md-just-icon md-simple md-white md-toolbar-toggle"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</md-button>
<div class="md-collapse">
<md-list>
<md-list-item href="javascript:void(0)">
@ -219,7 +256,6 @@
<i class="fab fa-instagram"></i>
<p>Instagram</p>
</md-list-item>
</md-list>
</div>
</div>
@ -269,5 +305,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>

43
src/views/components/NotificationsSection.vue
View File

@ -3,47 +3,71 @@
<div id="notifications">
<div class="alert alert-info">
<div class="container">
<button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-info')">
<button
type="button"
aria-hidden="true"
class="close"
@click="event => removeNotify(event, 'alert-info')"
>
<md-icon>clear</md-icon>
</button>
<div class="alert-icon">
<md-icon>info_outline</md-icon>
</div>
<b> INFO ALERT </b> : You've got some friends nearby, stop looking at your phone and find them...
<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" @click="event => removeNotify(event,'alert-success')">
<button
type="button"
aria-hidden="true"
class="close"
@click="event => removeNotify(event, 'alert-success')"
>
<md-icon>clear</md-icon>
</button>
<div class="alert-icon">
<md-icon>check</md-icon>
</div>
<b> SUCCESS ALERT </b> : Yuhuuu! You've got your $11.99 album from The Weeknd
<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" @click="event => removeNotify(event,'alert-warning')">
<button
type="button"
aria-hidden="true"
class="close"
@click="event => removeNotify(event, 'alert-warning')"
>
<md-icon>clear</md-icon>
</button>
<div class="alert-icon">
<md-icon>warning</md-icon>
</div>
<b> WARNING ALERT </b> : Hey, it looks like you still have the "copyright © 2015" in your footer. Please update it!
<b> WARNING ALERT </b> : Hey, it looks like you still have the
"copyright © 2015" in your footer. Please update it!
</div>
</div>
<div class="alert alert-danger">
<div class="container">
<button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-danger')">
<button
type="button"
aria-hidden="true"
class="close"
@click="event => removeNotify(event, 'alert-danger')"
>
<md-icon>clear</md-icon>
</button>
<div class="alert-icon">
<md-icon>info_outline</md-icon>
</div>
<b> ERROR ALERT </b> : Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
<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>
@ -64,5 +88,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>

101
src/views/components/SmallNavigationSection.vue
View File

@ -20,21 +20,49 @@
</md-list-item>
<li class="md-list-item">
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
<a
href="javascript:void(0)"
class="md-list-item-router md-list-item-container md-button-clean dropdown"
>
<div class="md-list-item-content">
<drop-down direction="down">
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
<md-button
slot="title"
class="md-button md-button-link md-white md-simple dropdown-toggle"
data-toggle="dropdown"
>
<p>Dropdown</p>
</md-button>
<ul class="dropdown-menu" :class="{'dropdown-menu-right': responsive}">
<ul
class="dropdown-menu"
:class="{ 'dropdown-menu-right': responsive }"
>
<li class="dropdown-header">Dropdown header</li>
<li><a href="#pablo" class="dropdown-item">Action</a></li>
<li> <a href="#pablo" class="dropdown-item">Another action</a></li>
<li><a href="#pablo" class="dropdown-item">Something else here</a></li>
<li>
<a href="#pablo" class="dropdown-item">Action</a>
</li>
<li>
<a href="#pablo" class="dropdown-item"
>Another action</a
>
</li>
<li>
<a href="#pablo" class="dropdown-item"
>Something else here</a
>
</li>
<li class="dropdown-divider"></li>
<li><a href="#pablo" class="dropdown-item">Separated link</a></li>
<li>
<a href="#pablo" class="dropdown-item"
>Separated link</a
>
</li>
<li class="dropdown-divider"></li>
<li><a href="#pablo" class="dropdown-item">One more separated link</a></li>
<li>
<a href="#pablo" class="dropdown-item"
>One more separated link</a
>
</li>
</ul>
</drop-down>
</div>
@ -43,15 +71,15 @@
</md-list>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
<md-button
class="md-just-icon md-simple md-white md-toolbar-toggle"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</md-button>
<div class="md-collapse">
</div>
<div class="md-collapse"></div>
</div>
</div>
</md-toolbar>
@ -64,10 +92,11 @@
<div class="md-toolbar-row">
<div class="md-toolbar-section-start">
<h3 class="md-title">Icons</h3>
</div>
<div class="md-toolbar-section-end">
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
<md-button
class="md-just-icon md-simple md-white md-toolbar-toggle"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@ -84,21 +113,48 @@
</md-list-item>
<li class="md-list-item">
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
<a
href="javascript:void(0)"
class="md-list-item-router md-list-item-container md-button-clean dropdown"
>
<div class="md-list-item-content">
<drop-down direction="down">
<md-button slot="title" class="md-button md-button-link md-white md-simple md-just-icon" data-toggle="dropdown">
<md-button
slot="title"
class="md-button md-button-link md-white md-simple md-just-icon"
data-toggle="dropdown"
>
<md-icon>settings</md-icon>
</md-button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Dropdown header</li>
<li><a href="#pablo" class="dropdown-item">Action</a></li>
<li> <a href="#pablo" class="dropdown-item">Another action</a></li>
<li><a href="#pablo" class="dropdown-item">Something else here</a></li>
<li>
<a href="#pablo" class="dropdown-item"
>Action</a
>
</li>
<li>
<a href="#pablo" class="dropdown-item"
>Another action</a
>
</li>
<li>
<a href="#pablo" class="dropdown-item"
>Something else here</a
>
</li>
<li class="dropdown-divider"></li>
<li><a href="#pablo" class="dropdown-item">Separated link</a></li>
<li>
<a href="#pablo" class="dropdown-item"
>Separated link</a
>
</li>
<li class="dropdown-divider"></li>
<li><a href="#pablo" class="dropdown-item">One more separated link</a></li>
<li>
<a href="#pablo" class="dropdown-item"
>One more separated link</a
>
</li>
</ul>
</drop-down>
</div>
@ -145,5 +201,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>

65
src/views/components/TabsSection.vue
View File

@ -8,17 +8,40 @@
<nav-tabs-card no-label>
<template slot="content">
<md-tabs md-sync-route class="md-primary" md-alignment="left">
<md-tab id="tab-home" md-label="Profile" md-icon="face">
<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>
<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>
</md-tab>
<md-tab id="tab-pages" md-label="Messages" md-icon="chat">
<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>
<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>
</md-tab>
<md-tab id="tab-posts" md-label="Settings" md-icon="build">
<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>
<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>
</md-tab>
</md-tabs>
</template>
@ -29,17 +52,40 @@
<nav-tabs-card no-label tabs-plain>
<template slot="content">
<md-tabs md-sync-route class="md-danger" md-alignment="left">
<md-tab id="tab-home" md-label="Home">
<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>
<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>
</md-tab>
<md-tab id="tab-pages" md-label="Updates">
<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>
<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>
</md-tab>
<md-tab id="tab-posts" md-label="History">
<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>
<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>
</md-tab>
</md-tabs>
</template>
@ -60,5 +106,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>

137
src/views/components/TypographyImagesSection.vue
View File

@ -7,44 +7,77 @@
<div class="md-layout">
<div class="md-layout-item">
<div class="tim-typo">
<h1><span class="tim-note">Header 1</span>The Life of Material Kit </h1>
<h1>
<span class="tim-note">Header 1</span>The Life of Material Kit
</h1>
</div>
<div class="tim-typo">
<h2><span class="tim-note">Header 2</span>The Life of Material Kit</h2>
<h2>
<span class="tim-note">Header 2</span>The Life of Material Kit
</h2>
</div>
<div class="tim-typo">
<h3><span class="tim-note">Header 3</span>The Life of Material Kit</h3>
<h3>
<span class="tim-note">Header 3</span>The Life of Material Kit
</h3>
</div>
<div class="tim-typo">
<h4><span class="tim-note">Header 4</span>The Life of Material Kit</h4>
<h4>
<span class="tim-note">Header 4</span>The Life of Material Kit
</h4>
</div>
<div class="tim-typo">
<h5><span class="tim-note">Header 5</span>The Life of Material Kit</h5>
<h5>
<span class="tim-note">Header 5</span>The Life of Material Kit
</h5>
</div>
<div class="tim-typo">
<h6><span class="tim-note">Header 6</span>The Life of Material Kit</h6>
<h6>
<span class="tim-note">Header 6</span>The Life of Material Kit
</h6>
</div>
<div class="tim-typo">
<h1 class="title"><span class="tim-note">Header 1 Title</span>The Life of Material Kit </h1>
<h1 class="title">
<span class="tim-note">Header 1 Title</span>The Life of Material
Kit
</h1>
</div>
<div class="tim-typo">
<h2 class="title"><span class="tim-note">Header 2 Title</span>The Life of Material Kit</h2>
<h2 class="title">
<span class="tim-note">Header 2 Title</span>The Life of Material
Kit
</h2>
</div>
<div class="tim-typo">
<h3 class="title"><span class="tim-note">Header 3 Title</span>The Life of Material Kit</h3>
<h3 class="title">
<span class="tim-note">Header 3 Title</span>The Life of Material
Kit
</h3>
</div>
<div class="tim-typo">
<h4 class="title"><span class="tim-note">Header 4 Title</span>The Life of Material Kit</h4>
<h4 class="title">
<span class="tim-note">Header 4 Title</span>The Life of Material
Kit
</h4>
</div>
<div class="tim-typo">
<p><span class="tim-note">Paragraph</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&#x2019;s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
<p>
<span class="tim-note">Paragraph</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&#x2019;s a responsibility that I have, to push possibilities,
to show people, this is the level that things could be at.
</p>
</div>
<div class="tim-typo">
<span class="tim-note">Quote</span>
<div class="blockquote undefined">
<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&#x2019;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&#x2019;s a
responsibility that I have, to push possibilities, to show
people, this is the level that things could be at.
</p>
<small>
Kanye West, Musician
@ -55,38 +88,49 @@
<div class="tim-typo">
<span class="tim-note">Muted Text</span>
<p class="text-muted">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</p>
</div>
<div class="tim-typo">
<span class="tim-note">Primary Text</span>
<p class="text-primary">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</p>
</div>
<div class="tim-typo">
<span class="tim-note">Info Text</span>
<p class="text-info">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</p>
</div>
<div class="tim-typo">
<span class="tim-note">Success Text</span>
<p class="text-success">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</p>
</div>
<div class="tim-typo">
<span class="tim-note">Warning Text</span>
<p class="text-warning">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</p>
</div>
<div class="tim-typo">
<span class="tim-note">Danger Text</span>
<p class="text-danger">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</p>
</div>
<div class="tim-typo">
<h2><span class="tim-note">Small Tag</span>
Header with small subtitle <br>
<h2>
<span class="tim-note">Small Tag</span> Header with small subtitle
<br />
<small>Use &quot;small&quot; tag for the headers</small>
</h2>
</div>
@ -100,21 +144,53 @@
<h2>Images</h2>
</div>
<div class="md-layout">
<div class="md-layout-item md-size-20 md-xsmall-size-100" :class="{'text-center': responsive}">
<div
class="md-layout-item md-size-20 md-xsmall-size-100"
:class="{ 'text-center': responsive }"
>
<h4>Rounded Image</h4>
<img :src="image" alt="Rounded Image" class="rounded" :class="{'responsive-image': responsive}">
<img
:src="image"
alt="Rounded Image"
class="rounded"
:class="{ 'responsive-image': responsive }"
/>
</div>
<div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
<div
class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto"
:class="{ 'text-center': responsive }"
>
<h4>Circle Image</h4>
<img :src="image" alt="Circle Image" class="rounded-circle" :class="{'responsive-image': responsive}">
<img
:src="image"
alt="Circle Image"
class="rounded-circle"
:class="{ 'responsive-image': responsive }"
/>
</div>
<div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
<div
class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto"
:class="{ 'text-center': responsive }"
>
<h4>Rounded Raised</h4>
<img :src="image" alt="Raised Image" class="img-raised rounded" :class="{'responsive-image': responsive}">
<img
:src="image"
alt="Raised Image"
class="img-raised rounded"
:class="{ 'responsive-image': responsive }"
/>
</div>
<div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
<div
class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto"
:class="{ 'text-center': responsive }"
>
<h4>Circle Raised</h4>
<img :src="image" alt="Thumbnail Image" class="img-raised rounded-circle" :class="{'responsive-image': responsive}">
<img
:src="image"
alt="Thumbnail Image"
class="img-raised rounded-circle"
:class="{ 'responsive-image': responsive }"
/>
</div>
</div>
</div>
@ -148,5 +224,4 @@ export default {
};
</script>
<style lang="css">
</style>
<style lang="css"></style>