# TDesign-Designsystem

## Vorschau der Benutzeroberfläche des TDesign-Designsystems

Eine Regel validieren, ihre lokale Wirkung prüfen und sie entfernen. Es wird keine Richtlinie bereitgestellt.

## Designreferenz für das TDesign-Designsystem

TDesign React mit dem aktuellen öffentlichen Theme des develop-Branches und den Komponentenquellen. Die Theme-Werte sind Momentaufnahmen der Quellen und keine Zusage zur Kompatibilität mit einer festgelegten Paketversion. Die eigenständige Vorschau ist eine Interpretation mit HTML; das React-Beispiel verwendet das echte Paket API.

### Rollen des hellen Themes

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --td-brand-color | #0052d9 | Primäre Aktion, aufgelöst aus Markenstufe 7. |
| --td-brand-color-hover | #366ef4 | Hover-Zustand der primären Aktion. |
| --td-brand-color-active | #003cab | Gedrückte Aktion. |
| --td-brand-color-light | #f2f3ff | Dezent hervorgehobene Oberfläche. |
| --td-bg-color-page | #eee | Äußere Arbeitsfläche. |
| --td-bg-color-container | #fff | Editor- und Tabellenbereiche. |
| --td-text-color-primary | rgba(0,0,0,.9) | Haupttext. |
| --td-text-color-secondary | rgba(0,0,0,.6) | Ergänzender Text. |
| --td-border-level-1-color | #e8e8e8 | Trennlinien. |
| --td-border-level-2-color | #ddd | Rahmen von Bedienelementen. |
| --td-error-color | #d54941 | Rolle für Feldfehler. |
| --td-success-color | #2ba471 | Positive Rolle; den Kontrast nicht allein anhand der Farbe beurteilen. |
### Typografierollen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --td-font-family | PingFang SC, Microsoft YaHei, Arial Regular | Systemorientierter Schriftstapel; durch diese Deklaration werden keine Schriftarten heruntergeladen. |
| --td-font-body-small | 12px / 20px | Kompakte Beschriftungen für sekundäre Elemente. |
| --td-font-body-medium | 14px / 22px | Fließtext der Konsole. |
| --td-font-body-large | 16px / 24px | Größerer Lesetext. |
| --td-font-title-medium | 600 16px / 24px | Panel-Titel. |
| --td-font-headline-small | 600 24px / 32px | Seitenüberschrift. |
| --td-font-display-medium | 600 48px / 56px | Überschriftenrolle; in einem Richtlinien-Editor nicht erforderlich. |
### Größen und semantische Abstände

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --td-size-1 … --td-size-8 | 2, 4, 6, 8, 12, 16, 20, 24px | Nichtlineare Basisskala. |
| --td-size-9 … --td-size-16 | 28, 32, 36, 40, 48, 56, 64, 72px | Größere Skalenwerte. |
| --td-comp-size-m | 32px | Alias für mittlere Komponentenhöhe. |
| --td-comp-paddingLR-m | 12px | Alias für mittigen horizontalen Innenabstand. |
| --td-comp-paddingTB-l | 16px | Alias für großen vertikalen Innenabstand. |
| --td-comp-margin-xl | 20px | Der Abstands-Alias unterscheidet sich von padding xl. |
| --td-pop-padding-xxl | 16px | Alias für den Innenabstand von Pop-ups. |
### Eckenformen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --td-radius-small | 2px | Kleiner Radius. |
| --td-radius-default | 3px | Standardradius. |
| --td-radius-medium | 6px | Mittlerer Radius. |
| --td-radius-large | 9px | Großer Radius. |
| --td-radius-extraLarge | 12px | Extra großer Radius. |
| --td-radius-round | 999px | Pillenform. |
| --td-radius-circle | 50% | Für eine runde Form müssen die Abmessungen gleich sein. |
### Formular- und Tabellenverträge

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Form.useForm() | [form] | Die Instanz an Form übergeben. |
| FormItem name | Registered field key | Muss mit den übermittelten Feldern und den Fehlern von setFields übereinstimmen. |
| Form onSubmit | event.validateResult === true | Anwendungsaktualisierungen nur bei erfolgreicher Validierung zulassen. |
| form.setFields | name + status + validateMessage | Einen konkreten Feldfehler festlegen. |
| FormItem for | Input association | Das offizielle Switch-Beispiel verwendet for="status". |
### Konfiguration der Datentabelle

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| rowKey | Stable unique data property | Das Beispiel generiert die id einmal pro Regel. |
| columns[].colKey | Data key or custom cell key | Eine eigene Aktionsspalte verwenden. |
| columns[].cell | ({row,col,rowIndex,colIndex}) | Zeilenspezifische Steuerelemente darstellen. |
| tableLayout | fixed by default; auto available | Spaltenbreiten für lange Ressourcenpfade festlegen. |
| disableDataPage | false by default | Die lokale Paginierung wird von Table verwaltet, sofern sie nicht ausdrücklich deaktiviert ist. |
## Vollständiger Leitfaden zum TDesign-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.

## TDesign-Designsystem: Konsolensystem mit klar definierten Implementierungsfamilien

### Die Implementierung von React auswählen

> TDesign hat separate Framework-Implementierungen. Dieses Beispiel verwendet bewusst tdesign-react und weder ein ähnlich benanntes Vue-Paket noch die mobile Komponentenbibliothek. Das globale Stylesheet gehört zur Integration: Der Import einer Komponente allein stellt weder das gezeigte Layout noch die Theme-Regeln bereit.

Sinnvoll ist eine registrierte Form neben einer strukturierten Table. Name, Ressourcenpfad und Aktiviert sind Datenfelder; das Entfernen einer Zeile ist eine Tabellenaktion. Die pauschale Behauptung, eine API sei jetzt geschützt, wäre falsch, denn dieses Beispiel hat kein Autorisierungs-Backend.

Unterstützende Spezifikation lesen

## TDesign-Designsystem: Semantische Farben mit tatsächlichen Unterschieden zwischen hellen und dunklen Themes

### Der Markenfarbton auf Stufe sieben ist nicht in allen Themes gleich

Das helle Design verwendet für die Markenrolle Stufe sieben, das dunkle Design Stufe acht. Übernimm die semantische Variable in die Anwendungs-CSS, statt das helle Blau in jede Komponente zu kopieren. Die dunkle Arbeitsfläche hat die Farbe #181818, ihr Container die Farbe #242424. Diese Rollen bilden separate Oberflächen.

Die Vorschau bleibt absichtlich im hellen Modus. In einer nativen Implementierung wählen Sie mit theme-mode="dark" am Dokumentstamm die veröffentlichten Regeln für den dunklen Modus aus. Individuelle Richtlinienillustrationen sollten separat abgegrenzt werden, statt jedes Bild mit einem Filter umzufärben.

```
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
```

Code-Referenz

Unterstützende Spezifikation lesen

## TDesign-Designsystem: Dichte Typografie, ohne die Bedeutung der Felder zu verlieren

### Verwenden Sie die vollständigen Schriftrollen

Body medium legt eine Schriftgröße von 14px und eine Zeilenhöhe von 22px fest. Title medium ergänzt ein Schriftgewicht von 600 bei 16/24; die kleine Überschrift verwendet 24/32. Diese Rollen erfüllen unterschiedliche Aufgaben: Tabellendaten, Beschriftungen von Bereichen und Seitentitel sollten nicht alle zu fett gesetztem Fließtext werden.

Die Quellschriftfamilie nennt verfügbare Systemschriften. Ergänzen Sie in der anwendungseigenen Typografie eine geeignete serifenlose Ersatzschrift und prüfen Sie chinesische und lateinische Texte gleichzeitig. Für einen Ressourcenpfad kann ein anwendungseigener Monospace-Stil verwendet werden, ohne ihn als TDesign-Typografie-Token auszugeben.

Unterstützende Spezifikation lesen

## TDesign-Designsystem: Größen-Aliase dem tatsächlichen Bereich zuordnen

### Abstandsnamen sind nicht austauschbar

Der horizontale Innenabstand einer Komponente in mittlerer Größe beträgt 12px, der Außenabstand einer Komponente in extragroßer Größe hingegen 20px. Leiten Sie nicht alle semantischen Suffixe anhand einer einzigen vermuteten Skala ab. Der Editor verwendet einen äußeren Innenabstand von 24px und kleinere Abstände zwischen Feldern, damit die Steuerelemente gruppiert bleiben.

In der eigenständigen Vorschau wird der Editor bei schmalen Ansichten über der Regelliste angeordnet. Dieser Breakpoint ist eine Anwendungsentscheidung und keine Garantie des Frameworks. Lange API-Pfade werden in der Liste umgebrochen, statt die gesamte Seite breiter als den Viewport zu machen.

Unterstützende Spezifikation lesen

## TDesign-Designsystem: Registrieren, validieren und anschließend eine Regel hinzufügen

### Die Fehlermeldung dem zugehörigen Feldschlüssel zuordnen

Die Form-Instanz wird an die Form-Komponente übergeben; jedes FormItem enthält den Feldnamen. Der Submit-Handler prüft zuerst validateResult und liest anschließend die erfassten Felder aus. Anwendungsprüfungen normalisieren Zeichenfolgen und weisen doppelte Pfade zurück, damit zwei Bezeichnungen nicht unbemerkt denselben Beispiel-Endpunkt konfigurieren.

1. Registrieren Sie Name, Pfad und Aktiviert mit FormItem-Schlüsseln.

2. Weisen Sie fehlende Namen und Pfade zurück, die nicht mit / beginnen, bevor Sie Daten hinzufügen.

3. Verwenden Sie setFields mit demselben Feldschlüssel, um den Fehler anzuzeigen und die eingegebenen Werte zur Korrektur beizubehalten.

4. Fügen Sie erst nach bestandener Prüfung eine stabile ID hinzu und weisen Sie darauf hin, dass das Ergebnis lokal ist.

Unterstützende Spezifikation lesen

## TDesign-Designsystem: Zeilenidentität bei Bearbeitung und Entfernen beibehalten

### Anzeigedaten und Aktionszellen getrennt halten

Die Tabelle erhält ihr ID-Feld über rowKey. Die Spalte für den Aktivierungsstatus bildet einen booleschen Wert auf lesbaren Text ab, statt einen unbeschrifteten farbigen Punkt anzuzeigen. Die Aktionsspalte stellt eine Schaltfläche mit dem Namen der Zeile dar, sodass assistive Technologien nicht drei nicht unterscheidbare „Entfernen“-Steuerelemente vorfinden.

Bei einer kleinen Anzahl von Regeln kann die vollständige Tabelle ohne Paginierung angezeigt werden. Wird eine Paginierung eingeführt, sollten Sie zwischen integrierter lokaler Aufteilung und serverseitig gesteuerten Daten unterscheiden, bevor Sie disableDataPage festlegen. Array-Positionen als Identität wiederzuverwenden ist unsicher, da sich ihre Reihenfolge beim Entfernen ändert.

- name ist die für Menschen bestimmte Bezeichnung; path ist die Ressourcenidentität.

- enabled sind Anwendungsdaten und wird mit eindeutigem Text dargestellt.

- actions ist eine benutzerdefinierte Spalte und benötigt keine entsprechende gespeicherte Eigenschaft.

Unterstützende Spezifikation lesen

## TDesign-Designsystem: Lokaler Zustand ist keine bereitgestellte Richtlinie

### Den Richtlinieneditor als Editor testen

Die Offline-Vorschau verwendet native, beschriftete Steuerelemente, einen Live-Statusbereich und eine bei Tastaturnutzung sichtbare Fokusmarkierung. Wird ein leerer Name oder ein doppelter Pfad übermittelt, muss das Formular geöffnet bleiben und das konkrete Problem benennen. Beim Entfernen einer Regel ändert sich nur die lokale Liste.

Ein Produktivdienst benötigt weiterhin serverseitige Validierung, Autorisierung, Konfliktbehandlung, Audit-Protokollierung und eine Möglichkeit, eine abgelehnte Speicherung rückgängig zu machen. Diese Aspekte sollten bei der Gestaltung des Editors berücksichtigt werden, statt sie mit einer Erfolgsmeldung zu simulieren, die eine Bereitstellung behauptet.

Unterstützende Spezifikation lesen

## TDesign-Designsystem: Paket integrieren und das Beispiel realistisch halten

### Für Anwendungscode das native Beispiel verwenden

Das Beispiel für React importiert tatsächliche TDesign-Komponenten: Form, Input, Switch, Button und Table. Die eingebettete Vorschau ist eine in sich geschlossene HTML/CSS-Interpretation, die ohne Paketdownload und Netzwerkzugriff funktioniert. Die Interaktionsprüfungen belegen nicht, dass alle Bibliotheksabhängigkeiten in Ihrem Projekt kompiliert wurden.

