Text

The Text component is a simple component used to display text or a label in a user interface. It is commonly used to provide a description or title for other components, such as input fields, buttons, or icons.

Props

Name	Description	Type
class	Allows custom properties to take effect.	string
processHtml	It processes html tags in Text component's text.	boolean
text	Sets the default text.	string
tagType	Text tag type.	string
whiteSpace	The property specifies how white-space inside an element is handled.	string
overflow	The property specifies what should happen if content overflows an element's box.	string
textOverflow	The property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.	string
visible	Visibility of Text component.	boolean

Mobile Usage

• If you want a Text to wrap to the next line, define a custom CSS class for the respective Text and give it a min-height value.

• If you want to display Text components side by side, you can add as many Text components as you want inside a single VCol within a VRow-VCol structure, and set the direction of VCol to Row.

• If you want to display Text components stacked vertically, place each Text component in a separate VCol within a VRow-VCol structure, and set the direction of VCol to Col.

Usage Scenarios

Using Html Tags

If you intend to use HTML tags within Text on mobile, set the processHtml prop to true.

Supported tags; a, b, i tags.

'Google''da yeni bir sayfa açmak için bu bağlantıya <a target="_blank" href="https://www.google.com">tıklayınız.</a>'

Using Html Tags With Click Event

If you intend to use HTML tags within Text on mobile, set the processHtml prop to true.

Users can also trigger their previously declared quick events. For this, the following steps should be applied:

'Google''da yeni bir sayfa açmak için bu <a onclick="myEvent()">bağlantıya</a> tıklayın.'

• You should add a custom event to the PageComponent and perform the operations in it should be defined. (MyEvent in this example)

• The added custom event must be declared in the PostRender event of the PageComponent.

• You should trigger the custom event in the html tag added to the text of the Text component.

Using Html Tags With Click Event And Send Parameters to Event

If you intend to use HTML tags within Text on mobile, set the processHtml prop to true.

Supported tags; a, b, i tags.

• You should add a custom event to the PageComponent and perform the operations in it should be defined. (DownloadTemplateContract in this example). Declare param in DownloadTemplateContract event.

  declare var fileName;

• The added custom event must be declared in the PostRender event of the PageComponent.

  declare var downloadTemplateContract: any;
  downloadTemplateContract = quick.MM.get("DownloadTemplateContract");

• You should trigger the custom event in the html tag added to the text of the Text component.

  let fileName = "{fileName:'contractName.pdf'}";
  let labelText = `<a onclick="downloadTemplateContract(${fileName})">Sozlesme</a>, ParaTransferi API Sözleşmesi Şablonu´nu bu linkleri kullanarak indirebilirsiniz.`;
  
  components.myText.text = labelText;

Samples Qjson

TextComponent_Props
TextComponent_URL
TextComponent_URL_Click
TextComponent_URL_Click_SendParams