mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 17:02:38 +00:00
Merged new Docs and Demos
This commit is contained in:
Cagatay Civici
parent
296cc217fb
commit
dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
|
|
@ -1,165 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Vue Skeleton Component</Title>
|
||||
<Meta name="description" content="Skeleton is a placeholder to display instead of the actual content." />
|
||||
</Head>
|
||||
|
||||
<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>
|
||||
<AppDemoActions />
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<div class="grid formgrid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" class="mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem"></Skeleton>
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<h5>Rounded</h5>
|
||||
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<h5 class="mt-3">Square</h5>
|
||||
<div class="flex align-items-end">
|
||||
<Skeleton size="2rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="3rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="4rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<h5 class="mt-3">Circle</h5>
|
||||
<div class="flex align-items-end">
|
||||
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="grid formgrid">
|
||||
<div class="field col-12 md:col-6 md:pr-6 pr-0">
|
||||
<h5>Card</h5>
|
||||
<div class="custom-skeleton p-4">
|
||||
<div class="flex mb-3">
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<div>
|
||||
<Skeleton width="10rem" class="mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="mb-2"></Skeleton>
|
||||
<Skeleton height=".5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="flex justify-content-center mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field col-12 md:col-6">
|
||||
<h5>List</h5>
|
||||
<div class="custom-skeleton p-4">
|
||||
<ul class="m-0 p-0">
|
||||
<li class="mb-3">
|
||||
<div class="flex">
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<div class="flex">
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<div class="flex">
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex">
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<div style="flex: 1">
|
||||
<Skeleton width="100%" class="mb-2"></Skeleton>
|
||||
<Skeleton width="75%"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>DataTable</h5>
|
||||
<DataTable :value="products" responsiveLayout="scroll">
|
||||
<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>
|
||||
<DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" :apiDocs="['Skeleton']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SkeletonDoc from './SkeletonDoc';
|
||||
import Accessibility from '@/doc/skeleton/AccessibilityDoc.vue';
|
||||
import CardDoc from '@/doc/skeleton/CardDoc.vue';
|
||||
import DataTableDoc from '@/doc/skeleton/DataTableDoc.vue';
|
||||
import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
|
||||
import ListDoc from '@/doc/skeleton/ListDoc.vue';
|
||||
import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
|
||||
import StyleDoc from '@/doc/skeleton/StyleDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: new Array(4)
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'shapes',
|
||||
label: 'Shapes',
|
||||
component: ShapesDoc
|
||||
},
|
||||
{
|
||||
id: 'card',
|
||||
label: 'Card',
|
||||
component: CardDoc
|
||||
},
|
||||
{
|
||||
id: 'list',
|
||||
label: 'List',
|
||||
component: ListDoc
|
||||
},
|
||||
{
|
||||
id: 'datatable',
|
||||
label: 'Datatable',
|
||||
component: DataTableDoc
|
||||
},
|
||||
{
|
||||
id: 'style',
|
||||
label: 'Style',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: Accessibility
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
components: {
|
||||
SkeletonDoc: SkeletonDoc
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue