Fixed #689 - Skeleton Component
Cagatay Civici
parent
14640c4e98
commit
5a2d290c4c
|
|
@ -0,0 +1 @@
|
|||
export * from './components/skeleton/Skeleton';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
'use strict';
|
||||
module.exports = require('./components/skeleton/Skeleton.vue');
|
||||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #64B5F6;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #81C784;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #FFD54F;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #BA68C8;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4423,6 +4423,14 @@
|
|||
color: #151515;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #8dd0ff;
|
||||
color: #151515;
|
||||
|
|
|
|||
|
|
@ -4423,6 +4423,14 @@
|
|||
color: #151515;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #c298d8;
|
||||
color: #151515;
|
||||
|
|
|
|||
|
|
@ -4423,6 +4423,14 @@
|
|||
color: #efefef;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #007bff;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4423,6 +4423,14 @@
|
|||
color: #efefef;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #883cae;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4362,6 +4362,14 @@
|
|||
color: #faf9f8;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #edebe9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #0078d4;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4374,6 +4374,14 @@
|
|||
color: #212529;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #FFE082;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4374,6 +4374,14 @@
|
|||
color: #212529;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #81D4FA;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4374,6 +4374,14 @@
|
|||
color: #212529;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #C5E1A5;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4374,6 +4374,14 @@
|
|||
color: #212529;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #F48FB1;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4435,6 +4435,14 @@
|
|||
color: #121212;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #CE93D8;
|
||||
color: #121212;
|
||||
|
|
|
|||
|
|
@ -4435,6 +4435,14 @@
|
|||
color: #121212;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #9FA8DA;
|
||||
color: #121212;
|
||||
|
|
|
|||
|
|
@ -4435,6 +4435,14 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #673AB7;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4435,6 +4435,14 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #3F51B5;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4435,6 +4435,14 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #673AB7;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4435,6 +4435,14 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #3F51B5;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4435,6 +4435,14 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #673AB7;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4435,6 +4435,14 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #3F51B5;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4362,6 +4362,14 @@
|
|||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #eaeaea;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #007ad9;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4374,6 +4374,14 @@
|
|||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #eaeaea;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #007ad9;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4374,6 +4374,14 @@
|
|||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #eaeaea;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #41b883;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4374,6 +4374,14 @@
|
|||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #eaeaea;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #007ad9;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4362,6 +4362,14 @@
|
|||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #dadada;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #7B95A3;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #2196F3;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #4CAF50;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #FFC107;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #9C27B0;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #64B5F6;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #81C784;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #FFD54F;
|
||||
color: #212529;
|
||||
|
|
|
|||
|
|
@ -4411,6 +4411,14 @@
|
|||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.p-skeleton {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.p-skeleton:after {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
background: #BA68C8;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -254,6 +254,7 @@
|
|||
<router-link to="/divider">Divider <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/inplace">Inplace</router-link>
|
||||
<router-link to="/scrolltop">ScrollTop <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/skeleton">Skeleton <Tag value="New"></Tag></router-link>
|
||||
<router-link to="/progressbar">ProgressBar</router-link>
|
||||
<router-link to="/progressspinner">ProgressSpinner</router-link>
|
||||
<router-link to="/ripple">Ripple</router-link>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
declare class Skeleton extends Vue {
|
||||
shape?: string;
|
||||
size?: string;
|
||||
width?: string;
|
||||
height?: string;
|
||||
borderRadius?: string;
|
||||
animation?: string;
|
||||
}
|
||||
|
||||
export default Skeleton;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div :style="containerStyle" :class="containerClass"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'rectangle'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '1rem'
|
||||
},
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
animation: {
|
||||
type: String,
|
||||
default: 'wave'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-skeleton p-component', {
|
||||
'p-skeleton-circle': this.shape === 'circle',
|
||||
'p-skeleton-animation-none': this.animation === 'none'
|
||||
}];
|
||||
},
|
||||
containerStyle() {
|
||||
if (this.size)
|
||||
return {width: this.size, height: this.size, borderRadius: this.borderRadius};
|
||||
else
|
||||
return {width: this.width, height: this.height, borderRadius: this.borderRadius};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-skeleton::after {
|
||||
content: "";
|
||||
animation: p-skeleton-animation 1.2s infinite;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-skeleton-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.p-skeleton-none::after {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes p-skeleton-animation {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,6 +64,7 @@ import Row from './components/row/Row';
|
|||
import ScrollPanel from './components/scrollpanel/ScrollPanel';
|
||||
import ScrollTop from './components/scrolltop/ScrollTop';
|
||||
import SelectButton from './components/selectbutton/SelectButton';
|
||||
import Skeleton from './components/skeleton/Skeleton';
|
||||
import Slider from './components/slider/Slider';
|
||||
import Sidebar from './components/sidebar/Sidebar';
|
||||
import SplitButton from './components/splitbutton/SplitButton';
|
||||
|
|
@ -177,6 +178,7 @@ app.component('ScrollTop', ScrollTop);
|
|||
app.component('SelectButton', SelectButton);
|
||||
app.component('Slider', Slider);
|
||||
app.component('Sidebar', Sidebar);
|
||||
app.component('Skeleton', Skeleton);
|
||||
app.component('SplitButton', SplitButton);
|
||||
app.component('Steps', Steps);
|
||||
app.component('TabView', TabView);
|
||||
|
|
|
|||
|
|
@ -387,6 +387,11 @@ const routes = [
|
|||
name: 'scrolltop',
|
||||
component: () => import('../views/scrolltop/ScrollTopDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/skeleton',
|
||||
name: 'skeleton',
|
||||
component: () => import('../views/skeleton/SkeletonDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/listbox',
|
||||
name: 'listbox',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,171 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Skeleton</h1>
|
||||
<p>Skeleton is a placeholder to display instead of the actual content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem"></Skeleton>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>Rounded</h5>
|
||||
<Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5 class="p-mt-3">Square</h5>
|
||||
<div class="p-d-flex p-ai-end">
|
||||
<Skeleton size="2rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="3rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="4rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5 class="p-mt-3">Circle</h5>
|
||||
<div class="p-d-flex p-ai-end">
|
||||
<Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
|
||||
<h5>Card</h5>
|
||||
<div class="custom-skeleton p-p-4">
|
||||
<div class="p-d-flex p-mb-3">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div>
|
||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height=".5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="p-d-flex p-jc-between p-mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>List</h5>
|
||||
<div class="custom-skeleton p-p-4">
|
||||
<ul class="p-m-0 p-p-0">
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>DataTable</h5>
|
||||
<DataTable :value="products">
|
||||
<Column field="code" header="Code">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="quantity" header="Quantity">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<SkeletonDoc />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SkeletonDoc from './SkeletonDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: new Array(5)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'SkeletonDoc': SkeletonDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-borderRadius: 4px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script>
|
||||
<code>
|
||||
import Skeleton from 'primevue/skeleton';
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>Skeleton displays a rectangle in its simplest form.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Skeleton />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Circle</h5>
|
||||
<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Skeleton shape="circle"/>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Size</h5>
|
||||
<p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Skeleton width="100%" height="2rem" />
|
||||
<Skeleton shape="circle" size="50px" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Border Radius</h5>
|
||||
<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Skeleton borderRadius="16px" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Animation</h5>
|
||||
<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Skeleton animation="none" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Properties</h5>
|
||||
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>shape</td>
|
||||
<td>string</td>
|
||||
<td>rectangle</td>
|
||||
<td>Shape of the element, options are "rectangle" and "circle".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Size of the Circle or Square.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>string</td>
|
||||
<td>100%</td>
|
||||
<td>Width of the element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>height</td>
|
||||
<td>string</td>
|
||||
<td>1rem</td>
|
||||
<td>Height of the element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>borderRadius</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Border radius of the element, defaults to value from theme.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>animation</td>
|
||||
<td>string</td>
|
||||
<td>wave</td>
|
||||
<td>Type of the animation, valid options are "wave" and "none".</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-skeleton</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-skeleton-circle</td>
|
||||
<td>Container element of a determinate progressbar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-skeleton-animation-none</td>
|
||||
<td>Container element of an indeterminate progressbar.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/skeleton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem"></Skeleton>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>Rounded</h5>
|
||||
<Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5 class="p-mt-3">Square</h5>
|
||||
<div class="p-d-flex p-ai-end">
|
||||
<Skeleton size="2rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="3rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="4rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5 class="p-mt-3">Circle</h5>
|
||||
<div class="p-d-flex p-ai-end">
|
||||
<Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
|
||||
<h5>Card</h5>
|
||||
<div class="custom-skeleton p-p-4">
|
||||
<div class="p-d-flex p-mb-3">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div>
|
||||
<Skeleton width="10rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="p-mb-2"></Skeleton>
|
||||
<Skeleton height=".5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="p-d-flex p-jc-between p-mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<h5>List</h5>
|
||||
<div class="custom-skeleton p-p-4">
|
||||
<ul class="p-m-0 p-p-0">
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-mb-3">
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="p-d-flex">
|
||||
<Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="p-mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>DataTable</h5>
|
||||
<DataTable :value="products">
|
||||
<Column field="code" header="Code">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="quantity" header="Quantity">
|
||||
<template #body>
|
||||
<Skeleton></Skeleton>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue