Adjustments, add typography page, fix notification buttons
This commit is contained in:
cristij
parent
360f9361fb
commit
8ddb2d5f21
63
src/assets/demo/demo.css
Executable file
63
src/assets/demo/demo.css
Executable file
@ -0,0 +1,63 @@
|
||||
.tim-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tim-white-buttons {
|
||||
background-color: #777777;
|
||||
}
|
||||
|
||||
.typography-line {
|
||||
padding-left: 25%;
|
||||
margin-bottom: 35px;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.typography-line span {
|
||||
bottom: 10px;
|
||||
color: #c0c1c2;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.tim-row {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.tim-row h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.offline-doc .page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.offline-doc .footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media all and (min-width: 992px) {
|
||||
.sidebar .nav>li.active-pro {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card.card-upgrade .card-category {
|
||||
max-width: 530px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -3,6 +3,7 @@
|
||||
:is="tag"
|
||||
:type="nativeType"
|
||||
:disabled="disabled || loading"
|
||||
@click="handleClick"
|
||||
class="btn"
|
||||
:class="[
|
||||
{'btn-round': round},
|
||||
@ -46,6 +47,11 @@ export default {
|
||||
default: ""
|
||||
},
|
||||
simple: Boolean
|
||||
},
|
||||
methods: {
|
||||
handleClick(evt) {
|
||||
this.$emit('click', evt);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
171
src/components/NotificationPlugin/Notification.vue
Normal file
171
src/components/NotificationPlugin/Notification.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div @click="tryClose"
|
||||
data-notify="container"
|
||||
class="alert open"
|
||||
:class="[{'alert-with-icon': icon}, verticalAlign, horizontalAlign, alertType]"
|
||||
role="alert"
|
||||
:style="customPosition"
|
||||
data-notify-position="top-center">
|
||||
<button
|
||||
v-if="showClose"
|
||||
type="button"
|
||||
aria-hidden="true"
|
||||
class="close col-xs-1"
|
||||
data-notify="dismiss"
|
||||
@click="close">
|
||||
<i class="tim-icons icon-simple-remove"></i>
|
||||
</button>
|
||||
|
||||
<span v-if="icon" data-notify="icon" :class="['alert-icon', icon]"></span>
|
||||
<span data-notify="message">
|
||||
<span v-if="title" class="title"><b>{{title}}<br/></b></span>
|
||||
<span v-if="message" v-html="message"></span>
|
||||
<content-render v-if="!message && component" :component="component"></content-render>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'notification',
|
||||
components: {
|
||||
contentRender: {
|
||||
props: ['component'],
|
||||
render: h => h(this.component)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
message: String,
|
||||
title: String,
|
||||
icon: String,
|
||||
verticalAlign: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
validator: value => {
|
||||
let acceptedValues = ['top', 'bottom'];
|
||||
return acceptedValues.indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
horizontalAlign: {
|
||||
type: String,
|
||||
default: 'right',
|
||||
validator: value => {
|
||||
let acceptedValues = ['left', 'center', 'right'];
|
||||
return acceptedValues.indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'info',
|
||||
validator: value => {
|
||||
let acceptedValues = [
|
||||
'info',
|
||||
'primary',
|
||||
'danger',
|
||||
'warning',
|
||||
'success'
|
||||
];
|
||||
return acceptedValues.indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
timeout: {
|
||||
type: Number,
|
||||
default: 5000,
|
||||
validator: value => {
|
||||
return value >= 0;
|
||||
}
|
||||
},
|
||||
timestamp: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
},
|
||||
component: {
|
||||
type: [Object, Function]
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
clickHandler: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elmHeight: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasIcon() {
|
||||
return this.icon && this.icon.length > 0;
|
||||
},
|
||||
alertType() {
|
||||
return `alert-${this.type}`;
|
||||
},
|
||||
customPosition() {
|
||||
let initialMargin = 20;
|
||||
let alertHeight = this.elmHeight + 10;
|
||||
let sameAlertsCount = this.$notifications.state.filter(alert => {
|
||||
return (
|
||||
alert.horizontalAlign === this.horizontalAlign &&
|
||||
alert.verticalAlign === this.verticalAlign &&
|
||||
alert.timestamp <= this.timestamp
|
||||
);
|
||||
}).length;
|
||||
if (this.$notifications.settings.overlap) {
|
||||
sameAlertsCount = 1;
|
||||
}
|
||||
let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
|
||||
let styles = {};
|
||||
if (this.verticalAlign === 'top') {
|
||||
styles.top = `${pixels}px`;
|
||||
} else {
|
||||
styles.bottom = `${pixels}px`;
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close', this.timestamp);
|
||||
},
|
||||
tryClose(evt) {
|
||||
if (this.clickHandler) {
|
||||
this.clickHandler(evt, this);
|
||||
}
|
||||
if (this.closeOnClick) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.elmHeight = this.$el.clientHeight;
|
||||
if (this.timeout) {
|
||||
setTimeout(this.close, this.timeout);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.notifications .alert {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
|
||||
&[data-notify='container'] {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
&.center {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&.left {
|
||||
left: 20px;
|
||||
}
|
||||
&.right {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
src/components/NotificationPlugin/Notifications.vue
Normal file
81
src/components/NotificationPlugin/Notifications.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="notifications">
|
||||
<transition-group :name="transitionName"
|
||||
:mode="transitionMode">
|
||||
<notification
|
||||
v-for="notification in notifications"
|
||||
v-bind="notification"
|
||||
:clickHandler="notification.onClick"
|
||||
:key="notification.timestamp.getTime()"
|
||||
@close="removeNotification">
|
||||
</notification>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Notification from './Notification.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Notification
|
||||
},
|
||||
props: {
|
||||
transitionName: {
|
||||
type: String,
|
||||
default: 'list'
|
||||
},
|
||||
transitionMode: {
|
||||
type: String,
|
||||
default: 'in-out'
|
||||
},
|
||||
overlap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
notifications: this.$notifications.state
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
removeNotification(timestamp) {
|
||||
this.$notifications.removeNotification(timestamp);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$notifications.settings.overlap = this.overlap;
|
||||
},
|
||||
watch: {
|
||||
overlap: function(newVal) {
|
||||
this.$notifications.settings.overlap = newVal;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.notifications {
|
||||
.list-move {
|
||||
transition: transform 0.3s, opacity 0.4s;
|
||||
}
|
||||
.list-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.list-enter-active {
|
||||
transition: transform 0.2s ease-in, opacity 0.4s ease-in;
|
||||
}
|
||||
.list-leave-active {
|
||||
transition: transform 1s ease-out, opacity 0.4s ease-out;
|
||||
}
|
||||
|
||||
.list-enter {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.2, 0.7);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/components/NotificationPlugin/index.js
Normal file
66
src/components/NotificationPlugin/index.js
Normal file
@ -0,0 +1,66 @@
|
||||
import Notifications from './Notifications.vue';
|
||||
|
||||
const NotificationStore = {
|
||||
state: [], // here the notifications will be added
|
||||
settings: {
|
||||
overlap: false,
|
||||
verticalAlign: 'top',
|
||||
horizontalAlign: 'right',
|
||||
type: 'info',
|
||||
timeout: 5000,
|
||||
closeOnClick: true,
|
||||
showClose: true
|
||||
},
|
||||
setOptions(options) {
|
||||
this.settings = Object.assign(this.settings, options);
|
||||
},
|
||||
removeNotification(timestamp) {
|
||||
const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp);
|
||||
if (indexToDelete !== -1) {
|
||||
this.state.splice(indexToDelete, 1);
|
||||
}
|
||||
},
|
||||
addNotification(notification) {
|
||||
if (typeof notification === 'string' || notification instanceof String) {
|
||||
notification = { message: notification };
|
||||
}
|
||||
notification.timestamp = new Date();
|
||||
notification.timestamp.setMilliseconds(
|
||||
notification.timestamp.getMilliseconds() + this.state.length
|
||||
);
|
||||
notification = Object.assign({}, this.settings, notification);
|
||||
this.state.push(notification);
|
||||
},
|
||||
notify(notification) {
|
||||
if (Array.isArray(notification)) {
|
||||
notification.forEach(notificationInstance => {
|
||||
this.addNotification(notificationInstance);
|
||||
});
|
||||
} else {
|
||||
this.addNotification(notification);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const NotificationsPlugin = {
|
||||
install(Vue, options) {
|
||||
let app = new Vue({
|
||||
data: {
|
||||
notificationStore: NotificationStore
|
||||
},
|
||||
methods: {
|
||||
notify(notification) {
|
||||
this.notificationStore.notify(notification);
|
||||
}
|
||||
}
|
||||
});
|
||||
Vue.prototype.$notify = app.notify;
|
||||
Vue.prototype.$notifications = app.notificationStore;
|
||||
Vue.component('Notifications', Notifications);
|
||||
if (options) {
|
||||
NotificationStore.setOptions(options);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default NotificationsPlugin;
|
||||
@ -1,196 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--Stats cards-->
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-3" v-for="stats in statsCards" :key="stats.title">
|
||||
<stats-card>
|
||||
<div class="icon-big text-center" :class="`icon-${stats.type}`" slot="header">
|
||||
<i :class="stats.icon"></i>
|
||||
</div>
|
||||
<div class="numbers" slot="content">
|
||||
<p>{{stats.title}}</p>
|
||||
{{stats.value}}
|
||||
</div>
|
||||
<div class="stats" slot="footer">
|
||||
<i :class="stats.footerIcon"></i> {{stats.footerText}}
|
||||
</div>
|
||||
</stats-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Charts-->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<chart-card title="Users behavior"
|
||||
sub-title="24 Hours performance"
|
||||
:chart-data="usersChart.data"
|
||||
:chart-options="usersChart.options">
|
||||
<span slot="footer">
|
||||
<i class="ti-reload"></i> Updated 3 minutes ago
|
||||
</span>
|
||||
<div slot="legend">
|
||||
<i class="fa fa-circle text-info"></i> Open
|
||||
<i class="fa fa-circle text-danger"></i> Click
|
||||
<i class="fa fa-circle text-warning"></i> Click Second Time
|
||||
</div>
|
||||
</chart-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-12">
|
||||
<chart-card title="Email Statistics"
|
||||
sub-title="Last campaign performance"
|
||||
:chart-data="preferencesChart.data"
|
||||
chart-type="Pie">
|
||||
<span slot="footer">
|
||||
<i class="ti-timer"></i> Campaign set 2 days ago</span>
|
||||
<div slot="legend">
|
||||
<i class="fa fa-circle text-info"></i> Open
|
||||
<i class="fa fa-circle text-danger"></i> Bounce
|
||||
<i class="fa fa-circle text-warning"></i> Unsubscribe
|
||||
</div>
|
||||
</chart-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-12">
|
||||
<chart-card title="2015 Sales"
|
||||
sub-title="All products including Taxes"
|
||||
:chart-data="activityChart.data"
|
||||
:chart-options="activityChart.options">
|
||||
<span slot="footer">
|
||||
<i class="ti-check"></i> Data information certified
|
||||
</span>
|
||||
<div slot="legend">
|
||||
<i class="fa fa-circle text-info"></i> Tesla Model S
|
||||
<i class="fa fa-circle text-warning"></i> BMW 5 Series
|
||||
</div>
|
||||
</chart-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Dashboard page
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { StatsCard, ChartCard } from "@/components/index";
|
||||
import Chartist from 'chartist';
|
||||
export default {
|
||||
components: {
|
||||
StatsCard,
|
||||
ChartCard
|
||||
},
|
||||
/**
|
||||
* Chart data used to render stats, charts. Should be replaced with server data
|
||||
*/
|
||||
data() {
|
||||
return {
|
||||
statsCards: [
|
||||
{
|
||||
type: "warning",
|
||||
icon: "ti-server",
|
||||
title: "Capacity",
|
||||
value: "105GB",
|
||||
footerText: "Updated now",
|
||||
footerIcon: "ti-reload"
|
||||
},
|
||||
{
|
||||
type: "success",
|
||||
icon: "ti-wallet",
|
||||
title: "Revenue",
|
||||
value: "$1,345",
|
||||
footerText: "Last day",
|
||||
footerIcon: "ti-calendar"
|
||||
},
|
||||
{
|
||||
type: "danger",
|
||||
icon: "ti-pulse",
|
||||
title: "Errors",
|
||||
value: "23",
|
||||
footerText: "In the last hour",
|
||||
footerIcon: "ti-timer"
|
||||
},
|
||||
{
|
||||
type: "info",
|
||||
icon: "ti-twitter-alt",
|
||||
title: "Followers",
|
||||
value: "+45",
|
||||
footerText: "Updated now",
|
||||
footerIcon: "ti-reload"
|
||||
}
|
||||
],
|
||||
usersChart: {
|
||||
data: {
|
||||
labels: [
|
||||
"9:00AM",
|
||||
"12:00AM",
|
||||
"3:00PM",
|
||||
"6:00PM",
|
||||
"9:00PM",
|
||||
"12:00PM",
|
||||
"3:00AM",
|
||||
"6:00AM"
|
||||
],
|
||||
series: [
|
||||
[287, 385, 490, 562, 594, 626, 698, 895, 952],
|
||||
[67, 152, 193, 240, 387, 435, 535, 642, 744],
|
||||
[23, 113, 67, 108, 190, 239, 307, 410, 410]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
low: 0,
|
||||
high: 1000,
|
||||
showArea: true,
|
||||
height: "245px",
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 3
|
||||
}),
|
||||
showLine: true,
|
||||
showPoint: false
|
||||
}
|
||||
},
|
||||
activityChart: {
|
||||
data: {
|
||||
labels: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"Mai",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec"
|
||||
],
|
||||
series: [
|
||||
[542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
|
||||
[230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
seriesBarDistance: 10,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
height: "245px"
|
||||
}
|
||||
},
|
||||
preferencesChart: {
|
||||
data: {
|
||||
labels: ["62%", "32%", "6%"],
|
||||
series: [62, 32, 6]
|
||||
},
|
||||
options: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@ -60,24 +60,24 @@
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-md-3">
|
||||
<p-button round outline block @click.native="notifyVue('top', 'left')">Top Left</p-button>
|
||||
<p-button type="primary" block @click="notifyVue('top', 'left')">Top Left</p-button>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<p-button round outline block @click.native="notifyVue('top', 'center')">Top Center</p-button>
|
||||
<p-button type="primary" block @click="notifyVue('top', 'center')">Top Center</p-button>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<p-button round outline block @click.native="notifyVue('top', 'right')">Top Right</p-button>
|
||||
<p-button type="primary" block @click="notifyVue('top', 'right')">Top Right</p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="col-md-3">
|
||||
<p-button round outline block @click.native="notifyVue('bottom', 'left')">Bottom Left</p-button>
|
||||
<p-button type="primary" block @click="notifyVue('bottom', 'left')">Bottom Left</p-button>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<p-button round outline block @click.native="notifyVue('bottom', 'center')">Bottom Center</p-button>
|
||||
<p-button type="primary" block @click="notifyVue('bottom', 'center')">Bottom Center</p-button>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<p-button round outline block @click.native="notifyVue('bottom', 'right')">Bottom Right</p-button>
|
||||
<p-button type="primary" block @click="notifyVue('bottom', 'right')">Bottom Right</p-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
const color = Math.floor(Math.random() * 4 + 1);
|
||||
this.$notify({
|
||||
component: NotificationTemplate,
|
||||
icon: "ti-gift",
|
||||
icon: "tim-icons icon-bell-55",
|
||||
horizontalAlign: horizontalAlign,
|
||||
verticalAlign: verticalAlign,
|
||||
type: this.type[color]
|
||||
|
||||
@ -1,167 +1,166 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<card>
|
||||
<template slot="header">
|
||||
<h4 class="card-title">Black Dashboard Headings</h4>
|
||||
<p class="card-category">Created using
|
||||
<a href="https://www.google.com/fonts/specimen/Muli">Muli</a> Font Family</p>
|
||||
</template>
|
||||
<div class="content">
|
||||
<div class="typo-line">
|
||||
<h1>
|
||||
<p class="category">Header 1</p>Black Dashboard Heading </h1>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header mb-5">
|
||||
<h5 class="card-category">Black Table Heading</h5>
|
||||
<h3 class="card-title">Created using Poppins Font Family</h3>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h2>
|
||||
<p class="category">Header 2</p>Black Dashboard Heading </h2>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h3>
|
||||
<p class="category">Header 3</p>Black Dashboard Heading </h3>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h4>
|
||||
<p class="category">Header 4</p>Black Dashboard Heading </h4>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h5>
|
||||
<p class="category">Header 5</p>Black Dashboard Heading </h5>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h6>
|
||||
<p class="category">Header 6</p>Black Dashboard Heading </h6>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<p>
|
||||
<span class="category">Paragraph</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
|
||||
</p>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<p class="category">Quote</p>
|
||||
<blockquote>
|
||||
<div class="card-body">
|
||||
<div class="typography-line">
|
||||
<h1>
|
||||
<span>Header 1</span>The Life of Black Dashboard </h1>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<h2>
|
||||
<span>Header 2</span>The Life of Black Dashboard </h2>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<h3>
|
||||
<span>Header 3</span>The Life of Black Dashboard </h3>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<h4>
|
||||
<span>Header 4</span>The Life of Black Dashboard </h4>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<h5>
|
||||
<span>Header 5</span>The Life of Black Dashboard </h5>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<h6>
|
||||
<span>Header 6</span>The Life of Black Dashboard </h6>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
|
||||
<span>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’s a responsibility that I have, to push
|
||||
possibilities, to show people, this is the level that things could be at.
|
||||
</p>
|
||||
<small>
|
||||
Steve Jobs, CEO Apple
|
||||
</small>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<p class="category">Muted Text</p>
|
||||
<p class="text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
|
||||
</p>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<!--
|
||||
there are also "text-info", "text-success", "text-warning", "text-danger" clases for the text
|
||||
-->
|
||||
<p class="category">Coloured Text</p>
|
||||
<p class="text-primary">
|
||||
Text Primary - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
|
||||
</p>
|
||||
<p class="text-info">
|
||||
Text Info - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
|
||||
</p>
|
||||
<p class="text-success">
|
||||
Text Success - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
|
||||
</p>
|
||||
<p class="text-warning">
|
||||
Text Warning - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
|
||||
</p>
|
||||
<p class="text-danger">
|
||||
Text Danger - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
|
||||
</p>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h2>
|
||||
<p class="category">Small Tag</p>Header with small subtitle
|
||||
<br>
|
||||
<small>".small" is a tag for the headers</small>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<p class="category">Lists</p>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<h5>Unordered List</h5>
|
||||
<ul>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li class="list-unstyled">
|
||||
<ul>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>List Item</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h5>Ordered List</h5>
|
||||
<ol>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h5>Unstyled List</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h5>Inline List</h5>
|
||||
<ul class="list-inline">
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<p class="category">Blockquotes</p>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Default Blockquote</h5>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5>Blockquote with Citation</h5>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<small>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
<div class="typography-line">
|
||||
<span>Quote</span>
|
||||
<blockquote>
|
||||
<p class="blockquote blockquote-primary">
|
||||
"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."
|
||||
<br>
|
||||
<br>
|
||||
<small>
|
||||
- Noaa
|
||||
</small>
|
||||
</blockquote>
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<span>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...
|
||||
</p>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<span>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>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<span>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>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<span>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>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<span>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...
|
||||
</p>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<span>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>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<h2>
|
||||
<span>Small Tag</span>
|
||||
Header with small subtitle
|
||||
<br>
|
||||
<small>Use "small" tag for the headers</small>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="typography-line">
|
||||
<span>Lists</span>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<h5>Unordered List</h5>
|
||||
<ul>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li class="list-unstyled">
|
||||
<ul>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>List Item</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h5>Ordered List</h5>
|
||||
<ol>
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li>List item</li>
|
||||
<li>List Item</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h5>Unstyled List</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>List Item</li>
|
||||
<li>List Item</li>
|
||||
<li>List item</li>
|
||||
<li>List Item</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h5>Inline List</h5>
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">List1</li>
|
||||
<li class="list-inline-item">List2</li>
|
||||
<li class="list-inline-item">List3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<p class="category">Code</p>
|
||||
<p>
|
||||
This is
|
||||
<code>.css-class-as-code</code>, an example of an inline code element. Wrap inline code within a
|
||||
<code>
|
||||
<code>...</code></code>tag.</p>
|
||||
<pre>1. #This is an example of preformatted text. 2. #Here is another line of code</pre>
|
||||
<div class="typography-line">
|
||||
<span>Code</span>
|
||||
<p>This is
|
||||
<code>.css-class-as-code</code>, an example of an inline code element. Wrap inline code within a
|
||||
<code> <code>...</code></code>tag.
|
||||
</p>
|
||||
<pre>1. #This is an example of preformatted text.<br/>2. #Here is another line of code</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
export default {};
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import Notify from "vue-notifyjs";
|
||||
import "@/assets/css/nucleo-icons.css";
|
||||
import "@/assets/demo/demo.css";
|
||||
import SideBar from "@/components/SidebarPlugin";
|
||||
import GlobalComponents from "./globalComponents";
|
||||
import GlobalDirectives from "./globalDirectives";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user