Untersuche Volvos HTML-orientierte Web-Grundlage, die tatsächlichen Tokens für den hellen Modus und das native Styling auswählbarer Karten anhand eines vollständigen Beispiels zur Packungsplanung mit unabhängigen Auswahlmöglichkeiten, Theme-Wechsel und Zurücksetzen.
Veröffentlichte auswählbare Karten-Styles von Volvo Cars CSS 2.5.1; native HTML-Eingaben und eigene Checklistenlogik. · Implementierungsreferenz
02
Volvo Cars Web Designsystem-Designreferenz
Tatsächliche öffentliche Tokens von @volvo-cars/css 2.5.1, abgestimmt auf das dokumentierte Markup für auswählbare Karten. Angezeigt werden die Standardwerte für den hellen Modus; der dunkle Modus wird vom selben Stylesheet bereitgestellt.
Volvo Cars Web Designsystem HTML-zuerst Foundation und Versionsauswahl
Binden Sie das Stylesheet ein, das zum Muster passt
Das Beispiel verwendet @volvo-cars/css 2.5.1 und entspricht damit der Referenz für auswählbare Karten, die bei der Implementierung verwendet wurde. Version 3 hat einen anderen Vertrag. Wird ohne Prüfung des Markups einfach das neueste Paket installiert, kann ein Muster unvollständig bleiben. Die Version gehört sowohl in die Einrichtung als auch in den Leitfaden: Eine Komponentenklasse garantiert nicht, dass sie in jeder Version gleich gestylt wird.
Verwenden Sie die öffentliche Webebene gezielt
Diese Studie bindet die öffentlichen Web-Tokens und das All-Media-Stylesheet direkt ein. Sie ist nicht vom separaten internen EDLS-Paket abhängig. Die Anwendung bleibt einfaches HTML mit etwas JavaScript für die Checkliste. Das installierte CSS übernimmt das Aussehen der auswählbaren Karten, das Styling der Steuerelemente und die Rollen für den Farbmodus; die App stellt Inhalte und Zustand bereit.
Volvo Cars Web Designsystem Neutrale Rollen, Typografie und Abstände
Verknüpfen Sie die Rollen für den hellen und dunklen Modus
Die Tabelle dokumentiert die Standarddeklarationen für den hellen Modus, während data-color-mode die entsprechenden nativen Werte für den dunklen Modus auswählt. Das Layout verwendet Rollen für Hintergrund und Vordergrund, statt auf jeder Karte weißen Text fest zu codieren. Ein Theme-Wechsel sollte den ausgewählten Plan und die Extras beibehalten; ein Wechsel der Farbpalette ist unabhängig von Änderungen an der Checkliste.
Unterscheiden Sie feste Schritte vom flexiblen Seitenrhythmus
Die festen Abstände der ausgewählten Referenz reichen von 2px bis 64px. Andere öffentliche Seiten-Tokens verwenden clamp und round und passen sich daher an den Viewport an. Das zweispaltige Layout und der Abstand von 40px im Beispiel sind eigene Layoutentscheidungen rund um die nativen Karten. Der veröffentlichte Schriftstapel bleibt erhalten, die Volvo-Schriftdateien sind jedoch nicht enthalten; dargestellt wird der verfügbare System-Fallback.
Volvo Cars Web Designsystem-Semantik für auswählbare Karten
Verwenden Sie Radio-Eingaben für die Auswahl eines Plans
Die beiden Plankarten enthalten native Radio-Buttons mit demselben name-Attribut innerhalb eines fieldset mit legend. Jede Karte ist ein label mit Bereichen für Titel, Metadaten und Beschreibung. Ein Klick auf die Karte wählt den zugehörigen Radio-Button aus; das übliche Tastaturverhalten von Radio-Buttons bleibt erhalten. Der ausgewählte Plan ist somit tatsächlicher Formularzustand und kein separat verwalteter dekorativer Rahmen.
Verwenden Sie Checkboxen für unabhängige Ergänzungen
Wasser und eine zusätzliche Kleidungsschicht können unabhängig voneinander ausgewählt werden und verwenden daher Checkboxen. Die Karten enthalten keine verschachtelten Links oder Buttons: Ein interaktives Element innerhalb eines label würde zu widersprüchlichem Aktivierungsverhalten führen. Die Aktionen der Zusammenfassung befinden sich außerhalb der Karten. Die veröffentlichte Formularebene React ist eine Alternative, wenn das Design tatsächlich komplexere interaktive Karteninhalte benötigt.
Platzieren Sie eine Radio-Gruppe in einem gemeinsamen fieldset mit legend.
Verwenden Sie Checkboxen für unabhängige Ergänzungen.
Platzieren Sie Links und Buttons außerhalb einer reinen CSS-label-Karte.
Volvo Cars Web Designsystem Abgeleitete Checkliste und Bestätigung
Leiten Sie die Zusammenfassung aus denselben Steuerelementen ab
Die Zusammenfassung kombiniert die Grundausstattung des gewählten Plans mit den ausgewählten Extras. Wird ein anderer Radio-Button gewählt, werden Titel und Grundausstattung aktualisiert; unabhängige Extras bleiben erhalten. Die Anzahl wird aus der resultierenden Liste abgeleitet. Alle Beispielinhalte der Packliste sind eigenständig und vermeiden bewusst Angaben zu Fahrzeugspezifikationen, Preisen oder einer tatsächlichen Volvo-Kaufkonfiguration.
Setzen Sie eine veraltete Bestätigung zurück, wenn sich die Auswahl ändert
Volvo Cars Web Designsystem Farbmodus und responsives Layout
Trennen Sie das Theme vom Checklistenstatus
Die Auswahl des Farbmodus ändert data-color-mode im Dokument. Radio-Buttons, Checkboxen und Zusammenfassung werden dadurch nicht neu erstellt. Das native Stylesheet blendet einige Oberflächen über; prüfen Sie daher das vollständig umgestellte Theme und nicht einen Screenshot aus der Mitte des Übergangs. Text, Zustand der Steuerelemente und Kontrast der Oberflächen sollten gemeinsam überprüft werden.
Ordnen Sie den Lesefluss bei schmalen Ansichten untereinander an
Die Packauswahl steht in der Dokumentreihenfolge vor der Zusammenfassung. Bei Smartphone-Bildschirmbreiten wird aus dem zweispaltigen Raster eine Spalte; die Reihenfolge und alle Aktionen bleiben erhalten. Für Fieldsets gilt min-width:0, damit ihre Standardgröße keinen horizontalen Überlauf erzwingt. Lange Karteninhalte werden innerhalb des Layouts der ausgewählten Karte umbrochen, statt über den übergeordneten Bereich hinauszuragen.
Volvo Cars Web Designsystem Vollständiger Quellcode und lokale Überprüfung
Die beiden Quelldateien mit dem passenden Paket ausführen
JavaScript enthält den vollständigen Originalinhalt und alle Interaktionshandler. CSS umfasst nur die Anwendungszusammensetzung sowie eine lokale Fallback-Lösung für Häkchen in Checkboxen. Verwenden Sie das bereitgestellte HTML-Shell-Skript, speichern Sie die beiden Quelldateien und installieren Sie das festgelegte Release von CSS. Der Import des Stylesheets allein würde zwar die Steuerelemente gestalten, aber weder die Checklisten-Zählung noch die lokale Bestätigung implementieren.
Die Vanilla-App erstellen und @volvo-cars/css 2.5.1 installieren.
main.js, volvo.css und das bereitgestellte HTML-Root-Shell-Skript speichern.
Die App ausführen und das Verhalten von Optionsfeldern und Checkboxen vergleichen.
Die stabilisierten hellen und dunklen Themes sowie den zurückgesetzten Zustand prüfen.
Auswahl, Theme und Wiederherstellung gemeinsam prüfen
Den Küstenplan auswählen, Wasser hinzufügen und prüfen, ob vier Einträge angezeigt werden. Den Plan beibehalten, eine zusätzliche Schicht hinzufügen und kontrollieren, ob die vorherige Bestätigung verschwindet. Zum dunklen Modus wechseln, ohne die Auswahl zu verlieren, und anschließend zum ersten Plan ohne Extras zurücksetzen. Die Optionsfeldauswahl per Tastatur und den Umbruch auf schmalen Bildschirmen prüfen sowie die stabilisierten hellen und dunklen Oberflächen ansehen.
Volvo Cars Web Designsystem Beispiele für Designsystem-Komponenten
main.js — vollständige Planauswahl
Alle Auswahlmöglichkeiten, abgeleitete Zusammenfassung, lokale Bestätigung, Theme und Zurücksetzen.
javascript
import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/styles_all-media.css';
import './volvo.css';
document.querySelector('#root').innerHTML=`<main><header><p class="eyebrow">OpenDesign · Original planning study</p><h1>A little room for the weekend.</h1><p class="intro">Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.</p><label class="mode">Color mode <select id="mode"><option value="light">Light</option><option value="dark">Dark</option></select></label></header><div class="composition"><div><fieldset class="stack-16"><legend>Choose your plan</legend><label class="selectable-card"><input type="radio" name="plan" value="city" checked><span slot="title">A day in the city</span><span slot="meta">Travel light</span><span slot="description">Space for a day bag and the things you use most.</span></label><label class="selectable-card"><input type="radio" name="plan" value="coast"><span slot="title">A quiet coastal break</span><span slot="meta">Stay a little longer</span><span slot="description">Bring layers, a weekend bag and time to pause.</span></label></fieldset><fieldset class="stack-16 extras"><legend>Add to your checklist</legend><label class="selectable-card"><input type="checkbox" value="water"><span slot="title">Water and a reusable cup</span><span slot="description">Keep everyday essentials close at hand.</span></label><label class="selectable-card"><input type="checkbox" value="layers"><span slot="title">An extra layer</span><span slot="description">Prepare for a change in the weather.</span></label></fieldset></div><aside class="summary bg-secondary p-24 shape-default"><p class="eyebrow">Your local checklist</p><h2 id="plan-title">A day in the city</h2><ul id="items"></ul><p id="count" role="status"></p><button type="button" class="button-filled" id="save">Keep this plan</button><button type="button" class="button-text" id="reset">Start again</button><p id="saved" role="status" hidden></p></aside></div><p class="note">Published Volvo Cars CSS 2.5.1 selectable-card styling with original packing content and local behavior. The preview uses the stylesheet’s system-font fallback; Volvo font assets are not bundled. Nothing is booked, purchased or sent.</p></main>`;
const plans={city:{title:'A day in the city',items:['Day bag','Comfortable shoes']},coast:{title:'A quiet coastal break',items:['Weekend bag','Route notes','A good book']}};const extras={water:'Water and a reusable cup',layers:'An extra layer'};let current='city';
function render(){current=document.querySelector('[name=plan]:checked').value;let list=[...plans[current].items,...[...document.querySelectorAll('.extras input:checked')].map(e=>extras[e.value])];document.querySelector('#plan-title').textContent=plans[current].title;const ul=document.querySelector('#items');ul.replaceChildren(...list.map(x=>{let li=document.createElement('li');li.textContent=x;return li}));document.querySelector('#count').textContent=`${list.length} things on your checklist`;document.querySelector('#saved').hidden=true;}
document.querySelectorAll('fieldset input').forEach(e=>e.addEventListener('change',render));document.querySelector('#mode').addEventListener('change',e=>document.documentElement.dataset.colorMode=e.target.value);document.querySelector('#save').addEventListener('click',()=>{let p=document.querySelector('#saved');p.hidden=false;p.textContent='Plan kept in this page. Changing a choice will clear this confirmation.';});document.querySelector('#reset').addEventListener('click',()=>{document.querySelector('[value=city]').checked=true;document.querySelectorAll('.extras input').forEach(e=>e.checked=false);render();document.querySelector('[value=city]').focus();});render();
Die Vite-Stammdatei index.html durch diese Datei ersetzen.
04
Volvo Cars Web Designsystem Einrichtung des AI Agent
Ausgangspunkt für die Implementierung
Die festgelegte Version passt zu dieser Implementierung auswählbarer Karten. Die offiziellen Schriftdateien sind nicht in der Vorschau enthalten.
sh
npm create vite@latest weekend-plan -- --template vanilla
cd weekend-plan
npm install
npm install @volvo-cars/[email protected]
# Save index.html at the root; main.js and volvo.css in src.
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie die individuelle Wochenend-Packstudie mit Volvo Cars CSS 2.5.1 und dem bereitgestellten vollständigen Quellcode. Verwenden Sie native, auf Labels basierende auswählbare Karten, eine Optionsfeldgruppe in einem Fieldset, unabhängige Checkbox-Extras, abgeleitete Zählwerte, das Löschen veralteter Bestätigungen und einen vom Auswahlzustand unabhängigen Theme-Zustand. Halten Sie alle Beispielinhalte klar von echten Fahrzeugspezifikationen getrennt.
05
Volvo Cars Web Designsystem Quellen und Geltungsbereich
Eine individuelle Packstudie für OpenDesign mit @volvo-cars/css 2.5.1. Sie ist kein Fahrzeugkonfigurator. Volvo-Schriftdateien sind nicht enthalten; stattdessen werden native Fallbacks des Stylesheets verwendet.