Die verknüpften Theme-Dateien sind aktuelle Entwicklungsquellen. Ermitteln Sie die installierte Version anhand einer Lockdatei und gleichen Sie deren Tokens ab, bevor Sie benutzerdefinierte Überschreibungen übernehmen. Diese Seite dokumentiert bewusst Rollennamen und Quellenherkunft, damit sich eine spätere Theme-Änderung bewerten lässt und nicht hinter einer beispielhaften Farbpalette verborgen bleibt.

Unterstützende Spezifikation lesen

## TDesign-Designsystem: Komponentenbeispiele

### Vollständige, eigenständige interaktive Demo

Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Eigenständige HTML/CSS-Interpretation der hellen Tokens von TDesign und der Form-/Table-Komposition; keine native React-Laufzeitumgebung.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TDesign API rule editor</title><style>
*{box-sizing:border-box}body{margin:0;background:#eee;color:rgba(0,0,0,.9);font:14px/22px Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #ddd}.mark{font-weight:700;color:#0052d9;font-size:20px}.tag{background:#f2f3ff;color:#003cab;padding:4px 8px;border-radius:3px}main{padding:24px;max-width:1100px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}h2{font-size:16px;line-height:24px;margin:0 0 20px}.sub{color:rgba(0,0,0,.6);margin:0 0 24px}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px}.panel{background:white;border:1px solid #e8e8e8;border-radius:6px;padding:24px}label{display:block;margin-bottom:6px}input[type=text]{width:100%;height:36px;border:1px solid #ddd;border-radius:3px;padding:0 12px;font:inherit;margin-bottom:4px}input:focus,button:focus-visible{outline:2px solid #0052d9;outline-offset:3px}.hint{font-size:12px;color:#666;margin:0 0 20px}.toggle{display:flex;gap:8px;align-items:center;margin:18px 0 24px}.toggle input{accent-color:#0052d9;width:18px;height:18px}.toggle label{margin:0}button{font:inherit;border:1px solid #ddd;border-radius:3px;padding:5px 12px;background:white;color:#0052d9;cursor:pointer}button:hover{background:#f2f3ff}.primary{background:#0052d9;color:white;border-color:#0052d9;width:100%;margin-top:8px}.primary:hover{background:#366ef4}.error{color:#ad352f;min-height:22px;margin:0}.listhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;padding-bottom:16px;margin-bottom:0}.listhead h2{margin:0}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px 0;border-bottom:1px solid #e8e8e8}.row strong{display:block;font-weight:600}.path{display:block;overflow-wrap:anywhere;font:12px/20px monospace;color:#666}.state{font-size:12px;color:#003cab}.row button{align-self:center;font-size:12px}.diagram{margin-top:24px;padding:16px;background:#f2f3ff;border-radius:3px;display:flex;align-items:center;gap:12px}.node{padding:8px 12px;background:white;border:1px solid #b5c7ff;border-radius:3px}.diagram span{color:#0052d9}.status{font-size:12px;color:#555;min-height:20px;margin:20px 0 0}.foot{font-size:12px;color:#666;margin:20px 0 0}#empty{padding:24px 0;color:#666}@media(max-width:680px){header{padding:16px}.layout{grid-template-columns:1fr}main{padding:20px 16px}.panel{padding:20px}.diagram{flex-wrap:wrap}.tag{font-size:12px}}
</style><header><span class="mark">T / Console</span><span class="tag">Local policy workspace</span></header><main><h1>API access rules</h1><p class="sub">Define which resources belong in your draft policy.</p><div class="layout"><section class="panel"><h2>Create a rule</h2><form id="editor" novalidate><label for="name">Rule name</label><input type="text" id="name" aria-describedby="error"><p class="hint">A short label your team can recognize.</p><label for="path">Resource path</label><input type="text" id="path" placeholder="/reports" aria-describedby="path-help error"><p class="hint" id="path-help">Start with /. Each path must be unique.</p><div class="toggle"><input id="enabled" type="checkbox" checked><label for="enabled">Enabled in this draft</label></div><p class="error" id="error" role="alert"></p><button class="primary">Add local rule</button></form><p class="foot">This editor does not connect to an API gateway.</p></section><section class="panel"><div class="listhead"><h2>Policy rules</h2><span id="count" class="tag"></span></div><div id="rules"></div><div class="diagram" aria-label="Illustrative policy flow"><div class="node">Client</div><span aria-hidden="true">→</span><div class="node">Policy draft</div><span aria-hidden="true">→</span><div class="node">Resource</div></div><p class="status" id="status" role="status">Two example rules are loaded locally.</p></section></div><p class="foot">HTML interpretation of TDesign light theme roles · Native React integration is provided in the guide.</p></main><script>
const $=id=>document.getElementById(id);let rules=[{id:1,name:'Reports read access',path:'/reports',enabled:true},{id:2,name:'Billing export',path:'/billing/export',enabled:false}];let next=3;
function render(){const host=$('rules');host.replaceChildren();$('count').textContent=rules.length+' rules';if(!rules.length){const p=document.createElement('p');p.id='empty';p.textContent='No rules in this draft. Add a resource to begin.';host.append(p)}for(const rule of rules){const row=document.createElement('div');row.className='row';const copy=document.createElement('div'),name=document.createElement('strong'),path=document.createElement('code'),state=document.createElement('span'),remove=document.createElement('button');name.textContent=rule.name;path.textContent=rule.path;path.className='path';state.textContent=rule.enabled?'Enabled':'Disabled';state.className='state';copy.append(name,path,state);remove.textContent='Remove';remove.setAttribute('aria-label','Remove '+rule.name);remove.onclick=()=>{rules=rules.filter(x=>x.id!==rule.id);render();$('status').textContent='Removed '+rule.name+' from this local draft.';$('name').focus()};row.append(copy,remove);host.append(row)}}
$('editor').onsubmit=e=>{e.preventDefault();$('error').textContent='';for(const id of ['name','path'])$(id).removeAttribute('aria-invalid');const name=$('name').value.trim(),path=$('path').value.trim();const fail=!name?['name','Enter a rule name.']:!path.startsWith('/')?['path','Start the resource path with /.']:rules.some(r=>r.path===path)?['path','This path already has a rule.']:null;if(fail){$('error').textContent=fail[1];$(fail[0]).setAttribute('aria-invalid','true');$(fail[0]).focus();return}rules.push({id:next++,name,path,enabled:$('enabled').checked});render();$('status').textContent='Added '+name+' locally. No policy was deployed.';$('name').value='';$('path').value='';$('name').focus()};render();
</script></html>
```

Code-Referenz

- Regeln sind nur in der sichtbaren Beispielsammlung vorhanden. Die native Form-Registrierung, Validierungs-Callbacks und Table-Darstellung werden separat in React gezeigt.

### Registrierter Regel-Editor mit zeilenspezifischem Entfernen

Form erfasst Name, Ressourcenpfad und Aktivierungsstatus. Die Anwendungsvalidierung erkennt leere Namen, fehlerhafte Pfade und doppelte Ressourcen, bevor eine lokale Table-Zeile hinzugefügt wird.

```
// npm install tdesign-react react react-dom
// main.jsx — a client-side React entry point
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Button, Form, Input, Switch, Table} from 'tdesign-react';
import 'tdesign-react/es/style/index.css';
const {FormItem} = Form;
function AccessRules() {
  const [form] = Form.useForm();
  const [rules, setRules] = useState([]);
  const [notice, setNotice] = useState('No local rules yet.');
  const addRule = ({validateResult, fields}) => {
    if (validateResult !== true) return;
    const name = String(fields.name || '').trim();
    const path = String(fields.path || '').trim();
    const invalid = !name ? ['name','Enter a rule name.'] :
      !path.startsWith('/') ? ['path','Start the resource path with /.'] :
      rules.some(rule => rule.path === path) ? ['path','This path already has a rule.'] : null;
    if (invalid) {
      form.setFields([{name:invalid[0],status:'error',validateMessage:{type:'error',message:invalid[1]}}]);
      setNotice(invalid[1]); return;
    }
    setRules(previous => [...previous, {id:crypto.randomUUID(),name,path,enabled:!!fields.enabled}]);
    setNotice(`Added ${name} to this browser session. No access policy was deployed.`);
  };
  const columns = [
    {colKey:'name', title:'Rule'}, {colKey:'path', title:'Resource'},
    {colKey:'enabled', title:'State', cell:({row}) => row.enabled ? 'Enabled' : 'Disabled'},
    {colKey:'actions', title:'Action', cell:({row}) => <Button variant="text" onClick={() => {
      setRules(previous => previous.filter(item => item.id !== row.id));
      setNotice(`Removed ${row.name} locally.`);
    }}>Remove {row.name}</Button>}
  ];
  return <main style={{padding:24,maxWidth:960,margin:'auto',font:'var(--td-font-body-medium)'}}>
    <h1>API access rules</h1>
    <Form form={form} onSubmit={addRule} labelWidth={100}>
      <FormItem name="name" label="Rule name"><Input /></FormItem>
      <FormItem name="path" label="Resource path"><Input placeholder="/reports" /></FormItem>
      <FormItem name="enabled" label="Enabled" for="enabled"><Switch /></FormItem>
      <FormItem><Button type="submit" theme="primary">Add local rule</Button></FormItem>
    </Form>
    <p role="status">{notice}</p>
    <Table rowKey="id" data={rules} columns={columns} bordered hover />
  </main>;
}
createRoot(document.getElementById('root')).render(<AccessRules />);
```

Code-Referenz

- Die Verträge für Tabellenspalten und rowKey sind oben in der Spezifikation verknüpft.

- Dieses Beispiel ändert nur den lokalen Zustand von React; ein aktiviertes Label ist keine Autorisierungsentscheidung.

- Das Installations-/API-Beispiel wurde anhand offizieller Quellen geprüft; die Paketkompilierung ist unabhängig von der getesteten Offline-Vorschau.

## Einrichtung des TDesign-Designsystems für KI-Agenten

### Ausgangspunkt für die Implementierung

Verwende das obige vollständige Beispiel für den Client-Einstieg mit einem HTML-Root-Element. Importiere tdesign-react/es/style/index.css genau einmal. Fixiere die Versionen und teste sie vor der Veröffentlichung mit deinem Build-Tool.

```
npm install tdesign-react react react-dom
```

### Ein Prompt für dein Projekt

```
Verwende tdesign-react Form und Table für einen API-Regel-Editor. Bewahre die semantischen --td-*-Rollen, registrierten Feldschlüssel, stabilen Zeilen-IDs, explizite Validierung und wahrheitsgemäße Meldungen zum lokalen Zustand.
```

## Quellen und Umfang des TDesign-Designsystems

Unabhängige OpenDesign-Referenz. Die Vorschau ist eine Offline-Interpretation, keine Tencent-Software und kein bereitgestellter Autorisierungsdienst.

- TDesign React Paketinstallation und Implementierungsfamilie.

- Helles Theme Semantische Farbzuordnungen für helle Designs.

- Dunkles Theme Dunkler Root-Selektor und Rollenzuordnungen.

- Typografie Definitionen für Schriftart, Schriftgröße und Zeilenhöhe.

- Größen-Tokens Aliasse für grundlegende und semantische Abstände.

- Eckenradien Veröffentlichte Eckradien.

- Formularbeispiel APIs für Registrierung, Übermittlung und Feldfehler.

- Tabellentypen Vorgaben für Zeilenidentität und Spalten-Rendering.

## Weiterführende Ressourcen zum TDesign-Designsystem

### Thumbtack Thumbprint

Erstelle eine Oberfläche zur Suche nach Dienstleistern mit den dokumentierten v2-Primitiven von Thumbprint: kompakte Anbieter-Karten, übersichtliche Vergleichsdetails, eindeutige Auswahlzustände und eine dauerhaft sichtbare Merkliste.

### Twilio Paste

Erstelle einen Benachrichtigungsentwurf mit dem Theme und den Button-Vorgaben von Paste, einer überprüften Abstands-Skala und einer klaren Unterscheidung zwischen dem Bearbeiten, Prüfen und tatsächlichen Senden einer Nachricht.

### Visa Product Designsystem

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.


- [Implementierungsreferenz](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Quelle](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Quelle](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Quelle](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Quelle](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Quelle](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Quelle](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Unterstützende Spezifikation lesen](https://github.com/Tencent/tdesign-react)
- [Code-Referenz](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Code-Referenz](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [TDesign React Paketinstallation und Implementierungsfamilie.](https://github.com/Tencent/tdesign-react)
- [Helles Theme Semantische Farbzuordnungen für helle Designs.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Dunkles Theme Dunkler Root-Selektor und Rollenzuordnungen.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Typografie Definitionen für Schriftart, Schriftgröße und Zeilenhöhe.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Größen-Tokens Aliasse für grundlegende und semantische Abstände.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Eckenradien Veröffentlichte Eckradien.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Formularbeispiel APIs für Registrierung, Übermittlung und Feldfehler.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Tabellentypen Vorgaben für Zeilenidentität und Spalten-Rendering.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)