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

69
doc/ripple/CustomDoc.vue
View File

@ -2,39 +2,42 @@
<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">
<div <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
v-ripple="{ <div class="flex justify-content-center gap-2">
pt: { <div
root: { style: 'background: rgba(75, 175, 80, 0.3)' } v-ripple="{
} pt: {
}" root: { style: 'background: rgba(75, 175, 80, 0.3)' }
class="p-ripple box" }
style="border: 1px solid rgba(75, 175, 80, 0.3)" }"
> class="p-ripple box"
Green style="border: 1px solid rgba(75, 175, 80, 0.3)"
</div> >
<div Green
v-ripple="{ </div>
pt: { <div
root: { style: 'background: rgba(255, 193, 6, 0.3)' } v-ripple="{
} pt: {
}" root: { style: 'background: rgba(255, 193, 6, 0.3)' }
class="p-ripple box" }
style="border: 1px solid rgba(255, 193, 6, 0.3)" }"
> class="p-ripple box"
Orange style="border: 1px solid rgba(255, 193, 6, 0.3)"
</div> >
<div Orange
v-ripple="{ </div>
pt: { <div
root: { style: 'background: rgba(156, 39, 176, 0.3)' } v-ripple="{
} pt: {
}" root: { style: 'background: rgba(156, 39, 176, 0.3)' }
class="p-ripple box" }
style="border: 1px solid rgba(156, 39, 176, 0.3)" }"
> class="p-ripple box"
Purple style="border: 1px solid rgba(156, 39, 176, 0.3)"
>
Purple
</div>
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />

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" />