vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #689 - Skeleton Component

pull/731/head
Cagatay Civici 2020-12-02 13:48:26 +03:00
parent 14640c4e98
commit 5a2d290c4c
43 changed files with 828 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
exports/skeleton.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export * from './components/skeleton/Skeleton';

2
exports/skeleton.js Normal file
View File

@ -0,0 +1,2 @@
'use strict';
module.exports = require('./components/skeleton/Skeleton.vue');

8
public/themes/arya-blue/theme.css
View File

@ -4411,6 +4411,14 @@
color: rgba(255, 255, 255, 0.87); 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 { .p-tag {
background: #64B5F6; background: #64B5F6;
color: #212529; color: #212529;

8
public/themes/arya-green/theme.css
View File

@ -4411,6 +4411,14 @@
color: rgba(255, 255, 255, 0.87); 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 { .p-tag {
background: #81C784; background: #81C784;
color: #212529; color: #212529;

8
public/themes/arya-orange/theme.css
View File

@ -4411,6 +4411,14 @@
color: rgba(255, 255, 255, 0.87); 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 { .p-tag {
background: #FFD54F; background: #FFD54F;
color: #212529; color: #212529;

8
public/themes/arya-purple/theme.css
View File

@ -4411,6 +4411,14 @@
color: rgba(255, 255, 255, 0.87); 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 { .p-tag {
background: #BA68C8; background: #BA68C8;
color: #ffffff; color: #ffffff;

8
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -4423,6 +4423,14 @@
color: #151515; 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 { .p-tag {
background: #8dd0ff; background: #8dd0ff;
color: #151515; color: #151515;

8
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -4423,6 +4423,14 @@
color: #151515; 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 { .p-tag {
background: #c298d8; background: #c298d8;
color: #151515; color: #151515;

8
public/themes/bootstrap4-light-blue/theme.css
View File

@ -4423,6 +4423,14 @@
color: #efefef; 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 { .p-tag {
background: #007bff; background: #007bff;
color: #ffffff; color: #ffffff;

8
public/themes/bootstrap4-light-purple/theme.css
View File

@ -4423,6 +4423,14 @@
color: #efefef; 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 { .p-tag {
background: #883cae; background: #883cae;
color: #ffffff; color: #ffffff;

8
public/themes/fluent-light/theme.css
View File

@ -4362,6 +4362,14 @@
color: #faf9f8; 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 { .p-tag {
background: #0078d4; background: #0078d4;
color: #ffffff; color: #ffffff;

8
public/themes/luna-amber/theme.css
View File

@ -4374,6 +4374,14 @@
color: #212529; 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 { .p-tag {
background: #FFE082; background: #FFE082;
color: #212529; color: #212529;

8
public/themes/luna-blue/theme.css
View File

@ -4374,6 +4374,14 @@
color: #212529; 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 { .p-tag {
background: #81D4FA; background: #81D4FA;
color: #212529; color: #212529;

8
public/themes/luna-green/theme.css
View File

@ -4374,6 +4374,14 @@
color: #212529; 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 { .p-tag {
background: #C5E1A5; background: #C5E1A5;
color: #212529; color: #212529;

8
public/themes/luna-pink/theme.css
View File

@ -4374,6 +4374,14 @@
color: #212529; 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 { .p-tag {
background: #F48FB1; background: #F48FB1;
color: #212529; color: #212529;

8
public/themes/md-dark-deeppurple/theme.css
View File

@ -4435,6 +4435,14 @@
color: #121212; 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 { .p-tag {
background: #CE93D8; background: #CE93D8;
color: #121212; color: #121212;

8
public/themes/md-dark-indigo/theme.css
View File

@ -4435,6 +4435,14 @@
color: #121212; 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 { .p-tag {
background: #9FA8DA; background: #9FA8DA;
color: #121212; color: #121212;

8
public/themes/md-light-deeppurple/theme.css
View File

@ -4435,6 +4435,14 @@
color: #ffffff; 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 { .p-tag {
background: #673AB7; background: #673AB7;
color: #ffffff; color: #ffffff;

8
public/themes/md-light-indigo/theme.css
View File

@ -4435,6 +4435,14 @@
color: #ffffff; 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 { .p-tag {
background: #3F51B5; background: #3F51B5;
color: #ffffff; color: #ffffff;

8
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -4435,6 +4435,14 @@
color: #ffffff; 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 { .p-tag {
background: #673AB7; background: #673AB7;
color: #ffffff; color: #ffffff;

8
public/themes/mdc-dark-indigo/theme.css
View File

@ -4435,6 +4435,14 @@
color: #ffffff; 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 { .p-tag {
background: #3F51B5; background: #3F51B5;
color: #ffffff; color: #ffffff;

8
public/themes/mdc-light-deeppurple/theme.css
View File

@ -4435,6 +4435,14 @@
color: #ffffff; 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 { .p-tag {
background: #673AB7; background: #673AB7;
color: #ffffff; color: #ffffff;

8
public/themes/mdc-light-indigo/theme.css
View File

@ -4435,6 +4435,14 @@
color: #ffffff; 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 { .p-tag {
background: #3F51B5; background: #3F51B5;
color: #ffffff; color: #ffffff;

8
public/themes/nova-accent/theme.css
View File

@ -4362,6 +4362,14 @@
color: #f4f4f4; 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 { .p-tag {
background: #007ad9; background: #007ad9;
color: #ffffff; color: #ffffff;

8
public/themes/nova-alt/theme.css
View File

@ -4374,6 +4374,14 @@
color: #f4f4f4; 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 { .p-tag {
background: #007ad9; background: #007ad9;
color: #ffffff; color: #ffffff;

8
public/themes/nova-vue/theme.css
View File

@ -4374,6 +4374,14 @@
color: #f4f4f4; 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 { .p-tag {
background: #41b883; background: #41b883;
color: #ffffff; color: #ffffff;

8
public/themes/nova/theme.css
View File

@ -4374,6 +4374,14 @@
color: #f4f4f4; 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 { .p-tag {
background: #007ad9; background: #007ad9;
color: #ffffff; color: #ffffff;

8
public/themes/rhea/theme.css
View File

@ -4362,6 +4362,14 @@
color: #f4f4f4; 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 { .p-tag {
background: #7B95A3; background: #7B95A3;
color: #ffffff; color: #ffffff;

8
public/themes/saga-blue/theme.css
View File

@ -4411,6 +4411,14 @@
color: #f8f9fa; 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 { .p-tag {
background: #2196F3; background: #2196F3;
color: #ffffff; color: #ffffff;

8
public/themes/saga-green/theme.css
View File

@ -4411,6 +4411,14 @@
color: #f8f9fa; 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 { .p-tag {
background: #4CAF50; background: #4CAF50;
color: #ffffff; color: #ffffff;

8
public/themes/saga-orange/theme.css
View File

@ -4411,6 +4411,14 @@
color: #f8f9fa; 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 { .p-tag {
background: #FFC107; background: #FFC107;
color: #212529; color: #212529;

8
public/themes/saga-purple/theme.css
View File

@ -4411,6 +4411,14 @@
color: #f8f9fa; 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 { .p-tag {
background: #9C27B0; background: #9C27B0;
color: #ffffff; color: #ffffff;

8
public/themes/vela-blue/theme.css
View File

@ -4411,6 +4411,14 @@
color: rgba(255, 255, 255, 0.87); 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 { .p-tag {
background: #64B5F6; background: #64B5F6;
color: #212529; color: #212529;

8
public/themes/vela-green/theme.css
View File

@ -4411,6 +4411,14 @@
color: rgba(255, 255, 255, 0.87); 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 { .p-tag {
background: #81C784; background: #81C784;
color: #212529; color: #212529;

8
public/themes/vela-orange/theme.css
View File

@ -4411,6 +4411,14 @@
color: rgba(255, 255, 255, 0.87); 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 { .p-tag {
background: #FFD54F; background: #FFD54F;
color: #212529; color: #212529;

8
public/themes/vela-purple/theme.css
View File

@ -4411,6 +4411,14 @@
color: rgba(255, 255, 255, 0.87); 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 { .p-tag {
background: #BA68C8; background: #BA68C8;
color: #ffffff; color: #ffffff;

1
src/AppMenu.vue
View File

@ -254,6 +254,7 @@
<router-link to="/divider">Divider <Tag value="New"></Tag></router-link> <router-link to="/divider">Divider <Tag value="New"></Tag></router-link>
<router-link to="/inplace">Inplace</router-link> <router-link to="/inplace">Inplace</router-link>
<router-link to="/scrolltop">ScrollTop <Tag value="New"></Tag></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="/progressbar">ProgressBar</router-link>
<router-link to="/progressspinner">ProgressSpinner</router-link> <router-link to="/progressspinner">ProgressSpinner</router-link>
<router-link to="/ripple">Ripple</router-link> <router-link to="/ripple">Ripple</router-link>

12
src/components/skeleton/Skeleton.d.ts vendored Normal file
View File

@ -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;

84
src/components/skeleton/Skeleton.vue Normal file
View File

@ -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>

2
src/main.js
View File

@ -64,6 +64,7 @@ import Row from './components/row/Row';
import ScrollPanel from './components/scrollpanel/ScrollPanel'; import ScrollPanel from './components/scrollpanel/ScrollPanel';
import ScrollTop from './components/scrolltop/ScrollTop'; import ScrollTop from './components/scrolltop/ScrollTop';
import SelectButton from './components/selectbutton/SelectButton'; import SelectButton from './components/selectbutton/SelectButton';
import Skeleton from './components/skeleton/Skeleton';
import Slider from './components/slider/Slider'; import Slider from './components/slider/Slider';
import Sidebar from './components/sidebar/Sidebar'; import Sidebar from './components/sidebar/Sidebar';
import SplitButton from './components/splitbutton/SplitButton'; import SplitButton from './components/splitbutton/SplitButton';
@ -177,6 +178,7 @@ app.component('ScrollTop', ScrollTop);
app.component('SelectButton', SelectButton); app.component('SelectButton', SelectButton);
app.component('Slider', Slider); app.component('Slider', Slider);
app.component('Sidebar', Sidebar); app.component('Sidebar', Sidebar);
app.component('Skeleton', Skeleton);
app.component('SplitButton', SplitButton); app.component('SplitButton', SplitButton);
app.component('Steps', Steps); app.component('Steps', Steps);
app.component('TabView', TabView); app.component('TabView', TabView);

5
src/router/index.js
View File

@ -387,6 +387,11 @@ const routes = [
name: 'scrolltop', name: 'scrolltop',
component: () => import('../views/scrolltop/ScrollTopDemo.vue') component: () => import('../views/scrolltop/ScrollTopDemo.vue')
}, },
{
path: '/skeleton',
name: 'skeleton',
component: () => import('../views/skeleton/SkeletonDemo.vue')
},
{ {
path: '/listbox', path: '/listbox',
name: 'listbox', name: 'listbox',

171
src/views/skeleton/SkeletonDemo.vue Normal file
View File

@ -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>

278
src/views/skeleton/SkeletonDoc.vue Normal file
View File

@ -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>
&lt;Skeleton /&gt;
</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>
&lt;Skeleton shape="circle"/&gt;
</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>
&lt;Skeleton width="100%" height="2rem" /&gt;
&lt;Skeleton shape="circle" size="50px" /&gt;
</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>
&lt;Skeleton borderRadius="16px" /&gt;
</code></pre>
<h5>Animation</h5>
<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
<pre v-code>
<code>
&lt;Skeleton animation="none" /&gt;
</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>
&lt;div class="card"&gt;
&lt;div class="p-grid p-formgrid"&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5&gt;Rectangle&lt;/h5&gt;
&lt;Skeleton class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="10rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="5rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton height="2rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="10rem" height="4rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5&gt;Rounded&lt;/h5&gt;
&lt;Skeleton class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="10rem" class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="5rem" borderRadius="16px" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton height="2rem" class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="10rem" height="4rem" borderRadius="16px"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5 class="p-mt-3"&gt;Square&lt;/h5&gt;
&lt;div class="p-d-flex p-ai-end"&gt;
&lt;Skeleton size="2rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton size="3rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton size="5rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5 class="p-mt-3"&gt;Circle&lt;/h5&gt;
&lt;div class="p-d-flex p-ai-end"&gt;
&lt;Skeleton shape="circle" size="2rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton shape="circle" size="3rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton shape="circle" size="5rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;div class="p-grid p-formgrid"&gt;
&lt;div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0"&gt;
&lt;h5&gt;Card&lt;/h5&gt;
&lt;div class="custom-skeleton p-p-4"&gt;
&lt;div class="p-d-flex p-mb-3"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div&gt;
&lt;Skeleton width="10rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="5rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton height=".5rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;Skeleton width="100%" height="150px"&gt;&lt;/Skeleton&gt;
&lt;div class="p-d-flex p-jc-between p-mt-3"&gt;
&lt;Skeleton width="4rem" height="2rem"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="4rem" height="2rem"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;h5&gt;List&lt;/h5&gt;
&lt;div class="custom-skeleton p-p-4"&gt;
&lt;ul class="p-m-0 p-p-0"&gt;
&lt;li class="p-mb-3"&gt;
&lt;div class="p-d-flex"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div style="flex: 1"&gt;
&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="p-mb-3"&gt;
&lt;div class="p-d-flex"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div style="flex: 1"&gt;
&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="p-mb-3"&gt;
&lt;div class="p-d-flex"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div style="flex: 1"&gt;
&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;div class="p-d-flex"&gt;
&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
&lt;div style="flex: 1"&gt;
&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;DataTable&lt;/h5&gt;
&lt;DataTable :value="products"&gt;
&lt;Column field="code" header="Code"&gt;
&lt;template #body&gt;
&lt;Skeleton&gt;&lt;/Skeleton&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;
&lt;template #body&gt;
&lt;Skeleton&gt;&lt;/Skeleton&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;
&lt;template #body&gt;
&lt;Skeleton&gt;&lt;/Skeleton&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;
&lt;template #body&gt;
&lt;Skeleton&gt;&lt;/Skeleton&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
</template>
</code></pre>
</TabPanel>
</TabView>
</div>
</template>