# Palantir Blueprint-Designsystem ## Vorschau der Benutzeroberfläche des Palantir Blueprint-Designsystems Nach Name oder Typ filtern, einen Datensatz auswählen, die Zeilendichte ändern, das Erscheinungsbild wechseln und eine Prüfnotiz validieren, bevor der lokale Status aktualisiert wird. ## Designreferenz für das Palantir Blueprint-Designsystem Blueprint Core 6.21.0 veröffentlicht CSS und native React-Komponenten. Dies sind ausgewählte Tokenwerte für das helle Design; verwende statt einer manuellen Umkehrung das dunkle Design der Bibliothek. Layoutentscheidungen der Anwendung sind im Beispiel CSS gekennzeichnet. ### Farbrollen und Interaktionszustände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bp-intent-primary-rest | #2d72d2 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-primary-hover | #215db0 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-primary-active | #184a90 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-primary-disabled | #4c90f0 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-primary-foreground | #ffffff | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-success-rest | #238551 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-success-hover | #1c6e42 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-success-active | #165a36 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-success-disabled | #32a467 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-success-foreground | #ffffff | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-warning-rest | #c87619 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-warning-hover | #935610 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-warning-active | #77450d | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-warning-disabled | #ec9a3c | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-warning-foreground | #111418 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-danger-rest | #cd4246 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-danger-hover | #ac2f33 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-danger-active | #8e292c | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-danger-disabled | #e76a6e | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-intent-danger-foreground | #ffffff | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | ### Typografische Skalierung und Schriftschnitte | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bp-typography-size-body-x-small | 10px | Skalierung für Fließtext, Beschriftungen und ergänzende Daten; kleine Metadaten sollten nicht zur primären Leseschrift werden. | | --bp-typography-size-body-small | 12px | Skalierung für Fließtext, Beschriftungen und ergänzende Daten; kleine Metadaten sollten nicht zur primären Leseschrift werden. | | --bp-typography-size-body-medium | 14px | Skalierung für Fließtext, Beschriftungen und ergänzende Daten; kleine Metadaten sollten nicht zur primären Leseschrift werden. | | --bp-typography-size-body-large | 16px | Skalierung für Fließtext, Beschriftungen und ergänzende Daten; kleine Metadaten sollten nicht zur primären Leseschrift werden. | | --bp-typography-size-heading-small | 16px | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-size-heading-medium | 20px | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-size-heading-large | 24px | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-size-heading-x-large | 28px | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-size-heading-display | 46px | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-size-code-small | 12px | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-size-code-medium | 13px | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-size-code-large | 14px | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-weight-default | 400 | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-weight-bold | 600 | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-line-height-default | 1.28581 | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | | --bp-typography-line-height-large | 1.5 | Wende die Rolle auf der entsprechenden Hierarchieebene an; Tabellenwerte können zusätzlich tabellarische Ziffern verwenden. | ### Oberflächen, Rahmen und semantische Textfarben | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bp-surface-border-color-default | #5f6b7c1f | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-surface-border-color-strong | #5f6b7c40 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-surface-border-width | 1px | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-surface-border-radius | 4px | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-surface-spacing | 4px | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-surface-background-color-default-rest | #ffffff | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-surface-background-color-default-hover | #f6f7f9 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-typography-color-default-rest | #1c2127 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-typography-color-muted | #5f6b7c | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | ### Fokus und Bewegung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bp-emphasis-transition-duration | 100ms | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-emphasis-ease-default | cubic-bezier(0.4, 1, 0.75, 0.9) | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-emphasis-ease-bounce | cubic-bezier(0.54, 1.12, 0.38, 1.11) | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-emphasis-focus-color | #2d72d2 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-emphasis-focus-width | 2px | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-emphasis-focus-offset | 2px | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | | --bp-emphasis-motion-reduced | 0 | Verwende die benannte semantische Rolle; ordne Zustände und Vordergrundfarben einander zu. | ### Native Komponenten im Arbeitsbereich für Datensätze | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | HTMLTable | striped · interactive · condensed | Native semantische Tabelle; die condensed prop ändert die Dichte, ohne die Daten zu verändern. | | InputGroup | value · onChange · intent | Kontrollierte Suche und Prüfnotiz; die Validierung der Anwendung setzt die danger-Intention. | | FormGroup | labelFor · helperText · intent | Verknüpfe eine sichtbare Feldbeschriftung und erläutere, warum die Notiz ungültig ist. | | HTMLSelect | options · value · onChange | Ein natives Select für die kleine, festgelegte Auswahl an Datensatztypen. | | Tag | minimal · intent | Kombiniere den Statustext mit einer Erfolgs- oder Warnkennzeichnung. | | Button | intent="primary" · type="submit" | Schließe die lokale Prüfung über ein echtes Formular ab; Auswahlschaltflächen bleiben nachrangig. | | Switch | checked · onChange | Unabhängige Steuerelemente für Erscheinungsbild und Dichte. | | Callout | intent · title | Erläutere, wenn keine Ergebnisse vorliegen, oder beschreibe das Ergebnis; vermittle den Status nicht allein über Farbe. | ## Vollständiger Leitfaden zum Palantir Blueprint-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Ein um Daten herum gestalteter Arbeitsbereich für das Palantir Blueprint-Designsystem ### Kompakte Steuerelemente mit eindeutiger Lesereihenfolge > Blueprint eignet sich, wenn eine Ansicht eine Sammlung, Filter, Statusangaben und kontextbezogene Aktionen kombiniert. Im Beispiel befindet sich die Datensatztabelle links und der ausgewählte Datensatz rechts. So lassen sich Datensätze vergleichen, ohne für jeden eine neue Seite zu öffnen. Im Detailbereich befindet sich die bearbeitbare Prüfnotiz; die Tabelle dient der schnellen Übersicht. ### Verwende den Paketvertrag von v6 Das Beispiel wird mit @blueprintjs/core 6.21.0 kompiliert. Sein CSS-Namespace lautet bp6, und seine veröffentlichten semantischen Tokens beginnen mit --bp-. Ein älteres bp5-Stylesheet ist kein Ersatz für die Komponenten von v6 unter CSS. Importiere das Paket-Stylesheet einmal am Einstiegspunkt der Anwendung und beschränke anschließend die Layoutregeln der Anwendung auf eine separate Klasse. ## Farbintentionen und Farbrollen des Palantir Blueprint-Designsystems ### Datensatzstatus und Auswahl getrennt halten Ein Tag mit Warnkennzeichnung bedeutet, dass der Datensatz geprüft werden muss; die primär eingefärbte Zeile kennzeichnet die Auswahl. Diese Bedeutungen sind voneinander unabhängig. Wenn ein Datensatz als geprüft markiert wird, ändern sich Beschriftung und Farbintention zu „Erfolg“, während die Auswahl auf demselben Datensatz bleibt. Für jeden Status verwendet die Tabelle zusätzlich Text, damit die Bedeutung nicht allein von der Farbe abhängt. ### Den Dunkelmodus an der Komponentengrenze anwenden Das Beispiel versieht seinen Wrapper mit bp6-dark, sodass native Komponenten ihre dunkle Darstellung verwenden können. Die Werte für das helle Design oben sind eine Referenzaufnahme und keine Aufforderung, jede Komponente zu überschreiben. Wenn du ein Portal wie Dialog einführst, stelle sicher, dass dessen gerenderter Inhalt denselben Designkontext erhält; ein Wrapper, der das Portal nicht enthält, reicht nicht aus. ## Typografie für Datensätze und Metadaten im Palantir Blueprint-Designsystem ### Lies zuerst die Fließtext-Skalierung, bevor du Überschriften auswählst Die veröffentlichten Schriftgrößen für Fließtext umfassen 10, 12, 14 und 16px; die mittlere Fließtextgröße beträgt 14px. Datensatznamen bleiben auf der primären Lesestufe. IDs und Datensatztypen verwenden ergänzenden Text, während numerische Datensatzanzahlen tabellarische Ziffern nutzen, damit sich verändernde Werte leicht vergleichen lassen. Der Leitfaden empfiehlt keine 10px für primäre Inhalte. ### Dem Detailbereich eine kompakte Hierarchie geben Der Detailbereich verwendet eine Überschrift mit 20px sowie eine Definitionsliste für ID, zuständige Person, Typ und Anzahl. Beschriftungen und Werte sind stabil in zwei Spalten angeordnet. Die Prüfnotiz folgt nach einer Trennlinie auf diese Angaben, damit sie nicht mit einem Tabellenfilter verwechselt wird. ## Tabelle, Filter und Detailbereich im Palantir Blueprint-Designsystem ### Die Semantik der Tabelle beibehalten HTMLTable stellt eine native Tabelle im Blueprint-Stil bereit. Schaltflächen in der ersten Zelle wählen Datensätze aus und sind weiterhin per Tastatur erreichbar; im Beispiel ist ein ausschließlich mit dem Mauszeiger bedienbarer Zeilen-Handler nicht der einzige Weg zur Auswahl. Die interaktive prop sorgt für eine Hover-Darstellung der Zeilen, und condensed ändert unabhängig von der Filterung die Dichte. ### Den kontrollierten Datenfluss sichtbar machen Suche und Typauswahl leiten aus denselben lokalen Zeilen eine sichtbare Sammlung ab. Der ausgewählte Datensatz kann im Detailbereich verbleiben, wenn ein Filter seine Zeile ausblendet. So verschwindet eine eingegebene Prüfnotiz nicht allein deshalb, weil sich ein Sammlungsfilter geändert hat. Produktionssoftware sollte diese Beziehung festlegen und dokumentieren, statt Bearbeitungen stillschweigend zu verwerfen. 1. Einen Datensatz anhand seines angezeigten Namens finden. 2. Dieselbe Sammlung mit der Typauswahl eingrenzen. 3. Die Namensschaltfläche auswählen, um den Detailbereich zu laden. 4. Eine Prüfnotiz eingeben und die lokale Prüfung absenden. ## Abstände, Oberflächen und Dichte im Palantir Blueprint-Designsystem ### Eine kleinere Einheit verwenden, ohne alle Abstände winzig zu machen Das veröffentlichte Token für Oberflächenabstände beträgt 4px. Der Arbeitsbereich verwendet Vielfache davon: 12px zwischen Filtersteuerelementen, 20px zwischen Sammlung und Detailbereich sowie 24px rund um das Desktop-Beispiel. Dies sind Kompositionsentscheidungen aus CSS. Der Token für einen Rahmenradius von 4px sorgt für eine zurückhaltende Geometrie von Steuerelementen und Oberflächen. ### Das Layout ändern, bevor Beschriftungen geopfert werden Am Anwendungs-Breakpoint von 800px im Beispiel wird der Inspektor unter die Sammlung verschoben. Die Filter umbrechen, der Innenabstand des Hauptbereichs wird auf 16px reduziert und die Tabelle erhält bei Bedarf einen eigenen horizontalen Scrollbereich. Dieser Breakpoint gilt für diesen Arbeitsbereich und wird nicht als offizieller, universeller Blueprint-Breakpoint dargestellt. ## Palantir Blueprint Designsystemprüfung und leere Zustände ### Die Validierung gehört zum Prüfvorgang Beim Absenden einer leeren Notiz erhalten InputGroup und FormGroup die Fehlerabsicht (danger), es wird erklärender Hilfetext angezeigt und der Fokus auf das Feld gesetzt. Durch die Eingabe von Text wird der Fehler behoben. Bei einer gültigen Übermittlung wird nur der ausgewählte lokale Datensatz geändert, die Notiz geleert und ein Erfolgs-Callout angezeigt, das ausdrücklich darauf hinweist, dass keine Daten gesendet wurden. ### Die Möglichkeit zur Wiederherstellung gehört direkt neben die leere Sammlung Der Callout für keine Treffer bietet die Option „Filter löschen“. Damit werden sowohl die Suchanfrage als auch die Typauswahl zurückgesetzt und die gesamte Sammlung wieder angezeigt. Es werden keine Zeilen gelöscht und der Inspektor bleibt unverändert. Die folgenden Zustandsgrenzen sind beabsichtigt: - Durch die Auswahl ändert sich der geprüfte Datensatz, nicht dessen Prüfstatus. - Der Kompaktmodus ändert die Dichte, nicht die Reihenfolge der Datensätze. - Das Design ändert die visuelle Darstellung, nicht die aktuellen Filter. - Eine erfolgreiche lokale Prüfung ändert einen Datensatz und gibt das Ergebnis bekannt. ## Palantir Blueprint Designsystem: Fokus und barrierefreie Komponentennutzung ### Jedes native Steuerelement beschriften InputGroup erhält einen zugänglichen Namen für die Suche und eine id für das beschriftete Prüffeld. HTMLSelect hat einen eigenen Namen, Switch zeigt sichtbare Beschriftungen an und jeder Datensatz wird über eine echte Schaltfläche geöffnet. Verwenden Sie diese Bibliotheks-APIs, statt die Steuerelemente durch gestaltete div-Elemente zu ersetzen. ### Eine sichtbare Fokusmarkierung beibehalten Die Paketdokumentation sieht eine Fokusbreite von 2px und einen Fokusabstand von 2px vor. Die Fokusmarkierung muss auf Cards und ausgewählten Zeilen sichtbar bleiben. Tastaturnutzende sollten die Filter, Zeilenschaltflächen und das Prüfungsformular in Dokumentreihenfolge erreichen können. Der Statusabsatz und der Erfolgs-Callout des Beispiels vermitteln Ergebnisse, ohne die lesende Person auf einen anderen Bildschirm zu versetzen. ## Palantir Blueprint Designsystem: Installation und Anwendungsgrenzen ### Denselben Quellcode wie im Beispiel ausführen Der vollständige App-Quellcode und die Anwendung CSS sind unten enthalten. App wird in das Stammelement eingebunden, das von der Vite React-Vorlage erzeugt wird. Die Installation des festgelegten Kernpakets stellt die nativen Komponenten und das Paket CSS bereit; für das textbasierte Beispiel ist kein verborgenes Design-Asset erforderlich. ### Die Prüfung um einen echten Persistenzvertrag erweitern Für eine produktive Prüfung sind Datensatzkennungen, Berechtigungen, ein ausstehender Status und eine Fehlerantwort erforderlich. Behalten Sie diese Zuständigkeiten in der Anwendung und verwenden Sie weiterhin die FormGroup- und Intent-APIs von Blueprint. Melden Sie keine erfolgreiche Speicherung, bevor der Dienst sie bestätigt hat. Das lokale Beispiel erhebt bewusst keinen solchen Anspruch. ## Palantir Blueprint Designsystem: Komponentenbeispiele ### main.jsx — vollständige Anwendung zur Datensatzprüfung Eine vollständige native Komposition mit Filtern, Auswahl, Dichte, Design, Feldvalidierung und lokalem Prüfergebnis. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { Button, Card, Callout, FormGroup, HTMLSelect, HTMLTable, InputGroup, Switch, Tag, } from "@blueprintjs/core"; import "@blueprintjs/core/lib/css/blueprint.css"; import "./blueprint.css"; const initial = [ { id: "D-1042", name: "Harbor sensors", type: "Telemetry", rows: "18,420", owner: "Maya", status: "Reviewed", }, { id: "D-1043", name: "Transit stops", type: "Reference", rows: "842", owner: "Alex", status: "Needs review", }, { id: "D-1044", name: "Water samples", type: "Field survey", rows: "2,608", owner: "Sam", status: "Reviewed", }, { id: "D-1045", name: "Street survey", type: "Field survey", rows: "4,120", owner: "Lee", status: "Needs review", }, ]; function App() { const [dark, setDark] = useState(false), [compact, setCompact] = useState(false), [query, setQuery] = useState(""), [rows, setRows] = useState(initial), [selected, setSelected] = useState(initial[1]), [note, setNote] = useState(""), [notice, setNotice] = useState(""), [error, setError] = useState(false), [type, setType] = useState("All"); const visible = rows.filter( (r) => r.name.toLowerCase().includes(query.toLowerCase()) && (type === "All" || r.type === type), ); function review(e) { e.preventDefault(); if (!note.trim()) { setError(true); document.getElementById("review-note").focus(); return; } const updated = { ...selected, status: "Reviewed" }; setRows(rows.map((r) => (r.id === selected.id ? updated : r))); setSelected(updated); setNotice( `${selected.name} marked reviewed in this local example. No data was sent.`, ); setNote(""); setError(false); } return (
BLUEPRINT · DATA WORKSPACE

Dataset review

Inspect a record and attach a review note.

setDark(e.target.checked)} />
setQuery(e.target.value)} /> setType(e.target.value)} options={["All", "Telemetry", "Reference", "Field survey"]} /> setCompact(e.target.checked)} />

{visible.length} matching datasets

Name Records Status {visible.map((r) => (
{!visible.length && ( Clear the search or choose a different dataset type. )} SELECTED DATASET

{selected.name}

Dataset ID
{selected.id}
Owner
{selected.owner}
Type
{selected.type}
Records
{selected.rows}
{ setNote(e.target.value); setError(false); }} />

Selection, filters and review notes exist only in this preview.

{notice && ( {notice} )}
); } createRoot(document.getElementById("root")).render(); ``` Code-Referenz - Speichern Sie dies als src/main.jsx und das nächste Beispiel als src/blueprint.css. - Der Aufruf von createRoot verwendet das Stammelement in der Vite-React-Datei index.html. ### blueprint.css — responsives Layout des Arbeitsbereichs Die Layoutregeln der Anwendung ergänzen die importierten nativen Komponenten von CSS. Der Breakpoint von 800px und der 260px breite Inspektor sind explizite Festlegungen dieses Beispiels. ``` * { box-sizing: border-box; } body { margin: 0; } .specimen { padding: 24px; background: #f6f7f9; color: #1c2127; font-size: 14px; } .specimen.bp6-dark { background: #252a31; color: #f6f7f9; } .specimen header { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 24px; } .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--bp-typography-color-muted); } h1.bp6-heading { margin: 8px 0; font-size: 28px; } .workbench { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; } .collection, .inspector { min-width: 0; } .toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .toolbar > .bp6-input-group { flex: 1; min-width: 150px; } .toolbar .bp6-control { margin: 0; } .table-scroll { overflow: auto; } table td { vertical-align: middle !important; } .numeric { font-variant-numeric: tabular-nums; } tr.selected td { background: #2d72d20d !important; } .inspector h2 { font-size: 20px; margin-top: 12px; } .inspector dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; } .inspector dt { color: var(--bp-typography-color-muted); } .inspector dd { margin: 0; } .inspector form { border-top: 1px solid var(--bp-surface-border-color-default); padding-top: 20px; } .inspector p { margin: 16px 0 0; } .specimen > .bp6-callout { margin-top: 20px; } .specimen footer { font-size: 11px; margin-top: 24px; color: var(--bp-typography-color-muted); } @media (max-width: 800px) { .workbench { grid-template-columns: 1fr; } .specimen { padding: 16px; } .specimen header { align-items: start; } .toolbar { gap: 16px; } h1.bp6-heading { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } .bp6-dark .eyebrow, .bp6-dark .inspector dt, .bp6-dark footer { color: #abb3bf; } ``` Code-Referenz - Die Klasse bp6-dark aktiviert das Bibliotheksdesign; der Hintergrund der Beispielansicht gehört zur Anwendung CSS. ## Palantir Blueprint Designsystem: Agenteneinrichtung ### Ausgangspunkt für die Implementierung Die native Vorschau wurde mit React 18.3.1 und Blueprint 6.21.0 erstellt und ausgeführt. Verwenden Sie eine von Ihrer gewählten Vite-Version unterstützte Node.js-Version. Beide Anwendungsdateien sind oben enthalten. ``` npm create vite@latest blueprint-review -- --template react cd blueprint-review npm install npm install react@18.3.1 react-dom@18.3.1 @blueprintjs/core@6.21.0 # Replace src/main.jsx and add src/blueprint.css using the complete examples. npm run dev ``` ### Ein Prompt für dein Projekt ``` Verwenden Sie Blueprint 6.21.0, um einen Arbeitsbereich zur Datensatzprüfung zu erstellen. Lesen Sie die bereitgestellten Tokens und das vollständige Beispiel React/CSS. Behalten Sie die native HTMLTable, beschriftete InputGroup/FormGroup, Status-Tags und per Tastatur erreichbare Zeilenauswahl bei. Filter, Auswahl, Dichte, Darstellung und Prüfstatus müssen voneinander unabhängig bleiben. Ergänzen Sie den tatsächlichen Speicherdienst erst, wenn dessen API vorliegt; zeigen Sie ausstehende und fehlgeschlagene Antworten an, ohne die Notiz zu verlieren. Behalten Sie den responsiven Inspektor und die sichtbaren Fokusmarkierungen bei. ``` ## Palantir Blueprint Designsystem: Quellen und Geltungsbereich OpenDesign Anwendungsleitfaden für Blueprint 6.21.0 mit einem eigens erstellten Beispiel zur Datensatzprüfung, das das tatsächliche Paket React verwendet. Datensatznamen und Prüfergebnisse sind lokale Beispieldaten. Das Layout des Arbeitsbereichs ist Anwendungscode; die Referenzwerte stammen aus der versionierten, veröffentlichten Paketversion. - Dokumentation der Blueprint-Komponenten Verträge und Beispiele für native Komponenten. - Veröffentlichte Design-Tokens für Version 6.21.0 Exakte, versionsgebundene Werte aus den Referenztabellen. - Blueprint-Quellcode-Repository Implementierung, Versionsverlauf des Pakets und Apache-Lizenzierung. ## Palantir Blueprint Designsystem: Weiterführende Ressourcen ### Pega Bolt Entdecke Bolts Inhaltsdesignsystem im Pega-Stil: variable Schriftgrößen, getrennte horizontale und vertikale Abstände sowie eine Twig-Akkordeon-Komposition für eine redaktionelle Ressourcenseite. ### Porsche Designsystem Entdecken Sie Porsche Design System v4 mit fließenden Abständen, CSS-Farbschemata, Porsche-Next-Typografie und einem Konfigurator mit zwei Auswahlmöglichkeiten. Die Referenz enthält echte Token-Ausdrücke und einen vollständigen Vite-Einstiegspunkt, der aktuelle Ereignisse des Segmented Controls verwendet. ### Red Hat PatternFly Verwenden Sie PatternFly für einen Arbeitsbereich für Betriebsabläufe: semantische Token-Referenzen, auswählbare Servicekarten, dreistufige Sammelauswahl, Prüfung des Geltungsbereichs und vollständiger nativer React-Code. - [Implementierungsreferenz](https://blueprintjs.com/docs/#core/components/html-table) - [Quelle](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css) - [Quelle](https://blueprintjs.com/docs/#core/components) - [Code-Referenz](https://blueprintjs.com/docs/#core/components) - [Code-Referenz](https://blueprintjs.com/docs/#core/typography) - [Dokumentation der Blueprint-Komponenten Verträge und Beispiele für native Komponenten.](https://blueprintjs.com/docs/#core/components) - [Veröffentlichte Design-Tokens für Version 6.21.0 Exakte, versionsgebundene Werte aus den Referenztabellen.](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css) - [Blueprint-Quellcode-Repository Implementierung, Versionsverlauf des Pakets und Apache-Lizenzierung.](https://github.com/palantir/blueprint)