PrimeOutputText
Data
{
"name": "Harry Potter",
"toTranslate": "sample",
"iconLeft": "Some Text ...",
"iconRight": "Another Text ...",
"html": "<b style=\"color: gold\">Bold Hello World</b>",
"slots": {}
}[
0
:
{
$formkit
:
primeOutputText
name
:
name
label
:
Basic
}
1
:
{
$formkit
:
primeOutputText
name
:
toTranslate
isTranslationKey
:
true
label
:
Translated
}
2
:
{
$formkit
:
primeOutputText
name
:
html
label
:
HTML as Text (Default)
}
3
:
{
$formkit
:
primeOutputText
name
:
html
html
:
true
label
:
HTML Output (v-html)
help
:
Only use on trusted content or sanitize after input !
}
4
:
{
$formkit
:
primeOutputText
id
:
icon
name
:
iconLeft
label
:
Icon Left
help
:
iconPrefix
:
pi pi-check
onIconPrefixClicked
:
function t(){console.error("Prefix Icon Clicked")}
}
5
:
{
$formkit
:
primeOutputText
name
:
iconRight
label
:
Icon Right
help
:
Right Icon Demo
iconSuffix
:
pi pi-check text-yellow-500
onIconSuffixClicked
:
function o(){console.error("Suffix Icon Clicked")}
}
6
:
{
$formkit
:
primeOutputText
name
:
name
label
:
Connvert to Uppercase
convertValue
:
function i(e){return e.toUpperCase()}
}
]
{
name
:
Harry Potter
toTranslate
:
sample
iconLeft
:
Some Text ...
iconRight
:
Another Text ...
html
:
<b style="color: gold">Bold Hello World</b>
slots
:
{
}
}
Formkit (1.6) - PrimeVue (4.4.x) - FormKit-PrimeVue-Version 3.1.1 - sfxcode 2025