Gardener Dokumentation

Schnellstart

Gardener kann nur CSS verwenden oder eine Null-Abhängigkeits-Laufzeit für interaktives Verhalten laden. Das vollständige Paket enthält standardmäßig alle Themes, Komponenten und Werkzeugklassen.

<!doctype html>
<html lang="zh-CN" data-g-theme="garden" data-g-mode="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="gardener.css">
</head>
<body>
  <main class="g-container g-py-8">
    <button class="g-btn g-btn-primary">Erste Schritte</button>
  </main>
  <script type="module" src="gardener.runtime.js"></script>
</body>
</html>

Default visual:Weiße Leinwand, neutraler Text, 4px grundlegende abgerundete Ecken, zurückhaltender Schatten. Abgerundete Ecken und eine starke Hierarchie müssen explizit ausgewählt werden und belasten keine gewöhnlichen Geschäftsseiten.

Empfohlene Auswahlreihenfolge

Ziel und Seitentyp bestätigen.
Priorisieren Sie die Strukturauswahl aus Seitenrezepten.
Füllfunktion mit registrierten Komponenten.
Verwenden Sie nur Werkzeugklassen, um das lokale Layout und den Abstand zu handhaben.
Legen Sie schließlich die Themenachse fest und überprüfen Sie die vollständige Umgebungsmatrix.

Installation und Pakete

Der aktuelle Build weist keine Laufzeitabhängigkeiten von Drittanbietern auf. Verfügbar über den Paketmanager oder direkt kopiert dist/ .

npm install @gardener/css

Export	Inhalt	Nutzungsszenarien
`@gardener/css`	Volles CSS + Standardlaufzeiteintrag	Direkt aus der Box verwenden
`core.css`	Token, Thema Achse, Reset, Base	Selbstgebaute Komponentenbibliothek
`themes.css`	42 Hauptfarbe und Anzeigemodus	Nur Themen wiederverwenden
`utilities.css`	Alle responsive Tool-Klassen	Atomic formula page
`components.css`	Generische Nicht-AI-Komponenten und vollständige Raster	Geschäftssystem
`ai.css`	AI-spezifische Komponenten	Chat, Agent, Generation Tool
`./tauri`	Tauri Window Control Adapter	Desktop WebView
`./electron`	Electron Safety Bridge Adapter	Desktop Client
`./manifest`	Komponenten- und Umweltliste	AI / Automation Tools
`./utilities-manifest`	Erklärung der Werkzeugklasse und Antwortbedingungen	Exakte Klassennamensuche
`./recipes`	Hochfrequenzseitenrezept	Seitenskelettauswahl
`./capabilities`	Implementierungsstatus der Industriefähigkeit und Schnittstellenmatrix	Unterlassungen auf Konzeptebene verhindern
`./public-api`	Öffentliche Benennung, Verhalten, Veranstaltungen und Adapterverträge	Generatoren und Integrationswerkzeuge
`./builds`	Plattformarchive, Komponentenpakete, Komponentenbesitz und Builderverträge	Generiert nach Plattform/Komponente
`./performance`	rohe, gzip, Brotli und npm Paketgröße Berichterstattung	Release Performance Gate
`./components-manifest`	Component Source List	Komponentenabruf und Codegenerierung
`./schema/*`	Zehn Sätze von geschlossenen JSON Schema	Vertragsüberprüfung

Gruppe nach Schicht

import "@gardener/css/core.css";
import "@gardener/css/themes.css";
import "@gardener/css/components.css";
import "@gardener/css/utilities.css";

Projekt Gardener Vue 3

@gardener/vue ist die offizielle Vue 3-Adaptionsschicht von Gardener CSS 1.0.0, die aktuelle Version ist 1.0.0 Stabil, unterstützt Vue >=3.4.0 <4.0.0 mit Node.js >=18.18. Es ordnet alle 506 CSS-Komponenten und 66 DOM-Verhaltensweisen Element für Element zu und bietet gleichzeitig 538 Root-Laufzeitexporte, 21 TypeScript-Typexporte, 29 Paketeinstiegspunkte und 28 Komponenten-CSS-Paket-Proxys.

506Named G* component

538Root Runtime Export

29Öffentlicher Paketeintrag

28Component CSS-Paket

Installation und globale Plugins

npm install @gardener/vue @gardener/css vue

import { createApp } from "vue";
import GardenerVue from "@gardener/vue";
import "@gardener/vue/style.css";
import App from "./App.vue";

createApp(App).use(GardenerVue).mount("#app");

Vollständige Abdeckung der Plug-in-Optionen prefix、components、directive und initialize. Präfix anpassen, nur einige Komponenten registrieren, schließen v-gardener oder eine verzögerte Laufzeitinitialisierung sollte übergeben werden createGardenerVue(options) Plug-in erstellen.

On-Demand Komponenten und Themes Provider

<script setup lang="ts">
import { GButton, GCard, GDialog, GardenerProvider } from "@gardener/vue";
import "@gardener/vue/platform/web.css";
</script>

<template>
  <GardenerProvider
    theme="garden"
    mode="light"
    neutral="cool"
    typography="system"
    shape="subtle"
    density="comfortable"
    elevation="subtle"
    motion="full"
    platform="web"
    os="auto"
  >
    <GCard><GButton variant="primary">Speichern</GButton></GCard>
  </GardenerProvider>
</template>

GardenerProvider Die zehn thematischen Achsen sind theme、mode、neutral、typography、shape、density、elevation、motion、platform und os. Startseite und Muster bleiben standardmäßig weiß mit hellen und kleinen abgerundeten Ecken; Der Dunkelmodus ist standardmäßig nicht aktiviert.

Öffentliche Eigenschaften, transparente Übertragung und Ref aller Komponenten

Eigenschaften	Zweck	Abkommen
`as`	Wurzelelement oder Vue-Komponente ändern	Gardener Klasse, Eigenschaften und Slots bewahren
`variant`	Variante anwenden	Akzeptiert einen String oder ein Array von Strings
`state`	Status der Anwendungskomponente	Konvertieren in `is-*` Statusklasse
`config`	Laufzeitkonfiguration deklarieren	In entsprechendes konvertieren `data-g-*` Eigenschaften
`initialize`	Initialisierung des Kontroll-DOM-Verhaltens	Ausfall `true`
`modelValue`	Vue bidirektionaler Bindungswert	Sowohl native Form als auch benutzerdefinierte Gardener-Events werden unterstützt
`modelEvent`	Geben Sie benutzerdefinierte Synchronisationsereignisse an	Verwendung `gardener:*` Ereignisname
`modelKey`	Erhalten Sie Wert aus der Ereignisnutzlast	Lesen `CustomEvent.detail` Feld angeben

Alle nativen Attribute, DOM-Ereignisse und Slots werden durchgereicht. Komponentenvorlage Verweis auf einheitliche Offenlegung element、getInstance() und refresh(). Wird in Verbundstrukturen wie Dialogfeldern und Schubladen verwendet GardenerPart Erstellen Sie standardmäßige Interna, um zu vermeiden, dass CSS- und Verhaltensauswahlverträge beschädigt werden.

v-Modell, benutzerdefinierte Ereignisse und Anweisungen

<GInput v-model="keyword" />

<GTreeSelect
  v-model="selectedId"
  model-event="gardener:change"
  model-key="value"
/>

<div v-gardener="{
  behavior: 'dialog',
  config: { startOpen: true }
}" />

vGardener(Vorlagenname v-gardener) Mounten, aktualisieren und zerstören Sie bestimmte Verhaltensweisen zusammen mit dem Vue-Lebenszyklus. Standards für die Verwendung nativer Eingaben update:modelValue;Komplexe Komponenten übergeben modelEvent und modelKey Benutzerdefinierte Bridge Gardener-Ereignisse für dasselbe Protokoll.

Alle 7 Composable

useGardenerZugriff auf Laufzeit, Initialisierung und Zerstörungsfähigkeiten

useGardenerBehaviorBindeverhalten und Zugriffsinstanzen

useGardenerEventTypsicheres Hören für Gärtner:* Veranstaltungen

useGardenerThemeLesen und aktualisieren Sie den Zehn-Achsen-Themastatus

useGardenerToastErstellen und Verwalten von Toasts

useTauriWindowControlsBind Tauri Fenstertaste und Zerstörungszyklus

useElectronWindowControlsBinding Electron Security Bridge und Zerstörungszyklus

Eingang im Web-, Mobil- und Desktop-Stil

Eintritt	Inhalt	Anwendbare Szenarien
`@gardener/vue/style.css`	Komplette Gardener Stil	Out of the Box und Prototyp
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Eintrag im Schichtstil	Custom Build
`platform/web.css`	Allgemeine Webfähigkeiten	PC, responsive Website, Dashboard
`platform/mobile.css`	Universal + mobile Kombination	Mobile Webseite, PWA, WebView
`platform/desktop.css`	Universal + Desktop Combo	Desktop Browser und Application Shell
`platform/tauri.css`	Desktop-Portal + Tauri-Adaption	Tauri Fenster
`platform/electron.css`	Desktop-Portal + Electron Anpassung	Electron Fenster
`component-css/*`	28 stabile Komponenten CSS Paket Proxies	Laden nach Funktionsbereich

Empfohlener Root-Eintrag für allgemeine Anwendungen oder @gardener/vue/components Holen Sie sich den besten Baumshake; @gardener/vue/bundle.min.js ist ein vorkomprimierter Einzeldateieintrag. Der SSR-Import greift nicht auf globale Browserobjekte zu und das Verhalten wird erst initialisiert, nachdem die Komponente gemountet wurde, sodass es für serverseitiges Rendering und Hydration verwendet werden kann.

Alle 29 öffentlichen Paketeinträge

