vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merged new Docs and Demos

Browse source
This commit is contained in:
Cagatay Civici 2023-02-28 11:29:30 +03:00
parent 296cc217fb
commit dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
Download patch file Download diff file Expand all files Collapse all files

108
pages/styleclass/index.vue
View file

@ -1,87 +1,39 @@
<template>
<div>
<Head>
<Title>Vue StyleClass Directive</Title>
<Meta name="description" content="StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element." />
</Head>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>StyleClass</h1>
<p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
</div>
<AppDemoActions />
</div>
</div>
<div class="content-section implementation">
<div class="card">
<h5>Toggle Class</h5>
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
<InputText class="block mt-3" />
<h5>Animations</h5>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
<div class="box hidden">Content</div>
</div>
</div>
<StyleClassDoc />
</div>
<DocComponent
title="Vue StyleClass Component"
header="StyleClass"
description="StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element."
:componentDocs="docs"
:apiDocs="['StyleClass']"
/>
</template>
<script>
import StyleClassDoc from './StyleClassDoc.vue';
import AnimationDoc from '@/doc/styleclass/AnimationDoc';
import ImportDoc from '@/doc/styleclass/ImportDoc';
import ToggleClass from '@/doc/styleclass/ToggleClassDoc';
export default {
components: {
StyleClassDoc
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'toggleClass',
label: 'Toggle Class',
component: ToggleClass
},
{
id: 'animation',
label: 'Animation',
component: AnimationDoc
}
]
};
}
};
</script>
<style lang="scss" scoped>
.box {
background-color: var(--green-500);
color: #ffffff;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-radius: 4px;
margin-top: 1rem;
font-weight: bold;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
@keyframes my-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes my-fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.my-fadein {
animation: my-fadein 150ms linear;
}
.my-fadeout {
animation: my-fadeout 150ms linear;
}
</style>