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

Message for ripple

pull/5507/head
Cagatay Civici 2024-04-01 14:14:04 +03:00
parent fd1fea360d
commit 20a0e94aa4
2 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
doc/ripple/CustomDoc.vue
View File

@ -2,7 +2,9 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p> <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center align-items-center gap-2"> <div class="card flex flex-column gap-3 align-items-center">
<span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
<div class="flex justify-content-center gap-2">
<div <div
v-ripple="{ v-ripple="{
pt: { pt: {
@ -37,6 +39,7 @@
Purple Purple
</div> </div>
</div> </div>
</div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>

3
doc/ripple/DefaultDoc.vue
View File

@ -2,7 +2,8 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p> <p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center align-items-center"> <div class="card flex flex-column align-items-center gap-3">
<span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div> <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />