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

Update ripple icon

pull/5806/head
Cagatay Civici 2024-05-30 10:55:09 +03:00
parent 9efabff1f8
commit 9faf06141f
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
doc/ripple/CustomDoc.vue
View File

@ -3,7 +3,9 @@
<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 flex-col gap-4 items-center"> <div class="card flex flex-col gap-4 items-center">
<span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span> <span
>Ripple option at the <span class="mx-1 h-8 w-8 rounded-border inline-flex items-center justify-center bg-primary text-primary-contrast"><i class="pi pi-palette"></i></span> configurator needs to be turned on for the demo.</span
>
<div class="flex justify-center gap-2"> <div class="flex justify-center gap-2">
<div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div> <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
<div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div> <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>

4
doc/ripple/DefaultDoc.vue
View File

@ -3,7 +3,9 @@
<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 flex-col items-center gap-4"> <div class="card flex flex-col items-center gap-4">
<span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span> <span
>Ripple option at the <span class="mx-1 h-8 w-8 rounded-border inline-flex items-center justify-center bg-primary text-primary-contrast"><i class="pi pi-palette"></i></span> configurator needs to be turned on for the demo.</span
>
<div v-ripple class="ripple-box">Default</div> <div v-ripple class="ripple-box">Default</div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />