Verwende Visa Nova CSS, um eine übersichtliche Auswahl für das Abrechnungsformat mit nativen Optionsfeldern, einem Kopfbereich in alternativer Farbe und einer Zusammenfassung zur Überprüfung zu erstellen. Sieh dir die exakten Theme-Werte der Version 1.6.5, skalierbare Abstände und die vollständige Integration des Stylesheets an.
Native @visa/nova-styles 1.6.5 CSS und lokal eingebettetes Visa-Theme; entfernte @font-face-Regeln und Verwendung von Systemschriften. Ursprüngliches Anwendungslayout und lokales Skript. · Implementierungsreferenz
02
Visa Product Designsystem-Designreferenz
Veröffentlichte Stile von @visa/nova-styles 1.6.5, Visa-Theme und Metadaten des Beispiels. Standard-/helle Werte sind von alternativen und dunklen Überschreibungen getrennt. Die Vorschau bettet das offizielle CSS lokal ein, entfernt entfernte @font-face-Regeln und verwendet eine Systemschrift als Fallback.
Visa Product Designsystem – Eine Aufgabe zur Auswahl mit übersichtlicher Überprüfungsansicht
Jede Frage unabhängig halten
Im Beispiel werden das Abrechnungsformat und die Häufigkeit der Zusammenfassung abgefragt. Dafür gibt es zwei getrennte Radio-Gruppen: Eine Änderung der Häufigkeit hebt die Formatwahl nicht auf. Vor der Hauptaktion wiederholt die Zusammenfassung beide ausgewählten Optionen. So kann die nutzende Person das Ergebnis prüfen, ohne ein Symbol deuten oder einen verborgenen Standardwert berücksichtigen zu müssen.
Die Bestätigung der Einstellung speichert lediglich eine lokale Bestätigung. Die Seite fordert keine Kartennummer an, ruft kein Konto ab, erstellt keine Abrechnung und ändert keine Einstellung eines Finanzdienstes. Dadurch bleibt das Beispiel auf das Auswahl- und Feedbackverhalten des Designsystems fokussiert.
Visa Product Designsystem-Stile und das Visa-Theme werden separat importiert
Die Struktur allein bildet nicht das gesamte Theme ab
Die offizielle Installationsanleitung zeigt zuerst styles.css und danach themes/visa/index.css. Die erste Datei stellt die Komponenten- und Utility-Regeln bereit; die zweite liefert das Visa-Theme. Nur eine der beiden Dateien zu laden, ist keine vollständige Integration. Das eigenständige Beispiel und der Importausschnitt behalten beide diese Reihenfolge bei.
Das geprüfte Paket hat die Version 1.6.5. Das Beispiel bettet sein CSS lokal ein, sodass beim Aufrufen keine Anfrage an ein Stylesheet eines Drittanbieters erforderlich ist. Entfernte @font-face-Deklarationen wurden entfernt und die Anwendung verwendet ausdrücklich eine Systemschrift als Fallback. Dies ist ein natives Nova-CSS mit offengelegtem Ersatz der Schriftart, keine Behauptung einer exakten Übereinstimmung mit der proprietären Schrift.
Visa Product Designsystem-Standard- und alternative Paletten enthalten jeweils passende Vordergrundfarben
Eine Füllfarbe nicht ohne die zugehörige Textrolle übernehmen
Die aktive Farbe des Standard-/hellen Themes ist #1434cb, bei Hover #173be8 und im gedrückten Zustand #0f2595. Die zugehörige Textfarbe auf der aktiven Fläche ist Weiß. Im alternativen Theme-Kontext ändert sich die Zuordnung der Rollen. Deshalb verwendet das Beispiel v-alternate auf der Kopfzeilenfläche, statt nur deren Hintergrund zu überschreiben.
Akzentfarbe #fcc015 ist keine universelle Füllfarbe für Schaltflächen. Der Theme-Kontext bestimmt, wie Akzent- und Aktivrollen verwendet werden. Die Referenztabelle beschreibt die Standardpalette; die später im selben Stylesheet definierten dunklen und alternativen Werte werden nicht zu einer irreführenden einheitlichen Wertemenge zusammengefasst.
Visa Product Designsystem-rem-Skala im Verhältnis zum Theme-Stammverzeichnis lesen
Ein 14-Pixel-Theme-Stammverzeichnis verändert die gewohnten rem-Annahmen
Das Visa-Theme definiert eine Schriftgrößenbasis von 14 Pixeln. Der Wert für headline-1 von ungefähr 2.285714rem entspricht bei dieser Basis also 32 Pixeln und nicht dem Wert, der sich bei einer angenommenen Basis von 16 Pixeln ergibt. body-1 entspricht ungefähr 1.142857rem, body-2 dagegen 1rem.
Skalierbare Größentokens geben einen Pixelwert multipliziert mit dem Skalierungsfaktor des Themes an. In responsiven Kontexten kann ein zweiter Faktor hinzukommen. Übernimm den Ausdruck, wenn du Abstände an eine Anwendung anpasst: Wird nur der standardmäßig berechnete Wert kopiert, geht dieser Zusammenhang verloren. Das Beispiel verwendet offizielle Gap-Hilfsklassen für die Häufigkeitsoptionen und ursprüngliche Anwendungsmaße für das gesamte geteilte Layout.
Visa Product Designsystem Native Radiobutton-Semantik mit Nova-Darstellung
Ein gestalteter Kreis ist keine Radiogruppe
Die öffentlichen Metadaten verwenden v-radio für ein echtes input type="radio" und verknüpfen es mit einem Label. Die Vorschau behält diese native Struktur bei und umschließt die sichtbare Beschreibung jeder Option mit ihrem Label. Mit den Pfeiltasten lässt sich innerhalb einer Gruppe navigieren; der Auswahlzustand bleibt für den Browser und unterstützende Technologien verfügbar.
Ein Fieldset und eine Legende benennen jeweils eine Frage. Die Formatoptionen erläutern ihre Konsequenzen: Eine PDF-Datei ist eine herunterladbare Leseprobe, während HTML als umfließbarer Text beschrieben wird. Die konkreten Produktinhalte sind eigens erstellt; Aufbau und Klassen der Steuerelemente stammen aus der nativen Bibliothek.
Verwende für die beiden Formatoptionen denselben Namen und für die Häufigkeit einen anderen.
Halte den Radiowert getrennt vom sichtbaren Text, damit die Zusammenfassung ein dauerhaft eindeutiges Label verwenden kann.
Verwende für Zustände die Attribute checked und disabled statt nur eine dekorative Klasse.
Visa Product Designsystem Nova CSS gestaltet die Steuerelemente; das native HTML verwaltet die Auswahl
Gruppierung und Prüfablauf gehören nicht ins Stylesheet
Das Beispiel verwendet Novas Klasse v-radio für echte Radio-Inputs. Gemeinsame name-Attribute machen die Formatauswahl exklusiv; ein anderer Name trennt die Häufigkeitsgruppe. Fieldset und Legend liefern den Gruppenkontext, und ein zugeordnetes Label sorgt dafür, dass der vollständige Optionstext Teil des zugänglichen Namens des Steuerelements ist.
Das Paket CSS wählt keine Option aus, verwaltet keine dauerhafte Speicherung in der Anwendung und erstellt keinen Prüfdatensatz. Das bereitgestellte Skript liest die beiden nativen Gruppen aus und erstellt eine lokale Zusammenfassung. Bei einer Änderung wird diese Zusammenfassung gelöscht, da die vorherigen Werte nicht mehr der aktuellen Auswahl entsprechen.
Binde sowohl das strukturelle Stylesheet als auch das Visa-Theme in die Implementierung ein. Für den alternativen Header wird v-alternate verwendet; das Formular bleibt im standardmäßigen Farbkontext. Imitiere den Header nicht, indem du nur seinen Hintergrund änderst und die Rollen der Vordergrundfarben ungeklärt lässt.
Visa Product Designsystem Ein Lesefluss bei jeder Bildschirmbreite
Verschiebe die Zusammenfassung, ohne die Aufgabenreihenfolge zu ändern
Auf breiten Bildschirmen stehen die Auswahlgruppen und die Zusammenfassung der aktuellen Auswahl nebeneinander. Auf schmalen Bildschirmen folgt die Zusammenfassung auf das Formular. Die ursprüngliche Dokumentillustration entfällt, da sie keine Informationen zur Aufgabe beiträgt; alle Labels, Erläuterungen und Aktionen bleiben erhalten.
Die Bibliothek CSS unterstützt moderne Evergreen-Browser. Die offiziellen Entwicklungshinweise versprechen keine Kompatibilität mit älteren Browsern. Ein Produktionsteam sollte daher die tatsächlich unterstützten Versionen testen, statt eine erfolgreiche Vorschau in einem modernen Browser als allgemeine Kompatibilitätsgarantie zu betrachten.
Binde die festgelegte strukturelle CSS und das Visa-Theme ein und ergänze anschließend die Layoutstile der Anwendung.
Wähle Accessible HTML und Quarterly aus, prüfe die Auswahl und vergewissere dich, dass beide in der Zusammenfassung erscheinen.
Ändere eine der beiden Auswahlen und bestätige, dass die Prüfbestätigung zurückgesetzt wird. Teste anschließend Reset und das schmale Layout.
CSS liefert die Darstellung der Komponenten; das kleine Skript ergänzt das Anwendungsverhalten.
Durch eine Änderung der Auswahl wird der vorherige Prüfstatus gelöscht.
Der alternative Header verwendet einen echten Theme-Kontext und ist keine handgemalte Nachbildung der Farbpalette.
Speichere die vollständige HTML als index.html und öffne sie in einem Browser, der auf die festgelegten öffentlichen CSS-URLs zugreifen kann. Die eingebettete Vorschau in dieser Anleitung hält diese Styles lokal.
Struktur und Theme gemeinsam laden
Importiere in einer gebündelten Anwendung beide Ebenen einmalig vor dem Stylesheet der Anwendung.
Fehlt die Theme-Datei, können strukturelle Klassen vorhanden sein, ohne dass die vorgesehenen Visa-Tokens zur Verfügung stehen.
04
Visa Product Designsystem – Agent einrichten
Ausgangspunkt für die Implementierung
Die vollständige HTML verwendet die verifizierten Pfade styles.css und themes/visa/index.css. Beide Dateien sind erforderlich. Im Iframe sind diese Styles lokal eingebettet; offizielle remote font-face-Deklarationen entfallen dort.
Shell / HTML
npm create vite@latest statement-preference -- --template vanilla
cd statement-preference
npm install
npm install @visa/[email protected]
# Replace index.html with the complete example below.
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erstelle das Visa-Nova-Beispiel zur Auswahl des Abrechnungsformats mit der festgelegten strukturellen CSS und dem zugehörigen Theme. Behalte native Radiogruppen, aussagekräftige Legenden und zugeordnete Labels bei. Trenne die Rollen des Standard-Themes von denen des alternativen Themes und berücksichtige beim Lesen der rem-Werte die Schriftgrößenbasis von 14 px. Halte die Prüfung lokal, lösche nach Änderungen veraltete Bestätigungen und ordne die Zusammenfassung auf schmalen Bildschirmen unter dem Formular an.
05
Visa Product Designsystem – Quellen und Geltungsbereich
Eigenständige OpenDesign-Anleitung mit nativen Nova-CSS. Diese fiktive Auswahlaufgabe verwendet keine Kontodaten und ändert keine Finanzdienstleistung. In der Vorschau wird auf Systemschriftarten als Ersatz hingewiesen.
