TextView

Źródło: views/TextView.js

TextView

Widok tekstowy, renderuje prostą zawartość tekstową lub HTML. Obsługuje akcję onClick, dzięki czemu można tworzyć klikalne linki.

Parametry

type - Typ widoku: "text"
content [template] - Zawartość tekstowa (wymagane)
data - Dane do zastąpienia w szablonie (opcjonalne)
onClick [template] - Akcja wykonywana po kliknięciu (opcjonalne)
style - Style inline: string CSS ("color: red") lub obiekt ({ "fontWeight": "600" })

Warianty typografii

Zamiast style: opisz wygląd tekstu publicznymi opcjami — schemat nie musi wtedy znać klas CSS ani wartości font-size:

size - xs | sm | md | lg | xl (domyślnie md)
muted - Przygaszony kolor tekstu (true / false)
weight - light | normal | medium | semibold | bold
dense - Ciasna interlinia i brak dolnego marginesu (wiersze etykieta/wartość)
align - start | center | end
transform - uppercase | lowercase | capitalize
variant - Kolor semantyczny (primary, danger, success, …)

type: text
content: Numer zamówienia
size: sm
muted: true
transform: uppercase
dense: true

Wariant można wybrać warunkowo — patrz variantIf i classIf w dokumentacji wspólnych pól widoku.

Aby renderować HTML, użyj widoku HtmlView (type: "html").

Przykłady użycia

Zwykły tekst

type: text
content: "Witaj w systemie {{ $global.username }}!"

Klikalny link nawigacyjny

type: text
content: "Zamówienie #12345"
onClick:
  action: emit
  event: generatePage
  data:
    module: core/orders
    page: details/12345

W połączeniu z innymi widokami

type: card
title: "Informacje"
content:
  - type: text
    content: "Here is some text content."

Widok sam nasłuchuje zmiennych użytych w content — po zmianie {{ $page.total }}, {{ docItems.0.qty }} czy {{ sum docItems "netValue" }} treść przelicza się bez reload i bez onVarChange w schemacie.

Reaguje przy tym na oba rodzaje zapisu zmiennej: zwykły (setVar, arrayPush, arrayRemove) oraz cichy (arraySet bez rerender), którego listy i tabele celowo ignorują. Dzięki temu w edytowalnej liście pozycji sumy i kwoty wiersza aktualizują się w trakcie pisania, a input nie traci fokusu.

Obsługiwane eventy

reload:{id} – Ponownie parsuje i renderuje zawartość content (przydatne gdy zmienią się zmienne szablonu).

Dostępne akcje onClick

Pole onClick obsługuje wszystkie akcje zdefiniowane w ActionHandler. Pełna dokumentacja: Dostępne Akcje (ActionHandler)