JavaScript:.、./components、./component、./composables、./directives、./plugin、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Stil:./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css und ./component-css/*. Vertrags- und Paketinformationen:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exporte von Nichtkomponenten-Laufzeit und TypeScript-Typen

32 Nicht-Komponenten-Laufzeiten exportiert als:Gardener、GardenerComponent、GardenerPart、GardenerProvider、GardenerVue、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByExportName、componentByName、componentCatalog、configAttributes、createGardenerComponent、createGardenerVue、default、destroy、emit、gardenerComponents、getInstance、init、observe、register、themeAttributes、toast, 7 Composable und vGardener。

21 Typen exportiert als:GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentKind、GardenerComponentPublicInstance、GardenerConfigValue、GardenerDirectiveOptions、GardenerDirectiveValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerPlatform、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerVueComponentName、GardenerVueOptions。

Öffentliches Schema, Metadaten und Publishing Access

Öffentliche API、Vereinbarkeit und Leistung Beide haben JSON-Schemata, die unbekannte Felder ausschalten;Komponentenkatalog JSON Direkt lesbar durch KI, Codegeneratoren und Dokumentationstools. Das Budget für das vollständig komprimierte Paket beträgt 328.220 B raw, 51.602 B gzip, 26.926 B Brotli; Single GButton Das tatsächliche Tree-Shaking-Ergebnis beträgt 3.718 B. Der deterministische Build deckt 87 Dateien ab, das NPM-Paket prüft 98 Dateien, 284.183 B gepackt, 3.729.929 B entpackt.

cd vue
npm run release:verify

# Erstellen, Überschreibungen generieren, Schema, Vue-SFC-Typen, Einheiten und DOM-Lebenszyklus、
# Chromium / WebKit / Firefox / Mobil, WCAG A/AA, Beispiel、
# Baumschütteln, reproduzierbare Builds, Leistungsbudgetierung, NPM-Verpackung und Publint

Alle 506 Vue Komponenten

Die folgenden Verzeichnisse werden direkt zusammengeführt Vue public API und Komponenten-Metadaten, listet Vue-Exportnamen, CSS-Namen, Kategorien, Typen, Selektoren, Varianten, Zustände, Widgets, Verhaltensweisen und Plattformen auf. Es ist kein Featured Sample; alle 506 Items befinden sich im selben durchsuchbaren Verzeichnis.

Reading Vue Component Manifest...

Gardener React Projekt

@gardener/react ist die offizielle React-Adaptionsschicht von Gardener CSS 1.0.0, die aktuelle Version ist 1.0.0 Stabil, unterstützt React >=18.3.0 <20.0.0 mit Node.js >=18.18. Es ordnet alle 506 CSS-Komponenten und 66 DOM-Verhaltensweisen Element für Element zu und bietet gleichzeitig 538 Root-Laufzeitexporte, 22 TypeScript-Typexporte, 29 öffentliche Paketeinstiegspunkte und 28 Komponenten-CSS-Paket-Proxys.

506Named G* component

538Root Runtime Export

29Öffentlicher Paketeintrag

28Component CSS-Paket

Installations- und Wurzelkomponenten

npm install @gardener/react @gardener/css react react-dom

import { createRoot } from "react-dom/client";
import { GButton, GCard, GardenerProvider } from "@gardener/react";
import "@gardener/react/style.css";

createRoot(document.getElementById("root")!).render(
  <GardenerProvider theme="garden" mode="light" shape="subtle">
    <GCard><GButton variant="primary">Speichern</GButton></GCard>
  </GardenerProvider>,
);

Alle Komponenten unterstützen den benannten Import bei Bedarf. Der Builder kann vom Root-Eintrag aus starten oder @gardener/react/components Schütteln Sie den Baum. Jede generierte Komponente behält den genauen Attributtyp ihres Standard-HTML-Tags bei, z. B. GButton Akzeptieren type="submit"，GInput Akzeptieren type und autoComplete, während das erlaubt wird as Wechseln Sie zu anderen nativen Elementen oder React-Komponenten.

Themenanbieter und zehn Themenachsen

<GardenerProvider
  theme="garden"
  mode="light"
  neutral="cool"
  typography="system"
  shape="subtle"
  density="comfortable"
  elevation="subtle"
  motion="full"
  platform="web"
  os="auto"
  id="application-theme"
  aria-label="Themenbereich der Anwendung"
>
  <App />
</GardenerProvider>

GardenerProvider Die zehn thematischen Achsen sind theme、mode、neutral、typography、shape、density、elevation、motion、platform und os. Außerdem werden Klassenname, Stil, ID, ARIA und andere native Attribute transparent übertragen. useGardenerTheme für Alphabetisierungsthemen, useGardenerThemeContext zum direkten Lesen des Kontexts. Die Standardeinstellung ist immer noch weißes Licht mit kleinen abgerundeten Ecken, und das dunkle Design wird nicht automatisch aktiviert.

10 gemeinsame Eigenschaften für alle Komponenten

Eigenschaften	Zweck	Abkommen
`as`	Wurzelelement oder React-Komponente ändern	Keep Gardener Klasse, Eigenschaften, Kinder und Ref
`variant`	Variante anwenden	String- oder Read-Only-Array von Strings
`state`	Status der Anwendungskomponente	Konvertieren in `is-*` Statusklasse
`config`	Konfiguration des Deklarationsverhaltens	In entsprechendes konvertieren `data-g-*` Eigenschaften
`initialize`	Initialisierung des Kontroll-DOM-Verhaltens	Ausfall `true`
`value`	Kontrollierter Wert	Unterstützen Sie native Formulare und benutzerdefinierte Gardener-Events
`defaultValue`	Unkontrollierter Anfangswert	Checkbox boolean zugeordnet zu `defaultChecked`
`valueEvent`	Geben Sie das Synchronisationsereignis für Werte an	Verfügbar `gardener:*` Ereignisname
`valueKey`	Erhalten Sie Wert aus der Ereignisnutzlast	Lesen `CustomEvent.detail` Feld angeben
`onValueChange`	Erhalten Sie neuen Wert mit Original-Event	Automatische Deduplizierung von nativen Eingaben/Änderungen

Native Attribute, Ereignisse, Kinder und className Alle werden transparent übertragen. Komponentenreferenz vereinheitlicht öffentlich element、getInstance() und refresh(); Verbundstrukturen sind verfügbar GardenerPart Erstellen Sie interne Komponenten. Kontrollkästchen boolean value Verwendung checked, radio behält den String-Wert bei, um eine konsistente Semantik der React-Formulare sicherzustellen.

Kontrollierte Werte, benutzerdefinierte Ereignisse und Verhaltensinstanzen

const [keyword, setKeyword] = useState("");

<GInput value={keyword} onValueChange={(next) => setKeyword(String(next))} />

<GTreeSelect
  value={selectedId}
  valueEvent="gardener:change"
  valueKey="value"
  onValueChange={setSelectedId}
/>

useGardenerBehavior Binden Sie 66 Verhaltensweisen an ein Element, ein Dokument oder eine Komponente. Behandeln und zerstören Sie sie beim Entladen;initialize Die automatische Komponenteninitialisierung kann deaktiviert werden, um eine einheitliche Übernahme durch die Laufzeit auf Seitenebene zu ermöglichen. Das Verhalten der expliziten Übergabe eines Datenattributs hat Vorrang vor der Generierung eines Standardwerts.

Alle 7 Haken

useGardenerZugriff auf Laufzeit, Initialisierung, Beobachtung und Zerstörung

useGardenerBehaviorBindeverhalten und Zugriffsinstanzen

useGardenerEventTypsicheres Hören für Gärtner:* Veranstaltungen

useGardenerThemeLesen und aktualisieren Sie den Zehn-Achsen-Themastatus

useGardenerToastErstellen und Verwalten von Toasts

useTauriWindowControlsBind Tauri Fenstertaste und Zerstörungszyklus

useElectronWindowControlsBinding Electron Security Bridge und Zerstörungszyklus

Eingang im Web-, Mobil- und Desktop-Stil

Eintritt	Inhalt	Anwendbare Szenarien
`@gardener/react/style.css`	Komplette Gardener Stil	Out of the Box und Prototyp
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Eintrag im Schichtstil	Custom Build
`platform/web.css`	Allgemeine Webfähigkeiten	PC, responsive Website, Dashboard
`platform/mobile.css`	Universal + mobile Kombination	Mobile Webseite, PWA, WebView
`platform/desktop.css`	Universal + Desktop Combo	Desktop Browser und Application Shell
`platform/tauri.css`	Desktop-Portal + Tauri-Adaption	Tauri Fenster
`platform/electron.css`	Desktop-Portal + Electron Anpassung	Electron Fenster
`component-css/*`	28 stabile Komponenten CSS Paket Proxies	Laden nach Funktionsbereich

SSR, Hydration und Desktop Bridging

Der Paketeintrag kann serverseitig sicher importiert werden. Alle 506-Komponenten haben die SSR Stück für Stück durchlaufen und das Verhalten wird erst während des Effektlebenszyklus initialisiert; Die serverseitige Markierung Hydration erzeugt keine behebbaren Fehler und ist mit StrictMode kompatibel. Tauri und Electron werden jeweils verwendet @gardener/react/tauri und @gardener/react/electron Unabhängige Portale, sodass keines der Portale versehentlich die Überbrückungs-API einer anderen Plattform exportiert.

import { useTauriWindowControls } from "@gardener/react/tauri";
import "@gardener/react/platform/tauri.css";

function WindowChrome() {
  const root = useRef<HTMLElement | null>(null);
  useTauriWindowControls(root, window.__TAURI_WINDOW__);
  return <header ref={root} className="g-native-titlebar">...</header>;
}

Alle 29 öffentlichen Paketeinträge

JavaScript:.、./components、./component、./hooks、./provider、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Stil:./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css、./component-css/*.css und ./component-css/*. Vertrags- und Paketinformationen:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exporte von Nichtkomponenten-Laufzeit und TypeScript-Typen

32 Nicht-Komponenten-Laufzeiten exportiert als:Gardener、GardenerComponent、GardenerPart、GardenerProvider、GardenerThemeContext、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByExportName、componentByName、componentCatalog、configAttributes、createGardenerComponent、destroy、emit、gardenerComponents、getInstance、init、observe、register、resolveGardenerTarget、themeAttributes、themeAxes、toast、useElectronWindowControls、useGardener、useGardenerBehavior、useGardenerEvent、useGardenerTheme、useGardenerThemeContext、useGardenerToast、useTauriWindowControls。

22 Typen exportiert als:GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerComponentProps、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerGeneratedComponent、GardenerOwnProps、GardenerPlatform、GardenerReactComponentName、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerValueChange。

Public Schema, Performance und Release Access

Öffentliche API、Vereinbarkeit und Leistung Beide wurden durch JSON Schema mit unbekannten Feldern validiert;Komponentenkatalog JSON Direkt lesbar durch KI, Codegeneratoren und Dokumentationstools. Die tatsächliche Größe des vollständig komprimierten Pakets beträgt 326.064 B raw, 50.126 B gzip, 26.381 B Brotli; Single GButton Das tatsächliche Tree-Shaking-Ergebnis beträgt 2.599 B. Der deterministische Build deckte 87 Dateien ab, das npm-Paket überprüfte 98 Dateien, 262.706 B gepackt, 2.438.775 B entpackt und die Sicherheitsüberprüfung der Produktionsabhängigkeit ergab 0 Schwachstellen.

cd react
npm run release:verify

# Build- und öffentliche API, Schema, TypeScript, 506-Komponenten-SSR, Hydration, DOM-Lebenszyklus、
# Chromium / WebKit / Firefox / Pixel 7 / iPhone 13、WCAG A/AA、
# Baumschütteln, reproduzierbare Builds, Leistungsbudgetierung, NPM-Verpackung und Publint

Alle 506 React Komponenten

Die folgenden Verzeichnisse werden direkt zusammengeführt React Public API und Komponenten-Metadaten, itemizing React Exportnamen, CSS-Namen, Kategorien, Typen, Standard-Tags, Selektoren, Varianten, Zustände, Widgets, Verhaltensweisen und Plattformen. Es ist kein Featured Sample; alle 506 Items befinden sich im selben durchsuchbaren Verzeichnis.

Reading React Component Manifest...

Gardener AngularJS Projekt

@gardener/angularjs ist die offizielle AngularJS 1.x Legacy-Systemanpassungsschicht für Gardener CSS 1.0.0, die aktuelle Version ist 1.0.0 Stabil. Es validiert AngularJS >=1.8.2 <1.9.0 mit Node.js >=18.18, Element-für-Element-Zuordnung aller 506 CSS-Komponenten und 66 DOM-Verhaltensweisen und bietet 535 Root-Laufzeitexporte, 24 TypeScript-Typexporte, 29 öffentliche Paketeinstiegspunkte und 28 Komponenten-CSS-Paket-Proxys.

Legacy-Systemgrenzen:AngularJS hat den offiziellen Support eingestellt und es sind keine Sicherheitshinweise für das Framework selbst bekannt, die keine Upstream-Korrekturen enthalten. Diese Anpassungsschicht wird angular Behalten Sie es als externe Peer-Abhängigkeit bei, die es nicht in das Gardener-Produkt überträgt und Risiken auf Framework-Ebene nicht abdeckt. Neue Projekte haben Vorrang, Vue-, React- oder Framework-unabhängige Eingänge zu wählen; Bestehende Projekte müssen außerdem Eingabebereinigung, CSP, Ressourcen-Whitelisting, Desktop-Bridge-Mindestautorisierung und Migrationsplan implementieren. Die vollständigen Anforderungen finden Sie unter AngularJS Security Baseline。

506Komponentenanweisungen erzeugen

535Root Runtime Export

29Öffentlicher Paketeintrag

28Component CSS-Paket

Installation, ESM-Beladung und Modulfabrik

npm install @gardener/angularjs @gardener/css angular

import "angular/angular.js";
import { createGardenerAngularJS } from "@gardener/angularjs";
import "@gardener/angularjs/style.css";

const gardenerModule = createGardenerAngularJS(window.angular);
window.angular.module("app", [gardenerModule]);

AngularJS npm-Pakete sind keine nativen ESM und sollten daher in Build-Tools wie Vite verwendet werden import "angular/angular.js" Importieren Sie die Nebenwirkungen von window.angular Explizite Übergabe createGardenerAngularJS;Verlassen Sie sich nicht auf instabil import angular from "angular" Standardmäßig importiert. Das Gardener-Paket selbst liest kein globales AngularJS und der Root-Eintrag ist sicher für die SSR-Toolchain-Analyse.

const moduleName = createGardenerAngularJS(window.angular, {
  moduleName: "gardener",
  dependencies: [],
  components: ["button", "gInput", "GCardDirective"],
  initialize: true,
  registerProvider: true,
  registerBehaviorDirective: true,
});

components Akzeptiert einen Komponentennamen, AngularJS-Direktivennamen oder ESM-Exportnamen, der durch 506 Vereinigungstypen eingeschränkt ist; unbekannte Namen werden sofort einen Fehler auslösen. Wiederholte Installationen derselben AngularJS-Instanz, des Modulnamens und äquivalenter Optionen sind idempotent. Wenn verschiedene Komponenten-Untergruppen, Abhängigkeiten oder Initialisierungsoptionen Module mit dem gleichen Namen verwenden, wird ein Fehler explizit gemeldet, um das stillschweigende Erhalten halbregistrierter Module zu verhindern.

Element-Direktiven, Attribut-Direktiven und Semantik

<gardener-provider gardener-theme="garden" gardener-mode="light" gardener-shape="small">
  <g-card gardener-variant="interactive">Inhalt des Elementbefehls</g-card>
  <button g-button gardener-variant="primary" type="submit">Speichern</button>
  <input g-input ng-model="vm.keyword" aria-label="Schlüsselwörter">
</gardener-provider>

Jede Komponente beginnt mit restrict: "EA" Unterstützt sowohl Element- als auch Attributformulare, z. B. <g-card> / gCard und <article g-card>. Wenn es um native Semantiken wie Schaltfläche, Eingabe, Auswahl, Formular, Tabelle, Navigation, Seite usw. geht, sollte der Verwendung von Attributen Vorrang eingeräumt werden, damit Tastaturen, Formularübermittlungen, Browservalidierung und unterstützende Technologien weiterhin native Verhaltensweisen verwenden können.

Öffentliche Eigenschaften für alle 8 Komponenten

AngularJS Eigentum Namen	Methode zum Schreiben von Vorlagen	Zweck
`gardenerVariant`	`gardener-variant`	Apply space or comma separate Komponentenvarianten
`gardenerState`	`gardener-state`	Ordnen Sie einen oder mehrere zu `is-*` Statusklasse
`gardenerConfig`	`gardener-config`	Tiefenabhör-Ausdrucksobjekt und Zuordnung zu `data-g-*` Konfiguration
`gardenerInitialize`	`gardener-initialize`	DOM-Verhaltensinitialisierung dynamisch aktivieren oder vollständig deaktivieren
`ngModel`	`ng-model`	AngularJS native Formularmodell oder Bridge benutzerdefinierte Komponentenwerte bewahren
`gardenerValueEvent`	`gardener-value-event`	Zum Aktualisieren des Modells auswählen `gardener:*` Benutzerdefinierte Ereignisse
`gardenerValueKey`	`gardener-value-key`	Von `CustomEvent.detail` Lesen Sie das angegebene Feld
`gardenerOnValueChange`	`gardener-on-value-change`	Ausdruck aufrufen und bereitstellen `$value`、`$event` Einheimische

Das Anweisungshandle wird in gespeichert angular.element(node).data("$gardenerHandle"), einheitliche Offenlegung element、getInstance()、refresh() und destroy()。refresh() Der Knotenteilbaum wird zuerst zerstört und dann gemäß der aktuellen Konfiguration initialisiert. Umfang $destroy entfernt das Ereignis und zerstört die Verhaltensinstanz.

ngModel, native Formen und Gardener Events

<input g-input
  ng-model="vm.keyword"
  gardener-on-value-change="vm.changed($value, $event)">

<select g-select multiple ng-model="vm.channels">
  <option value="email">E-Mail</option>
  <option value="sms">SMS</option>
</select>

<div g-tree-select
  ng-model="vm.selectedId"
  gardener-value-event="gardener:change"
  gardener-value-key="nodeId"></div>

Die Modellsemantik von nativer Eingabe, Textbereich und Auswahl wird weiterhin von AngularJS selbst verwaltet und wird nicht von der Anpassungsschicht abgedeckt. ngModel.$render oder wiederholter Anruf $setViewValue; Das Kontrollkästchen enthält boolesche Werte, das Optionsfeld enthält Optionswerte und mehrere ausgewählte Arrays. Die komplexe Gardener-Komponente aktualisiert das Modell über benutzerdefinierte Ereignisse und Verwendungen gardenerOnValueChange Erhalten Sie konsistente Rückrufwerte.

Gemeinsame Befehle, Dienste und Zehn-Achsen-Themen

gGardenerVorlage schreiben g-Gärtner, dynamisch erklären, schalten und zerstören willkürliche Verhaltensweisen

gardenerProviderElement oder Attributform bietet ein Zehn-Achsen-Thema und initialisiert den Teilbaum

GardenerRuntimeinit · destroy · getInstance · emit · observed

GardenerThemeAttribute · anwenden · lesen · klar

GardenerToastShow(Optionen)

Vollständige Abdeckung der Themenachse theme、mode、neutral、typography、shape、density、elevation、motion、platform und os, entsprechend der Vorlage gardener-theme An gardener-os. Das Standardbeispiel behält das weiße Licht und die kleinen abgerundeten Ecken bei.

Web, Mobile, Desktop und Pro-Domain-Styles

Eintritt	Inhalt	Anwendbare Szenarien
`@gardener/angularjs/style.css`	Komplette Gardener Stil	Out-of-the-Box und progressive Integration in Legacy-Systeme
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Eintrag im Schichtstil	Custom Build
`platform/web.css`	Allgemeine Webfähigkeiten	PC-Website und Dashboard
`platform/mobile.css`	Mobile Komponenten und sichere Zonen	Mobile Webseite, PWA, WebView
`platform/desktop.css`	Desktop Workspace Kombination	Desktop Browser und Application Shell
`platform/tauri.css`	Desktop-Portal + Tauri-Adaption	Tauri Fenster
`platform/electron.css`	Desktop-Portal + Electron Anpassung	Electron Fenster
`component-css/*`	28 stabile Komponenten CSS Paket Proxies	Laden nach Funktionsbereich

import { createTauriWindowService } from "@gardener/angularjs/tauri";
import { createElectronWindowService } from "@gardener/angularjs/electron";

Tauri- und Elektroneneingänge sind voneinander isoliert und beide kehren zum Gürtel zurück available und destroy() Bindungsobjekt; Die Rendering-Ebene sollte nur minimale Bridging-Funktionen auf der Whitelist erhalten.

Alle 29 öffentlichen Paketeinträge

JavaScript:.、./components、./directives、./services、./module、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Stil:./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css、./component-css/*.css und ./component-css/*. Vertrags- und Paketinformationen:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exporte von Nichtkomponenten-Laufzeit und TypeScript-Typen

29 Nicht-Komponenten-Laufzeiten exportiert als:GARDENER_ANGULARJS_MODULE、Gardener、GardenerRuntimeFactory、GardenerThemeFactory、GardenerToastFactory、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByDirectiveName、componentByExportName、componentByName、componentCatalog、configAttributes、createElectronWindowService、createGardenerAngularJS、createGardenerComponent、createTauriWindowService、destroy、emit、gardenerBehaviorDirective、gardenerDirectives、gardenerProviderDirective、getInstance、init、observe、register、themeAttributes、themeAxes、toast。

24 Typen exportiert als:GardenerAngularJSComponentExportName、GardenerAngularJSComponentName、GardenerAngularJSDirectiveFactory、GardenerAngularJSDirectiveName、GardenerAngularJSModule、GardenerAngularJSOptions、GardenerAngularJSStatic、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerEventName、GardenerPlatform、GardenerRuntimeService、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeAxis、GardenerThemeService、GardenerThemeState、GardenerValueChangeLocals。

Public Schema, Kompatibilität, Performance und Release Access

Öffentliche API、Vereinbarkeit und Leistung Beide werden von JSON Schema validiert, wobei unbekannte Felder deaktiviert sind; AngularJS-Unterstützungsbereiche werden auch auf die maschinenlesbare Kompatibilitätsbasis geschrieben.Komponentenkatalog JSON Direkt lesbar durch KI, Codegeneratoren und Dokumentationstools. Die tatsächliche Größe des vollständig komprimierten Pakets beträgt 404.094 B raw, 59.499 B gzip, 29.785 B Brotli; Single GButtonDirective beträgt 4.515 B. Der deterministische Build deckte 83 Dateien ab, die NPM-Paketprüfung 95 Dateien, 325.747 B gepackt, 2.938.245 B entpackt, Gardeners eigenes Produktionslast-Audit ergab 0 Schwachstellen.

cd angular
npm run release:verify

# Generieren und öffentliche API, 3 Schemasätze, TypeScript, AngularJS 1.8.2 / 1.8.3、
# 506 Richtlinienregistrierung, ngModel- und DOM-Lebenszyklus, Chromium / WebKit / Firefox、
# Pixel 7 / iPhone 13、WCAG A/AA、Tree Shaking, reproduzierbare Builds, Leistung, Paketierung und Publint

Das aktuelle Gate enthält 17 Laufzeit-/Vertragstests, 3 Schematests, 20 Integrationstests für fünf Engines und mobile Browser sowie 1 automatisiertes Ax WCAG A/AA-Audit. abgeschlossen npm audit Bekannte Hinweise für die AngularJS-Ontologie werden weiterhin originalgetreu angezeigt; Hierbei handelt es sich um ein Altrisiko, das isoliert, akzeptiert oder migriert werden muss und nicht als behoben markiert werden kann.

Alle 506 AngularJS-Komponenten

Die folgenden Verzeichnisse werden direkt zusammengeführt AngularJS Public API und Komponenten-Metadaten, listet die ESM-Richtlinie Factory Export Name, CSS-Name, Kategorie, Typ, Standard-Tag, Selektor, Variante, Zustand, Widget, Verhalten und Plattform. Es ist kein Featured Sample; alle 506 Items befinden sich im selben durchsuchbaren Verzeichnis.

Lesen AngularJS Komponente manifestieren...

Projekt Gardener Blazor

Gardener.Blazor ist die offizielle Razor Class Library für Gardener CSS 1.0.0, die aktuelle Version ist 1.0.0 Stabil. Vermögenswerte stabilisieren net10.0 Kompiliert und überprüft mit einem unabhängigen NuGet-Konsumenten net11.0;Gilt für Blazor Web App Static SSR, Interactive Server, Interactive WebAssembly, Auto, Standalone WebAssembly, Hybrid und Desktop WebView.

506 Rasiermesserkomponenten 66 DOM Verhalten 75 Laufzeitereignisse 28 Typ des Rahmens 43 Statische Ressourcen

Installation, Registrierung und statische Ressourcen

<PackageReference Include="Gardener.Blazor" Version="1.0.0" />

builder.Services.AddGardenerBlazor();

var app = builder.Build();
app.MapStaticAssets();

<link rel="stylesheet"
      href="_content/Gardener.Blazor/gardener.min.css" />

Komponenten werden bei Bedarf beim ersten interaktiven Rendern geladen _content/Gardener.Blazor/gardener.blazor.js, keine handschriftlichen Skript-Tags erforderlich. Neben der gesamten Stilpalette bieten wir auch platforms/gardener.web.min.css、platforms/gardener.mobile.min.css、platforms/gardener.desktop.min.css、platforms/gardener.tauri.min.css、platforms/gardener.electron.min.css und 28 components/*.min.css Komponentendomäneneintrag, alle offiziellen komprimierten Dateien verfügen über eine externe Quellkarte.

Komponenten, Anbieter und SSRs

@using Gardener.Blazor.Components

<GardenerProvider Theme="garden" Mode="light" Shape="small"
                   Density="comfortable" Platform="web">
  <GAppShell>
    <GSidebar>Navigation</GSidebar>
    <GMainRegion>
      <GCard>
        <GButton Variant="primary" @onclick="Save">Speichern</GButton>
      </GCard>
    </GMainRegion>
  </GAppShell>
</GardenerProvider>

Jede CSS-Komponente verfügt über eine entsprechende G* Geben Sie standardmäßige semantische Tags, Selektoren, Zustände, Widgets, Verhaltensweisen, Plattform- und Barrierefreiheitsmetadaten ein und behalten Sie diese bei. Die statische SSR-Phase gibt direkt vollständiges HTML aus und stellt das DOM-Verhalten erst bereit, nachdem eine interaktive Verbindung hergestellt wurde. Änderungen an Parametersignaturen aktualisieren den Mount und der Listener wird abgemeldet, wenn die Komponente freigegeben wird. GardenerComponent Kann dynamisch nach Metadatennamen rendern,GardenerBehavior Verhaltensweisen können an jeden Inhalt angehängt werden,GardenerPart Wird zur Ausgabe vereinbarter Komponentenklassen verwendet.

Gemeinsame Parameter, Refnums und Formulare

Alle generierten Komponenten haben 20 gemeinsame Parameter:As、Id、Class、Style、Variant、Variants、State、States、Config、Initialize、Value、ValueChanged、ValueEvent、ValueKey、OnValueChange、EventNames、PreventDefaultEvents、OnEvent、ChildContent、AdditionalAttributes。

Die Komponentenreferenz stellt 6 Instanzmitglieder bereit:Element、RefreshAsync、DestroyAsync、FocusAsync、GetBehaviorMembersAsync、InvokeBehaviorAsync。 GardenerField<TValue> Vererbung InputBase<TValue>, Unterstützung EditForm、EditContext, DataAnnotations, Validierungsstatus, Eingabe, Auswahl und Textbereich.

Wertbindung, 75 Events und 7 Sync Guards

<GCard Value="@selection"
       ValueChanged="@(value => selection = value)"
       ValueEvent="selectionchange"
       ValueKey="value"
       EventNames="@events"
       PreventDefaultEvents="@guards"
       OnEvent="HandleEvent" />

@code {
  private object? selection;
  private readonly string[] events = [GardenerEvents.Selectionchange,
                                      GardenerEvents.Beforeopen];
  private readonly string[] guards = [GardenerEvents.Beforeopen];
  private Task HandleEvent(GardenerEventArgs args) => Task.CompletedTask;
}

Value/ValueChanged Native Eingaben/Änderungen verarbeiten,ValueEvent und ValueKey Umgang mit komplexen benutzerdefinierten Ereignissen. Werte werden in .NET-Strings, Boolesche Werte, Zahlen, Arrays oder Wörterbücher konvertiert; DOM, File, BigInt, Funktionen und Zirkelverweise werden sicher serialisiert. GardenerEvents.All Alle 75 Ereignisse aufdecken,GardenerEvents.Guards Offengelegt vor Approval, BeforeClose, BeforeFilePicker, BeforeOpen, BeforePromptStop, BeforePromptSubmit, BeforeTabClose. 7 Schutzereignisse, die vor asynchronen JS/.NET-Grenzen synchron blockiert werden müssen. Verhaltensmitglieder und Veranstaltungsdetailverträge sind erhältlich unter GardenerRuntimeCatalog Abfrage.

Themes, Services und Desktop Bridges

GardenerProvider Unterstützt Thema, Modus, Neutral, Typografie, Form, Dichte, Höhe, Bewegung, Plattform und ein zehnachsiges verschachteltes Thema;GardenerThemePresets.All Enthält 42 Farbthemen, mit dem standardmäßigen weißen Hintergrund Hell und den kleinen abgerundeten Ecken klein. Die 5 Umfangsdienste sind GardenerRuntime、GardenerThemeService、GardenerToastService、GardenerTauriService、GardenerElectronService. Desktop Bridge ruft nur Whitelist-Objekte auf, die explizit von der Host-Preloading-Schicht bereitgestellt werden, und öffnet nicht die globalen Funktionen von Node.

Vollständige öffentliche Typen und maschinenlesbare Verträge

Die 28 Rahmentypen sind:GardenerAccessibilityDefinition、GardenerAssets、GardenerBehavior、GardenerBehaviorDefinition、GardenerBehaviors、GardenerComponent、GardenerComponentBase、GardenerConstants、GardenerElectronService、GardenerEventArgs、GardenerEventDefinition、GardenerEvents、GardenerField<TValue>、GardenerJsModule、GardenerOptions、GardenerPart、GardenerPlatform、GardenerProvider、GardenerRuntime、GardenerServiceCollectionExtensions、GardenerThemePresets、GardenerRuntimeCatalog、GardenerTauriService、GardenerThemeService、GardenerThemeState、GardenerToastService、GardenerValueChangedEventArgs、GardenerComponentDefinition。

Blazor Public API、Komponenten-Metadaten、Vereinbarkeit、Leistung Beide haben JSON Schema geschlossen. Die lesbare Dokumentation umfasst auch API、66 Verhaltensweisen、75 Veranstaltungen、43 statische Ressourcen、Laufzeit、Zugänglichkeit und SSR und Freigabezugriffskontrolle。

1.0.0 Releasequalität

Release-Build mit 0 Warnungen, 0 Fehlern; 506 Komponenten haben alle den echten statischen SSR bestanden. Die Browser-Matrix umfasst Chromium, Firefox, WebKit, Desktop- und mobile Ansichtsfenster, Tastatur und Axe WCAG A/AA; CI schreibt Firefox vor. NuGet verwendet einen isolierten Cache, um Verbraucheranwendungen tatsächlich zu veröffentlichen und statische Web Assets-Endpunktmanifeste zu validieren. Es gibt auch einen eigenständigen .NET 11 Preview-Paketkonsumenten. Die gemessene Assembly ist 343.552 B, 43 statische Ressourcen insgesamt 7.608.327 B, CSS gzip 139.269 B, Laufzeit-gzip 25.989 B, Blazor Bridge gzip 2.054 B, nupkg etwa 1,22 MiB, unterhalb der harten Grenze von 6.000.000 B; alles unterhalb des harten Budgets und DLL/XML reproduzierbar.

cd blazor
npm run release:verify
npm run test:net11

Alle 506 Blazor-Komponenten

Die folgenden Verzeichnisse werden direkt zusammengeführt Blazor Public API und Komponenten-Metadaten, Auflistung Razor-Typen, CSS-Namen, Kategorien, Typen, Standard-Tags, Selektoren, Zustände, Varianten, Widgets, Verhaltensweisen, Plattformen und Zugänglichkeitsverträge. Es ist kein Featured Sample; alle 506 Items befinden sich im selben durchsuchbaren Verzeichnis.

Reading Blazor Component Manifest ...

Designprinzipien

Neutrale PrioritätDer Standardstil ist für Einzelpersonen, Unternehmen, Backends und Content-Stationen geeignet und gibt keine starke Markenpersönlichkeit vor.

Standard für kleine abgerundete Ecken--g-radius-md Fixed to 0.25rem; Kapseln und Filets werden nur für semantische Klarheit verwendet.

Redundanz ist besser als AbwesenheitSehr wiederverwendbare komplexe Strukturen existieren als Komponenten oder Rezepte und erfordern nicht, dass die KI jedes Mal vorübergehend kombiniert wird.

Trennung von Semantik und AussehenPrimärfarbe, Anzeigemodus, Dichte, Schriftart, Form und Plattform können unabhängig voneinander geändert werden.

Attribut logische RichtungKomponenten verwenden vorzugsweise die Inline- / Blockrichtung, um die RTL-spezifische Abdeckung zu reduzieren.

Maschine überprüfbarKomponenten, Dienstprogrammklassen, Rezepte und Laufzeitfähigkeiten haben Manifeste und Build-Checks.

Reihenfolge der CSS-Schichten

@layer gardener.reset,
       gardener.tokens,
       gardener.base,
       gardener.components,
       gardener.utilities,
       gardener.overrides;

Es wird empfohlen, den projektspezifischen Stil zu schreiben gardener.overrides, um eine Erhöhung des Selektorgewichts zu vermeiden.

Themensystem

Das Farbthema ist nur für die Hauptfarbe der Marke verantwortlich; Der Anzeigemodus ist unabhängig von anderen Themenachsen. Diese Website verwendet Light, um ein weißes Dokumenterlebnis zu gewährleisten, aber das Framework bietet auch Dark, System und High Contrast.

Themenliste wird gelesen...

Themenachse

Eigenschaften	Verfügbare Werte	Zweck
`data-g-theme`	Garten, blau, violett usw. 42 Artikel	Hauptfarbe der Marke
`data-g-mode`	hell, dunkel, System, kontrastreich	Anzeigemodus
`data-g-neutral`	kühl, warm, grau, Tinte, Sahne, Blaupause, Papier	Neutraler Hintergrund und Text
`data-g-typography`	System, korporativ, humanistisch, redaktionell, technisch, geometrisch, gerundet, klassisch, kompakt, cjk	Font Temperament
`data-g-shape`	scharf, klein, mittel, weich, rund	Formen und Filets
`data-g-density`	kompakt, standard, komfortabel, touch	Kontrolldichte
`data-g-elevation`	flach, umrandet, geschichtet, schwimmend	Grenzen und Schatten
`data-g-motion`	keine, ruhig, Standard, schnell	Animationsrhythmus
`data-g-platform`	Web, Mobile, Desktop, Tauri, Elektron	Plattform Details
`data-g-os`	Fenster, Macos, Linux	Desktop-System Aussehen

<html
  data-g-theme="cobalt"
  data-g-mode="light"
  data-g-neutral="warm"
  data-g-typography="corporate"
  data-g-shape="small"
  data-g-density="compact"
  data-g-elevation="bordered"
  data-g-motion="calm"
  data-g-platform="electron"
  data-g-os="windows">

Design Token

Die Komponente verbraucht nur semantische Token. Markenanpassung sollte das Token überschreiben, anstatt die Komponentenregeln zu kopieren.

Familie	Beispiel	Beschreibung
Farbe	`--g-color-primary`、`--g-color-primary-text`	Füllfarbe getrennt von lesbarer Vordergrundfarbe
Oberfläche	`--g-color-canvas`、`--g-color-surface-raised`	Leinwand, normale, erhabene, leicht eingesunkene Oberfläche
Text	`--g-color-text`、`--g-color-text-muted`	Text, geschwächter und unterstützender Text
Semantik	`--g-color-success`、`--g-color-danger-soft`	Erfolg, Warnung, Gefahr, Information und weicher Hintergrund
Abstand	`--g-space-0`…`--g-space-96`	Enthält halbe Ordnung, dezimale Ordnung und Pixelwerte
Font	`--g-font-size-sm`、`--g-line-height-normal`	Schriftgröße, Schriftstärke, Zeilenhöhe, Schriftfamilie
Form	`--g-radius-sm`…`--g-radius-full`	Standardmäßig kleine abgerundete Ecken, können explizit erweitert werden
Animation	`--g-duration-fast`、`--g-ease-standard`	Dauer und Lockerung
Hierarchie	`--g-z-dropdown`、`--g-z-dialog`	Stabile Stapelsequenz von Floating Layer, Dialog, Toast, etc.
Layout	`--g-header-height`、`--g-sidebar-width`	Größe der Anwendungs-Shell

Teilweise Abdeckung

.billing-area {
  --g-color-primary: #0f6f95;
  --g-color-primary-text: #0b5877;
  --g-radius-md: 0.25rem;
  --g-control-height-md: 2.25rem;
}

CSS full API

Dieser Index wird bereitgestellt von css/src/**/*.css Automatisch generiert, deckt jedes Quellcodemodul, jede semantische Klasse, jeden primitiven Selektor, jedes Token, jeden benutzerdefinierten Status-Hook, jedes Datenattribut und jeden Keyframe ab; Verwenden Sie für Werkzeugklassen die entsprechende vollständige Liste im nächsten Abschnitt. Es handelt sich um ein Verzeichnis auf Quellebene und nicht um ein vorgestelltes Beispiel.

—Quellcodemodul

—Alle Kategorien

—Semantischer Selektor

—Token

Override Regeln:jeweils g-* Die Klasse muss in der CSS-Voll-API- oder Tool-Klassenliste erscheinen; Jede Komponente, Laufzeit und jedes Seitenrezept muss auch in ihren jeweiligen Verzeichnissen erscheinen. Bei der Build-Verifizierung wird SHA-256 dateiweise berechnet, um zu vermeiden, dass Verzeichnisse hinter den Quellcode zurückfallen.

Alle CSS-Schnittstellen durchsuchen

CSS-Index lesen...

Alle Quellcodemodule

Erweitern Sie ein beliebiges Modul, um die Klassen, Token, Zustände, Datenattribute und Keyframes anzuzeigen, die von der Datei angezeigt werden. Das Modul generative tools verbindet sich mit einem separaten 11.498-Artikelinventar.

Lesemodulliste...

Werkzeuge

Wird von allen Werkzeugen verwendet g- Präfix. Das reaktive Präfix steht vor dem Funktionsnamen, z.B. g-md-grid-cols-2. Dezimalpunkte werden beispielsweise mit einem Unterstrich geschrieben g-p-2_5; Verwenden Sie negative Werte g-neg-mt-4。

Haltepunkt	Mindestbreite	Typisches Terminal
`g-sm-*`	480px	Großes Mobiltelefon
`g-md-*`	768px	Tablette
`g-lg-*`	1024px	Kleiner Desktop
`g-xl-*`	1280px	Standard Desktop
`g-2xl-*`	1536px	Breitbild-Arbeitsbank

Vorrangige Verwendung start/end、x/y und andere logische Richtungstools. Nur verwenden, wenn die körperliche Orientierung ausdrücklich erforderlich ist left/right。

Durchsuchen Sie die vollständige Toolliste

Geben Sie einen Klassennamen, einen vollständigen Selektor, eine CSS-Eigenschaft, einen Wert oder eine Antwortbedingung ein. Um zu vermeiden, dass 11.498 Elemente auf einmal gerendert werden, geben Sie mindestens zwei Zeichen ein, bevor die Anzeige in Stapeln von jeweils 100 Elementen erfolgt. eintreten g- Sie können den gesamten Inhalt Stapel für Stapel durchsuchen.Raw JSON ManifestEnthält jeden Artikel, der zum direkten Lesen durch KI und zum Erstellen von Tools geeignet ist.

Lesewerkzeugliste...

Layoutsystem

Das Basislayout ist für Container und Gitter zuständig, und die Anwendungsshell ist für feste Bereiche, das Scrollen von Grenzen und das Anbringen des Endes verantwortlich. Beginnen Sie bei komplexen Seiten nicht direkt mit einer großen Anzahl von Positionierungswerkzeugklassen.

.g-ContainerStandardseitenbreite und adaptive linke und rechte Ränder.

.g-Stack / .g-ClusterHorizontale Kombination von vertikalem Fluss und Wortumwicklung.

.g-grid-autoAdaptives Kartenraster ohne Haltepunkte.

.g-app-shellBackend Basic Shell für Sidebar, Page Header und Hauptinhalt.

.g-mobile-shellOben und unten Navigation und sichere Bereiche.

.g-desktop-shellTitelleiste, Aktivitätsleiste, Werkbank, Inspektor und Statusleiste.

Dashboard Beispiel

<main class="g-app-shell">
  <aside class="g-app-shell-sidebar">...</aside>
  <header class="g-app-shell-header">...</header>
  <section class="g-app-shell-main">
    <div class="g-dashboard-grid">
      <article class="g-kpi g-span-3">...</article>
    </div>
  </section>
</main>

24 / 12 Complete Grid System

Gardener verwendet 24 Raster als wichtigstes kompatibles Protokoll für Enterprise-Backend, CMS und feine Formulare .g-grid-12 Bietet traditionelles 12-Raster. Beide verwenden natives CSS-Raster, logische Richtung und einheitliche Haltepunkte und verlassen sich nicht auf negative Ränder.

24 Spalten12 kompatibel5 GrenzpunkteRTLContainer QueryDruck

Auswahl der Schnittstellen:.g-row und .g-grid-24 Äquivalent, geeignet für 24-Raster; muss für ältere 12-Gitter verwendet werden .g-grid-12 als übergeordnetes Element. Die Spaltenbreitenklasse bleibt gleich, die KI muss lediglich zunächst das übergeordnete System ermitteln.

Echtzeit-24-Netz

6 / 24

12 / 24

6 / 24

Versatz 4 + Spanne 16

<div class="g-grid-24 g-gutter-4">
  <aside class="g-col-24 g-md-col-6">...</aside>
  <main class="g-col-24 g-md-col-12">...</main>
  <aside class="g-col-24 g-md-col-6">...</aside>
</div>

12 netzkompatibel

3 / 12

6 / 12

3 / 12

<div class="g-grid-12 g-gutter-3">
  <div class="g-col-12 g-md-col-3">...</div>
  <div class="g-col-12 g-md-col-6">...</div>
  <div class="g-col-12 g-md-col-3">...</div>
</div>

Vollständige Klassennamenmatrix

