Warianty stylistyczne

Źródło: styleVariants.js, BaseView.js

Wygląd opisuje się nazwanymi opcjami, a nie klasami CSS ani wartościami font-size. Zamiana opcji na klasy dzieje się w jednym miejscu — styleVariants.js — dzięki czemu:

schemat nie musi znać klas frameworka ani wewnętrznego DOM-u widoku,
zmiana biblioteki CSS to zmiana jednego pliku, a nie setek widoków,
warianty są wspólne: widoki prezentacyjne opisują typografię tym samym słownikiem.

Nieznana wartość opcji jest ignorowana i zgłaszana ostrzeżeniem w konsoli (z listą dozwolonych wartości), więc literówka w schemacie nie psuje układu strony. Zestaw dozwolonych wartości zwraca też funkcja getStyleVariantOptions().

type: card
padding: sm
shadow: none
content:
  - type: text
    content: Klient
    size: sm
    muted: true
    transform: uppercase
    dense: true
  - type: input
    id: customerNameInput
    variant: borderless      # pole bez ramki — edycja inline

Typografia

Działa w widoku text; opcja align obsługiwana jest dodatkowo w kolumnach datatable.

Opcja	Dozwolone wartości
`size`	`xs`, `sm`, `md`, `lg`, `xl` (`md` to rozmiar bazowy — bez klasy)
`weight`	`light`, `normal`, `medium`, `semibold`, `bold`
`align`	`start`, `center`, `end`
`transform`	`uppercase`, `lowercase`, `capitalize`

Oprócz nich typografia przyjmuje trzy opcje bez słownika:

Opcja	Znaczenie
`muted`	Przygaszony kolor tekstu
`dense`	Ciasna interlinia i brak dolnego marginesu (wiersze etykieta/wartość)
`variant`	Kolor semantyczny (`primary`, `danger`, `success`…)

Pole formularza

Działa w widokach input i textinput (opcje variant i size) oraz w stepper, który przyjmuje inputVariant i size — samo variant opisuje w nim kolor przycisków „−” / „+”.

Opcja	Dozwolone wartości
`variant`	`default`, `borderless`, `plaintext`, `rounded`
`size`	`sm`, `md`, `lg` (`md` to rozmiar bazowy — bez klasy)

borderless to publiczny odpowiednik edycji inline: pole bez ramki i tła, wtopione w otaczający tekst.

Karta

Działa w widoku card.

Opcja	Dozwolone wartości
`padding`	`sm`, `md`, `lg`
`shadow`	`none`, `sm`, `md`, `lg`
`borderless`	Flaga — karta bez obramowania

Warianty i klasy warunkowe

Wariant nie musi być stały: variantIf wybiera go warunkiem (wygrywa pierwszy spełniony warunek, brak trafienia oznacza powrót do variant ze schematu), a classIf włącza i wyłącza klasy. Oba korzystają z tego samego evaluatora co renderIf, więc działają operatory, porównania typowane, notacja .$ i operandy { valueFrom }.

type: badge
label: Braki
variant: secondary
variantIf:
  danger: { packingDetail.missingQty: { $gt: 0 } }
  success: { packingDetail.missingQty: 0 }

Widok nasłuchuje obu stron porównania, więc wariant i klasa przeliczają się bez przeładowania strony. Pełny opis składni: BaseView – Klasa bazowa.

Powiązane: BaseView – Klasa bazowa · Kontrolki wartości · TextView · CardView