Introduction to Pass Through Props Feature of PrimeVue

[@Astartes_]

Great job you're doing with PrimeVue, I use it daily for work and hobby projects!

[@codedjango]

Thank you....this is indeed a very unique concept....so far I havent seen this anywhere else....thank you so much PrimeVue 👍

[@cagataycivici]

My pleasure!

[@krycekaiolfi]

Coming from quasar, I can say that this feature is unbelievable useful

[@cagataycivici]

Quasar is also good with a wider scope afaik, PrimeVue focuses on UI components. Always good to have options to choose from. Vue deserves this.

[@larsm2001]

Excellent stuff. Any news on PT availability in PrimeNG?

[@EmirCivici]

Great video

[@cagataycivici]

Thanks!

[@justinwhite9978]

Love the frequent uploads!

[@cagataycivici]

Thanks, I plan to put up around 3 videos every week from now on.

[@VincenzoCoppolecchia]

Hello @cagataycivici, how can I use the property "datepickerMask" of Calendar component to mask my input? Thank you.

[@NicolasPL_]

And how could I apply a style globally to a directive like v-tooltip since it's not a component per-se?
Currently I have to add
v-tooltip="{ value: 'Text', class: 'tooltip' }
to every single element I want to have a tooltip on.
Would be great if I only had to do v-tooltip=" 'Text' " each time

[@CsabaKissColorado]

Great video! Could you, please, explain the 'slot' property with the pass-through options? For example, I would like to modify the icons for the on and off state of the ToggleButton component.

[@cagataycivici]

Sure thing! Icons are customized with templates/slots. Here is an overview video but I will put up a video on this next week.
ua-cam.com/video/cQ91ieniOfQ/v-deo.htmlsi=YqNKvbMVAXcCWRT4

[@CsabaKissColorado]

@@cagataycivici I am looking forward to the video I used this ternary expression in pt options to have different icons for true and false values: `icon: ({props}) => props.modelValue ? 'true-class': 'false-class'; `.
Is that the recommended way of doing it?

[@cagataycivici]

@@CsabaKissColorado Have you managed to make it work? We usually suggest templating instead of PT for such cases but if the font is a font icon e.g. fa-check or pi-check, PT should do the job as well.

[@CsabaKissColorado]

@@cagataycivici I managed to make it work. unfortunately, we can't use font icons (don't ask!), I needed to replace the simple primeIcons with custom classes that use svgs.

[@cagataycivici]

@@CsabaKissColoradoI had a team meeting and the general idea is to prefer templating instead of PT when customizing icons. We switched to inline SVGs instead of font icons in recent releases and provided templating for all of them.

[@mrrolandlawrence]

great tutorials.

[@cagataycivici]

Glad you like them!

[@hcivelek]

Sounds great!

[@mustafa60x]

great video

[@aturan-fo1qt]

Thanks 👍👍👍

[@LanFeusT23]

How do you use passthrough if you want breakpoints?

[@cagataycivici]

With util classes like md: sm:

[@LanFeusT23]

@@cagataycivici sorry I should have been more specific. That works for the class property. I wanted to know for the style option. One way is to set the style option to a css variable and then just use normal css to declare your vars and media queries

[@cagataycivici]

@@LanFeusT23The upcoming styled mode supports breakpoints but unstyled mode only supports it with utilities right now.