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

Update styleClass docs

pull/4683/head
Cagatay Civici 2023-10-23 23:54:51 +03:00
parent 259d5c1a5a
commit df1874fd35
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/styleclass/AnimationDoc.vue
View File

@ -8,7 +8,7 @@
<div class="card flex flex-column align-items-center"> <div class="card flex flex-column align-items-center">
<div> <div>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" /> <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" /> <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
</div> </div>
<div class="hidden animation-duration-500 box"> <div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div> <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
@ -24,7 +24,7 @@ export default {
code: { code: {
basic: ` basic: `
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" /> <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" /> <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
<div class="hidden animation-duration-500 box"> <div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div> <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
</div> </div>
@ -34,7 +34,7 @@ export default {
<div class="card flex flex-column align-items-center"> <div class="card flex flex-column align-items-center">
<div> <div>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" /> <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" /> <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
</div> </div>
<div class="hidden animation-duration-500 box"> <div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div> <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
@ -94,7 +94,7 @@ export default {
<div class="card flex flex-column align-items-center"> <div class="card flex flex-column align-items-center">
<div> <div>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" /> <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" /> <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
</div> </div>
<div class="hidden animation-duration-500 box"> <div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div> <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>

6
doc/styleclass/ToggleClassDoc.vue
View File

@ -3,7 +3,7 @@
<p>StyleClass has two modes, <i>toggleClass</i> to simply add-remove a class and enter/leave animations.</p> <p>StyleClass has two modes, <i>toggleClass</i> to simply add-remove a class and enter/leave animations.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center gap-3">
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" /> <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
<InputText /> <InputText />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -21,7 +21,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center gap-3">
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" /> <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
<InputText /> <InputText />
</div> </div>
</template> </template>
@ -32,7 +32,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center gap-3">
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" /> <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
<InputText /> <InputText />
</div> </div>
</template> </template>