Fähigkeit	Klassenbezeichnung	Umfang oder Beschreibung
Wurzelbehälter	`g-row`、`g-grid-24`、`g-grid-12`	24, 24, 12 Spalten
Spaltenbreite	`g-col-1`…`g-col-24`	Spanne 1–24; 12 Raster verwendet 1–12
Auto und Füllen	`g-col-auto`、`g-col-fill`、`g-col-fill-from-1`…`g-col-fill-from-24`	Automatische Platzierung einer einzelnen Schiene, vollständige Zeilenfüllung, deterministisches Füllen der verbleibenden Spalten anhand bestimmter Rasterlinien
Standard vs. gesamte Zeile	`g-col`、`g-col-full`	Beide belegen explizit die gesamte Linie
Offset	`g-offset-0`…`g-offset-23`	Offset von logischer Inline-Start-Richtung
Explizite Gitterlinien	`g-col-start-1`…`g-col-start-25` `g-col-end-1`…`g-col-end-25`	Komplexes nicht zusammenhängendes Layout
Reaktionsfähigkeit	`g-sm-col-`、`g-md-col-`、`g-lg-col-`、`g-xl-col-`、`g-2xl-col-*`	Spalte, Versatz, Start- und Endzeilen, Anzeigestatus und Bundsteg reagieren alle
Reihenfolge	`g-order-0`…`g-order-24`	Auch in der reaktionsschnellen Fünfgangversion verfügbar
Abstand	`g-gutter-`、`g-gutter-x-`、`g-gutter-y-*`	0、1、2、3、4、5、6、8、10、12
Zeilenausrichtung	`g-row-top`、`g-row-middle`、`g-row-bottom`、`g-row-stretch`	Steuern Sie die Querachsenausrichtung von Spalten
Ausrichtung einzelner Spalten	`g-col-self-start`、`g-col-self-center`、`g-col-self-end`、`g-col-self-stretch`	Überschreiben einer einzelnen Spalte
Automatisches Layout	`g-row-dense`、`g-row-no-gutter`	Dichte Polsterung und Nullabstand
Anzeigestatus	`g-col-hidden`、`g-md-col-visible`	Jeder Haltepunkt ist verborgen / sichtbar
Teilnetz	`g-subgrid`、`g-subgrid-cols`、`g-subgrid-rows`	Übergeordnete Rasterspur übernehmen, wenn der Browser dies unterstützt
Druck	`g-print-col-1`…`g-print-col-24`	Es gibt auch Druckversatz, Anfang, Ende, versteckt, sichtbar

Haltepunkt

Präfix	Mindestbreite des Sichtfensters	Beispiel
`sm`	480px	`g-sm-col-12`
`md`	768px	`g-md-offset-4`
`lg`	1024px	`g-lg-col-start-7`
`xl`	1280px	`g-xl-gutter-6`
`2xl`	1536px	`g-2xl-col-8`

Container Query

Wird in äußeren Schichten verwendet, wenn die Komponentenbreite durch das Bedienfeld und nicht durch das Ansichtsfenster bestimmt wird .g-grid-container, die Spalte verwendet g-cq-sm-col-*、g-cq-md-col-*、g-cq-lg-col-*。

<section class="g-grid-container">
  <div class="g-grid-24">
    <aside class="g-col-24 g-cq-md-col-8">...</aside>
    <main class="g-col-24 g-cq-md-col-16">...</main>
  </div>
</section>

RTL, Nesting und Printing

Versatz und Gitterlinien folgen der logischen CSS-Inline-Richtung; in dir="rtl" beginnt automatisch von rechts, es sind keine weiteren Klassen erforderlich.
Jede Spalte kann erneut platziert werden g-row、g-grid-24 oder g-grid-12, wodurch ein verschachteltes Raster entsteht.
Verwendung auf der Druckseite g-print-col-* Explizite Neuanordnung;g-print-col-hidden Spalten ausblenden, die nicht gedruckt werden sollen.

KapazitätslisteDokumentiert die Systemnummer, Spaltenbreite, Offset, Haltepunkte, Container-Haltepunkte, Abstände und Testmatrix des Rasters;Unabhängige Raster-BeispielseiteFür echte Verifizierung rund um die Uhr, RTL, Containerabfrage und Druckstruktur. Build-Checks überprüfen alle Klassen einzeln, anstatt nur einige Beispiele zu überprüfen.

Traditionelles Flächenlayoutsystem

Der zweite Funktionstyp verfestigt langfristig wiederverwendete Seitengerüste in 16 semantischen Layouts. Bereiche sollten in einer konsistenten logischen Richtung benannt werden; AI sollte zuerst das nächstgelegene Root-Layout auswählen, dann die Komponenten ausfüllen und das Raster, die Positionierung und das Faltungs-CSS auf der mobilen Seite nicht neu organisieren.

16 MusterAnsichtsfenster + ContainerRTLSafe AreaTauri/ElectronDruck

Benennungsprotokoll:top / start / main / end / bottom sind fünf Gemeinschaftsbereiche;start und end ändert sich mit der Schreibrichtung. Spezielle Leinwände, die eine feste visuelle Links-/Rechtsdarstellung erfordern, sollten die Richtung selbst klarstellen, ohne die gemeinsame logische Semantik zu zerstören.

Echtzeit Fünf-Regionen-Layout

Top

Hauptarbeitsbereich

16 Arten von fertigen Skeletten

Layout	Wurzelklasse	Direkte Teile/anwendbare Szenarien
Ober / Haupt / Unter	`g-region-stack`	`g-region-top`、`g-region-main`、`g-region-bottom`;Allgemeine Website und Dokumentationsseiten
Anfang/Main/Ende	`g-region-inline`	`g-region-start`、`g-region-main`、`g-region-end`;Drei Spalten mit Inhalt
Fünf Gebiete	`g-region-frame`	oben / Anfang / Haupt / Ende / unten; Portal und komplexer Hintergrund
Heiliger Gral	`g-holy-grail`	Semantisches Aliasing mit fünf Regionen; traditionelle responsive Webseiten
Single Sidebar Application Shell	`g-sidebar-shell`	top / start / main; Dashboard und CMS
Doppelseitenleiste	`g-double-sidebar-layout`	Start / Main / Ende; Editor, Verwaltungskonsole
Master-Slave Ansicht	`g-master-detail`	`g-master`、`g-detail`;Email, Kontakt, Bestellung
Liste/Details/Inspektor	`g-list-detail-inspector`	`g-region-list`、`g-detail`、`g-region-inspector`;Super CMS
Fußboden sinkt	`g-sticky-footer-layout`	oben/Haupt/unten; kurze Inhaltsseite
Fixed Header	`g-fixed-header-layout`	`g-fixed-header-bar`、`g-fixed-header-main`
Seitenleiste korrigiert	`g-fixed-sidebar-layout`	`g-fixed-sidebar`、`g-fixed-sidebar-main`;Für mobile Endgeräte `is-open`
Hilfsstab klebrig	`g-sticky-aside-layout`	Inhalt + `g-sticky-aside`; Inhaltsverzeichnis des Artikels, Zusammenfassung der Abrechnung
Dockwerkbank	`g-dock-layout`	`g-dock-top/start/main/end/bottom`; Tauri/Electron, IDE
Einstellbare Spalten	`g-split-view`	`g-split-view-primary/secondary`;Koordinate `data-g-split-pane`
Vollbild-Arbeitsbereich	`g-fullscreen-workspace`	`g-workspace-toolbar/main/status`;Leinwand, Medien, KI-Artefakt
Mobile Sicherheitszone	`g-mobile-layout`	`g-mobile-layout-header/content/bottom`;PWA und mobile WebView

Fünf Bereiche und Master/Detail

<main class="g-region-frame">
  <header class="g-region-top">...</header>
  <nav class="g-region-start">...</nav>
  <section class="g-region-main">...</section>
  <aside class="g-region-end">...</aside>
  <footer class="g-region-bottom">...</footer>
</main>

<section class="g-master-detail">
  <nav class="g-master">...</nav>
  <article class="g-detail">...</article>
</section>

Dock und einstellbare Säulen

<main class="g-dock-layout">
  <header class="g-dock-top">Toolbar</header>
  <aside class="g-dock-start">Explorer</aside>
  <section class="g-dock-main">Workspace</section>
  <aside class="g-dock-end">Inspector</aside>
  <footer class="g-dock-bottom">Status</footer>
</main>

<div class="g-split-view" data-g-split-pane data-g-min="160">
  <section class="g-split-panel g-split-view-primary">...</section>
  <div class="g-split-handle" role="separator"
       aria-label="Passen Sie die Breite beider Seitenwände an"></div>
  <section class="g-split-panel g-split-view-secondary">...</section>
</div>

Antworten, Container, Zustände und Variablen

Wenn das Ansichtsfenster kleiner als 768 Pixel ist, werden mehrspaltige, Master-/Detail- und Inspektor-Layouts vertikal in semantischer Reihenfolge angeordnet; Das Dock behält standardmäßig nur den Hauptbereich und ist verfügbar is-start-open oder is-end-open Mobiles Panel wechseln.
Verwenden Sie beim Einbetten einer Karte, eines Modals oder einer zoombaren Workbench g-region-container Verpackung; Container, die kleiner als 768 Pixel sind, werden unabhängig von der Breite des Browserfensters unabhängig voneinander ausgeblendet.
is-start-collapsed、is-end-collapsed Kontrolldock;g-region-panel is-collapsed Allgemeines Bereichsfenster ausblenden;is-contained Feste, Dock- und Vollbild-Layouts können sicher in die Vorschau oder den Designer eingebettet werden.
Abmessungen übergeben --g-region-min-block-size、--g-region-start-size、--g-region-end-size、--g-master-size、--g-list-size、--g-inspector-size、--g-dock-*-size Anpassung.
„Fest“, „Sticky“, „Vollbild“ und „Spalten“ werden beim Drucken auf den normalen Dokumentenfluss reduziert; Trennergriffe werden automatisch ausgeblendet.

Maschinenlesbare Funktionsliste16 Layouts, Funktionen und Testmatrizen aufgelistet;Beispielseite für das Layout unabhängiger BereicheDeckt RTL, Containerabfrage, festen Bereich, Dock, geteilte Ansicht, mobilen sicheren Bereich und Vollbild-Arbeitsbereich ab. Vorhanden g-app-shell、g-mobile-shell、g-desktop-shell Bleibt kompatibel und kann weiterhin als Business-Shell verwendet werden.

Klassische Layoutprimitiven

Klasse-3-Funktionen stellen 22 intrinsisch ansprechende Layout-Grundelemente bereit. Sie funktionieren je nach Inhalt und verfügbarem Platz und erfordern normalerweise keine Seitenhaltepunkte; Die KI sollte der Auswahl von Grundelementen entsprechend der Layoutabsicht Priorität einräumen und dann Größe und Abstand durch verfügbar gemachte Variablen anpassen.

22 GrundelementeIntrinsisch reagierendContainer QueryRTLReduzierte BewegungDruck

Unterschiede zu Werkzeugklassen:Utility-Klassen beschreiben einzelne CSS-Eigenschaften und Grundelemente beschreiben stabile räumliche Beziehungen. Zum Beispiel g-sidebar-layout Wechselt automatisch von der Doppelspalte zum Hochformat basierend auf der Mindestbreite des Inhalts, ohne dass die KI erraten muss, welcher Haltepunkt des Ansichtsfensters verwendet werden soll.

Echtzeit-Bento und Streaming-Primitiven

Featured 8 × 2

Höhe 4 × 2

Tile

breit

Automatische Trennung und sichere Leitungsumwicklung abstoßen

ClusterWrap

Vollständige Matrix von 22 Primitiven

Primitiv	Wurzelklassen und -komponenten	Zweck und Schlüsselvariablen
Stapel	`g-stack`、`is-split`、`g-stack-split`	Längsrhythmus;`--g-stack-gap`
Cluster	`g-cluster`	Labels, Buttons, Metadaten Wrap; gap / align / justify
Zentrum	`g-center`、`is-intrinsic`	Lesebreite, Ebene oder Inhaltszentrum; max / Gutter
Seitenleiste	`g-sidebar-layout`、`g-sidebar-pattern`、`is-end`	Seitenleiste nach Inhaltsbreite eingebrochen; Größe / Inhalt-min / Lücke
Switcher	`g-switcher`	Schneiden Sie von horizontal nach vertikal, wenn zu wenig Platz vorhanden ist; Schwelle / Lücke
Deckung	`g-cover`、`g-cover-center`	Inhalt in der Mitte des Viewports oder Containers; min / Padding
Reel	`g-reel`	Horizontales Scrollen von Karten und Medienspuren; Artikelgröße / Lücke
Rahmen	`g-frame`	Festes Verhältnis und beschnittene Medien; Verhältnis/Fit/Position
Media Object	`g-media-object` + Medien / Körper / Aktion	Avatar, Text, Terminalbedienung;`is-end`、`is-stacked`
Raster automatisch anpassen	`g-grid-auto-fit`、`g-grid-auto`	Falte die leere Spur, wenn der Inhalt klein ist; min / gap
Grid Auto Füllung	`g-grid-auto-fill`	Halten Sie die leere Schienenposition, geeignet für die Befestigung des Kartenschlitzes; min / Lücke
Blutungen	`g-bleed`、`is-full`	Bilder und Zitate überschreiten die Textbreite; Größe / max
Abstoßung	`g-repel`	Titel und Aktion sind an beiden Enden getrennt und können gewickelt werden; gap / align
Betrüger	`g-imposter-container` + `g-imposter`	Mittelschicht unbekannter Größe;`is-fixed`, Marge/max
Overlay	`g-overlay-layout` + Basis/Schicht	Media Overlay Tools, Anmerkungen, Status; Alignieren / Begründen / Margin
Mauerwerk	`g-masonry`	Spalten mit variablem Höheninhalt; Spalten/min/Lücke, Einzelspalten in engen Behältern
Bento	`g-bento` + breit / voll / groß / vorgestellt	Marketing, Dashboard uneinheitliche Karten; row-min / gap / span
Aspektverhältnis	`g-aspect-ratio` + Quadrat / Porträt / Landschaft / Video / Kino	Universal Proportional Box ohne Zwangsschneiden
Scroll Area	`g-scroll-area`、`is-block`、`is-inline`	Unabhängiger Schriftrollenbesitzer; max/überscrollen
Scroll Snap	`g-scroll-snap` + `g-scroll-snap-item`	Horizontal oder `is-block` Snap-Liste; Größe / Strenge / Ausrichtung
Safe Area	`g-safe-area`、`is-padded`	Notch, abgerundeter Bildschirm und vierseitiger Home Indicator Schutz
Sticky Region	`g-sticky-region`、`is-bottom`、`is-surface`	Scrollenbereich logische Ober-/Unterkantenadsorption; Offset/z

Häufig verwendete Kombinationen

<section class="g-stack" style="--g-stack-gap:var(--g-space-6)">
  <header class="g-repel">
    <h2>Page title</h2>
    <div class="g-cluster">...actions...</div>
  </header>
  <div class="g-sidebar-layout">
    <aside>Filters</aside>
    <main class="g-grid-auto-fit">...cards...</main>
  </div>
</section>

Media Object, Overlay und Scrolling

<article class="g-media-object">
  <img class="g-media-object-media" alt="" src="avatar.png">
  <div class="g-media-object-body">...</div>
  <button class="g-media-object-action">Open</button>
</article>

<figure class="g-overlay-layout">
  <img class="g-overlay-base" alt="...">
  <figcaption class="g-overlay-layer">Caption</figcaption>
</figure>

<div class="g-scroll-area" tabindex="0" aria-label="Activity">
  <header class="g-sticky-region is-surface">Activity</header>
  ...long content...
</div>

Reaktions- und Umweltregeln

Sidebar, Switcher, Auto Fit/Fill selbst reagieren je nach verfügbarem Platz, unabhängig von der Gerätebreite.
g-layout-container Komponentencontainer erstellen; Media Object, Masonry und Bento kollabieren unabhängig voneinander, wenn sie kleiner als 640px sind. Der Viewport bietet auch einen 640px-Rand.
Alle horizontalen Semantiken verwenden inline/start/end; Media Object, Bleed, Imposter, Overlay, Reel und Scroll Snap unterstützen RTL.
Scrollbare Bereiche sollten auf der Tastatur fokussierbar sein und einen zugänglichen Namen liefern; Reduced Motion unterdrückt das reibungslose Scrollen von Primitiven.
Reel, Scroll Area, Scroll Snap, Masonry, Imposter, Overlay und Sticky Region werden beim Drucken automatisch abgeflacht, um zu vermeiden, dass Inhalte beschnitten werden.

KapazitätslisteRegistrieren Sie alle 22 Primitiven, Aliase, Umgebungseigenschaften und Testmatrizen;Standalone primitive BeispielseiteDeckt intrinsische Antworten, RTL, Containerabfragen, Bento, Masonry, Scroll-Snapping, sichere Bereiche und Druckstrukturen ab. Schon g-grid-auto und g-sidebar-layout Schnittstellen bleiben kompatibel.

Öffentliche Komponenten auf Seitenebene

Fähigkeiten der Kategorie 4 bieten 23 stark wiederverwendbare Seitenstrukturen und -zustände. Sie sitzen zwischen dem Layout-Skelett und den Geschäftskomponenten und vereinheitlichen Titel, Aktionen, Kontext, Filter, Batch-Auswahlen, Scroll-Aktionen und Ausnahmeergebnisse, so dass AI nicht gemeinsame Bereiche für jede Seite neu zusammensetzen muss.

23 MusterContainer QuerySticky + FixedSafe AreaRTLDruck

Statusanforderungen:Die Seite kann nicht nur den normalen Datenzustand implementieren. Zumindest Laden, Leeren und Fehler sollten klar sein; für das Routing und vollständige Anwendungen sollten auch 403, 404, 500, Offline und Wartung vorbereitet werden. Gardener bietet die gleichen Inhalte, Visuals, Details, Aktionen und Hilfe-Widgets für diese Zustände.

Echtzeit-Seitenkopf und öffentliche Spalte

3 ausgewählte Artikel

23 vollständige Prüfphasen

Modus	Wurzelklasse	Teile, Status und Verwendung
Page Header	`g-page-header`	Haupt / Augenbraue / Titel / Beschreibung / Meta / Aktionen; kompakt, zentriert, klebrig
Abschnittsüberschrift	`g-section-header`	main/title/description/actions; default, borderless
Unterüberschrift	`g-subheader`	Titel / Aktionen; sekundäre Kontextleiste innerhalb der Seite
Symbolleiste	`g-toolbar`	Start / Mitte / Ende / Titel / Separator; kompakt, klebrig, scrollbar
Aktionsleiste	`g-action-bar`	`g-action-bar-main`; Formular- und Seitenhinterlegungen
Statusleiste	`g-status-bar`	Abschnitt/Text/ `is-end`;Editor- und Desktop-Status
Kommandoleiste	`g-command-bar`	group/item/shortcut; horizontal commands and shortcut keys
Kontext Bar	`g-context-bar`	Inhalt / Aktionen; Informationen, Erfolg, Warnung, Gefahr
Filterbar	`g-filter-bar`	Haupt-/Aktionen; klebrige Filterfläche
Bulk Action Bar	`g-bulk-action-bar`	zählen / Aktionen; aktiv, leer, versteckt
Fußleiste	`g-footer-bar`	Footer Aktionen, Logging Statistiken und Paging
Floating Action Bar	`g-floating-action-bar`	Mitte, Ende, enthalten; Sicherheitszonenanpassung
Zurück nach oben	`g-back-to-top`	`data-g-scroll-top` automatisch anzeigen, scrollen und den Fokus wiederherstellen
Teiler mit Text	`g-divider`	`g-divider-text`; Mitte, Anfang, Ende, vertikal
Sticky Aktionen	`g-sticky-actions`	`g-sticky-actions-main`;Scroll form bottom action
Seitenladung	`g-page-loading`	Inhalt / Titel / Beschreibung; enthalten, vollständig, Overlay
Seite leer	`g-page-empty`	Leere Liste, erstmalige Verwendung und keine Suchergebnisse
Seitenfehler	`g-page-error`	Anfrage fehlgeschlagen, Wiederholung, optionale technische Details
403	`g-page-forbidden`	Unzureichende Berechtigungen, Beantragung von Berechtigungen und Rückkehr zum Eingang
404	`g-page-not-found`	Routingfehler, Suche und Homepageeintrag
500	`g-page-server-error`	Serverfehler, Anfragenummern und Retries
Offline	`g-page-offline`	Offline-Status, lokale Datensicherheit und Reconnection
Instandhaltung	`g-page-maintenance`	Wartungsfenster, geschätzte Wiederherstellungszeit und Statusseite

Page Header und Toolbar

<header class="g-page-header">
  <div class="g-page-header-main">
    <div class="g-page-header-eyebrow">Workspace</div>
    <h1 class="g-page-header-title">Content</h1>
    <p class="g-page-header-description">...</p>
  </div>
  <div class="g-page-header-meta">...</div>
  <div class="g-page-header-actions">...buttons...</div>
</header>

<div class="g-toolbar" role="toolbar" aria-label="Seitentools">
  <div class="g-toolbar-start">...</div>
  <div class="g-toolbar-center">...</div>
  <div class="g-toolbar-end">...</div>
</div>

Vereinheitlichen der Seitenstatusstruktur

<main class="g-page-not-found">
  <div class="g-page-state-content">
    <div class="g-page-state-code">404</div>
    <h1 class="g-page-state-title">Seite existiert nicht</h1>
    <p class="g-page-state-description">Der Link ist möglicherweise abgelaufen.</p>
    <div class="g-page-state-actions">
      <a class="g-btn g-btn-primary" href="/">Zurück zur Homepage</a>
    </div>
  </div>
</main>

Antwort, Laufzeit und Druck

Im Ansichtsfenster bzw g-page-component-container Wenn die Größe weniger als 640 Pixel beträgt, wird der Bedienbereich des Seitenkopfes in die nächste Zeile verschoben, die Mitte der Symbolleiste belegt eine exklusive Zeile und der Bedienbereich der Kontextleiste wird vollständig umbrochen.
Alle Start-, End- und Aktionsausrichtungen verwenden die logische Richtung; Floating Action Bar, Zurück nach oben liest auch den sicheren Bereich des Geräts.
Zurück zum Anfang Vorhandenes verwenden data-g-scroll-top Zur Laufzeit basiert die Anzeige auf der Scroll-Position und kehrt nach dem Klicken reibungslos nach oben zurück; Die Reduced Motion-Umgebung verwendet automatisch sofortiges Scrollen.
Die Interaktionsleiste, der Filter, die Lademaske und der Floating-Button werden beim Drucken ausgeblendet; die Kopfzeile und die Ergebnisseite werden abgeflacht und die Fehlerbeschreibung und die Anforderungsnummer werden weiterhin beibehalten.
Visual, Code, Titel, Beschreibung, Details, Aktionen und Hilfekomponenten des Seitenstatus können bei Bedarf weggelassen werden, aber der Titel und der wiederherstellbare Eintrag sollten nicht gleichzeitig fehlen.

KapazitätslisteRegistrieren Sie 23 Seitenmodi, Laufzeit und Testmatrizen;Standalone Page Component BeispielDeckt alle Header, gemeinsame Felder, Laden, Leeren, Fehler, 403, 404, 500, Offline, Wartung, Containerabfrage und Zurück nach oben ab.

Tipp- und Hilfesystem

Fähigkeiten der Kategorie 5 bieten 28 Modi für Aufforderung, Erklärung, Anleitung und fortlaufende Unterstützung. Das System umfasst auch Low-Intrusion-Inline-Hilfe, Floating-Layer, die Interaktion erfordern, komplexe Produktführung, Help Center, Debugging-Pfade und Content-Feedback, um zu verhindern, dass KI nur vorübergehend einen Tooltip zusammenstellt.

28 Muster3 LaufzeitenKollisionsbewusstseinTastaturRTLDruck

Auswahlsequenz:Verwenden Sie Hilfetext, Inline-Hinweis oder Tipp für ergänzende Inhalte, die den Inhalt nicht blockieren; Verwenden Sie Tooltip, wenn Steuerelemente gebunden sein müssen; Verwenden Sie Hilfe-Popover, wenn Sie Links und Operationen einbeziehen; Verwenden Sie Tour für den stufenübergreifenden Unterricht. Verstecken Sie keine wichtigen Fehler oder müssen Sie rechtliche Informationen in einer schwimmenden Schicht lesen.

Echtzeit-Hilfepaket

Alle Gerätebreiten können vor dem Speichern per Vorschau überprüft werden.

War diese Beschreibung hilfreich?

28 vollständige Prüfphasen

Modus	Wurzelklasse	Zweck und Schlüsselkomponenten
Tipp	`g-tip`	Standard, Informationen, Erfolg, Warnung, Gefahr; kompakte Fähigkeiten
Inline Hint	`g-inline-hint`	Kurze Erklärung neben Text oder Steuerelementen
Hilfe Text	`g-help-text`	Anhaltende Beschreibung unten; Erfolg, Warnung, Gefahr Semantik
Helfen Sie Trigger	`g-help-trigger`	kreisförmiger Fragezeicheneingang; Schwebe, Fokus sichtbar
Tooltip	`g-tooltip`	`data-g-tooltip`;Hover, Fokus, Flucht und Arie-Beschreibung
Rich Tooltip	`g-tooltip-rich`	Titel/Beschreibung; immer noch nicht interaktiv
Helfen Popover	`g-help-popover`	header/title/body/actions; click, external close, Escape
Definition	`g-definition`	Terminologie, Abkürzungen und Branchenkonzept Erklärungsportal
Callout	`g-callout`	icon/title/content; fünf semantische Farben
Anmerkung	`g-note`	Dokumentationskommentare, Kompatibilitätshinweise und Marginalien
Do / Don't	`g-guidance-pair`	do/dont/label; side-by-side Spezifikationsbeispiel
Key Hint	`g-key-hint`	Schlüssel in einem einzigen Schlüssel oder einer Schlüsselkombination
Shortcut List	`g-shortcut-list`	item / keys; Vergleich von Befehlen und Tastenkombinationen
Hilfekarte	`g-help-card`	Icon / Titel / Beschreibung / Aktionen
Help Panel	`g-help-panel`	Header / Body / Footer; Dashboard und Desktop Inspector
Help Center	`g-help-center`	Kopfzeile/Titel/Beschreibung/Suche
Helfen Themen	`g-help-topics`	Thema/Titel/Meta; reagiert automatisch auf das Themenraster
FAQ	`g-faq`	item / question / answer; reuse Accordion runtime
Kontextuelle Hilfe	`g-contextual-help`	Hilfe gebunden an die aktuelle Seite oder Form Kontext
Coach Mark	`g-coach-mark`	Titel / Beschreibung / Aktionen; Einzelpunktfunktionsunterricht
Führung	`g-tour`	Schritt / Fortschritt / Aktionen; next, prev, skip, complete, Escape
Spotlight	`g-spotlight`	Tour verfolgt automatisch den Zielort und maskiert die Seite
Hotspot	`g-hotspot`	Label; Puls Hot Spot, Reduced Motion Automatisches Stilling
Feature Hint	`g-feature-hint`	Abzeichen/Titel/Beschreibung; neue Funktion in-place prompt
Was ist neu	`g-whats-new`	Element/Marker/Titel/Beschreibung; Zusammenfassung der Versionsaktualisierung
Hilfe Checkliste	`g-help-checklist`	Artikel / Marker; anhängig, vollständig
Fehlerbehebung	`g-troubleshooting`	Schritt / Nummer / Titel / Beschreibung; Fehlerbehebung der Sequenz
Hilfe Feedback	`g-help-feedback`	Aktionen; ob der Inhalt nützlich ist und den Upgrade-Eintrag unterstützt

Tooltip und Hilfe Popover

<span data-g-tooltip data-g-placement="top-center">
  <button class="g-help-trigger" data-g-tooltip-trigger
          aria-label="Versionsstatus verstehen">?</button>
  <span class="g-tooltip" data-g-tooltip-content hidden>
    Änderungen, die nach der Veröffentlichung für Besucher sichtbar sind
  </span>
</span>

<span data-g-popover data-g-placement="bottom-end">
  <button data-g-popover-trigger>Warum ist eine Verifizierung erforderlich?</button>
  <section class="g-help-popover" data-g-popover-content hidden>
    <h3 class="g-help-popover-title">Besitz des Domainnamens</h3>
    <div class="g-help-popover-body">...</div>
  </section>
</span>

Deklarative Führung

<button data-g-tour-open="publish-tour">Starten Sie den Bootvorgang</button>
<div id="publish-tour" class="g-tour" data-g-tour hidden>
  <span class="g-tour-progress" data-g-tour-progress></span>
  <section class="g-tour-step" data-g-target="#preview">...</section>
  <section class="g-tour-step" data-g-target="#publish" hidden>...</section>
  <footer class="g-tour-actions">
    <button data-g-tour-skip>Überspringen</button>
    <button data-g-tour-prev>Vorheriger Schritt</button>
    <button data-g-tour-next>Nächster Schritt</button>
  </footer>
</div>

Laufzeit, Zugänglichkeit und Umgebungsregeln

Tooltip wird automatisch angezeigt, wenn der Mauszeiger über den Mauszeiger schwebt und der Tastaturfokus aktiviert ist role="tooltip" und aria-describedby;Inhalt darf keine anklickbaren Steuerelemente enthalten.
Popover für interaktive Inhalte, automatische Synchronisierung aria-expanded、aria-controls, unterstützt externes Klicken und Escape-Schließen.
Die schwimmende Schicht unterstützt die Ausrichtung von oben / unten / Anfang / Ende und Anfang / Mitte / Ende. Wenn nicht genügend Platz vorhanden ist, wird es automatisch umgedreht und auf den Viewport beschränkt; RTL tauscht logische Richtungen aus.
Tour behält automatisch Schritt-, Fortschritts-, Ziel-Spotlight-, Vorherige/Nächste/Skip/Vollständige und Trigger-Fokus-Wiederherstellung bei; keine Zielschritte werden zentriert angezeigt.
Mobile Guidance Pair automatisch einzelne Spalte, Hilfe-Panel auf oberen Rand geändert; Reduced Motion schaltet Hotspot-Puls und Spotlight-Übergang aus.
Drucken und Ausblenden von Tooltip-, Popover-, Tour-, Spotlight-, Hotspot- und Feedback-Aktionen, Behalten von Tipp, Callout, Notiz und Fehlerbehebungstext.

KapazitätslisteRegistrieren Sie alle 28 Modi, 8 Arten von Float-Standorten, 3 gemeinsame Laufzeiten und Testmatrizen;Standalone Hilfesystem BeispielDeckt alle Stammklassen, RTL/Mobile Responsive, Tooltip, Popover, FAQ und Two-Step Tour ab.

Form traditionelle Kombination

Die Funktionen der Kategorie 6 erhöhen die Grundsteuerung auf 37 stabile Formularstrukturen, die reguläre Webseiten, mobile Formulare, Dashboard-Einstellungsseiten, CMS-Editoren und Tauri / Electron-Inspektoren umfassen. Es gibt klare Schnittstellen für Feldbeschriftungen, Beschreibungen, Verifizierung, Unternehmensgruppierung, dynamische Ergänzungen und Löschungen sowie endgültige Einreichung.

37 Muster5 LaufzeitenContainer QueryValidierungRTLDruck

Semantische Anforderungen:Platzhalter können Label nicht ersetzen; erforderliche Fehler- und Hilfeinformationen können nicht durch Farbe allein ausgedrückt werden; zugehörige Checkbox/Radio müssen in Fieldset with Legend gesetzt werden; Fehler auf Feldebene und Validierungszusammenfassung sollten nach dem fehlgeschlagenen Einreichen bereitgestellt werden.

Echtzeit-Kombinationsbeispiel

Standortinformationen

Feldstruktur, Geschäftsauswahl und Fortschrittsstatus bleiben konsistent.

Gerettet

Standortnameerforderlich

Im Browsertitel anzeigen13 / 60

Freigabepfad

/

Freigabemethode

Release sofortWechseln Sie nach Abschluss des Preflights zur Produktionsversion.Geplante VeröffentlichungVeröffentlichen Sie nach Zeitzone der Website.

Datenvervollständigung72%

37 vollständige Prüfphasen

Modus	Wurzelklasse	Zweck und Schlüsselkomponenten
Formular	`g-form`	Einheitlicher vertikaler Rhythmus; Standard, begrenzt
Form Section	`g-form-section`	Header/Titel/Beschreibung; Long Form Partition
Feld	`g-field`	Header/Meta/required/fakultativ; Etiketten, Kontrollen, Beschreibungen
Feldsatz	`g-fieldset`	Legende/Beschreibung; semantisch verwandte Feldgruppe
Formularreihe	`g-form-row`	Wrap bei minimaler Feldbreite
Formgitter	`g-form-grid`	2/3/4 Spalten, volle Spannweite; deterministisches Formraster
Horizontalform	`g-form-horizontal`	Säule Feste Etiketten + flexible Kontrollsäule
Inline Form	`g-form-inline`	Filter, Suche und kompaktes Einreichungsportfolio
Kompaktformular	`g-form-compact`	Dashboard, Desktop-Inspektor mit hoher Dichte
Inputgruppe	`g-input-group`	`g-input-addon`;Button, Select und Input Splicing
Eingabe-Fix	`g-input-affix`	Anfang / Ende; Währung, Einheit und statisches Symbol
Suchfeld	`g-search-field`	Symbol/Aktion; Standardstruktur für Sucheingaben
Passwortfeld	`g-password-field`	`data-g-password-toggle`;Show / Hide und Cursor halten
Freifeld	`g-clearable-field`	`data-g-clear-input`;Clear, Input/Change Events und Focus Restauration
Zeichenzähler	`g-character-field`	Anzahl; Standard, Near-Limit, Over-Limit
Validierungsstaat	`g-validation-state`	Nachricht; Erfolg, Warnung, Gefahr, Fehler
Validierungszusammenfassung	`g-validation-summary`	Titel/Liste; Link zu Feldern nach fehlgeschlagener Übermittlung
Checkbox Gruppe	`g-check-group`	gestapelt, inline; Gruppierung mehrerer Optionen
Radiogruppe	`g-radio-group`	gestapelt, inline; einzelne Option Gruppierung
Schaltreihe	`g-switch-row`	Inhalt / Titel / Beschreibung; Einstellungsseitenwechsel
Choice Cards	`g-choice-group`	Karte / Titel / Beschreibung; Paket- und Planauswahl
Name Group	`g-name-group`	Nachname / Vorname oder Vorname / Nachname Doppelfelder, die Bestellung kann entsprechend dem Inhalt angepasst werden
Adressgruppe	`g-address-group`	Linie / Stadt / Region / Post; sechsspuriges Geschäftslayout
Telefongruppe	`g-phone-group`	Ländercode, Nummer, Erweiterung
Geldgruppe	`g-money-group`	Währung + Betrag, logische Richtung abgerundete Ecken
Datumsbereich	`g-date-range-group`	Start, Separator, Enddatum
Zeitbereich	`g-time-range-group`	Start, Separator, Endzeit
Einheitenfeld	`g-unit-field`	Numerischer Wert + feste/fakultative Einheit
Bereichsfeld	`g-range-field`	Bereich + Ausgang; numerische Echtzeitanzeige
Dateifeld	`g-file-field`	Steuerelement/Name; einzelne Dateiauswahlzeile
Wiederholbares Feld	`g-repeatable-field`	Liste / Element / Inhalt / Aktionen; Vorlage Addition und Löschung, min / max, Index
Bedingtes Feld	`g-conditional-field`	controller/show-when; show, hide, inert
Form Klagen	`g-form-actions`	end, start, between, sticky; Safe Area
Autosave Status	`g-autosave-status`	Leerlauf, Speichern, Speichern, Fehler
Form Progress	`g-form-progress`	Meta/Track/Wert; Füllen Sie den Abschlussgrad aus
Form Review	`g-form-review`	row / label / value / edit; review before submission
Consent Group	`g-consent-group`	Titel / Beschreibung; Bedingungen, Autorisierung und Bestätigung

Layout und Feldkombinationen

<form class="g-form g-form-container">
  <section class="g-form-section">
    <header class="g-form-section-header">...</header>
    <div class="g-form-row">
      <div class="g-field">
        <div class="g-field-header">
          <label class="g-label" for="name">Name</label>
          <span class="g-field-required">erforderlich</span>
        </div>
        <input class="g-input" id="name" required>
        <div class="g-field-meta">...help and count...</div>
      </div>
    </div>
  </section>
  <footer class="g-form-actions is-sticky">...</footer>
</form>

Fünf Arten von deklarativer Laufzeit

<div class="g-password-field" data-g-password-toggle>
  <input class="g-input" type="password">
  <button data-g-password-button type="button">Passwort anzeigen</button>
</div>

<div class="g-character-field" data-g-character-count="200">
  <textarea class="g-textarea" maxlength="200"></textarea>
  <output class="g-character-count" data-g-character-output></output>
</div>

<div class="g-conditional-field" data-g-conditional-field
     data-g-controller="#delivery" data-g-show-when="shipping">...</div>

<div class="g-repeatable-field" data-g-repeatable-field
     data-g-min-items="1" data-g-max-items="5">
  <div class="g-repeatable-list" data-g-repeatable-list>...</div>
  <button data-g-repeatable-add type="button">Hinzugefügt</button>
  <template data-g-repeatable-template>...__INDEX__...</template>
</div>

Reaktionsfähigkeit, Zugänglichkeit und Druck

g-form-container 640px-Containerabfrage erstellen; Die Kombinationen „Formularraster“, „Horizontal“, „Name“ und „Adresse“ können innerhalb des eingebetteten CMS-Bedienfelds unabhängig voneinander reduziert werden, wobei Ansichtsfensterregeln als Fallback dienen.
Alle Kombinationen verwenden logische Richtungsattribute; Input Group, Money, Unit, Field Actions und Sticky Actions pflegen unter RTL die korrekte Kopf-an-Zahl-Beziehung.
Passwort-Toggle-Synchronisierung aria-pressed Eingabe/Änderung mit barrierefreiem Namen versenden; Eingabe löschen; Die Zeichenanzahl zählt Unicode-Zeichen.
Bedingtes Feld setzt beim Verstecken versteckt, inert und Aria-versteckt gleichzeitig; Wiederholbares Feld unterstützt min/max, Vorlagenindex, automatische Initialisierung neuer Steuerelemente und Fokuswiederherstellung nach dem Löschen.
Reduced Motion reduziert die Speicheranimation; druckt versteckte Passwörter, Löschungen, Ergänzungen, Löschungen und Eingabeaktionen, behält Feldwerte, Verifizierungs- und Überwachungsinformationen.

KapazitätslisteRegistrierte 37 Kombinationen, 5 Laufzeiten und vollständige Testmatrix;Unabhängiges FormularkombinationsbeispielDeckt alle Stammklassen, Geschäftsfeldgruppen, dynamische Ergänzungen und Löschungen, bedingte Anzeige, Containerantwort, RTL und Druck ab.

Traditionelle Navigationskombination

Funktionen der Kategorie 7 bieten 38 stabile Navigationsmodi für öffentliche Websites, Unternehmensportale, Dashboards, Super-CMS, mobiles Web und Tauri / Electron-Desktops. Globale, lokale, hierarchische, ausgewählte, In-Page-, Page Turning-, Prozess-, Mobile-, Kommando- und Identitätseinträge haben alle vorgefertigte Strukturen, und AI muss das Navigations-CSS nicht vorübergehend neu organisieren.

38 Muster9 wiederverwendbare LaufzeitenTastaturSafe AreaRTLDruck

Auswahlauftrag:Bestimmen Sie zuerst den Navigationsumfang (global, lokal, hierarchisch oder intra-page) und dann die Richtung und das Terminal; Tabs wechselt nur Ansichten im selben Kontext, Breadcrumb drückt nur Position aus und Pagination drückt nur Ergebnis-Set-Seitenwechsel aus und sollte sich nicht gegenseitig ersetzen.

Echtzeit-Kombinationsbeispiel

38 vollständige Prüfphasen

Familie	Muster und Wurzelklassen	Zweck
Global	Navbar `g-navbar`	Brand, Center Zone, Tail Operations und Movement Toggle
	Primär `g-primary-nav`	Der wichtigste First-Level-Eingang für Produkte
	Utility `g-utility-nav`	Hilfseingänge wie Hilfe, Status, Sprache und Login
	Unternavigation `g-subnav`	Sekundärnavigation innerhalb eines Produktbereichs, Kanals oder Objekts
Partial und Desktop	Seitenleiste `g-sidebar`	Dashboard und CMS persistent sidebar
	Zusammenklappbar `g-collapsible-nav`	`data-g-nav-toggle`;Kollapsbereich und mobiles Menü
	Navigation Rail `g-nav-rail`	`data-g-roving-nav`; Schmale Spur und Richtung Schlüsselfokus
	Aktivitätsleiste `g-activitybar`	Tauri/Electron Werkbank Hauptfunktionsschaltung
	Menubar `g-menubar`	Desktop File/Edit/View-Menüleiste
Hierarchie und Menü	Mega Menü `g-mega-menu`	Großer mehrspaltiger Eingang
	Dropdown `g-dropdown`	Tastenmenü; Pfeil, Zuhause, Ende, Flucht
	Kontextmenü `g-context-menu`	`data-g-context-menu`; Rechtsklick, Umschalt+F10, Ansichtsfenster-Überlaufschutz
	Baumnavigation `g-tree-nav`	`data-g-tree`; Unbegrenzte Ebenen, Erweiterung und Pfeiltasten
Standort und Auswahl	Brotkrumen `g-breadcrumb`	Aktueller Standort und Vorfahrenpfade
	Tabs `g-tabs`	`data-g-tabs`;Same Layer View Switching
	Vertikale Tabs `g-vertical-tabs`	Einstellungsseite und Inspektor-Porträtansicht
	Segmentiert `g-segmented`	Eine kleine Anzahl von sich gegenseitig ausschließenden Anzeigemethoden
	Pillennavigation `g-pill-nav`	Kategorien, Status und Inhaltskanäle
	Ankernavigation `g-anchor-nav`	Statisches Artikelverzeichnis
	Scrollspy `g-scrollspy-nav`	`data-g-scrollspy`;Synchronisieren Sie die aktuelle Position mit Scrollen
Ergebnissatz	Pagination `g-pagination`	Numerisches Paging mit bekannter Gesamtzahl von Seiten
	Cursor Pagination `g-cursor-pagination`	API-Curcors und vorheriger / nächster Batch
	Mehr laden `g-load-more-nav`	Mobile Feeds und progressives Laden
Prozess und Dokumentation	Stepper `g-stepper`	Kurzprozessfortschritt
	Wizard Navigation `g-wizard-nav`	Langer Prozessschritt Verzeichnis und Inhaltsbereich
	Zurück Navigation `g-back-nav`	Zurück zum Objekt oder zur Liste der oberen Ebene
	Previous / Next `g-prev-next-nav`	Sequenz von Artikeln, Tutorials und Details
	Skip Navigation `g-skip-nav`	Wiederholte Navigation für Tastaturbenutzer übersprungen
Mobiles Terminal	Mobile Top `g-mobile-top-nav`	Rückkehr, Titel und Tail Aktionen
	Bottom Navigation `g-bottom-nav`	3-5 mobile First-Level-Ziele und Safe Area
	Mobile Tab Bar `g-mobile-tab-bar`	Mobile Anwendung Top-Level-Label
	Schubladennavigation `g-drawer-nav`	Kleiner Bildschirm Seitengleitnavigation und Fokuswiederherstellung
Befehl und Identität	Kommandopalette `g-command-palette`	Globaler Suchbefehlseintrag
	Kommando Navigation `g-command-nav`	Inline-Befehlsliste und Tastenkombination
	Sprungnavigation `g-jump-nav`	`data-g-jump-nav`;Wählen Sie, um zu langen Seitenkapiteln zu springen
	Schnelle Navigation `g-quick-nav`	Aktuelle, Favoriten und häufig verwendete Einträge
	Lokale Navigation `g-locale-nav`	Sprache, Region und Version der Website
	Kontonavigation `g-account-nav`	Benutzer, Organisationen, Einstellungen und Exits

Fünf neue deklarative Verhaltensweisen

<button data-g-nav-toggle="mobile-menu">Menü</button>
<aside class="g-drawer-nav" id="mobile-menu" hidden>...</aside>

<nav class="g-nav-rail" data-g-roving-nav data-g-orientation="vertical">...</nav>

<div data-g-context-menu>
  <div data-g-context-target tabindex="0">...</div>
  <ul class="g-context-menu" data-g-context-menu-panel hidden>...</ul>
</div>

<nav class="g-scrollspy-nav" data-g-scrollspy
     data-g-scrollspy-root="scroll-container" data-g-scrollspy-offset="96">...</nav>

<label class="g-jump-nav" data-g-jump-nav>
  <select><option value="#section-id">Kapitel</option></select>
</label>

Zugänglichkeit, Reaktionsfähigkeit und Umweltregeln

Aktuelle Seitennutzung aria-current="page", die aktuelle Seitenposition wird verwendet aria-current="location", Verwendung von Tabs aria-selected;Verlassen Sie sich nicht nur auf die Farbe.
Roving Nav unterstützt Landschaft / Porträt, RTL, Vier-Wege-Tasten, Home und End; Kontextmenü unterstützt die rechte Maustaste, Tastaturmenütaste, Shift + F10, Flucht und Fokuswiederherstellung.
g-nav-container Build 640px Container-Responsivität; Navbar, Vertical Tabs und Wizards können unabhängig im CMS-Slot oder Desktop-Inspektor zusammengebrochen werden.
Handhabung der unteren Navigation und der mobilen Tab-Leiste safe-area-inset-bottom;Schublade verwendet logische Richtung, Eingabe von rechts in RTL.
Reduced Motion schaltet die Übergänge von Zeichner, Baum und Skip Link aus; Forced Colors liefert explizite aktuelle Artikelumrisse; Drucken verbirgt die Betriebsnavigation und behält Breadcrumb, Dokumentvorder- und Rückseiten und Prozessinformationen.

KapazitätslisteRegistriert 38 Navigationsmodi, 11 Navigationsfamilien, 9 Arten von Wiederverwendungslaufzeiten und eine vollständige Testmatrix;Unabhängiges NavigationsbeispielDeckt globale, hierarchische, Auswahl-, Menü-, Seiten-, Prozess-, Mobil- und Desktop-Navigation ab und kann Tastatur- und Rechtsklick-Interaktionen direkt testen.

Datenanzeige und Betriebskombination

Funktionen der Kategorie 8 bieten 48 stabile Datenmodi, die "Datenanzeige" und "Datenmanipulation" als den gleichen Satz von Verträgen behandeln. Gewöhnliche Website, Dashboard, Super CMS, mobile Liste, Analysebericht und Tauri / Electron High-Density-Workbench, alle können Tabellen, Datensätze, Listen, Hierarchien, Flüsse, Indikatoren, Visualisierungen, Pläne, Räume oder Betriebsmodi direkt auswählen.

48 Muster8 wiederverwendbare LaufzeitenSticky / StackedTastaturgitterRTLDruck

Auswahlauftrag:Bestimmen Sie zuerst das Datenformular und dann die Operationsintensität. Verwenden Sie Beschreibungsliste oder Schlüsselwert für eine kleine Anzahl von statischen Attributen; Verwenden Sie Liste oder Tabelle für mehrere Datensätze; Verwenden Sie Data Grid nur, wenn Zellen Tastaturbewegung und -bearbeitung erfordern; Verwenden Sie Baum oder Baumtabelle für hierarchische Daten; Trends und Vergleiche liefern zuerst lesbare Werte und fügen dann Grafiken hinzu.

Echtzeit-Kombinationsbeispiel

2,480Veröffentlicht

128Ausstehende Überprüfung

6Risikoposition

Seite	Status	Besuche
Enterprise Homepage	Veröffentlicht	28,420
Produktzentrum	Im Überblick	16,208

48 vollständige Prüfphasen

Familie	Muster und Wurzelklassen	Zweck und Schlüsselfähigkeiten
Tabelle	Tabelle `g-table`	Grundlegender semantischer Tisch; gestreift, schwebend, kompakt
	Antworttabelle `g-responsive-table`	Horizontales Scrollen, mobiles Kardieren, klebrige erste und letzte Spalte
	Datengitter `g-data-grid`	ARIA Grid, Vier-Wege-Schlüssel, Home/End
	Teilbares Gitter `g-editable-grid`	Bearbeitbare Zelle, Bearbeitung, ungültig
	Baumtisch `g-tree-table`	Indent-Level, Erweiterung der Eltern-Kind-Linie
	Gruppierte Tabelle `g-grouped-table`	Gruppe nach Region, Datum, Typ
	Erweiterbare Tabelle `g-expandable-table`	Detaillinie und `g-row-disclosure`
	Vergleichstabelle `g-comparison-table`	Horizontaler Vergleich von Paketen, Versionen und Fähigkeiten
	Pivot Table `g-pivot`	Kreuzübersicht, klebrige Zeilenüberschriften
Aufzeichnungen und Listen	Beschreibungsliste `g-description-list`	Wenige statische Tags und Werte
	Schlüsselwert `g-key-value`	Werte, langer Text und einzelne Aktionen
	Record Detail `g-record-detail`	Vollständige Angaben zu einem einzigen Geschäftsdatensatz
	Listengruppe `g-list-group`	Generische Listen und interaktive Zeilen
	Medienliste `g-media-list`	Avatar-, Thumbnail-, Körper- und Schwanzaktionen
	Dichte Liste `g-dense-list`	Desktop- und Inspektor-Listen mit hoher Dichte
	Virtuelle Liste `g-virtual-list`	Fenster-Hosting-Shell für Massenaufzeichnungen
Hierarchie und Fluss	Baum `g-tree`	Unendliche Ebenen, Erweiterung und Tastaturbewegung
	Timeline `g-timeline`	Meilenstein und Statusgeschichte
	Tätigkeitsfeed `g-activity-feed`	Benutzer- und Systemaktivitätsfluss
	Audit Log `g-audit-log`	Datumsgruppe, Operator, Aktion und Zeit
Indikatoren und Grafiken	KPI `g-kpi`	Schlüsselwert und steigende und fallende Richtung
	Stat List `g-stat-list`	Ein kompakter Satz statistischer Werte
	Metrikkarte `g-metric-card`	Werte, Labels und kleine Trendcharts
	Sparkline `g-sparkline`	Bar oder SVG Microtrend
	Fortschrittsstatistiken `g-progress-stats`	Klassifizierungsfortschritt und Proportion
	Chart `g-chart`	Chart bibliotheksunabhängige Titel, Handlungsbereiche und Aktionscontainer
	Datenlegende `g-data-legend`	Farbe, Familie und lesbare Etiketten
	Ranking `g-ranking`	Ranking, Name und Wert
	Statuszusammenfassung `g-status-summary`	Schnelle Übersicht über Statusmengen
Plan und Raum	Kalender `g-calendar`	Wöchentliches / monatliches Zeitraster und Veranstaltungen
	Agenda `g-agenda`	Lineare Fahrplanliste
	Kanban `g-kanban`	Phasenspalten und Aufgabenkarten
	Gantt `g-gantt`	Aufgaben, Zeitleiste und Fortschrittsleisten
	Organisationsdiagramm `g-org-chart`	Organisatorische Knoten und hierarchische Beziehungen
	Karte `g-map-shell`	Map Canvas, Tools und Ergebnisse Panels
	Datenmatrix `g-data-matrix`	Berechtigungen, Fähigkeiten und zweidimensionale Statusmatrix
	Heatmap `g-heatmap`	Aktivität, Beitrag und Dichte
Datenoperationen	Datensymbolleiste `g-data-toolbar`	Suchen, Filtern, Ergebniszählen und Aktionen
	Spaltenauswahl `g-column-chooser`	Spaltenanzeige und -versteck
	Gespeicherte Ansichten `g-saved-views`	Speichern von Filtern, Sortieren und Spaltenkonfigurationen
	Export Panel `g-export-panel`	Format, Bereich und Feldexport
	Datenzustand `g-data-state`	Laden, Leere, Fehler, Offline
	View Switcher `g-data-view-switcher`	Umschalten von Tabelle, Liste und Kartenansicht
	Zusammenfassung der Auswahl `g-selection-summary`	Menge und Batch-Aktion auswählen
	Tischdichte `g-table-density`	Komfort, Standard und kompakte Dichte
	Filterzusammenfassung `g-filter-summary`	Aktuelle Bedingungen und ein Klick klar
	Sort Builder `g-sort-builder`	Multiple field sort order
	Dateninspektor `g-data-inspector`	CMS und Desktop Record Checker

Sechs neue deklarative Verhaltensweisen

<div data-g-table-sort data-g-row-select data-g-row-disclosure
     data-g-column-toggle>
  <input data-g-select-all type="checkbox" aria-label="Alle auswählen">
  <button data-g-sort-key="revenue" data-g-sort-type="number">Einkommen</button>
  <input data-g-select-row type="checkbox" value="record-id">
  <button data-g-row-toggle="detail-id" aria-expanded="false">Erweitern</button>
  <label><input data-g-toggle-column="owner" checked>Verantwortliche Person</label>
</div>

<div data-g-data-filter data-g-filter-target="result-list">
  <input data-g-filter-input type="search">
  <span data-g-filter-count>0</span>
</div>
<div id="result-list">
  <article data-g-filter-item data-g-filter-text="Optionaler Indextext">...</article>
  <div data-g-filter-empty hidden>Kein Ergebnis</div>
</div>

<div data-g-data-view data-g-current-view="table">
  <button data-g-view="table">Tabelle</button>
  <button data-g-view="card">Karte</button>
  <section data-g-view-panel="table">...</section>
  <section data-g-view-panel="card" hidden>...</section>
</div>

Laufzeit, Zugänglichkeit und Umgebungsregeln

Bei der Tabellensortierung werden Tabellenüberschriften automatisch verwaltet aria-sort, unterstützt Text, Nummer, Datum und stabile Sortierung; Die Detailzeile wird beim Sortieren mit der Hauptzeile verschoben.
Die Zeilenauswahl behält die Vollauswahl, Teilauswahl undindeterminate, OK aria-selected, Auswahl des Schichtintervalls und Auswahlzusammenfassung.
Die Zeilenoffenlegung dient sowohl der Detailzeile als auch der Baumtabelle aria-controls、aria-expanded, Escape-Kollaps und rekursives Ausblenden von Unterzeilen.
Spalte Toggle behält mindestens eine Spalte bei; Data Filter unterstützt Unicode-Normalisierung, Multi-Keyword AND-Matching, Ergebniszahl und Leer; Data View unterstützt Pfeiltasten, Home und End.
g-data-container 640px-Containerfaltung erstellen; Stacked Table verwendet jedes Raster auf kleinen Bildschirmen data-g-label Generieren Sie lesbare Karten, ohne die Semantik der Desktop-Tabelle zu beeinträchtigen.
Alle Strukturen übernehmen logische Richtungsattribute und unterstützen RTL; Forced Colors bietet Auswahlumrisse; Drucken von versteckten Datenoperationen, Erweitern von Detail- und Hierarchiezeilen und Entfernen von Scroll-Clips.

KapazitätslisteRegistriert 48 Datenmodi, 11 Datenfamilien, 8 Arten von Multiplex-Laufzeiten und eine vollständige Testmatrix;Unabhängiges DatenbeispielSortieren, Auswahl, Erweiterung, Spaltensichtbarkeit, Suche, Ansichtsumschaltung, Verschieben gestapelter Tische und Tastaturraster können direkt getestet werden.

Auswahl und Chargen von Komponenten

Fähigkeiten der Kategorie 9 machen "Auswahl von Objekten, Ausdrücken von Auswahlbereichen, Batchausführung und Speichern von Auswahlbedingungen" zu einem vollständigen Protokoll. Geeignet für Super CMS, Berechtigungszuweisung, Mitgliederverwaltung, Medienbibliothek, verwandte Felder, Dashboard, mobiles Backend und Tauri/Electron Desktop Workbench.

32 Muster7 wiederverwendbare LaufzeitenMehrfachauswahlHierarchieTastaturRTL/Druck

Echtzeit-Auswahl und Batch-Operationen

Dokumentationsseite

Alle auswählen

Aktuelle Ansicht0 / 3

SchnellstartÖffentliche DokumenteVeröffentlichtAPI ReferenzEntwicklerdokumentationEntwurfFAQHelp CenterVeröffentlicht

Komplette Matrix von 32 Modi

#	Muster/Wurzelklasse	Zweck und Vertrag
01	Auswahlkontrolle `g-selection-control`	Mengen-, Gesamt- und Reichweiteninformationen auswählen
02	Alle auswählen `g-select-all-control`	Vollselektion und Teilselektion unbestimmt
03	Invert `g-invert-selection-control`	Aktuell verfügbare Artikel invertieren
04	Bereich `g-range-selection-control`	Schaltintervallauswahl
05	Batch Toolbar `g-batch-toolbar`	Safe Zone Aware Sticky Batch Aktionen
06	Auswahlumfang `g-selection-scope`	Auswahlgrenzen für Listen, Tabellen oder Bäume
07	Übertragung `g-transfer`	Ausgewählte / alle bidirektionale Bewegung und Suche
08	Dual List `g-dual-list`	Berechtigungen, Mitglieder, Tags Doppelliste
09	Tree Select `g-tree-select`	Hierarchische Multiauswahl und Pfaddarstellung
10	Cascader `g-cascader`	Cascading Auswahl für Level-by-Level-Erweiterung
11	Erwähnen Picker `g-mention-picker`	@ Person, Kanal oder Ressource
12	User Picker `g-user-picker`	Avatar, Name, Team und mehrere Selektionen
13	Organisation Picker `g-organization-picker`	Organisationsbaum, Abteilungen und Positionen
14	Resource Picker `g-resource-picker`	Dateien, Seiten, Datenquellen und Assets
15	Media Picker `g-media-picker`	Thumbnail-Raster und Medien Multiple Selektion
16	Icon Picker `g-icon-picker`	Icon Suche, Raster und ausgewählter Zustand
17	Farbwähler `g-color-picker`	Farbvorschau, Eingabe und Farbfelder
18	Datumsbereich `g-date-range-picker`	Voreingestellt, zweimonatlicher Kalender und Datumsbereich
19	Zeitbereich `g-time-range-picker`	Zeitintervall und Tagesübergang
20	Gespeicherte Filter `g-saved-filters`	Wiederverwendbare Filterbedingungen
21	Gespeicherte Ansichten `g-saved-views`	Filter, Spalte, Sortierung und Dichte Snapshots
22	Spaltenauswahl `g-column-chooser`	Säulen ausblenden und mindestens eine Säule aufbewahren
23	Sort Builder `g-sort-builder`	Dynamische Mehrfeldkollation
24	Group Builder `g-group-builder`	Dynamische Mehrfeldgruppierungsregeln
25	Entity Picker `g-entity-picker`	Unified Business Entity Selector
26	Tag Picker `g-tag-picker`	Tagsuche, Erstellung und Mehrfachauswahl
27	Relation Picker `g-relation-picker`	Aufzeichnungen, Seiten und Eltern-Kind-Beziehungen
28	Massenbestätigung `g-bulk-confirmation`	Hazardous Batch Operation Impact Confirmation
29	Massenfortschritt `g-bulk-progress`	Schritt-für-Schritt-Fortschritt, Fehler und Hintergrundoperationen
30	Picker Panel `g-picker-panel`	Desktop Floating Layer und mobiles Bodenpanel
31	Picker Zusammenfassung `g-picker-summary`	Zusammenfassung ausgewählter Werte und Auswahlergebnisse
32	Zusammenfassung der Auswahl `g-selection-summary`	Ausgewählte Menge und schnelle Aktionen

Deklarative Laufzeitschnittstelle

<section data-g-row-select>
  <input type="checkbox" data-g-select-all>
  <button data-g-invert-selection>Inverse Selektion</button>
  <input type="checkbox" data-g-select-row value="record-1">
  <div class="g-batch-toolbar" data-g-batch-toolbar hidden>...</div>
</section>

<div class="g-transfer" data-g-transfer>
  <div data-g-transfer-source>...</div>
  <button data-g-transfer-move="selected-to-target">→</button>
  <div data-g-transfer-target>...</div>
</div>

<div class="g-user-picker" data-g-picker data-g-picker-multiple>
  <div data-g-picker-trigger><input data-g-picker-input></div>
  <div class="g-picker-panel" data-g-picker-panel hidden>
    <button data-g-picker-option data-g-value="u1">Benutzer</button>
  </div>
</div>

Laufzeit- und Umweltregeln

row-select Unterstützt alle Auswahlen, umgekehrte Auswahl, klare, sichtbare Artikelauswahl, Verschiebungsintervall, Mengenausgabe, Chargenspaltenanzeige und Zeilenanzeige aria-selected。
transfer Unterstützt die Zwei-Wege-Bewegung von Selected/All, die Suche auf beiden Seiten, Menge und Leerstatus sowie Strg/Command + linke und rechte Pfeiltasten.
picker Unified single/multiple selection, Unicode search, Chip delete, hidden field output, arrow keys, Home, End, Enter, Space, Escape und click outside to close.
data-g-cascader Pfade und Werte pflegen;data-g-saved-choice Servicefilter, Ansichten, Symbole und Farbfelder;data-g-builder-list Unterstützt das Hinzufügen, Löschen und Verschieben von Sortier-/Gruppierungsregeln für Vorlagen.
g-selection-container Bietet einen Containereinbruch von 640px; das mobile Picker Panel wird automatisch zum unteren Panel und die Batch-Symbolleiste vermeidet den sicheren Bereich.
Logische Richtung, RTL, Reduzierte Bewegung, Erzwungene Farben und Druck werden in allen Modi unterstützt; Steuerelemente, die den Auswahlzustand ändern, werden beim Drucken ausgeblendet und Ergebniszusammenfassungen werden beibehalten.

KapazitätslisteRegistrieren Sie alle 32 Modi, 8 Fähigkeitsfamilien und Testmatrizen;Unabhängiges AuswahlbeispielSelect All, Inverse Selection, Range Selection, Transfer, Picker, Cascader, Saved Choice und Dynamic Builder können direkt getestet werden.

Datei- und Inhaltssystem

Die Funktionen der Kategorie 10 umfassen den gesamten Lebenszyklus von Dateien vom Eingeben in das System über das Hochladen und Organisieren bis hin zu Vorschau, Bearbeitung, Zusammenarbeit, Überarbeitung und Speicherung. Web, mobiles Backend, Super CMS, Media Center und Tauri/Electron Desktop Editor können alle direkt wiederverwendet werden, ohne dass KI komplexe Workbench-CSS vorübergehend organisieren muss.

32 Muster6 wiederverwendbare LaufzeitenUpload + EditorDesktop + MobileTastaturRTL/Druck

Upload, Bearbeitung und Überarbeitung in Echtzeit

Upload-WarteschlangeVollständig 0 · Tätigkeiten 0

PDFProdukthandbuch.pdf

Editierbare Inhalte

Ändern Sie diesen Text, um Zeichenstatistiken zu überprüfen und den Status automatisch zu speichern.

- Unterstützt nur Webseiten

+ Unterstützt Web und Desktop

Komplette Matrix von 32 Modi

#	Muster/Wurzelklasse	Zweck und Vertrag
01	File Drop `g-file-drop`	Click/Drag, File Input und Drag State
02	Dateiliste `g-file-list`	Kompakte Dateizeilen, Metainformationen und Aktionen
03	Upload Queue `g-upload-queue`	Mehrere Datei-Warteschlangen, Zählen, Pausieren und Entfernen
04	Chunk Upload `g-chunk-upload`	Fragmentierungsstatus, Breakpoint Resume Visual Protocol
05	Fortschritt hochladen `g-upload-progress`	Fortschrittswerte, Statustext und ARIA
06	Fehlgeschlagenes Hochladen `g-failed-upload`	Grund für Fehler, Wiederholung und Entfernung
07	Dateikarte `g-file-card`	Thumbnails, Namen, Eigenschaften und schnelle Aktionen
08	Ordnerbaum `g-folder-tree`	Verzeichnisebene, Anzahl und aktueller Pfad
09	Datei Browser `g-file-browser`	Katalog, Suche, Grid / Liste und Tastaturauswahl
10	Dateivorschau `g-file-preview`	Vorschau Canvas, Zoom-Tools und Meta-Informationen
11	Medienbibliothek `g-media-library`	Media Asset Workbench und Detailleiste
12	Media Grid `g-media-grid`	Responsive Thumbnails und Auswahlzustand
13	Media Details `g-media-details`	Vorschau, Alttext, Copyright und Dimensionen
14	Image Crop `g-image-crop`	Erntestufe, Maßstab und Prüfer
15	Bildannotation `g-image-annotation`	Hot Spots, Marks und Review Notes
16	Document Viewer `g-document-viewer`	Papier, Thumbnails, Seitendrehen und Zoomen
17	PDF Viewer `g-pdf-viewer`	PDF.js, native oder Desktop Bridge Shell
18	Video Player `g-video-player`	16:9 Bühne, Fortschritt und Wiedergabesteuerung
19	Audio Player `g-audio-player`	Cover, Waveforms/Timeline und Controls
20	Code Editor `g-code-editor`	Zeilennummer, Code-Canvas und Statusleiste
21	Rich Text Editor `g-rich-text-editor`	Formatierungstools, editierbarer Text und Statistiken
22	Markdown Editor `g-markdown-editor`	Quellcode/Vorschau Doppelspalte und mobile Faltung
23	Block Editor `g-block-editor`	Blockhandles, Text und Aktionen
24	Revision vergleichen `g-revision-compare`	Side-by-Side/vereinheitlichte Unterschiede und Additions- und Löschungssemantik
25	Autosave `g-autosave-indicator`	Dirty, Saving, Saved, Error
26	Inhaltsbeschreibung `g-content-outline`	Dokumenttitelebene und aktuelles Kapitel
27	Editor Toolbar `g-editor-toolbar`	Kommandogruppen, gedrückter Status und Tastenkombination
28	Finden und Ersetzen `g-find-replace`	Finden, Ersetzen, Ergebnisse und Navigation
29	Kommentar Thread `g-comment-thread`	Avatar, Text, Zeit und kollaborative Antwort
30	Versionsgeschichte `g-version-history`	Version Timeline, aktuelle Version und Wiederherstellung
31	Dateieigenschaften `g-file-properties`	Type, Owner, Check Value und Copyright
32	Speichergerät `g-storage-meter`	Quote, Klassifizierung von Belegung und Fortschritt

Deklarative Laufzeitschnittstelle

<div class="g-file-drop" data-g-dropzone>...</div>
<section class="g-upload-queue" data-g-upload-manager>...</section>
<section class="g-file-browser" data-g-file-browser data-g-view="grid">...</section>
<article class="g-rich-text-editor" data-g-editor-shell>
  <div data-g-editor-surface contenteditable="true">...</div>
</article>
<div class="g-revision-compare" data-g-revision-compare>...</div>
<span class="g-autosave-indicator" data-g-autosave>...</span>

Laufzeit, Zugänglichkeit und Umgebungsregeln

dropzone Behandelt Ziehtiefe, Tastaturaktivierung und echte Dateiereignisse;upload-manager Behalten Sie den Warteschlangenstatus, den Fortschritt, die Pausen, die Wiederholungsversuche, das Entfernen und die Gesamtzahl bei.
file-browser Bietet Unicode-Suche, Raster-/Listenwechsel, Einzelauswahl, Pfeiltasten, Pos1, Ende, Eingabetaste und Leertaste und veröffentlicht Auswahlereignisse.
editor-shell Vereinheitlichen von Tool-Befehlen, Strg/Befehl-Verknüpfungen, Zeichen- und Wortzählungen; gemeinsame Protokolle für Rich Text, Markdown, Code- und Block-Editoren.
revision-compare Parallele/einheitliche Unterschiede umschalten;autosave Drückt Dirty, Saving, Saved und Error aus und unterstützt verzögerte und sofortige Speicherungen.
g-content-container 704px-Container-Reduzierung verwenden; Dateibrowser, Mediendetails, Bildeditor, Miniaturansichten von Dokumenten, Markdown-Doppelspalten und Versionsvergleich verfügen alle über mobile Layouts.
Alle Modi verwenden die logische Richtung und decken RTL, Reduced Motion, Forced Colors und Print ab; Print verbirgt das Hochladen und Bearbeiten von Aktionen, verflacht den Scrollbereich und bewahrt Text- und Revisionsinformationen.

KapazitätslisteRegistrieren Sie alle 32 Modi, 8 Fähigkeitsfamilien und Testmatrizen;Standalone Content System BeispielUmfasst das Hochladen, das Durchsuchen von Dateien, Medien, Bilder, Dokumente, Audio und Video, vier Arten von Editoren, Zusammenarbeit, Versionen und Speicher.

Login und Account System

Fähigkeiten der Kategorie 11 umfassen den gesamten Lebenszyklus einer Identität von der Eingabe des Systems, Verifizierung, Wiederherstellung, Autorisierung, Sitzung, Mandant, Gerät und Sicherheitsaudit. Es ist keine einzige Anmeldekarte, sondern 32 stabile Kombinationen, die direkt auf PC, mobilem Web, Dashboard, Super CMS und Tauri / Electron Desktop WebView funktionieren.

Echtzeit-Verifizierungskombination

Mobiltelefonnummer überprüfen

Verifizierungscode gesendet an +86 138****6608

Neues Passwort festlegen

PasswortstärkeNicht eingestellt

Mindestens 8 Stellen
Großbuchstaben
Kleinbuchstaben
Nummer
Symbol

!

Neues Gerät entdeckt

Linux · Firefox · Peking

Komplette Matrix von 32 Modi

#	Modus	Wurzelklasse	Zweck und Schlüsselkomponenten
01	Zentrierte Authentifizierung	`g-auth-centered`	Einreihiger Eingang, mobiles Terminal, leichtes Produkt; Zusammenarbeit `g-auth-container`、`g-auth-panel`
02	Spaltenbescheinigung	`g-auth-split`	`g-auth-split-aside` Markenbereich + `g-auth-split-main` Formularbereich
03	Login	`g-sign-in`	E-Mail/Benutzername, Passwort, eingeloggt bleiben, Eingang abrufen und `g-auth-provider`
04	Registrierung	`g-registration`	Personen-/Unternehmensregistrierung, Bestätigung der Geschäftsbedingungen, Passwortstärke
05	Passwort abrufen	`g-password-recovery`	E-Mail-, Mobiltelefon- und Administratorwiederherstellungsmethoden
06	Passwort zurücksetzen	`g-password-reset`	Neues Passwort, bestätigtes Passwort, abgelaufener Token-Status
07	E-Mail-Verifizierung	`g-email-verification`	`g-verification-icon`, Adresse, Zeitpunkt des erneuten Sendens
08	Überprüfung von Mobiltelefonen	`g-phone-verification`	Ländercode, maskierte Nummer und OTP
09	MFA Challenge	`g-mfa-challenge`	Authenticator, SMS, Security Key, Recovery Code und vertrauenswürdige Geräte
10	OTP-Eingang	`g-otp-input`	`g-otp-cell`; Eingabe, Einfügen, Backspace und Pfeiltasten
11	Passkey	`g-passkey`	`g-passkey-graphic`, Plattformvalidator und geräteübergreifendes Portal
12	SSO	`g-sso`	SAML/OIDC, Enterprise Domain Discovery und Provider List
13	QR-Code-Login	`g-qr-login`	`g-qr-login-layout`、`g-qr-code`, Refresh- und Ablaufstatus
14	Magic Link	`g-magic-link`	Passwortloses E-Mail-Login, Gültigkeitsdauer und Einmalerinnerung
15	Laden Sie zum Beitritt ein	`g-invitation`	`g-invitation-details`, Organisation, Rolle, Einladender und Gültigkeitszeitraum
16	Erstmalige Einrichtung	`g-first-time-setup`	Passwort, Informationen, Organisation und Sicherheitseinstellungen zum ersten Mal
17	Sperrbildschirm	`g-lock-screen`	`g-lock-screen-panel`, Zeit, aktueller Benutzer und schnelles Entsperren
18	Sitzung abgelaufen	`g-session-expired`	`g-session-expired-panel`, lokale Änderungsanweisungen und Neuzertifizierung
19	Kontoauswahl	`g-account-chooser`	`g-auth-choice`, Avatar, E-Mail und neues Konto
20	Mieterauswahl	`g-tenant-chooser`	Arbeitsbereich, Organisationsrolle, Mitgliedschaft und aktueller Mieter
21	Identitätswechsel	`g-identity-switcher`	`g-identity-switcher-menu`, Rollenidentität und Besuchervorschau
22	Vollständige Informationen	`g-profile-setup`	`g-auth-avatar`, Name, Position, Zeitzone und Sprache
23	Account Security Center	`g-account-security`	`g-security-section` Aggregate Passwörter, MFA, Geräte und Verbindungen
24	Gerätemanagement	`g-device-management`	`g-device-item`, aktuelles Gerät, Ort, Uhrzeit und Stornierung
25	Login Aktivität	`g-login-activity`	`g-login-event`, Methode, IP, Standort, Erfolg und Risiko
26	Sicherheitsvorfall	`g-security-alert`	`g-security-alert-actions` Identität bestätigen oder Konto schützen
27	Wiederfindungscode	`g-recovery-codes`	`g-recovery-code` Gitter, kopieren, herunterladen und regenerieren
28	Vertrauenswürdiges Gerät	`g-trusted-device`	MFA Skip Deadline und Risikobeschreibung für öffentliche Geräte
29	Konto verbunden	`g-connected-accounts`	`g-connected-account`, Verbindungszustand und Trennvorgang
30	Passwortstärke	`g-password-strength`	`g-password-strength-meter`、`g-password-rule` mit Echtzeitbewertung
31	Autorisierung und Einwilligung	`g-auth-consent`	`g-auth-consent-scope` Berechtigungsumfang, Erlauben und Verweigern
32	Zertifizierungsergebnisse	`g-auth-result`	`g-auth-result-icon`; Erfolg, Misserfolg und Verarbeitungsstatus

Deklarative Laufzeitschnittstelle

Verhalten	Eigenschaften	Fähigkeit
Passwort Toggle	`data-g-password-toggle`	Cursor anzeigen/verstecken und halten
OTP-Input	`data-g-otp-input`	Auto-Advance, Backspace, Pfeiltasten, ganze String-Paste, Abschlussereignis
Passwortstärke	`data-g-password-strength`	Fünf Regeln, 0-4 Rating, ARIA Progress
Auth Timer	`data-g-auth-timer`	Resend, QR-Code und Session Countdown / Ablauf
Gerettete Wahl	`data-g-saved-choice`	Konto- und Mieterauswahl
Dropdown	`data-g-dropdown`	Menü zum Identitätswechsel
Kopie	`data-g-copy`	Wiedereinziehungscodekopie
Dialog	`data-g-dialog`	Gerät widerrufen, sensible Betriebsbestätigung

<div class="g-otp-input" data-g-otp-input>
  <input class="g-otp-cell" data-g-otp-cell inputmode="numeric" maxlength="1">
  ...
  <input type="hidden" data-g-otp-output>
</div>

<div class="g-password-strength" data-g-password-strength
     data-g-password-target="new-password">...</div>

Status, Endpunkte und Sicherheitsregeln

Das Passwortfeld wird korrekt verwendet autocomplete; Die bitweise Eingabe des Bestätigungscodes erfordert weiterhin einen zugänglichen Namen und lässt den vollständigen Wert für die Übermittlung verborgen.
OTP unterstützt numerische Filterung, automatisches Vorrücken, Rücktaste, linke und rechte Pfeiltasten, Pos1, Ende und Einfügen; nach Fertigstellung freigegeben gardener:otpcomplete。
Das Authentifizierungsergebnis muss eindeutig Erfolg, Fehler und Ausstehend sein; der Ablauf der Sitzung muss angeben, ob nicht übermittelte Daten gespeichert werden, und Sicherheitsereignisse können nicht ausschließlich durch Farben ausgedrückt werden.
Konto, Mieter und Identität sind unterschiedliche Konzepte. Verwenden Sie Selecter/Switcher, um Fehloperationen im CMS mit mehreren Organisationen zu vermeiden.
Spaltenauthentifizierung konvergiert zu einer einzelnen Spalte unter 704px; Karten werden mit QR, Regeln und Wiederherstellungscodes unter 384px neu angeordnet; Bodenoperationen respektieren den Safe Area.
Alle Stile umfassen RTL, Reduced Motion, Forced Colors und Druck. Drucken Sie versteckte Passwörter, Anbieter, Countdowns und sensible Vorgänge, wobei Sie nur die erforderlichen Sicherheitsüberprüfungsinformationen beibehalten.

KapazitätslisteRegistriert alle 32 Modi, 8 Fähigkeitsfamilien, 8 Klassen von Multiplex-Laufzeiten und vollständige Testmatrix;Beispiel für ein unabhängiges KontosystemDeckt alle Modi ab und ermöglicht direktes Testen von OTP, Passwortstärke, Countdown, Konto / Mieterauswahl und Identitätsmenü.

Handel und Zahlungen

Die Funktionen der Kategorie 12 umfassen die gesamte Transaktionskette von Produkterkennung, Spezifikationen und Preisen, Einkaufswagen, Abwicklung, Erfüllung, Zahlungen, Bestellungen und Abonnementabrechnung. 32 Kombinationen bereit für den Einsatz in PC Mall, Mobile Web, Dashboard, Super CMS, Digital Goods, SaaS und Tauri/Electron Desktop WebView.

Echtzeit-Handelsportfolio

G

Gardener StudioUnternehmenslizenzierung · Windows

¥699.00

Teilsumme

Rabatt

Lieferung

Cope

Plattform auswählen

Komplette Matrix von 32 Modi

#	Modus	Wurzelklasse	Zweck und Schlüsselkomponenten
01	Produktkarte	`g-commerce-product-card`	`g-product-media`、`g-product-card-badge`, Titel, Preis und Aktion
02	Produktliste	`g-commerce-product-list`	`g-product-list-item`, Medien, Zusammenfassung, Preis und Reihenaktionen
03	Produktangaben	`g-commerce-product-detail`	`g-product-detail-summary`, Titel, Lieferant, SKU, Lagerbestand und Kaufaktion
04	Produktgalerie	`g-commerce-product-gallery`	`g-product-gallery-thumb` und Bühne; wiederverwendbares Karussellverhalten
05	SKU-Auswahl	`g-sku-selector`	`g-sku-group`、`g-sku-option`, Deaktivierung der Kombination und der vollständigen Auswahlausgabe
06	Mengenstufe	`g-quantity-stepper`	`g-quantity-button`, Input, min/max/step und Change Events
07	Preisanzeige	`g-price-display`	`g-price-current`, Originalpreis, Rabatt, Zyklus, Beschreibung inklusive MwSt. und Inventar `g-stock-status`
08	Einkaufswageneintrag	`g-commerce-cart-item`	`g-cart-item-media`, Spezifikation, Menge, Zeile insgesamt und Vorgang
09	Warenkorb	`g-cart`	Mengenverknüpfung,`g-cart-empty`, Zwischensumme, Angebote, Versand, Steuern und Gesamtsumme
10	Mini-Einkaufswagen	`g-mini-cart`	Dropdown-Container, Listen und `g-mini-cart-footer`
11	Warenkorb Zusammenfassung	`g-cart-summary`	Summe der Ausgabenlinien `g-cart-summary-total`
12	Abrechnung	`g-commerce-checkout`	`g-checkout-section` Hauptbereich + Sticky `g-checkout-sidebar` + Sicherer Bereich `g-checkout-mobile-actions`
13	Abwicklungsschritte	`g-checkout-steps`	`g-checkout-step-marker`, abgeschlossen/aktuell/ausstehend
14	Adressauswahl	`g-address-selector`	Gespeicherte Auswahl, Standardadresse und neuer Eintrag
15	Adresskarte	`g-address-card`	`g-address-main`, Ansprechpartner, Telefonnummer, detaillierte Adresse, Tags und Bearbeitung
16	Versandart	`g-shipping-method`	`g-shipping-option`, Pünktlichkeit, Spediteur, Preis und Unerreichbarkeitsstatus
17	Option zur Selbstabholung	`g-pickup-selector`	`g-pickup-option`, Lager, Entfernung, Öffnungszeiten und Inventar
18	Rabattcode	`g-coupon`	`g-coupon-status`; Idle, Applied, Invalid and Clear
19	Promotion List	`g-promotion-list`	`g-promotion-item`Code, Schwellenwert, gegenseitiger Ausschluss und Gültigkeitsdauer
20	Angaben zur Rechnung	`g-invoice-information`	`g-invoice-fields`, Rechnungstyp, Kopfzeile, Steuernummer und Empfangsmethode
21	Zahlungsmethode	`g-payment-method`	`g-payment-option`, Bankkarte, Wallet, Guthaben, Offline- und Deaktivierungsstatus
22	Zahlungspanel	`g-payment-sheet`	`g-payment-sheet-total`, Betrag, Bestätigung, Risikokontrollaufforderung und Rückgabe
23	Zahlungsergebnis	`g-payment-result`	`g-payment-result-icon`; Erfolg, Misserfolg, Verarbeitung und Folgehandlungen
24	Bestellübersicht	`g-commerce-order-summary`	Artikel, Rabatte, Versand, Steuern, Zahlung & `g-order-summary-total`
25	Bestellzeitleiste	`g-commerce-order-timeline`	`g-order-timeline-item`, Knoten, Zeit, Logistik und aktuelle Schritte
26	Bestelldetails	`g-order-detail`	Header, Status, Artikel, Adresse, Zahlung, Rechnung und `g-order-detail-section`
27	Abonnementpaket	`g-subscription-plan`	`g-plan-price-value`, Zyklus, Funktion, Featured und Aktion
28	Preisvergleich	`g-pricing-comparison`	Spalte Haftfähigkeit, Paketdifferenz, Zelle Boolean/Betrag/Preis
29	Messgerät	`g-commerce-usage-meter`	`g-usage-meter-track`, Strom/Grenzwert, Reset-Zeitraum, Warnung/Gefahr
30	Abrechnungsverlauf	`g-billing-history`	`g-billing-history-item`, Zeitraum, Betrag, Status, PDF und Filterung
31	Rückerstattungsstatus	`g-refund-status`	`g-refund-status-progress`, Betrag, ursprüngliche Rückgabe, voraussichtlicher Eingang und Ausfall
32	Steuerübersicht	`g-tax-summary`	`g-tax-summary-row`, unversteuerter Betrag, Steuerart, Steuersatz, Region und Gesamtbetrag inklusive Steuern

Deklarative Laufzeitschnittstelle

Verhalten	Eigenschaften	Fähigkeit
Mengenschritt	`data-g-quantity-stepper`	min/max/step, button status, input normalization,`gardener:quantitychange`
SKU Selector	`data-g-sku-selector`	Gruppierte Funkauswahl, deaktivierte Spezifikationen, Tastatur-Roaming, JSON-Ausgang,`gardener:skuchange`
Warenkorb	`data-g-cart`	Ganzzahl-Berechnung, Mengen-/Abzugsbindung, Teilsumme/Abschlag/Fracht/Steuer/insgesamt
Coupon	`data-g-coupon`	Anzugebender gültiger Code, Status und Ereignisse
Gerettete Wahl	`data-g-saved-choice`	Adresse, Versand, Abholung und Zahlungsoptionen
Karussell	`data-g-carousel`	Produktgalerie
Dropdown	`data-g-dropdown`	Mini-Einkaufswagen

<div class="g-cart" data-g-cart data-g-currency="CNY">
  <article class="g-commerce-cart-item" data-g-cart-item data-g-unit-price="69900">
    <div class="g-quantity-stepper" data-g-quantity-stepper>...</div>
    <strong data-g-line-total></strong>
  </article>
  <strong data-g-cart-total></strong>
</div>

Betrag, Status und Umweltregeln

Der Warenkorb verwendet die ganzzahlige Berechnung der kleinsten Währungseinheit und übergibt diese an die Anzeigeebene Intl.NumberFormatum Gleitkomma-Betragsfehler zu vermeiden; Besteuerung, bevorzugtes Overlay, Inventar und Zahlungsüberprüfung werden weiterhin vom Business-Backend entschieden.
SKUs deaktiviert, Lagerbestand niedrig/nicht mehr verfügbar, Rabattcode ungültig, Zahlung erfolgreich/Fehler/ausstehend und Rückerstattung verarbeitet/abgeschlossen/fehlgeschlagen haben alle unabhängige Status und können sich nicht nur auf die Farbe verlassen.
Adresse, Lieferung, Abholung, Rechnung und Zahlung sind unterschiedliche Geschäftsobjekte; Die Abwicklungs-Shell ist für deren Organisation verantwortlich und codiert die Back-End-Geschäftsregeln nicht fest in CSS.
g-commerce-container Doppelte Spalten für Details/Bezahlvorgang bei 704 Pixel reduzieren, Werbebuchungen neu anordnen und Karten bei 480 Pixel auswählen; Ansichtsfensterabfrage als Fallback, wenn kein Containerkontext vorhanden ist.
Alle Modi umfassen Tastatur, RTL, Reduzierte Bewegung, Erzwungene Farben und Druck; Mobile Abrechnung respektiert Safe Area, Druck versteckt Kaufaktionen und behält Bestellung, Rechnung und Steuerinformationen.
Standardmäßige weiße Oberfläche mit 4px kleinen abgerundeten Ecken; die Komponente verwendet nur Theme-Token, die in 42 Hauptfarbensätzen und allen orthogonalen Themenachsen wiederverwendet werden können.

KapazitätslisteRegistriert alle 32 Modi, 8 Fähigkeitsfamilien, 7 Arten von Multiplex-Laufzeiten und vollständige Testmatrix;Unabhängiges Geschäfts- und ZahlungsbeispielUmfasst Katalog, SKU, Warenkorb, Checkout, Erfüllung, Zahlungen, Bestellungen, Abonnements, Abrechnung, Rückerstattungen und Steuern.

Mobilspezifische Komponenten

Funktionen der Kategorie 13 sind nicht einfach die Eingrenzung von Desktop-Komponenten, sondern die Ergänzung der einzigartigen Strukturen von mobilen Webseiten, PWA, Hybrid-Anwendungen und Desktop-WebView. 32 Modi umfassen sichere Bereiche und dynamische Viewports, mobile Navigation, Bottom-Pop-ups, Gesten und Scrollen, Auffinden und Filtern, Eingabe und Tastatur, mobile Authentifizierung / Abrechnung / Medien sowie Offline, Berechtigungen und leere Fehlerzustände.

32 Muster8 Familien14 wiederverwendbare LaufzeitenSafe AreaTouchRTLDruck

Auswahlauftrag:Zuerst auswählen g-mobile-safe-shell oder eine vorhandene Seiten-Shell, und drücken Sie dann die Kombination „Navigation → Inhalt → Temporäre Ebenen → Sticky Actions → System-Feedback“. Die untere Navigation wird für 3–5 Ziele der ersten Ebene verwendet; Swipe Tabs werden zum Wechseln innerhalb desselben Kontexts verwendet; Unteres Blatt trägt kurze Aufgaben; Der Vollbilddialog erfordert lange Aufgaben und kann nicht miteinander gemischt werden.

Mobilkombination in Echtzeit

Mobile Werkbank

G

Eingang des Schiebevorgangs

Gesten, Buttons und Escape sind alle verfügbar.

Weiter laden

Mobilfunkvertrag

100svh Sorgt für eine stabile Anfangshöhe,100dvh Folgen Sie den Änderungen in der Browserleiste.
Vierseitige Nutzung env(safe-area-inset-*); Untere Leiste, Kaufleiste, Snackbar und Gestenaufforderungen überschreiben nicht die Home-Anzeige.
Touch-Ziele in Coarse-Pointer-Umgebungen sind mindestens 44 Pixel groß; Alle Gestenkomponenten behalten die Tasten- oder Tastaturpfade bei.
Das logische Richtungsattribut unterstützt RTL; „Reduzierte Bewegung“ schaltet Verschiebungsübergänge aus; Erzwungene Farben verstärken ausgewählte Konturen; Beim Drucken werden die Schalen automatisch geglättet.

Komplette Matrix von 32 Modi

#	Modus	Wurzelklasse	Zweck und Schlüsselkomponenten
01	Sichere Zoneneinschließung	`g-mobile-safe-shell`	`g-mobile-safe-content`, svh/dvh, vierseitiger Safe Area, Contained preview
02	oberste Anwendungsleiste	`g-mobile-app-bar`	`g-mobile-app-bar-start/title/actions`,Sticky,Großer Titel
03	Untere Navigation	`g-mobile-bottom-navigation`	`g-mobile-bottom-navigation-item`, 3-5 First-Level-Ziele und aktueller Status
04	Untere elastische Schicht	`g-mobile-bottom-sheet`	`g-mobile-sheet-panel/handle/header/footer`, Fokusbeschränkungen, Escape, Scroll-Sperre
05	Aktionsmenü	`g-mobile-action-sheet`	`g-mobile-action-list/item`, Teilen, Löschen und kontextbezogene Aktionen
06	Zum Aktualisieren nach unten ziehen	`g-mobile-pull-refresh`	`g-mobile-pull-refresh-indicator/content`, Schwellenwert, API aktualisieren/vervollständigen
07	Unendliches Laden	`g-mobile-infinite-load`	IntersectionObserver, Load button fallback, Loading/Done
08	Schlittenbetrieb	`g-mobile-swipe-actions`	`g-mobile-swipe-actions-track/main/buttons`, LTR/RTL, Button- und Escape-Fallback
09	Schiebelasche	`g-mobile-swipe-tabs`	`g-mobile-swipe-tab`, horizontale Scrolling-Adsorption und Tabs-Semantik
10	Mobile Klassifikation	`g-mobile-category-view`	`g-mobile-category-rail`、`g-mobile-category-link`、`g-mobile-category-content`、`g-mobile-category-grid`、`g-mobile-category-item`
11	Mobile Filterung	`g-mobile-filter-sheet`	Filter Content, Sticky Footer, Reset und Result Aktionen
12	Sticky Buy Bar	`g-mobile-purchase-bar`	`g-mobile-purchase-main`、`g-mobile-purchase-actions`, Preis, Menge und Sicherheitszone
13	Mobile Suche	`g-mobile-search`	`g-mobile-search-field/icon`, annullieren und löschen
14	Move Selector	`g-mobile-picker`	`g-mobile-picker-grid/option`, Einzel- / Mehrfachauswahl und gespeicherte Auswahl
15	Radwähler	`g-mobile-wheel-picker`	`g-mobile-wheel-column/option`, Scroll Snap, Pfeiltasten, JSON Ausgang
16	Floating Action Button	`g-mobile-fab`	Erstellen Sie hauptsächlich Aktionen, sichere Bereiche und untere Balkenversätze
17	Dialogfeld Vollbild	`g-mobile-fullscreen-dialog`	Lange Formulare, Bearbeitungsaufgaben, Fokusmanagement und dynamische Viewports
18	Tastaturvermeidung	`g-mobile-keyboard-avoidance`	`--g-keyboard-offset`, Scroll Padding und Form sichtbaren Bereich
19	Gestenaufforderung	`g-mobile-gesture-hint`	`g-mobile-gesture-hint-line`, Erstgebrauch und Systemgestenbereich
20	Offline-Banner	`g-mobile-offline-banner`	Cache Content prompt, Retry und Netzwerkwiederherstellung
21	Segmentierungskontrolle	`g-mobile-segmented-control`	`g-mobile-segmented-item`, 2-5 sich gegenseitig ausschließende Ansichten
22	Mobile Content Streaming	`g-mobile-feed`	`g-mobile-feed-item/main`, Medien, Körper und Schwanz Aktionen
23	Karussellkarten	`g-mobile-card-carousel`	Horizontal Scroll Snap, Peek, Optional Carousel Runtime
24	Mobilformular	`g-mobile-form`	`g-mobile-form-actions`, Einreichungs- und Berührungsfelder in voller Breite
25	Mobile Authentifizierung	`g-mobile-auth`	`g-mobile-auth-actions`, Anmelde-/Registrierungs-/Bestätigungscode und Tastaturumgebung
26	Mobile Abrechnung	`g-mobile-checkout`	`g-mobile-checkout-actions/summary`, Auftragsbestätigung und Sicherheitsbereich
27	Mobile Medienanzeige	`g-mobile-media-viewer`	`g-mobile-media-viewer-stage/tools`, Schwenk-, Zoom- und Vollbild-Symbolleisten
28	Tastatur-Symbolleiste	`g-mobile-keyboard-toolbar`	Vorherige Nummer, nächste Nummer, Vervollständigung, Format und Eingabemethode Oberkante
29	Modus auswählen	`g-mobile-selection-mode`	`g-mobile-selection-main/actions`, Zähl- und Batch-Aktionen
30	Snackbar	`g-mobile-snackbar`	`g-mobile-snackbar-main`, kurzes Feedback, Rückgängig machen und Versatz der unteren Leiste
31	Erlaubnisaufforderung	`g-mobile-permission-prompt`	`g-mobile-permission-icon`、`g-mobile-permission-actions`, Standort, Benachrichtigungen, Kamera & Medien
32	Leer/Fehler/Offline-Status	`g-mobile-state`	`g-mobile-state-icon/actions`, Leer/Fehler/Offline/Erfolg

Deklarative Laufzeitschnittstelle

Verhalten	Eigenschaften	Schlüsselschnittstelle
Mobiles Blatt	`data-g-mobile-sheet` / `data-g-mobile-sheet-open`	Open/Close/Toggle, Focus Trap, Scroll Lock, Backdrop, Escape
Pull Refresh	`data-g-pull-refresh`	`gardener:refresh`、`complete()`, Button Backup
Unendliche Last	`data-g-infinite-load`	`gardener:loadmore`、`complete({done})`, IntersectionObserver
Swipe Aktionen	`data-g-swipe-actions`	Reveal/Close/Toggle, LTR/RTL Geste, Button, Escape
Wheel Picker	`data-g-wheel-picker`	Scroll Snap、Klicken/Pfeil/Pos1/Ende、`gardener:wheelchange`
Laufzeit wiederverwenden	`data-g-tabs`、`data-g-saved-choice`、`data-g-dialog`、`data-g-toast`	Tags, Segmentierung/Auswahl, Vollbilddialog, Snackbar

<button data-g-mobile-sheet-open="filters">Filter</button>
<aside id="filters" class="g-mobile-filter-sheet"
       data-g-mobile-sheet hidden>
  <div class="g-mobile-sheet-panel">
    <div class="g-mobile-sheet-handle"></div>
    ...
    <footer class="g-mobile-sheet-footer">...</footer>
  </div>
</aside>

Endpunkte, Gesten und Geschäftsgrenzen

Verwendung der Safe Area Shell 100svh Hinzugefügt 100dvh; Wenn das Unternehmen der Soft-Tastatur folgen möchte, kann diese über die Visual Viewport/Host-Brücke aktualisiert werden --g-keyboard-offset。
Gesten erhöhen nur die Effizienz: Pull Refresh hat einen Refresh-Tastenpfad, Infinite Load hat "mehr laden", Swipe Actions hat Toggle und Wheel Picker hat Tastaturunterstützung.
Native Berechtigungsanforderungen, Netzwerkstatus, Datenladen, Zahlung, Authentifizierung und Medienskalierung werden vom Unternehmen oder dem Host implementiert; Gardener bietet stabile Vision, Status, Ereignisse und zugängliche Schnittstellen, ohne Ergebnisse zu fälschen.
Unten Blatt ist für kurze Aufgaben geeignet, Aktionsblatt ist für Aktionslisten geeignet und Filterblatt ist für Filter geeignet; verwenden Sie Fullscreen-Dialog für komplexe Bearbeitung und verwenden Sie dennoch dedizierten Dialog für destruktive Bestätigung.
Standard weiße Oberfläche, 1px Rahmen und 4px kleine abgerundete Ecken; große abgerundete Ecken und starke Schatten sind nicht die Standardeinstellung für Mobilgeräte.
Alle 32 Modi gehen in Komponentenmanifeste und dynamische Komponentenverzeichnisse; CSS-Quell-Voll-API listet auch Module, Selektoren, Variablen und Status auf.

KapazitätslisteRegistrieren Sie alle 32 Modi, 8 Fähigkeitsfamilien und vollständige Testmatrix;Standalone Mobile Terminal BeispielDirektes Testen von App Bar, Bottom Navigation, Swipe Tabs, Swipe Actions, Infinite Load, Action / Filter Sheet und mobilen Selektoren.

Desktop-spezifische Komponenten

Die Funktionen der Kategorie 14 umfassen 32 Modi mit hoher Wiederverwendung von Tauri, Electron, Desktop WebView und simulierter Desktop-Workbench im Browser. Es zerlegt Fenster Chrome, globale Navigation, Dock / Workspace, Befehle und Eingaben, Dokumente und Dateien, Systemintegration, Lebenszyklus-Updates, Wiederherstellung und Status in stabile Schnittstellen; AI muss keine Titelleisten, IDE-Layouts oder Systemaufforderungen vorübergehend erfinden.

Beziehung zum generischen Desktop-Layout:g-desktop-shell、g-titlebar、g-workbench dient weiterhin als Kompatibilitätsbasis; diesen Abschnitt g-desktop-workspace und 31 Begleitmodi bieten eine vollständigere und genauere Kompositionsebene für Desktop-Anwendungen.

Live Desktop Workspace

Gardener Studio — Document Space

Desktop CMS Bearbeitungsbereich

Labels, Spalten, Dock, Inspector und Statusleiste behalten alle eine hohe Dichte, kleine abgerundete Ecken und volle Tastaturpfade bei.

↑

Neue Version verfügbar

Heruntergeladen, warten auf Neustart.

Komplette Matrix von 32 Modi

#	Muster und Wurzelklassen	Stabile Komponente/Status/Zweck
1	Native Titlebar `g-native-titlebar`	`g-native-titlebar-start`、`g-native-titlebar-title`、`g-native-titlebar-end`
2	Fenstersteuerung `g-desktop-window-controls`	`g-desktop-window-button`; Minimieren, Maximieren/Wiederherstellen, Schließen
3	Menü Bar `g-desktop-menubar`	`g-desktop-menubar-item`;Menüeintrag und Plattformsequenz
4	Aktivitätsleiste `g-desktop-activity-bar`	`g-desktop-activity-item`;Aktuelles Modul, globales Tool
5	Dock Panel `g-desktop-dock-panel`	`g-desktop-panel-header`、`g-desktop-panel-body`,Abgestürzt
6	Resizable Split Pane `g-desktop-split-pane`	`g-split-panel`、`g-split-handle`;Landschaft/Porträt
7	Inspektor `g-desktop-inspector-panel`	Eigenschaften, Stile, Auditing, Kontextinformationen
8	Statusleiste `g-desktop-status-bar`	`g-desktop-status-group`、`g-desktop-status-item`
9	Kommandopalette `g-desktop-command-palette`	`g-desktop-command-panel`、`g-desktop-command-input`、`g-desktop-command-results`、`g-desktop-command-item`
10	Shortcut Recorder `g-shortcut-recorder`	`g-shortcut-recorder-control`、`g-shortcut-recorder-keys`、`g-shortcut-recorder-status`
11	Kontextmenü `g-desktop-context-menu`	`g-desktop-menu-item`、`g-desktop-menu-separator`
12	Unsaved Tabs `g-desktop-document-tabs`	`g-desktop-document-tab`、`g-desktop-document-tab-close`;Aktiv, schmutzig, gepinnt
13	Drag Region `g-desktop-drag-region`	`g-desktop-no-drag` Tasten, Links und Eingänge schützen
14	Fensterladung `g-window-loading`	`g-window-loading-icon`、`g-window-loading-progress`
15	Update verfügbar `g-update-available`	Version, Release Notes, Verschiebung / Neustart Updates
16	Genehmigungsantrag `g-desktop-permission-request`	`g-desktop-notice-icon`、`g-desktop-notice-main`、`g-desktop-notice-actions`
17	Native File Picker `g-native-file-picker`	`g-native-file-picker-value`; Einzelauswahl, Mehrfachauswahl und Ordner werden durch Eingabe/Host bestimmt
18	Tray-Menü-Shell `g-tray-menu`	Desktop-Menüelemente wiederverwenden; Online-Status, Fenstereingabe und -ausgang
19	Mehrfensterplatzhalter `g-multi-window-placeholder`	`g-desktop-state-icon`、`g-desktop-state-actions`
20	Desktop Workspace `g-desktop-workspace`	`g-desktop-workspace-main`;Titel-/Aktivitäts-/Haupt-/Inspektor-/Statusraster
21	Fensterschalter `g-desktop-window-switcher`	`g-desktop-window-switcher-panel`、`g-desktop-window-list`、`g-desktop-window-item`、`g-desktop-window-main`
22	Aktuelle Dokumente `g-recent-documents`	`g-recent-document`、`g-recent-document-main`、`g-recent-document-path`
23	Desktop Toolbar `g-desktop-toolbar`	`g-desktop-toolbar-group`、`g-desktop-toolbar-separator`
24	Bodenplatte `g-desktop-bottom-panel`	Terminal, Protokolle, Fragen, Ausgabe und Hintergrundaufgaben
25	Hintergrund Task Center `g-background-task-center`	`g-background-task`、`g-background-task-main`、`g-background-task-progress`
26	Notification Center `g-desktop-notification-center`	`g-desktop-notification`、`g-desktop-notification-main`;ungelesen
27	Sync Status `g-sync-status`	`g-sync-status-dot`; Synchronisierung, Synchronisiert, Offline, Fehler
28	Fortschritt aktualisieren `g-update-progress`	`g-update-progress-header`、`g-update-progress-track`、`g-update-progress-value`
29	Crash Recovery `g-crash-recovery`	Dokument wiederherstellen, Sitzung wiederherstellen, sicheres Booten, Wiederherstellen aufgeben
30	Einzelinstanzbekanntmachung `g-single-instance-notice`	Wechsel zu bestehendem Fenster, weiter zu neuem Fenster, annullieren
31	Deep-Link Handler `g-deep-link-handler`	Quelle, Ziel, Erlauben / Verweigern und "Fragen Sie nicht noch einmal"
32	Über Dialog `g-about-dialog`	`g-about-dialog-icon`; Versions-, Lizenz-, Update- und Diagnoseportal

Deklarative Laufzeit

Verhalten	Eigenschaften/Trigger	Tastatur und Ereignisse
Shortcut Recorder	`data-g-shortcut-recorder`、`data-g-shortcut-control`、`data-g-shortcut-output`	Esc bricht ab, Löschen löscht, Probleme `gardener:shortcutchange`
Desktop Tabs	`data-g-desktop-tabs`、`data-g-desktop-tab`、`data-g-desktop-tab-close`	Pfeil/Pos1/Ende, Strg/⌘+Tab, Strg/⌘+W, mittlere Taste zum Schließen
Native File Picker	`data-g-native-file-picker`、`data-g-native-file-trigger`、`data-g-native-file-value`	Nativer Eingabe-Fallback; emittiert `gardener:nativefiles`
Fensterschalter	`data-g-window-switcher`、`data-g-window-item`	Strg/⌘+`, Pfeiltasten, Eingabetaste, Escape
Laufzeit wiederverwenden	`data-g-split-pane`、`data-g-command-palette`、`data-g-context-menu`、`data-g-roving-nav`、`data-g-nav-toggle`、`data-g-dropdown`、`data-g-dialog`	Spalten, Befehle, Menüs, Navigation, Dock, Taskleiste und Info-Dialog

Tauri / Electron Host-Vertrag

<!-- Laden Sie einen Adapter nur, wenn der Host eine Bridge auf der Whitelist bereitgestellt hat -->
<script type="module" src="gardener.runtime.js"></script>
<script type="module" src="gardener.electron.js"></script>

<button class="g-desktop-window-button"
        data-g-window-action="minimize">—</button>

Elektronenverbrauch contextIsolation Stellen Sie beim Sicherheits-Preload nur Whitelist-Methoden wie „Minimieren“, „Maximieren/Wiederherstellen“ und „Schließen“ zur Verfügung. Aktivieren Sie die Knotenintegration nicht und stellen Sie der Seite keine IPC-Kanäle zur Verfügung.
Tauri v2 wird von der Anwendung in die Fenster-API injiziert; Berechtigungsfunktionen, Dateisystem, Updater, Deep Link, Tray und Multi-Fenster werden gemäß der Anwendungsfunktion konfiguriert und werden nicht automatisch von CSS beantragt.
app-region: drag und -webkit-app-region: drag Nur für verschiebbare Bereiche zuständig; Schaltflächen, Links, Eingaben und Menüs müssen darin platziert werden g-desktop-no-drag Oder durch eingebauten Selektor geschützt.
Plattform verfügbar data-g-os="macos" oder data-g-platform="macos" Ampelfenstersteuerung umschalten; Windows/Linux behält die rechtwinklige Steuerung bei.
Updates, Berechtigungen, Dateiauswahl, Tray, Multi-Fenster, Deep Chaining, Single Instanz und Crash Recovery erfordern alle, dass das Unternehmen oder der Host echte Ergebnisse zurückgibt; Komponenten bieten nur vorhersagbare Präsentation, Ereignisse, Fokus und Zustandsstrukturen.

Reaktionsfähigkeit, Zugänglichkeit und Druck

g-desktop-workspace Containerabfrage erstellen: Weniger als 56rem verbirgt den Inspektor, weniger als 40rem verbirgt das Dock und vereinfacht die Titelleiste; unabhängige Panels können weiterhin vom Unternehmen über Toggle angezeigt werden.
Dokument-Tags, Befehlsfeld, Menüs, Spalten, Tastenkombinationsaufzeichnung und Fensterumschalter verfügen alle über Tastaturpfade; Dirty Tags geben vor dem Schließen eine stornierbare Meldung aus beforetabclose。
Logisches Richtungsattribut überschreibt RTL; Reduced Motion stoppt Synchronimpulse; Forced Colors bietet klare Umrisse für aktuelle Aktivität / Tab / Befehl.
Verstecken Sie das Fenster Chrome, Aktivitätsleiste, Statusleiste, Symbolleiste, Bottom Panel und alle schwimmenden Schichten beim Drucken, erweitern Sie den Hauptinhalt, Dock und Inspector, um ein Zuschneiden zu vermeiden.
Standardmäßige weiße Oberfläche, 1px Rahmen und 4px kleine abgerundete Ecken; Schatten werden nur für echte Overlays wie Kommandofelder, Fensterschalter und Menüs verwendet.

KapazitätslisteRegistrieren Sie alle 32 Modi, 8 Fähigkeitsfamilien und Testmatrizen;Standalone Desktop BeispielDeckt Fenster, Arbeitsbereiche, Registerkarten, Befehle, Verknüpfungen, Dateien, Trays, Updates, Benachrichtigungen und Wiederherstellungsstatus ab.

KI-Produkte und intelligente interaktive Komponenten

Die Funktionen der Kategorie 15 umfassen die gesamte Aufgabenkette von KI-Assistenten, Copiloten, Agenten-Workbench, Generierungstools, Q&A für Wissensdatenbanken, multimodalen Produkten und KI-Desktop-Client. Die 32 Modi erstrecken sich von Sitzungseingabe über Eingabeaufforderung, Argumentation, Streaming-Ausgabe, Tool-Genehmigung, Multi-Agent, Quelle und Artefakt, Kontext und Kosten, Stimme, Berechtigungen, Datenschutz, Sicherheit und Feedback-Auswertung und reduzieren KI-Produktfehler nicht auf "Chat Bubble + Eingabebox".

Unterschiede zum AI Page Generation Protocol:Dieser Abschnitt ist für die AI-Produkt-UI für Endbenutzer; der folgende Text AI Page Generation Protocol ist eine Einschränkung für die Verwendung von Gardener auf Generatoren. Ersteres stellt Schnittstellenkomponenten bereit, und letzteres gibt die Reihenfolge an, in der Fähigkeiten, Rezepte, Komponenten und Werkzeugklassen ausgewählt werden.

Real-time AI Workspace

Kontext 38%

Bitte erstellen Sie ein Multi-Tenant-Unternehmensportal.

G

Gardener AgentArbeiten

Enterprise Portal Rezept abgestimmt, Prüfung von Berechtigungen, CMS und Dashboard-Komponenten.

Passt Mieter, Workflow, Dashboard, Medienbibliothek.

Erforderlich Genehmigung für die Schreibseitenvorlage

Ändern Sie nur das generierte Verzeichnis des aktuellen Projekts.

Umfang: generiert/** · Betrieb: erstellen/aktualisieren

Komplette Matrix von 32 Modi

#	Muster und Wurzelklassen	Stabile Komponente/Status/Zweck
1	AI Workspace `g-ai-shell`	`g-ai-sidebar`、`g-ai-sidebar-header`、`g-ai-main`、`g-ai-header`
2	Gesprächsliste `g-conversation-list`	`g-conversation-item`、`g-conversation-title`;Geschichte, gepinnt, gruppiert und aktuelle Sitzung
3	Chat Thread `g-chat`	`g-chat-list`、`g-ai-empty-chat`; Leer, Laden, Streaming, Fehler
4	AI Nachricht `g-message`	`g-message-avatar`、`g-message-meta`、`g-message-body`、`g-message-actions`;Benutzer/Assistent/System
5	Prompt Composer `g-composer`	`g-composer-input`、`g-composer-toolbar`、`g-composer-status`; Zum Senden die Eingabetaste, zum Umbrechen Umschalt+Eingabetaste und zum Stoppen
6	Anlage `g-attachment`	`g-attachment-list`、`g-attachment-preview`、`g-attachment-name`、`g-attachment-meta`
7	Prompt Starter `g-prompt-starter`	`g-prompt-starter-header`、`g-prompt-suggestions`、`g-prompt-suggestion`
8	Prompt Library `g-prompt-library`	`g-prompt-card`;Suche, Kategorie, Sammlung, parametrisierte Vorlage
9	Erwähnen / Slash Menu `g-ai-command-menu`	`g-ai-command-group`、`g-ai-command-item`、`g-mention`、`g-slash-command`
10	Modellauswahl `g-model-selector`	`g-model-selector-trigger`、`g-model-selector-menu`、`g-model-option`
11	Denken `g-thinking`	`g-thinking-trigger`、`g-thinking-content`; Eingestürzt, erweitert, Streaming
12	Streaming Antwort `g-streaming-response`	`g-streaming-response-header`、`g-streaming-response-body`、`g-streaming-response-actions`、`g-stream-cursor`
13	Tool Call `g-tool-call`	`g-tool-call-header`、`g-tool-call-status`、`g-tool-call-body`、`g-tool-call-progress`
14	Werkzeugzulassung `g-approval`	`g-approval-title`、`g-approval-scope`、`g-approval-actions`;Genehmigt/Abgelehnt/Storniert/Abgelaufen
15	Agent Status `g-agent-status`	Idle, Working, Waiting, Blocked, Complete, Failed
16	Agentenplan `g-plan`	`g-plan-header`、`g-plan-list`、`g-plan-item`
17	Multi-Agent Board `g-agent-board`	`g-agent-card`、`g-agent-card-header`、`g-agent-card-task`
18	Agent Handoff `g-agent-handoff`	`g-agent-handoff-main`、`g-agent-handoff-actions`;Kontextübergabe und manuelle Übernahme
19	Quellen / Zitate `g-sources`	`g-source-list`、`g-source`、`g-citation`;Positionierung und Glaubwürdigkeit von Zitaten
20	Artefakt Workspace `g-artifact-layout`	Dialog und Vorschau/Code/Dokument dual-area layout
21	Artefakttafel `g-artifact-panel`	`g-artifact-toolbar`、`g-artifact-tabs`、`g-artifact-content`、`g-artifact-status`
22	AI File Tree `g-file-tree`	`g-file-tree-item`;Hierarchie, Erweiterung, Auswahl und Tastaturnavigation
23	Versionsgeschichte `g-version-list`	`g-version`;Generiert nach, Zeit, aktuelle Version, vergleichen und wiederherstellen
24	Generation Gallery `g-generation-grid`	`g-generation-card`;Mehrere Ergebnisse, Variationen, Auswahlen und weitere Bearbeitung
25	Generation Platzhalter `g-generation-placeholder`	Warteschlange, Generierung, teilweise, vollständig, fehlgeschlagen
26	Kontext/Erinnerung `g-ai-context-manager`	`g-ai-memory-list`、`g-ai-memory-item`、`g-ai-context-sources`、`g-context-meter`
27	Kosten-/Ratenbegrenzung `g-ai-usage-panel`	`g-ai-usage-grid`、`g-ai-usage-metric`、`g-ai-limit-status`、`g-cost`、`g-limit`
28	Voice Session `g-voice-state`	`g-voice-bar`、`g-voice-state-label`; Zuhören, Verarbeiten, Sprechen, Fehler
29	Umfang der Genehmigung `g-permission-scope`	`g-permission-scope-header`、`g-permission-scope-list`;Ressource, Betrieb, Frist, Quelle
30	Datenschutzerklärung `g-privacy-notice`	Schulung, Aufbewahrung, grenzüberschreitende, unternehmenspolitische Maßnahmen und Beschreibung sensibler Informationen
31	Safety / Policy Notice `g-ai-safety-notice`	`g-ai-safety-icon`、`g-ai-safety-main`、`g-ai-safety-actions`
32	Feedback/Bewertung `g-ai-feedback`	`g-ai-feedback-question`、`g-ai-feedback-options`、`g-ai-feedback-option`、`g-ai-feedback-detail`

Dedizierte versus wiederverwendete Laufzeiten

Verhalten	Eigenschaften	Schlüsselschnittstelle
KI-Komponist	`data-g-ai-composer`、`data-g-composer-input`、`data-g-composer-send`、`data-g-composer-stop`	Automatische Höhe, Eingabe/Umschalt+Eingabe,`promptsubmit`、`promptstop`, Streaming-Status
Sofortige Füllung	`data-g-prompt-fill`、`data-g-prompt-target`、`data-g-prompt-value`	Füllen Sie die Starter-/Bibliotheksvorlage in den angegebenen Composer und geben Sie Input aus
AI-Genehmigung	`data-g-ai-approval`、`data-g-approval-choice`	Vor dem Ereignis stornierbar, Genehmigt/Abgelehnt/Storniert, API zurücksetzen
KI-Feedback	`data-g-ai-feedback`、`data-g-feedback-value`、`data-g-feedback-detail`	Grund der Bewertung, zusätzliche Erläuterung,`feedbackchange`、`feedbacksubmit`
Laufzeit wiederverwenden	`data-g-dropdown`、`data-g-accordion`、`data-g-roving-nav`、`data-g-tabs`、`data-g-tree`	Modellauswahl, Thinking/Tool, Befehlsmenü, Artefakt-Tag, Dateibaum

<form class="g-composer" data-g-ai-composer>
  <textarea class="g-composer-input"
            data-g-composer-input></textarea>
  <button data-g-composer-stop hidden>Stopp</button>
  <button data-g-composer-send>Senden</button>
  <span data-g-composer-status></span>
</form>

Status, Vertrauen und Geschäftsgrenzen

Streaming muss Stop-, Paused/Stopped/Complete/Error-Zustände bereitstellen; Cursor-Animation wird nur verbessert, Reduced Motion schaltet die Animation aus.
Thinking zeigt standardmäßig eine lesbare Zusammenfassung der Argumentation oder den Fortschritt an und erfordert nicht, dass die private Argumentationskette des Modells offengelegt wird; das Produkt muss klar zwischen "Zusammenfassung", "Toolprotokoll" und "Endantwort" unterscheiden.
Trennung von Tool Call und Tool Approval: Der Call-Status kann keine Berechtigungsbestätigung ersetzen; destruktive, externe Kommunikation, Zahlung, sensible Daten und dauerhafte Berechtigungen müssen von der Geschäftsausführung wirklich genehmigt werden.
Sources/Citations stellt eine Zitierbeziehung dar und beweist nicht automatisch die Authentizität; das Unternehmen muss die Quell-URL, das Fragment, die Zeit und die Zugänglichkeit beibehalten, und der generierte Inhalt muss noch überprüft werden.
Context/Memory muss das Betrachten der Quelle, Löschen oder Deaktivieren ermöglichen; Cost/Rate Limit sollte die reale Messung des Backends verwenden und kann nicht vom Frontend geschätzt werden, um so zu tun, als wäre es eine Rechnung.
Sicherheitshinweise ersetzen keine serverseitige Politik; Datenschutzhinweise ersetzen keine rechtliche Zustimmung. Die Benutzeroberfläche sollte zeigen, warum sie blockiert wurde, ob sie angefochten werden kann und wie die Daten gespeichert und verwendet werden.
Verwenden Sie weiße Oberfläche, 1px Rahmen und 4px kleine abgerundete Ecken in allen Modi; Zusammenbruch Artefakt, Sidebar und Dual Column Modi bei 960/704/512px Containerbreite und überschreiben RTL, erzwungene Farben und Druck.

KapazitätslisteRegistrieren Sie alle 32 Modi, 8 Fähigkeitsfamilien und vollständige Testmatrix;Standalone AI BeispielUmfasst Dialog, Composer, Prompt, Thinking, Tool Approval, Agent, Artefakt, Build, Kontext, Gebühren, Berechtigungen, Sicherheit, Stimme und Feedback.

Komplette Seiten- und Branchenlösungen

Kategorie 16 ist die höchste Zusammensetzungsebene von Gardener: Die ersten 15 Kategorien bieten Layout, Komponenten, Geschäftsketten und endspezifische Interaktionen, und diese Kategorie verfestigt sie in 32 direkt wählbaren ganzseitigen Verträgen. Es umfasst Einzelpersonen und Unternehmen, öffentliche Websites und Backends, allgemeine Unternehmen und vertikale Branchen und eignet sich auch für Browser, mobile Webseiten, PWA, Tauri und Electron WebView. AI sollte hier zuerst die Seitenwurzelklasse und das entsprechende Rezept auswählen und dann die Komponenten füllen, anstatt die gesamte Seite CSS von Grund auf neu zu organisieren.

32 vollständige Seiten52 Gesamtrezepturen8 FamilienContainer QueryRTLDruck

Echtzeit-Dashboard-Vollseitenskelett

Unternehmensübersicht

Multi-Tenant Content Plattform

Seitenebenen-Header, Indikatoren, Hauptinhalte, Hilfsbereiche und mobile Ordner haben stabile Verträge.

Site28,640↑ 12.4%

Seite486kÜber 42 Themen

Review138Benötigt Verarbeitung

32 vollständige Seitenmatrizen

#	Seitenwurzelklasse	Hauptkomponenten und Verwendungen
1	Produktlandung `g-product-landing`	`g-landing-hero`, Kopie, Bild, Beweis, Abschnitt; SaaS, App, KI-Produkte und neue Produktveröffentlichungen
2	Corporate Home `g-corporate-home`	`g-corporate-hero`, Trust, Solution Grid; Gruppe, Marke, Institution und Enterprise Portal
3	Persönliches Zuhause `g-personal-home`	`g-personal-intro`, Links, Zeitleiste; Persönliche Marke, Lebenslauf und Experten-Homepage
4	Portfolio `g-portfolio-page`	`g-portfolio-hero`, vorgestellt, Projektraster; Design, Fotografie, Entwicklung und Fallbibliothek
5	Blog-Index `g-blog-index`	`g-blog-index-header`, Kategorien, Einstiegsraster; Blog, Nachrichten und Unternehmensinformationen
6	Artikel `g-article-page`	`g-article-page-layout`, Körper, Inhaltsverzeichnis, Meta; lange Artikel, Neuigkeiten, Tutorials und Druckversionen
7	Docs Portal `g-docs-portal`	`g-docs-layout`, Sidebar, Main, toc; Produkt, API und interne Dokumentation
8	Help Center `g-help-center-page`	`g-help-center-hero`, Suche, Layout, beiseite; FAQ und Kundenselbsthilfe
9	Suchergebnisse `g-search-results-page`	`g-search-results-layout`, Filter, Liste, Ergebnis; Suche innerhalb der Website, nach Dokumenten, Produkten und Ressourcen
10	Kontakt `g-contact-page`	`g-contact-layout`, Details, Form; Kontaktaufnahme, Verkaufsberatung und Lead-Sammlung
11	Preisgestaltung `g-pricing-page`	`g-pricing-page-header`, Gitter, Karte; SaaS, Mitgliedschaft und Servicepakete
12	Dashboard `g-dashboard-overview`	`g-dashboard-metrics`, Layout, Panel; Betriebsübersicht, Cockpit und Überwachung
13	Adminliste `g-admin-list-page`	`g-admin-list-header`, Filter, Inhalt, Symbolleiste; Hintergrundressourcenverwaltung
14	Record Detail `g-record-detail-page`	`g-record-detail-layout`, Haupt-, Neben-, Abschnitt; Kunden-, Bestell-, Inhalts- und Asset-Details
15	Einstellungen `g-settings-center`	`g-settings-center-layout`, Navigation, Inhalt, Abschnitt; Produkte, Organisationen und Desktop-Einstellungen
16	Benutzerzentrum `g-user-center`	`g-user-center-layout`, Navigation, Inhalt; Informationen, Sicherheit, Bestellungen und Mitgliedschaftsrechte
17	Mitteilungen `g-notification-center-page`	`g-notification-groups`, Gruppe, Zeile; Benachrichtigungen, Erinnerungen und Updates
18	Onboarding `g-onboarding-flow`	`g-onboarding-aside`, main, step, progress; Initialisierung, Abrechnung und Import
19	CRM `g-crm-workspace`	`g-crm-layout`, Nav, Main, Inspector, Pipeline; Kunden, Geschäftsmöglichkeiten und Verkaufsverfolgung
20	Project Workspace `g-project-workspace`	`g-project-layout`, Tafel, Spalte, Inspektor; Projekte, Aufgaben und F&E-Zusammenarbeit
21	Support Center `g-support-center`	`g-support-layout`, Thread, Nachrichten, Antwort; Kundendienst, Arbeitsauftrag und After-Sales
22	Genehmigungszentrum `g-approval-center`	`g-approval-layout`, Warteschlange, Spalte, Inspektor; Prozess-, Kosten-, Inhalts- und behördliche Genehmigung
23	Wissensbasis `g-knowledge-base`	`g-knowledge-hero`, Suche, Layout; Enterprise Wiki, Systembibliothek und interne Hilfe
24	Lernportal `g-learning-portal`	`g-learning-layout`, Kursraster, Karte; Kurs-, Ausbildungs- und Schulportal
25	Veranstaltungsportal `g-event-portal`	`g-event-hero`, Gitter, Karte; Konferenzen, Ausstellungen, Community- und Live-Übertragungsveranstaltungen
26	Buchungsportal `g-booking-portal`	`g-booking-layout`, Ergebnisse, Zusammenfassung; medizinische, Veranstaltungsort-, Hotel- und Servicereservierungen
27	Gesundheitswesen `g-healthcare-portal`	`g-healthcare-layout`, Zusammenfassung, Aufzeichnung, Branchenwarnung; Patienten und Gesundheitsdienste
28	Finanzen `g-finance-portal`	`g-finance-layout`, Zusammenfassung, Konto, Branchenalarm; Banken, Vermögen und Unternehmensfinanzierung
29	Öffentlicher Dienst `g-public-service-portal`	`g-public-service-layout`, Zusammenfassung, Artikel; Regierungsangelegenheiten, Antragsfortschritt und Komfortdienste
30	Marktplatz `g-marketplace-page`	`g-marketplace-hero`, Filter, Raster, Karte; Anwendungs-, Service-, Talent- und Plug-in-Markt
31	Gemeinschaft `g-community-page`	`g-community-hero`, Feed, Seitenleiste, Beitrag; Community-, Forum- und Benutzerinhalte
32	Status Center `g-status-center-page`	`g-status-overall`, Dienste, Verlauf, Vorfall; Status, Fehler, Wartung und SLA

Öffentlicher ganzseitiger Teil

g-solution-container、g-solution-header、g-solution-actions、g-solution-section、g-solution-grid、g-solution-card、g-solution-shell、g-solution-rail、g-solution-main、g-solution-aside、g-solution-list、g-solution-item、g-solution-meta、g-solution-stat、g-solution-toolbar und g-solution-empty kann auf 32 Seitentypen wiederverwendet werden, um sicherzustellen, dass sich die grundlegende Syntax von KI bei einem Branchenwechsel nicht ändert.

Auswahl, Zusammensetzung und Geschäftsgrenzen

Beginnen Sie mit solution.* Rezept Bestimmen Sie den Ganzseitentyp und wählen Sie dann Plattform, Themenachse und Dichte aus.
Die Root-Klasse ist für Antworten auf Seitenebene und Zonenbeziehungen verantwortlich; die Formular-, Daten-, Authentifizierungs-, Geschäfts-, Mobil-, Desktop- und KI-Komponenten sind immer noch in den ersten 15 Klassen vorhanden.
Marketing-, Personal- und Content-Seiten verwenden natürliches Dokumentenscrollen; Dashboard und Workbench ermöglichen mehrere Spalten mit hoher Dichte; Gesundheitswesen, Finanzen und Regierung sind nur UI-Verträge und ersetzen keine Vorschriften, Authentifizierung, Datenschutz, Auditierung und Backend-Geschäftsregeln.
Alle Modi verwenden logische Orientierung, kleine abgerundete Ecken, weiße Oberfläche; kollabiert bei 960px und 704px Containerbreite, unterstützt RTL, Reduced Motion, Forced Colors und Drucken.
CRM-, Projekt-, Dashboard-, Einstellungen- und Benachrichtigungsstammseiten können in Tauri / Electron platziert werden g-desktop-workspace;Echte Fenster, Dateien, Updates und Berechtigungen bleiben in der Verantwortung des Desktop-Adapters.

<main class="g-admin-list-page">
  <header class="g-admin-list-header">...</header>
  <section class="g-admin-list-content">
    <div class="g-admin-list-filters">...</div>
    <div class="g-responsive-table">...</div>
  </section>
</main>

KapazitätslisteRegistriert alle 32 Root-Modi und 8 Fähigkeitsfamilien;RezeptlisteBietet das Terminal, Widgets, Laufzeit und Zweck jeder Seite;Standalone BeispielSchaltbare öffentliche Website, Dashboard, CRM, Industrieportal und Statuscenter Vorschau.

Öffentliche API und Schema

Von 0.3.0 Start,gardener.public-api.json ist eine kanonische Liste öffentlicher Benennungs- und Programmierschnittstellen, die CSS-Ebenen, Paketeinträge, Designeigenschaften, JavaScript-Exporte, Verhalten, Ereignisse, Desktop-Adapter und Kompatibilitätsfelder vollständig registriert.

Öffentliches API-Manifest wird gelesen...

Einheitliche Benennung

Bereich	Spezifikation	Beispiel
CSS-Klassen	`g-` + Kebab-Gehäuse	`g-command-palette`
CSS Variablen	`--g-` + Kebab-Gehäuse	`--g-color-primary`
Verhaltensmerkmale	`data-g-{behavior}`	`data-g-dialog`
Veranstaltung	`gardener:{event}`	`gardener:beforeopen`
Metadaten-Interaktion	`behaviors: string[]`	`["dialog"]`
Desktop Bridging	`adapters: string[]`	`["tauri","electron"]`
Plattform	`platforms: string[]`	`["web","mobile"]`
Rezept-ID	punktgetrenntes Kebab-Gehäuse	`solution.admin-list`

Vollständiges Schema

Alle elf Schemasätze verwenden JSON Schema 2020-12, und unbekannte Felder werden abgelehnt:Komponenten、Rezepte、Fähigkeiten、Versorgungsunternehmen、Manifest、Öffentliche API、Builds、Custom Build、Leistungsbudgets、Leistungsbericht、Vereinbarkeit. Alle Objektschemata deaktivieren unbekannte Felder oder deklarieren explizit dynamische Werttypen.npm run test:schema 48 Standardvalidierungsanwendungsfälle mit Ajv 2020-12 ausgeführt, die zehn Release-/Konfigurationsdokumente, unbekannte Stammfelder, zehn Arten unbekannter verschachtelter Felder, zehn Arten fehlender verschachtelter Pflichtfelder, schemaübergreifende Referenzen, JavaScript-Identifikatoren, SHA-256-Formate, Baseline-Regressionsstatus und mit Legacy-Komponentenschemas kompatible Aliase abdecken;npm run contracts Führen Sie weiterhin fünfzehn Sätze negativer Vertragstests durch und überprüfen Sie manifestübergreifende Referenzen, Quellcode- und Build-Artefaktkonsistenz, Selektoren, echte Komponentenzuordnung, SHA-256/SRI-Integrität, reproduzierbare Build-Befehle, Modultypen/-parameter/-signaturen, Instanzmitglieder, Datenattribute, Ereignisnutzlasten, Adapter, Typen und Release-Skripte, Kompatibilitätsbaselines, Build-Archive, 42 absolute und relative Budgetartefakte, Budgetergebnisse, Versionen und Gesamtpaket Exporte.

Alle 9 Module exportiert

Modulschnittstelle lesen...

Alle 66 Verhaltensweisen und Instanzmitglieder

Jedes Element listet deklarative Initialisierungseigenschaften auf und getInstance() Gibt alle Mitglieder des Objekts zurück, die aufgerufen werden dürfen.

Leseverhalten Vertrag ...

Alle 75 Ereignisse und Nutzlasten

Listen Sie jeden Artikel vollständig auf CustomEvent.detail ; Ereignisse sprudeln und können abgesagt werden before Die sieben Events am Anfang sind passabel preventDefault() Prozessschutz verhindert nachfolgende Vorgänge.

Veranstaltungsvertrag lesen...

Alle Laufzeitdatenattribute

Die 309 Eigenschaften, die dem Autor zur Verfügung stehen, sind in 66 Verhaltenseinträge im Verhaltensvertrag oben, 166 Struktur/Aktionsselektoren und 77 zusätzliche Konfigurationseigenschaften unterteilt; es gibt auch 27 Zustandseigenschaften, die von der Laufzeit beibehalten werden. Statuseigenschaften können gleichzeitig als erste Konfiguration gelesen werden, aber die ersten drei dem Autor zur Verfügung stehenden Sätze schließen sich gegenseitig aus und werden nicht doppelt gezählt.

Struktur- und Aktionsauswahl

Leseselektoreigenschaften...

Zusätzliche Konfigurationseigenschaften

Lesekonfigurationseigenschaften...

Laufzeitwartungsstatus

Statusattribute lesen...

Tauri / Electron Adapter Vertrag

Reading Adapter Vertrag...

Kompatibilitätsregeln

Das Spezifikationsfeld für das Manifest ist behaviors. altes Feld runtimeBehaviors Durchgehend 0.x Versionszeile als schreibgeschützter kompatibler Alias reserviert; alt metadata/schema.json Zeigen Sie weiterhin auf das neue Komponentenschema. 1.0.0 stuft den öffentlichen Auftrag auf Stable um und verwendet eine maschinenlesbare Kompatibilitätsbasislinie, um alle öffentlichen Einträge, Ebenen, Themen, Laufzeiten, Komponenten und Rezepte von 0.9.0 zu speichern; 1.x muss Änderungsaufzeichnungen und Migrationsanweisungen bereitstellen, bevor kompatible Einträge gelöscht werden, und muss den Verfallszeitraum von mindestens zwei Nebenversionen durchlaufen. Eine tatsächliche Entfernung kann nur in einer neuen Hauptversion erfolgen.

Komponentenkatalog

Komponentenliste von gardener.manifest.json, enthält Kategorien, Typen, Zustände, Selektoren, Varianten, Widgets, Funktionen, Plattformen, Verhaltensweisen, Adapter und Zugänglichkeitsverträge. Die Dynamik unten zeigt alle Einträge und alle Metadaten an, anstatt eine kuratierte Liste.

Komponentenliste lesen...

Anforderungen an den Komponentenstatus

Neue Komponenten müssen auf Standard, Hover, Focus Visible, Active, Disabled, Readonly, Loading, Empty, Error und Success überprüft werden; nicht jede Komponente zeigt alle Status an, aber es muss klar sein, ob "nicht anwendbar" oder "gedeckt" ist.

JavaScript Runtime

Laufzeit-Framework unabhängig, bestanden data-g-* Automatische Initialisierung. MutationObserver verarbeitet gleichzeitig neue Knoten und hinzugefügte Verhaltensattribute und eignet sich für SPA, CMS Canvas und AI-Streaming zur Generierung von DOM.

Laufzeitmanifest lesen...

Deklarativer Dialog

<button data-g-dialog-open="confirm">Öffnen</button>

<div id="confirm" class="g-dialog-backdrop" data-g-dialog hidden>
  <section class="g-dialog" role="dialog"
           aria-modal="true" aria-labelledby="confirm-title">
    <h2 id="confirm-title">Bestätigen Sie den Vorgang</h2>
    <button data-g-close>Abbrechen</button>
  </section>
</div>

Programmier-API

import Gardener from "@gardener/css";

Gardener.init(document);
const dialog = Gardener.getInstance("#confirm", "dialog");
dialog.open();

Gardener.toast({
  title: "Erfolgreich gespeichert",
  message: "Seite wurde veröffentlicht",
  tone: "success"
});

API	Beschreibung
`init(root)`	Initialisiert das gesamte Verhalten des Wurzelknotens selbst und seiner Nachkommen.
`destroy(root)`	Veröffentlichen Sie Listener, Timer und Instanzreferenzen.
`register(name, factory)`	Registrieren Sie projektspezifisches Verhalten.
`getInstance(element, name)`	Holen Sie sich eine einzelne oder bestimmte Verhaltensinstanz.
`emit(element, name, detail)`	Versenden eines stornierbaren Gardener-Events.
`toast(options)`	Erstellen Sie einen Status oder einen Warntoast.
`behaviors`	Lesen Sie den aktuell registrierten Verhaltensnamen.

Veranstaltung

gardener:init、gardener:beforeopen、gardener:open、gardener:beforeclose、gardener:close、gardener:change、gardener:dismiss. Bevor das Ereignis bestanden werden kann preventDefault() Abbrechen.

Testen Sie die Zugriffskontrolle zur Laufzeit (seit 0,4.0)

npm run test:runtime Verwenden Sie Node.js eingebauten Testläufer und Happy DOM bidirektional reale Instanzmitglieder für alle 66 Verhaltensweisen in der öffentlichen Liste zu vergleichen und zu verifizieren Initialisierung, Idempotenz, Zerstörung und Reinitialisierung; während MutationObserver dynamische Knoten, dynamische Attribute, Unterbaumentfernung, Umfang Zerstörung, Multi-Verhalten Koexistenz, globale Zerstörung und Initialisierung Ereignis sprudeln.

Wenn ein Laufzeitverhalten hinzugefügt oder umbenannt wird, müssen die öffentliche API, die Muster-/Ergänzungs- und die Verhaltenstests synchronisiert werden, da die Tests sonst aufgrund fehlender Geräte, Instanzen oder Mitglieder fehlschlagen.

Seitenrezept

Volles Rezept JSON Definiert die Hochfrequenz-Seitenwurzelklasse, alle notwendigen Komponenten, anwendbare Plattformen, Verhaltensweisen, Desktop-Adapter und Nutzung. Es ist keine Screenshot-Vorlage, sondern eine stabile Struktur, die in Themen umgewandelt werden kann, reagiert und kontinuierlich kombiniert werden kann. Die folgende Erweiterung behält alle Felder für jedes Rezept.

Leserezeptliste...

AI und Template-Systeme sollten zuerst übereinstimmen recipe.id, überprüfen Sie noch einmal Plattformen, endlich verwenden Teile bildet eine vollständige Struktur. Geben Sie kein ganzseitiges Rezept mit einer einzigen ähnlichen Komponente ab.

AI Page Generation Protocol

Gardener bietet fünf Ebenen von Wahrheitsquellen für KI: Die öffentliche API-Liste beantwortet "welche stabilen Namen und Einträge dürfen verwendet werden", die Fähigkeitsliste beantwortet "ob die regulären Fähigkeiten der Branche implementiert sind", die Komponentenliste beantwortet "was gibt es", die Tool-Klassenliste beantwortet "was ist der genaue Klassenname" und die Rezeptliste beantwortet "wie man eine komplexe Seite startet".

{
  "intent": {
    "page": "enterprise.cms.editor",
    "platform": "electron",
    "density": "compact",
    "direction": "ltr"
  },
  "selectionOrder": [
    "capability",
    "recipe",
    "components",
    "utilities",
    "themeAxes"
  ],
  "validation": [
    "selectors-exist",
    "states-covered",
    "keyboard-operable",
    "responsive",
    "rtl",
    "print"
  ]
}

Einschränkungen erzeugen

Zuerst prüfen gardener.capabilities.jsonbestätigen, dass die den Anforderungen entsprechenden Branchenfähigkeiten erreicht wurden.
Es ist verboten, Informationen zu erfinden, die nicht im Manifest vorhanden sind g-* Klasse.
Seiten mit hoher Wiederverwendung werden nicht von Grund auf neu zusammengesetzt, wenn Rezepte existieren.
Priorisieren Sie die Verwendung von semantischen Komponentenklassen; Werkzeugklassen behandeln nur lokale Unterschiede.
Interaktive Komponenten müssen registrierte Laufzeit- und spezifizierte ARIA-Strukturen verwenden.
Endpunkte, Tastatur, Fokus, Status, RTL, Druck und kontrastreiche Umgebungen vor der Ausgabe überprüfen.
Wenn es Lücken gibt, registrieren Sie diese als Framework-Fähigkeitsanforderungen und mischen Sie kein temporäres CSS in Systemschnittstellen.

Tauri/Electron

.g-desktop-shell Bietet ein festes Ansichtsfenster-Layout, das für Redakteure, KI-Tools und Super-CMS geeignet ist. Pass data-g-platform und data-g-os Details zur Steuerplattform.

<html data-g-platform="electron" data-g-os="windows"
      data-g-density="compact">
  <main class="g-desktop-shell">
    <header class="g-titlebar">...</header>
    <nav class="g-activitybar">...</nav>
    <section class="g-workbench">...</section>
    <aside class="g-desktop-inspector">...</aside>
    <footer class="g-desktop-statusbar">...</footer>
  </main>
</html>

Sichere Brücken

// Electron renderer
import { bindElectronWindowControls } from "@gardener/css/electron";
bindElectronWindowControls();

// preload Nur Whitelist-Aktionen verfügbar machen
contextBridge.exposeInMainWorld("gardenerDesktop", {
  windowAction: action => ipcRenderer.send("gardener:window-action", action)
});

Aktivieren Sie keine Node-Integration im Renderer und setzen Sie keinen IPC auf der Seite frei. Der Adapter akzeptiert nur Minimieren, Maximieren, Schließen und Ziehen von Whitelist-Aktionen.

On-Demand Builds, Typen, Cross-Version-Kompatibilität und Release-Zugriff

1.0.0 Roll fünf Plattformen, 28 Komponentenpakete, formale Komprimierung und Performance-Budgets auf die gemessene Baseline der vorherigen Version und aktualisieren Sie den öffentlichen Vertrag auf Stable, weiterhin Typen, Cross-Version-Kompatibilität und echten npm Release-Paketzugang beibehalten.gardener.builds.jsonRegistriert alle 5 Plattformprofile, 28 Komponentenpakete, 506 Komponentenzuordnungen zu einem oder mehreren echten Besitzpaketen, Selektorsignaturen, Browserziele, Builderparameter und SHA-256/SRI für alle 42 Produktionsartefakte;gardener.performance.jsonSpeichern Sie die Ergebnisse für Roh-, Gzip-, Brotli-, Kompressionsverhältnis und npm-Paketvolumen jedes offiziellen Builds.

TypeScript ist Cross-Version kompatibel

Builds werden automatisch von der öffentlichen API generiert gardener.d.ts、gardener.tauri.d.ts und gardener.electron.d.ts. 66 Verhaltensweisen und 75 Ereignisse bilden einen vollständigen wörtlichen Vereinigungstyp;npm run test:types Kompilieren Sie echte Verbraucher im strikten TypeScript-Modus, der Standard- und benannte Exporte, Verhaltensfabriken, Toasts, Instanzabfragen und zwei Arten von Desktop-Brücken abdeckt.

gardener.compatibility.json 1.145 von 0.9.0 übernommene Verträge wurden verfestigt, einschließlich aller 47 Paketeinträge, CSS-Ebenen, Themen, Laufzeiten, Dateneigenschaften, Adapter, 506 Komponenten und 52 Rezepte.npm run verify:compatibility Nachfolgende 1.x-Hinzufügungen zulassen und Löschungen ohne Migrationspfade verbieten; Beim stabilen Grenzwert 1.0.0 werden vorhandene Einträge auch umgekehrt überprüft, um festzustellen, ob sie fehlen. Veraltete Einträge bleiben in mindestens zwei Nebenversionen bestehen und können nur in einer neuen Hauptversion entfernt werden. Seine geschlossene Struktur besteht aus Kompatibilitätsschema Einschränkungen.

Das Paket unterstützt explizit Node.js >=18.18, Chrome/Edge/Firefox 100+, Safari/iOS 15.4+ und ESM; Hauptportal und Desktop-Adapter stellen Bedingungen bereit types Exportieren. Die automatische Laufzeitinitialisierung ist als gekennzeichnet sideEffects, um ein versehentliches Löschen durch den Packager zu verhindern.npm run verify:package Überprüft die Whitelist des echten NPM-Pakets, jedes Exportziel, jede Typdatei, Entwicklungsverzeichnislecks und Publint;prepublishOnly Durchsetzung abgeschlossen release:verifyund aktivieren Sie öffentliche Pakete und npm Provenance.

5 Plattformdateien

Datei	Paketeintrag	Exklusivschicht	Betriebsumgebung
web	`./platform/web.css`	Generische Komponenten, ausgenommen mobile/desktopspezifische Kombinationen	PC und responsive Webseiten
mobil	`./platform/mobile.css`	Universalkomponenten + mobile / mobile Zusammensetzungen	Mobile Web, PWA, Hybrid WebView
Desktop	`./platform/desktop.css`	Gemeinsame Komponenten + Desktop / Desktop-Kompositionen	Desktop Browser und Application Shell
tauri	`./platform/tauri.css`	Unabhängiger leichter Eintrag Vererbung Desktop CSS + Tauri Adapter	Tauri v2
Elektron	`./platform/electron.css`	Unabhängiger leichter Eingang Vererbung Desktop CSS + Electron Security Bridge Adapter	Electron Renderer

npm run build:platform -- --platform web
npm run build:platform -- --platform mobile --out dist/custom/mobile-app
npm run build:platform -- --platform tauri --out dist/custom/tauri-app

Gleichzeitige Generierung von lesbarem CSS pro Verzeichnis, formal .min.css, externe Quellzuordnung und geschlossenes Build-Manifest; Tauri/Electron kopiert auch den entsprechenden JavaScript-Adapter. Der offizielle Zugang zum Plattformpaket ist vereinheitlicht mit .css beenden und überprüfen, ob die verschachtelte Vererbung durch den CSS-Verpackungstest des realen Installationspakets vollständig erweitert werden kann.

28 stabile Komponentenpakete

layouts、regions、primitives、grid、basic、forms、form-compositions、navigation、navigation-compositions、feedback、data、data-compositions、selection-compositions、content-compositions、auth-compositions、commerce-compositions、mobile-compositions、extended、page、help、recipes、desktop、desktop-compositions、solution-compositions、catalog、ai、ai-extended、ai-compositions。

./component/*.css Standardisieren Sie den Export aller oben genannten offiziellen komprimierten Pakete../component/* Als kompatibler Alias reserviert. Beim Erstellen nach Komponentennamen hängt der Builder vom Klassenselektor und ab data-g-* Echte Quellcode-Treffer für Eigenschaften, die 506 Komponenten in ein oder mehrere vollständige zugehörige Pakete auflösen, anstatt einzelne Selektoren abzuschneiden, sodass Pseudoklassen, Zustände, Animationen, Unterteile, Containerabfragen und Abhängigkeitsregeln nicht verloren gehen.

npm run build:custom -- --components button,card,dialog --out dist/custom/account-ui
npm run build:custom -- --packs forms,auth-compositions --no-utilities --out dist/custom/auth
npm run build:custom -- --packs ai,ai-extended,ai-compositions --out dist/custom/ai

Parameter umfassen --platform、--components、--packs、--utilities / --no-utilities und --out. Unbekannte Plattformen, Pakete oder Komponenten fallen sofort aus; Die Ausgabeliste ist gegeben durch Custom Build Schema Verifizierung.

Jedes benutzerdefinierte Build-Manifest generiert auch SHA-256 und Standard-SRI für lesbares CSS, komprimiertes CSS, Source Map und den Tauri / Electron-Adapter, der mit dem Paket kopiert wurde. Der Empfänger kann dateiweise überprüfen, ob die Lieferung vollständig ist und nicht ersetzt wurde, ohne sich auf die Baumaschine zu verlassen.

Reproduzierbare Builds auf Byte-Ebene

npm run verify:reproducible zeichnet die aktuelle offizielle Ausgabe auf, führt den gesamten Build erneut aus und vergleicht dann CSS, JavaScript, Quellkarte, Metadaten und gardener.builds.json . Alle nicht deterministischen Unterschiede im Ausgabemanifest oder Dateiinhalt schlagen fehl; Der Leistungsbericht nimmt nicht am Bytevergleich teil, da er die Ausführungszeit enthält, sein numerischer Vertrag wird jedoch vom Budgetbefehl unabhängig überprüft.

Formale Komprimierung und Performance Budgetierung

Formales CSS und JavaScript verwenden esbuild für die Komprimierung auf Syntaxebene, ohne regelmäßige Ersetzungen zu verwenden; Der Hauptkomprimierungseintrag und jeder benutzerdefinierte Build generieren eine nachvollziehbare externe Quellzuordnung. Komprimiertes CSS verwendet ein stabiles MIT-Banner, das sich mit den Versionen nicht ändert, um zu vermeiden, dass reiner Versionstext die Brotli-Grundlinie stört. Unkomprimiertes CSS und Laufzeit liefern immer noch genaue Versionen.npm run budget Berechnen Sie mit gzip Level 9 und Brotli-Qualität 11 gleichzeitig Raw, gzip und Brotli für alle 42 offiziellen Komprimierungsprodukte und überprüfen Sie das Komprimierungsverhältnis von vollständigem CSS, Runtime und npm pack --dry-run Anzahl der gepackten, entpackten und zurückgegebenen Dateien. 1.0.0 verwendet die tatsächlichen Messergebnisse der versiegelten Version 0.9.0 als unmittelbare Basislinie und begrenzt das Rohwachstum jedes Produkts auf nicht mehr als 2 %, gzip/Brotli auf nicht mehr als 3 %, gepacktes NPM-Paket auf nicht mehr als 3 %, entpacktes auf nicht mehr als 2 % und die Anzahl der Dateien auf nicht mehr als 10 %; Die fünf Plattformprodukte verfügen alle über direkte historische Basislinien. Die Messungen des Einschlussvolumens werden auf 4 KiB gepackt und 64 KiB ungepackt aufgerundet und bilden eine deterministische Obergrenze, die das tatsächliche Einschlussvolumen nicht unterschätzt und nicht durch den in sich geschlossenen Verdichtungszyklus des Leistungsberichts beeinflusst wird. Wenn entweder die absolute Obergrenze oder die relative Obergrenze fehlschlägt, wird die Freigabe blockiert.

Kontrolliertes Produkt	rohe Obergrenze	gzip obere Grenze	Obergrenze für Brotli
gardener.min.css	1,050.000 B	145,000 B	65.000B
gardener.core.min.css	65.000B	9,000B	6,000B
gardener.themes.min.css	60.000B	7,500 B	5,000B
gardener.utilities.min.css	550,000B	80,000B	18.000B
gardener.components.min.css	400.000B	55.000B	42.000B
gardener.ai.min.css	30.000B	6,000B	5,000B
gardener.runtime.min.js	105,000 B	30.000B	25.000B
Plattform/web.min.css	1.000.000 B	140.000B	60.000B
Plattform/mobile.min.css	1,020.000 B	142.000 B	62.000B
platform/desktop.min.css	1,030,000 B	143.000 B	63.000B
Plattform/tauri.min.css	256 B	256 B	256 B
Plattform/electron.min.css	256 B	256 B	256 B

Die obige Tabelle listet 12 wichtige CSS/Runtime-Einträge auf; das Budgetdokument listet auch die Abdeckung von 2 Desktop-Adaptern, 28 Komponentenpaketen und insgesamt 42 offiziell komprimierten Produkten auf, ohne eine allgemeine Freigabeobergrenze zu verwenden, um einzelne Produktinspektionen zu ersetzen.

npm Paketbudget ist 2.050.000 B gepackt, 16.500.000 B unverpackt, bis zu 92 Dateien. Haushaltsquelle performance-budgets.json Management und separat unterliegen Haushaltsschema und Berichtsschema Schutz.

npm run build       # Vollständig, abgestuft, 28 Komponentenpakete und 5 Plattformdateien
npm run verify:reproducible # SHA kontinuierlich Datei für Datei erstellen und überprüfen-256
npm run budget      # 42 Absolutes/relatives Budget-Gatekeeping für Produktions- und NPM-Pakete
npm run verify:compatibility # 1,145 Punkt 0.9.0 Öffentlicher Auftrag
npm run test:types # TypeScript Strenge Verbraucherverifizierung
npm run verify:package # npm Whitelists, Exportziele und Publint
npm run test:build  # 10 Anwendungsfälle für Build, Kompatibilität, Typ, Release und Fehlerpfad

Zugänglichkeit und Internationalisierung

Das Framework bietet eine Grundlage für Fokusstile, reduzierte Bewegung, hohen Kontrast und erzwungene Farben, aber semantische Namensgebung und Inhaltsordnung bleiben in der Verantwortung des Seitenautors.

TastaturTabs, Menü, Baum, Gitter, Karussell, Splitter, Dialog und Kommandopalette haben alle Tastaturpfade.

FokusDialog und Befehlsfeld beschränken den Fokus, stellen die Triggerquelle nach dem Schließen wieder her; unsichtbare Elemente verlassen die Tab-Reihenfolge.

NameIcon Buttons erfordern Aria-Label; Formulare erfordern Label, Aria-Label oder Aria-Labelledby.

Dynamischer StatusToast verwendet Status / Alarm; Erweiterung, Auswahl, aktuelles Element synchronisiert über den ARIA-Status.

RichtungLayout verwendet logische Eigenschaften und Komponenten überschreiben Animationsrichtung und Pfeile unter RTL.

Animationprefers-reduced-motion komprimiert die Animationsdauer und schaltet das reibungslose Scrollen aus.

Liefer-Checkliste

Die Seite hat das Richtige lang und eindeutiger Titel.
Die Überschriftenhierarchie ist kontinuierlich und das Wahrzeichen hat einen identifizierbaren Namen.
Alle Bilder erfüllen ihren Zweck alt; Verwenden Sie leeres Alt für dekorative Bilder.
Tastatur nur für kritische Aufgaben, Fokus ist immer sichtbar.
Text- und Statusfarben entsprechen WCAG AA; kann sich nicht ausschließlich auf Farbe verlassen, um den Status auszudrücken.
Noch funktionsfähig bei 200% Skalierung, RTL, Reduced Motion, Forced Colors.
Mobile Touch-Ziele verwenden eine Touch-Dichte von mindestens etwa 44px.

1.0.0 Automatisierte Testmatrix

Zugangskontrolle	Umwelt	Menge	Überschreiben
`test:build`	Node.js + esbuild + Ajv	10	Plattformgrenzen, realer Komponentenbesitz, formale Komprimierung, Source Map, SHA-256/SRI, reproduzierbare Builds, absolute/relative Budgets, Typen, Kompatibilitätsgrundlinien, Supportrichtlinien, benutzerdefinierte Builds, Fehlerpfade und npm-Paketinstallationsauflösung
`test:browser`	Desktop Chromium + WebKit	48	Alle 21 Beispiele, Startseite und Dokumentation, Konsole, Anfrage, Stil, horizontaler Überlauf, Dialogtastatur und Fokuslebenszyklus
`test:browser:firefox`	Desktop Firefox	24	Gleiches wie Desktop-Standardzugriff; ausgeführt auf Host oder CI mit Playwright Firefox System Runtime
`test:mobile`	Pixel 7 Chromium + iPhone 13 WebKit	52	Alle 21 Beispiele, Home Landing Page und Dokumentation, Reflow, 44px Touch Target, Bottom Sheet, 320px schmaler Bildschirm und Landschaftsbildschirm
`test:a11y`	Chromium+Axe	25	21 Beispiele und Home zwei Seiten von WCAG 2 A/AA, 2.1 A/AA, 2.2 AA, plus Tastatur, Focus, RTL, Reduced Motion, Forced Colors
`test:html`	parse5	24	21 Beispiele, Home und Document Parsing, Duplicate IDs, ARIA Referenzen, Sprachen, Titel, Viewports und Listen

npm run test:html             # 24 Anwendungsfälle für HTML-Strukturen
npm run test:browser          # Chromium + WebKit，48 Desktop-Anwendungsfälle
npm run test:browser:firefox  # Firefox Eigenständige Zugangskontrolle, 24 Desktop-Anwendungsfälle
npm run test:browser:all      # Chromium + Firefox + WebKit，72 Desktop-Anwendungsfälle
npm run test:mobile           # Pixel 7 + iPhone 13，52 mobile Anwendungsfälle
npm run test:a11y             # Axe、Tastatur- und Umgebungsmatrix, 25 Anwendungsfälle
npm run test:e2e              # Standardmäßig 125 echte Browser-Anwendungsfälle
npm run test:types            # TypeScript Strenge Verbraucherzugriffskontrolle
npm run verify:compatibility  # 1,145 Artikel 0.9.0 Kompatible Baseline
npm run verify:package        # npm Dateien, Exporte und Publint
npm test                      # 281 Standard-Automatisierungsanwendungsfälle und alle statischen, Vertrags-, Typ-, kompatiblen, Release-, reproduzierbaren und Budget-Gates

Axe Gate blockiert alle Verstöße, die durch die ausgewählten WCAG A/AA-Regeln erkannt werden, übergibt sie ohne Herabstufung durch Auswirkungen und gibt die Regel, den Knotenwähler, HTML und die Zusammenfassung zur Behebung aus. Die Automatisierung kann das Testen von menschlichen Bildschirmlesern nicht ersetzen; Produktionsprodukte sollten weiterhin NVDA/JAWS/VoiceOver für unternehmenskritische Walkthroughs verwenden.

Druck und Dokumentenausgabe

Die grundlegende Druckebene wechselt zwischen schwarzem Text und weißem Hintergrund, blendet schwebende Ebenen und feste Navigation aus, wiederholt Tabellenüberschriften, verhindert, dass sich Karten und Medien über Seiten verteilen, und ermöglicht das automatische Umbrechen langer Codes. Vollraster zusätzlich erhältlich g-print-col-1 An g-print-col-24, Druckversatz und sichtbare/versteckte Klassen, die für die unabhängige Neuanordnung innerhalb der Papierbreite verwendet werden. Berichte, Rechnungen und CMS-Editoren verfügen auch über Druckfunktionen auf Rezeptebene.

<button class="g-no-print">Bearbeiten</button>
<section class="g-report">
  <header class="g-report-header">...</header>
  <table class="g-invoice-lines">...</table>
  <footer class="g-signature-line">...</footer>
</section>

Zu den verfügbaren Werkzeugklassen gehören: g-print-hidden、g-print-block、g-print-break-before und g-break-inside-avoid。

Anpassen, Inspizieren und Release

Projektabdeckung

@layer gardener.overrides {
  :root {
    --g-font-sans: Inter, system-ui, sans-serif;
    --g-reading-max: 72ch;
  }

  [data-brand="acme"] {
    --g-color-primary: #126b41;
    --g-color-primary-text: #0d5733;
  }
}

Rahmenprüfung

npm run build      # Vollständig, abgestuft, 28 Komponentenpakete und 5 Plattformdateien
npm run build:platform -- --platform mobile # Plattformorientierte Konstruktion
npm run build:custom -- --components button,dialog # Komponentengesteuerter Build
npm run verify:reproducible # Reproduzierbare Konstruktion der Zugriffskontrolle auf Byte-Ebene
npm run budget     # raw / gzip / Brotli、Absolute/relative und NPM-Paketbudgets
npm run verify:compatibility # 0.9.0 Versionsübergreifende Basislinie für öffentliche Verträge
npm run test:types # TypeScript Strenge Verbraucherverifizierung
npm run verify:package # npm Dateien, Exportziele und Publint
npm run test:schema # Ajv 2020-12 Überprüfen Sie elf Schemasätze
npm run test:build # 10 Anwendungsfälle für Build, Typ, Kompatibilität, Release und Fehlerpfad
npm run contracts  # Schema、Öffentliche API, Benennung und Cross-Manifest-Verträge
npm run test:runtime # 66 Verhalten und DOM-Lebenszyklus
npm run test:html   # Beispiel und HTML-Struktur von Home
npm run check      # Konsistenz von Theme, Komponente, Laufzeit und Manifest
npm run audit      # Token、Kontrast, Paketgrenzen, Export und Version
npm run validate   # Rezepte, Beispielklassennamen und grundlegende Barrierefreiheit
npm run test:e2e   # Mehrere Browser, Mobil und Ax
npm test           # Führen Sie alle Rahmenprüfungen durch

node website/scripts/build-css-catalog.mjs
node website/scripts/check.mjs
node website/scripts/check-coverage.mjs  # Überprüfung auf Null-Auslassungen im Dokument

Neue Fähigkeiten müssen synchronisiert werden

Implementieren Sie CSS oder Runtime.
Registrierung metadata/components.json。
Branchenfähigkeitsregistrierung metadata/capabilities.json, komplexe Seitenregistrierung metadata/recipes.json。
Überprüfen Sie die vollständige Statusmatrix und die Umgebungsmatrix.
Füge lauffähige Beispiele und Validierungseingang hinzu.
Rebuild alle Manifeste und führen Browser-Regressionen.

Der Verzeichnisbrowser der Dokumentseite liest direkt css/dist, Vue, React, AngularJS und Blazor metadata / dist Liste. Daher besteht nach der Erstellung des Frameworks keine Notwendigkeit, CSS oder die Anzahl der Komponenten, Verhaltensnamen, Eingänge oder Toolklassen-Suchdaten der vier Sätze von Anpassungsebenen manuell zu aktualisieren.