Gardener Documentation

Démarrage rapide

Gardener ne peut utiliser que CSS, ou charger un runtime de dépendance zéro pour un comportement interactif. Le paquet complet comprend tous les thèmes, composants et classes d'outils par défaut.

<!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">Commencer</button>
  </main>
  <script type="module" src="gardener.runtime.js"></script>
</body>
</html>

Visualisation par défaut :Toile blanche, texte neutre, coins arrondis de base 4px, ombre retenue. Les coins arrondis et la hiérarchie forte doivent être choisis explicitement et ne pas polluer les pages d'affaires ordinaires.

Commande de sélection recommandée

Confirmer la destination et le type de page.
Privilégier la sélection de structure à partir des recettes de page.
Remplir la fonction de composants enregistrés.
N'utilisez que des classes d'outils pour gérer la disposition et l'espacement locaux.
Enfin définir l'axe du sujet et vérifier la matrice d'environnement complète.

Installation et colis

La version actuelle n'a aucune dépendance d'exécution tierce. Disponible via le gestionnaire de packages ou copié directement dist/ .

npm install @gardener/css

Exportation	Contenu	Scénarios d'utilisation
`@gardener/css`	Entrée CSS complète + temps d'exécution par défaut	Utiliser directement hors de la boîte
`core.css`	Token, axe thématique, remise, base	Bibliothèque de composants autoconstruites
`themes.css`	42 Mode couleur et affichage principal	Réutiliser uniquement les sujets
`utilities.css`	Toutes les classes d'outils réactives	Formule atomique page
`components.css`	Composants génériques non-AI et rasters complets	Système commercial
`ai.css`	composants spécifiques à l'IA	Chat, agent, outil de génération
`./tauri`	Adaptateur de commande de fenêtre Tauri	Bureau WebView
`./electron`	Adaptateur de pont de sécurité Electron	Client de bureau
`./manifest`	Liste des composantes et de l'environnement	Outils d'automatisation et d'IA
`./utilities-manifest`	Déclaration de classe d'outils et conditions de réponse	Recherche de nom de classe exacte
`./recipes`	Recette de page haute fréquence	Sélection du squelette de la page
`./capabilities`	État de la mise en oeuvre des capacités de l'industrie et matrice d'interface	Prévenir les omissions au niveau du concept
`./public-api`	Nommage public, comportements, événements et contrats d'adaptateur	Générateurs et outils d'intégration
`./builds`	Archives des plates-formes, ensembles de composants, propriété des composants et contrats de construction	Générer par plate-forme/composante
`./performance`	déclaration de la taille des paquets bruts, gzip, Brotli et npm	Portail de performance de sortie
`./components-manifest`	Liste des sources de composants	Récupération de composants et génération de codes
`./schema/*`	Dix séries de schéma JSON fermé	Vérification du contrat

Groupe par couche

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

Projet Gardener Vue 3

@gardener/vue est la couche d'adaptation officielle Vue 3 de Gardener CSS 1.0.0, la version actuelle est 1.0.0 Stable, supports Vue >=3.4.0 <4.0.0 avec Node.js >=18.18. Il mappe les 506 composants CSS et les 66 comportements DOM élément par élément, tout en fournissant 538 exportations d'exécution racine, 21 exportations de type TypeScript, 29 points d'entrée de package et 28 proxys de package CSS de composants.

506Composante G*

538Exportation du runtime racine

29Entrée publique de colis

28Paquet de composants CSS

Installation et Plugins mondiaux

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");

Couverture complète des options de plug-in prefix、components、directive et initialize. Besoin de personnaliser le préfixe, d'enregistrer uniquement certains composants, de fermer v-gardener ou l'initialisation d'exécution différée doit être transmise createGardenerVue(options) Créez un plug-in.

Composants et thèmes sur demande Fournisseur

<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">Enregistrer</GButton></GCard>
  </GardenerProvider>
</template>

GardenerProvider Les dix axes thématiques de sont theme、mode、neutral、typography、shape、density、elevation、motion、platform et os. La maison et les échantillons restent blancs avec des coins clairs et petits arrondis par défaut ; le mode sombre n’est pas activé par défaut.

Propriétés publiques, transmission transparente et Ref de tous les composants

Propriétés	Objet	Accord
`as`	Modifier l'élément racine ou le composant Vue	Préserver la classe, les propriétés et les fentes Gardener
`variant`	Appliquer la variante	Accepte une chaîne ou un tableau de chaînes
`state`	État du composant de la demande	Convertir en `is-*` Classe de statut
`config`	Déclarer la configuration de l'exécution	Convertir en correspondant `data-g-*` Propriétés
`initialize`	Initialisation du comportement de contrôle DOM	Par défaut `true`
`modelValue`	Valeur de liaison bidirectionnelle Vue	Les événements de Gardener natifs et personnalisés sont pris en charge
`modelEvent`	Spécifiez les événements de synchronisation personnalisés	Utilisation `gardener:*` Nom de l'événement
`modelKey`	Obtenez la valeur de la charge utile de l'événement	Lire `CustomEvent.detail` Spécifier le champ

Tous les attributs natifs, événements DOM et emplacements sont transmis. Modèle de composant Réf. divulgation unifiée element、getInstance() et refresh(). Utilisé dans les structures composites telles que les boîtes de dialogue et les tiroirs GardenerPart Créez des éléments internes standard pour éviter de rompre les contrats CSS et de sélection de comportement.

v-modèle, événements personnalisés et instructions

<GInput v-model="keyword" />

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

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

vGardener(nom du modèle v-gardener) Montez, actualisez et détruisez les comportements spécifiés ainsi que le cycle de vie de Vue. Normes d'utilisation des entrées natives update:modelValue;Composants complexes réussis modelEvent et modelKey Événements personnalisés Bridge Gardener selon le même protocole.

Tous les 7

useGardenerCapacités d'accès, d'initialisation et de destruction

useGardenerBehaviorComportement du bind et instances d'accès

useGardenerEventÉcoute sécuritaire pour jardinier :* événements

useGardenerThemeLire et mettre à jour l'état du thème dix axes

useGardenerToastCréer et gérer des Toasts

useTauriWindowControlsBouton de fenêtre Bind Tauri et cycle de destruction

useElectronWindowControlsLiaison du pont de sécurité et du cycle de destruction Electron

Entrée Web, mobile et de bureau

Entrée	Contenu	Scénarios applicables
`@gardener/vue/style.css`	Style complet Gardener	Hors de la boîte et du prototype
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Entrée de style en couches	Construction personnalisée
`platform/web.css`	Capacités Web générales	PC, site Web responsive, tableau de bord
`platform/mobile.css`	Combinaison universelle + mobile	Page web mobile, PWA, WebView
`platform/desktop.css`	Combo universel + bureau	Navigateur de bureau et shell d'application
`platform/tauri.css`	Portail de bureau + adaptation Tauri	Fenêtre Tauri
`platform/electron.css`	Portail de bureau + adaptation Electron	Fenêtre Electron
`component-css/*`	28 composants stables de paquets CSS	Charge par domaine fonctionnel

Entrée racine recommandée pour les applications générales ou @gardener/vue/components Obtenez la meilleure secousse d'arbre ; @gardener/vue/bundle.min.js est une entrée de fichier unique précompressée. L'importation SSR n'accède pas aux objets globaux du navigateur et le comportement n'est initialisé qu'une fois le composant monté, il peut donc être utilisé pour le rendu côté serveur et l'hydratation.

Toutes les 29 entrées publiques de colis

Javascript :.、./components、./component、./composables、./directives、./plugin、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Style :./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 et ./component-css/*. Informations sur le contrat et le forfait :./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exportations de produits non-composants et types TypeScript

32 runtimes non-composants exportés sous :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 Composables et vGardener。

21 types exportés sous :GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentKind、GardenerComponentPublicInstance、GardenerConfigValue、GardenerDirectiveOptions、GardenerDirectiveValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerPlatform、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerVueComponentName、GardenerVueOptions。

Système public, métadonnées et accès à l'édition

API publique、Compatibilité et Rendement Les deux ont des schémas JSON qui éteignent les champs inconnus;Catalogue des composants JSON Lisible directement par l'IA, les générateurs de code et les outils de documentation. Le budget pour le package entièrement compressé est de 328 220 B raw, 51 602 B gzip, 26 926 B Brotli ; célibataire GButton Le résultat réel de la secousse de l'arbre est de 3 718 B. La version déterministe couvre 87 fichiers, le package npm vérifie 98 fichiers, 284 183 B compressés, 3 729 929 B décompressés.

cd vue
npm run release:verify

# Construire, générer des remplacements, des schémas, des types Vue SFC, des unités et du cycle de vie DOM、
# Chromium / WebKit / Firefox / Mobile, WCAG A/AA, exemple、
# Tree shake, builds reproductibles, budgétisation des performances, packaging npm et publication

Tous les composants 506 Vue

Les répertoires suivants sont fusionnés directement Vue API publique et Métadonnées des composantes, itemizes Vue noms d'exportation, noms CSS, catégories, types, sélecteurs, variantes, états, widgets, comportements et plateformes. Il ne s'agit pas d'un échantillon en vedette; les 506 éléments sont dans le même répertoire consultable.

Lecture du manifeste des composants Vue...

Gardener React Projet

@gardener/react est la couche d'adaptation officielle React de Gardener CSS 1.0.0, la version actuelle est 1.0.0 Stable, prend en charge React >=18.3.0 <20.0.0 avec Node.js >=18.18. Il mappe les 506 composants CSS et les 66 comportements DOM élément par élément, tout en fournissant 538 exportations d'exécution racine, 22 exportations de type TypeScript, 29 points d'entrée de packages publics et 28 proxys de packages CSS de composants.

506Composante G*

538Exportation du runtime racine

29Entrée publique de colis

28Paquet de composants CSS

Composants d'installation et de racine

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">Enregistrer</GButton></GCard>
  </GardenerProvider>,
);

Les composants prennent tous en charge l'importation nommée à la demande ; le constructeur peut démarrer à partir de l'entrée racine ou @gardener/react/components Secouez l'arbre. Chaque composant généré conserve le type d'attribut exact de sa balise HTML par défaut, par ex. GButton Accepter type="submit"，GInput Accepter type et autoComplete, tout en permettant au as Basculez vers d'autres éléments natifs ou composants React.

Fournisseur et dix axes thématiques

<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="Portée du sujet d'application"
>
  <App />
</GardenerProvider>

GardenerProvider Les dix axes thématiques de sont theme、mode、neutral、typography、shape、density、elevation、motion、platform et os. Il transmet également de manière transparente le nom de classe, le style, l'ID, l'ARIA et d'autres attributs natifs ; useGardenerTheme pour les sujets d'alphabétisation, useGardenerThemeContext pour lire directement le contexte. La valeur par défaut est toujours la lumière blanche avec de petits coins arrondis, et le thème sombre ne sera pas automatiquement activé.

10 propriétés communes pour tous les composants

Propriétés	Objet	Accord
`as`	Modifier l'élément racine ou le composant React	Conserver la classe Gardener, les propriétés, les enfants et Ref
`variant`	Appliquer la variante	Chaîne ou tableau de chaînes en lecture seule
`state`	État du composant de la demande	Convertir en `is-*` Classe de statut
`config`	Configuration du comportement de la déclaration	Convertir en correspondant `data-g-*` Propriétés
`initialize`	Initialisation du comportement de contrôle DOM	Par défaut `true`
`value`	Valeur contrôlée	Soutenir les formes natives et les événements sur mesure Gardener
`defaultValue`	Valeur initiale non contrôlée	case à cocher booléen cartographié à `defaultChecked`
`valueEvent`	Spécifier l'événement de synchronisation des valeurs	Disponible `gardener:*` Nom de l'événement
`valueKey`	Obtenez la valeur de la charge utile de l'événement	Lire `CustomEvent.detail` Spécifier le champ
`onValueChange`	Recevez une nouvelle valeur avec l'événement original	Dédoublement automatique des entrées/changements natifs

Attributs natifs, événements, enfants et className Tous sont transmis de manière transparente. Composant Réf public unifié element、getInstance() et refresh(); Des structures composites sont disponibles GardenerPart Créer des composants internes. case à cocher booléenne value Utilisation checked, radio conserve la valeur de chaîne pour garantir une sémantique cohérente des formulaires React.

Valeurs contrôlées, événements personnalisés et instances de comportement

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

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

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

useGardenerBehavior Lier 66 comportements à un élément, un document ou un composant. Les manipuler et les détruire au déchargement ;initialize L'initialisation automatique des composants peut être désactivée pour faciliter la prise en charge unifiée par le moteur d'exécution au niveau de la page. Le comportement consistant à transmettre explicitement un attribut de données est prioritaire sur la génération d'une valeur par défaut.

Tous les 7 crochets

useGardenerCapacités d'accès, d'initialisation, d'observation et de destruction

useGardenerBehaviorComportement du bind et instances d'accès

useGardenerEventÉcoute sécuritaire pour jardinier :* événements

useGardenerThemeLire et mettre à jour l'état du thème dix axes

useGardenerToastCréer et gérer des Toasts

useTauriWindowControlsBouton de fenêtre Bind Tauri et cycle de destruction

useElectronWindowControlsLiaison du pont de sécurité et du cycle de destruction Electron

Entrée Web, mobile et de bureau

Entrée	Contenu	Scénarios applicables
`@gardener/react/style.css`	Style complet Gardener	Hors de la boîte et du prototype
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Entrée de style en couches	Construction personnalisée
`platform/web.css`	Capacités Web générales	PC, site Web responsive, tableau de bord
`platform/mobile.css`	Combinaison universelle + mobile	Page web mobile, PWA, WebView
`platform/desktop.css`	Combo universel + bureau	Navigateur de bureau et shell d'application
`platform/tauri.css`	Portail de bureau + adaptation Tauri	Fenêtre Tauri
`platform/electron.css`	Portail de bureau + adaptation Electron	Fenêtre Electron
`component-css/*`	28 composants stables de paquets CSS	Charge par domaine fonctionnel

SSR, Hydratation et Cordage de bureau

L'entrée du package peut être importée en toute sécurité côté serveur. Les 506 composants sont passés par le SSR élément par élément et le comportement n'est initialisé que pendant le cycle de vie de l'effet ; la marque côté serveur Hydration ne génère pas d’erreurs récupérables et est compatible avec StrictMode. Tauri et Electron sont utilisés respectivement @gardener/react/tauri et @gardener/react/electron Portails indépendants afin qu'aucun des deux portails n'exporte accidentellement l'API de pontage d'une autre plateforme.

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>;
}

Toutes les 29 entrées publiques de colis

Javascript :.、./components、./component、./hooks、./provider、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Style :./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 et ./component-css/*. Informations sur le contrat et le forfait :./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exportations de produits non-composants et types TypeScript

32 runtimes non-composants exportés sous :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 types exportés sous :GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerComponentProps、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerGeneratedComponent、GardenerOwnProps、GardenerPlatform、GardenerReactComponentName、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerValueChange。

Schéma public, rendement et accès à la mainlevée

API publique、Compatibilité et Rendement Tous deux validés par JSON Schema avec des champs inconnus désactivés;Catalogue des composants JSON Lisible directement par l'IA, les générateurs de code et les outils de documentation. La mesure réelle de l'emballage entièrement compressé est de 326 064 B raw, 50 126 B gzip, 26 381 B Brotli ; célibataire GButton Le résultat réel de l'arborescence est de 2 599 B. La version déterministe couvrait 87 fichiers, le package npm a vérifié 98 fichiers, 262 706 B compressés, 2 438 775 B décompressés et l'audit de sécurité des dépendances de production ne comportait aucune vulnérabilité.

cd react
npm run release:verify

# API de build et publique, schéma, TypeScript, 506 Component SSR, hydratation, cycle de vie DOM、
# Chromium / WebKit / Firefox / Pixel 7 / iPhone 13、WCAG A/AA、
# Tree shake, builds reproductibles, budgétisation des performances, packaging npm et publication

Tous les composants 506 React

Les répertoires suivants sont fusionnés directement React Public API et Métadonnées des composantes, itemizing React noms d'exportation, noms CSS, catégories, types, balises par défaut, sélecteurs, variantes, états, widgets, comportements et plateformes. Il ne s'agit pas d'un échantillon en vedette; les 506 éléments sont dans le même répertoire consultable.

Lecture du manifeste des composants React...

Gardener AngularJS Projet

@gardener/angularjs est la couche officielle d'adaptation du système AngularJS 1.x pour Gardener CSS 1.0.0, la version actuelle est 1.0.0 Stable. Il valide AngularJS >=1.8.2 <1.9.0 avec Node.js >=18.18, mappage élément par élément des 506 composants CSS et des 66 comportements DOM, et fournit 535 exportations d'exécution racine, 24 exportations de type TypeScript, 29 points d'entrée de packages publics et 28 proxys de packages CSS de composants.

Limites du système hérité :AngularJS a mis fin au support officiel et il n'existe aucun avis de sécurité connu pour le framework lui-même qui n'ait pas de correctifs en amont. Cette couche d'adaptation angular Conservez-le en tant que dépendance externe, ce qui ne l'intègre pas dans le produit Gardener et ne couvre pas les risques au niveau du framework. Les nouveaux projets sont prioritaires pour choisir des entrées Vue, React ou indépendantes du framework ; les projets existants doivent également mettre en œuvre la désinfection des entrées, le CSP, la liste blanche des ressources, l'autorisation minimale du pont de bureau et le plan de migration. Pour connaître les exigences complètes, voir Référence de sécurité AngularJS。

506Générer des instructions de composant

535Exportation du runtime racine

29Entrée publique de colis

28Paquet de composants CSS

Installation, chargement ESM et usine de modules

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]);

Les packages npm AngularJS ne sont pas des ESM natifs et doivent donc être utilisés dans des outils de construction comme Vite import "angular/angular.js" Importer les effets secondaires de window.angular Transfert explicite createGardenerAngularJS;Ne comptez pas sur un système instable import angular from "angular" Importé par défaut. Le package Gardener lui-même ne lit pas AngularJS global et l'entrée racine est sûre pour l'analyse de la chaîne d'outils SSR.

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

components Accepte un nom de composant, un nom de directive AngularJS, ou un nom d'exportation ESM, limité par 506 types d'union ; des noms inconnus lanceront immédiatement une erreur. Les installations répétées de la même instance AngularJS, le nom du module et les options équivalentes sont idémpotents. Lorsque différents sous-ensembles de composants, dépendances ou options d'initialisation utilisent des modules du même nom, une erreur sera explicitement signalée pour empêcher l'obtention silencieuse de modules semi-enregistrés.

Directives sur les éléments, directives sur les attributs et sémantique

<gardener-provider gardener-theme="garden" gardener-mode="light" gardener-shape="small">
  <g-card gardener-variant="interactive">Contenu de la commande élément</g-card>
  <button g-button gardener-variant="primary" type="submit">Enregistrer</button>
  <input g-input ng-model="vm.keyword" aria-label="Mots-clés">
</gardener-provider>

Chaque composant commence par restrict: "EA" Prend en charge les formes d'éléments et d'attributs, par ex. <g-card> / gCard et <article g-card>. En ce qui concerne la sémantique native telle que bouton, saisie, sélection, formulaire, tableau, navigation, côté, etc., la priorité doit être donnée à l'utilisation d'attributs pour permettre aux claviers, aux soumissions de formulaires, à la validation du navigateur et aux technologies d'assistance de continuer à utiliser les comportements natifs.

Propriétés publiques pour les 8 composantes

Noms de propriétés AngularJS	Méthode d'écriture de modèles	Objet
`gardenerVariant`	`gardener-variant`	Appliquer des variantes de composants séparés de l'espace ou des virgules
`gardenerState`	`gardener-state`	Mapper un ou plusieurs `is-*` Classe de statut
`gardenerConfig`	`gardener-config`	Objet d'expression d'écoute de profondeur et mappage vers `data-g-*` Configuration
`gardenerInitialize`	`gardener-initialize`	Activer ou désactiver complètement l'initialisation du comportement DOM
`ngModel`	`ng-model`	Préserver les valeurs du modèle de formulaire natif AngularJS ou des composants personnalisés du pont
`gardenerValueEvent`	`gardener-value-event`	Sélectionner pour mettre à jour le modèle `gardener:*` Événements personnalisés
`gardenerValueKey`	`gardener-value-key`	De `CustomEvent.detail` Lire le champ spécifié
`gardenerOnValueChange`	`gardener-on-value-change`	Appeler l'expression et fournir `$value`、`$event` locaux

Le handle d’instruction est stocké dans angular.element(node).data("$gardenerHandle"), divulgation unifiée element、getInstance()、refresh() et destroy()。refresh() Le sous-arbre de nœuds sera d'abord détruit puis initialisé selon la configuration actuelle ; portée $destroy supprime l'événement et détruit l'instance de comportement.

ngModèle, formes natives et événements Gardener

<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">Courriel</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>

La sémantique du modèle d'entrée native, de zone de texte et de sélection est toujours gérée par AngularJS lui-même et ne sera pas couverte par la couche d'adaptation. ngModel.$render ou appel répété $setViewValue; la case à cocher contient les valeurs booléennes, la radio contient les valeurs des options et plusieurs sélections contiennent des tableaux. Le composant complexe Gardener met à jour le modèle via des événements et des utilisations personnalisés gardenerOnValueChange Recevez des valeurs de rappel cohérentes.

Commandes, services et thèmes dix axes communs

gGardenerTemplate writing g-gardener, déclare dynamiquement, commute et détruit les comportements arbitraires

gardenerProviderL'élément ou le formulaire d'attribut fournit un thème dix axes et initialise le sous-arbre

GardenerRuntimeinit · détruire · getInstance · émettre · observer

GardenerThemeattributs · appliquer · lire · effacer

GardenerToastafficher(options)

Couverture complète de l'axe thématique theme、mode、neutral、typography、shape、density、elevation、motion、platform et os, correspondant au modèle gardener-theme À gardener-os. L'échantillon par défaut conserve la lumière blanche et les petits coins arrondis.

Styles Web, mobile, de bureau et par domaine

Entrée	Contenu	Scénarios applicables
`@gardener/angularjs/style.css`	Style complet Gardener	Intégration progressive dans les systèmes existants
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Entrée de style en couches	Construction personnalisée
`platform/web.css`	Capacités Web générales	Site Web et tableau de bord PC
`platform/mobile.css`	Composants mobiles et zones de sécurité	Page web mobile, PWA, WebView
`platform/desktop.css`	Combinaison d'espace de travail	Navigateur de bureau et shell d'application
`platform/tauri.css`	Portail de bureau + adaptation Tauri	Fenêtre Tauri
`platform/electron.css`	Portail de bureau + adaptation Electron	Fenêtre Electron
`component-css/*`	28 composants stables de paquets CSS	Charge par domaine fonctionnel

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

Les entrées Tauri et Electron sont isolées l'une de l'autre et retournent toutes deux vers la ceinture available et destroy() Objet de liaison ; la couche de rendu ne doit recevoir que des capacités de pontage minimales sur liste blanche.

Toutes les 29 entrées publiques de colis

Javascript :.、./components、./directives、./services、./module、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Style :./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 et ./component-css/*. Informations sur le contrat et le forfait :./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exportations de produits non-composants et types TypeScript

29 runtimes non-composants exportés sous :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 types exportés sous :GardenerAngularJSComponentExportName、GardenerAngularJSComponentName、GardenerAngularJSDirectiveFactory、GardenerAngularJSDirectiveName、GardenerAngularJSModule、GardenerAngularJSOptions、GardenerAngularJSStatic、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerEventName、GardenerPlatform、GardenerRuntimeService、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeAxis、GardenerThemeService、GardenerThemeState、GardenerValueChangeLocals。

Schéma public, compatibilité, performance et accès à la mainlevée

API publique、Compatibilité et Rendement Les deux sont validés par JSON Schema avec des champs inconnus désactivés; les plages de support AngularJS sont également écrites à la base de compatibilité lisible par machine.Catalogue des composants JSON Lisible directement par l'IA, les générateurs de code et les outils de documentation. La mesure réelle du package entièrement compressé est de 404 094 B raw, 59 499 B gzip, 29 785 B Brotli ; célibataire GButtonDirective est de 4 515 B. La version déterministe couvrait 83 fichiers, la vérification du package npm 95 fichiers, 325 747 B compressés, 2 938 245 B décompressés, l'audit de charge de production de Gardener était de 0 vulnérabilité.

cd angular
npm run release:verify

# Générer et API publique, 3 jeux de schémas, TypeScript, AngularJS 1.8.2 / 1.8.3、
# 506 Enregistrement des directives, cycle de vie ngModel et DOM, Chromium / WebKit / Firefox、
# Pixel 7 / iPhone 13、WCAG A/AA、Treeshake, builds reproductibles, performances, mise en paquets et publication

La porte actuelle contient 17 tests d'exécution/contrat, 3 tests de schéma, 20 tests d'intégration de Five Engine et de navigateur mobile et 1 audit automatisé Axe WCAG A/AA. complet npm audit Les avis connus pour l'ontologie AngularJS seront toujours affichés fidèlement ; il s’agit d’un risque hérité qui doit être isolé, accepté ou migré et ne peut pas être marqué comme résolu.

Tous les composants 506 AngularJS

Les répertoires suivants sont fusionnés directement API publique AngularJS et Métadonnées des composantes, détaille le nom d'exportation d'usine de directive ESM, nom CSS, catégorie, type, balise par défaut, sélecteur, variante, état, widget, comportement et plate-forme. Il ne s'agit pas d'un échantillon en vedette; les 506 éléments sont dans le même répertoire consultable.

Lecture du manifeste du composant AngularJS...

Gardener Blazor Projet

Gardener.Blazor est la bibliothèque officielle de classe Razor pour Gardener CSS 1.0.0, la version actuelle est 1.0.0 Stable. stabiliser les actifs pour net10.0 Compilé et vérifié avec un consommateur NuGet indépendant net11.0; S'applique à Blazor Web App Static SSR, Interactive Server, Interactive WebAssembly, Auto, Standalone WebAssembly, Hybrid et Desktop WebView.

506 Composants du rasoir 66 Comportement DOM 75 Événements d'exécution 28 Type de cadre 43 Ressources statiques

Installation, enregistrement et ressources statiques

<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" />

Les composants sont chargés à la demande lors du premier rendu interactif _content/Gardener.Blazor/gardener.blazor.js, pas besoin de balises de script manuscrites. En plus de la gamme complète de styles, nous proposons également 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 et 28 components/*.min.css Entrée de domaine de composant, tous les fichiers compressés officiels contiennent une carte source externe.

Composantes, fournisseurs et SSR

@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">Enregistrer</GButton>
      </GCard>
    </GMainRegion>
  </GAppShell>
</GardenerProvider>

Chaque composant CSS a un correspondant G* saisissez et conservez les balises sémantiques, les sélecteurs, les états, les widgets, les comportements, les métadonnées de plateforme et d'accessibilité par défaut. La phase SSR statique génère directement du HTML complet et ne monte le comportement DOM qu'après avoir établi une connexion interactive ; les modifications dans les signatures de paramètres actualiseront le montage et l'écouteur sera déconnecté lorsque le composant sera publié. GardenerComponent Peut effectuer un rendu dynamique par nom de métadonnées,GardenerBehavior Des comportements peuvent être attachés à n'importe quel contenu,GardenerPart Utilisé pour générer des classes de composants convenues.

Paramètres, réfnums et formes communs

Tous les composants générés partagent 20 paramètres :As、Id、Class、Style、Variant、Variants、State、States、Config、Initialize、Value、ValueChanged、ValueEvent、ValueKey、OnValueChange、EventNames、PreventDefaultEvents、OnEvent、ChildContent、AdditionalAttributes。

La référence du composant fournit 6 membres d'instance :Element、RefreshAsync、DestroyAsync、FocusAsync、GetBehaviorMembersAsync、InvokeBehaviorAsync。 GardenerField<TValue> Héritage InputBase<TValue>, support EditForm、EditContext, DataAnnotations, statut de validation, saisie, sélection et zone de texte.

Reliure de valeur, 75 événements et 7 caches de synchronisation

<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 Gérer les entrées/modifications natives,ValueEvent et ValueKey Gestion des CustomEvents complexes. Les valeurs sont converties en chaînes .NET, booléennes, nombres, tableaux ou dictionnaires ; DOM, File, BigInt, fonctions et références circulaires sont sérialisés en toute sécurité. GardenerEvents.All Exposer les 75 événements,GardenerEvents.Guards Exposé beforeapproval, beforeclose, beforefilepicker, beforeopen, beforepromptstop, beforepromptsubmit, beforetabclose 7 événements de garde qui doivent être bloqués de manière synchrone avant les limites asynchrones JS/.NET. Les membres comportementaux et les contrats détaillés de l'événement sont disponibles auprès de GardenerRuntimeCatalog Requête.

Thèmes, services et ponts de bureau

GardenerProvider Thème de support, mode, neutre, typographie, forme, densité, élévation, mouvement, plate-forme, thème imbriqué à dix axes ;GardenerThemePresets.All Contient 42 thèmes de couleurs, avec un fond blanc clair par défaut et de petits coins arrondis. Les 5 services de portée sont GardenerRuntime、GardenerThemeService、GardenerToastService、GardenerTauriService、GardenerElectronService. Desktop Bridge appelle uniquement les objets de liste blanche explicitement exposés par la couche de préchargement de l'hôte et n'ouvre pas les capacités globales de Node.

Types publics complets et contrats lisibles par machine

Les 28 types de trames sont :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。

API publique Blazor、Métadonnées des composantes、Compatibilité、Rendement Les deux ont fermé JSON Schema. La documentation lisible comprend également API、66 comportements、75 événements、43 ressources statiques、Durée、Accessibilité et SSR et Contrôle d'accès à la mainlevée。

1.0.0 Qualité de sortie

Version de version avec 0 avertissement, 0 erreur ; 506 composants ont tous réussi le véritable SSR statique. Browser Matrix couvre Chromium, Firefox, WebKit, les fenêtres de bureau et mobiles, le clavier et Axe WCAG A/AA ; CI impose Firefox. NuGet utilise un cache isolé pour publier des applications grand public et valider les manifestes de points de terminaison statiques des actifs Web ; il existe également un consommateur de package .NET 11 Preview autonome. L'assemblage mesuré est de 343 552 B, 43 ressources statiques au total 7 608 327 B, CSS gzip 139 269 B, runtime gzip 25 989 B, Blazor bridge gzip 2 054 B, nupkg environ 1,22 Mio, en dessous de la limite stricte de 6 000 000 B ; le tout en dessous du budget strict et des DLL/XML reproductibles.

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

Tous les composants 506 Blazor

Les répertoires suivants sont fusionnés directement API publique Blazor et Métadonnées des composantes, itemizing Razor types, noms CSS, catégories, types, balises par défaut, sélecteurs, états, variantes, widgets, comportements, plateformes, et contrats d'accessibilité. Il ne s'agit pas d'un échantillon en vedette; les 506 éléments sont dans le même répertoire consultable.

Lecture du manifeste des composants de Blazor...

Principes de conception

Priorité neutreLe style par défaut convient aux particuliers, aux entreprises, aux entreprises et aux stations de contenu, et n'établit pas une forte personnalité de marque.

Les petits coins arrondis par défaut--g-radius-md Fixé à 0,25rem; les capsules et filets ne sont utilisés que pour la clarté sémantique.

La redondance est meilleure que l'absenceDes structures complexes hautement réutilisables existent en tant que composants ou recettes et n'exigent pas que l'IA soit temporairement combinée à chaque fois.

Séparation de la sémantique et de l'apparenceLa couleur primaire, le mode d'affichage, la densité, la police, la forme et la plate-forme peuvent être modifiés indépendamment.

attribut direction logiqueLes composants utilisent de préférence la direction en ligne/bloc pour réduire la couverture spécifique à RTL.

Vérification de la machineLes composants, les classes d'utilité, les recettes et les capacités d'exécution ont des manifestes et des vérifications de construction.

Ordre des calques CSS

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

Il est recommandé d'écrire le style personnalisé du projet gardener.overridespour éviter d'augmenter le poids du sélecteur.

Système thématique

Le thème de couleur est uniquement responsable de la couleur principale de la marque ; le mode d'affichage est indépendant des autres axes thématiques. Ce site utilise Light pour maintenir une expérience de document blanc, mais le framework fournit également Dark, System et High Contrast.

Lecture de la liste des sujets...

Axe thématique

Propriétés	Valeurs disponibles	Objet
`data-g-theme`	jardin, bleu, violet, etc. 42 articles	Couleur principale de la marque
`data-g-mode`	léger, sombre, système, contraste élevé	Mode d'affichage
`data-g-neutral`	frais, chaud, gris, encre, crème, plan, papier	Fond neutre et texte
`data-g-typography`	système, entreprise, humaniste, éditorial, technique, géométrique, arrondi, classique, compact, cjk	Tempérament des caractères
`data-g-shape`	tranchant, petit, moyen, doux, rond	Formes et filets
`data-g-density`	compact, standard, confortable, toucher	Densité de contrôle
`data-g-elevation`	plat, bordé, stratifié, flottant	Frontières et ombres
`data-g-motion`	aucun, calme, standard, rapide	Rythme d'animation
`data-g-platform`	web, mobile, bureau, tauri, électron	Détails de la plate-forme
`data-g-os`	fenêtres, macos, linux	Aspect du système de bureautique

<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">

Jeton de conception

La composante ne consomme que des jetons sémantiques. La personnalisation de la marque devrait remplacer le token plutôt que de copier les règles du composant.

Famille	Exemple	Description
Couleur	`--g-color-primary`、`--g-color-primary-text`	Couleur de remplissage séparée de la couleur de premier plan lisible
Surfaces	`--g-color-canvas`、`--g-color-surface-raised`	Toile, normale, surélevée, légère, surface enfoncée
Texte	`--g-color-text`、`--g-color-text-muted`	Texte, texte affaibli et justificatif
Sémantique	`--g-color-success`、`--g-color-danger-soft`	Succès, avertissement, danger, information et fond mou
Espacement	`--g-space-0`…`--g-space-96`	Contient des valeurs demi-ordre, ordre décimal et pixel
Police	`--g-font-size-sm`、`--g-line-height-normal`	Taille de police, épaisseur de police, hauteur de ligne, famille de polices
Forme	`--g-radius-sm`…`--g-radius-full`	Par défaut petits coins arrondis, peuvent être explicitement étendus
Animation	`--g-duration-fast`、`--g-ease-standard`	Durée et assouplissement
Hiérarchie	`--g-z-dropdown`、`--g-z-dialog`	Séquence d'empilement stable de la couche flottante, Dialog, Toast, etc.
Disposition	`--g-header-height`、`--g-sidebar-width`	Taille du shell de l'application

Couverture partielle

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

API complète CSS

Cet indice est fourni par css/src/**/*.css Généré automatiquement, couvrant chaque module de code source, classe sémantique, sélecteur primitif, jeton, hook d'état personnalisé, attribut de données et image clé ; pour les classes d'outils, utilisez la liste complète dédiée dans la section suivante. Il s'agit d'un répertoire au niveau source, pas d'un exemple présenté.

—Module de code source

—Toutes les catégories

—Sélecteur sémantique

—Jeton

Règles de dépassement :chacun g-* La classe doit apparaître dans la liste CSS Full API ou Tool Classes ; chaque composant, runtime et recette de page doit également apparaître dans leurs répertoires respectifs. La vérification de build calcule SHA-256 fichier par fichier pour éviter que les répertoires ne soient en retard par rapport au code source.

Recherche dans toutes les interfaces CSS

Lecture de l'index CSS...

Tous les modules de code source

Élargir tout module pour afficher les classes, les jetons, les états, les attributs de données et les images clés exposés par le fichier. Le module outils générateurs se connecte à un inventaire distinct de 11 498 articles.

Liste des modules de lecture...

Outils

Utilisé par tous les outils g- . Le préfixe réactif précède le nom de la fonction, par ex. g-md-grid-cols-2. Les points décimaux sont écrits avec un trait de soulignement, par exemple g-p-2_5; Utiliser des valeurs négatives g-neg-mt-4。

Point d'arrêt	Largeur minimale	Terminal typique
`g-sm-*`	480px	Grand téléphone mobile
`g-md-*`	768px	Comprimé
`g-lg-*`	1024px	Petit bureau
`g-xl-*`	1280px	Bureau standard
`g-2xl-*`	1536px	Courbe de travail grand écran

Utilisation prioritaire start/end、x/y et autres outils de direction logique. À utiliser uniquement si l'orientation physique est explicitement requise left/right。

Recherche dans la liste complète des outils

Saisissez un nom de classe, un sélecteur complet, une propriété CSS, une valeur ou une condition de réponse. Pour éviter d'afficher 11 498 éléments à la fois, saisissez au moins deux caractères avant d'afficher par lots de 100 éléments à la fois ; entrer g- Vous pouvez parcourir l'intégralité du contenu lot par lot.manifeste JSON brutContient chaque article approprié pour la lecture directe par l'IA et construire des outils.

Liste des outils de lecture...

Système de disposition

La disposition de base est responsable des conteneurs et des grilles, et la coque d'application est responsable des zones fixes, des limites de défilement et de l'ajustement final. Pour les pages complexes, ne commencez pas directement avec un grand nombre de classes d'outils de positionnement.

.g-conteneurLargeur standard de la page et marges adaptatives gauche et droite.

.g-stack / .g-clusterCombinaison horizontale de flux vertical et d'emballage de mots.

.g-grid-autoGrille de cartes adaptatives sans points d'arrêt.

.g-app-shellshell de base pour la barre latérale, l'en-tête de page et le contenu principal.

.g-coque mobileNavigation haut et bas et zones de sécurité.

.g-coquille de bureauBarre de titre, barre d'activité, banc de travail, inspecteur et barre de statut.

Exemple de tableau de bord

<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 Système de grille complète

Gardener utilise 24 raster comme principal protocole compatible pour le backend d'entreprise, le CMS et les formulaires fins, tout en transmettant .g-grid-12 Fournit 12 grilles traditionnelles. Les deux utilisent une grille CSS native, une direction logique et des points d'arrêt unifiés, et ne s'appuient pas sur des marges négatives.

24 colonnes125 points d'arrêtRTLDemande de renseignements sur les conteneursImprimer

Sélection de l'interface :.g-row et .g-grid-24 Equivalent, adapté pour 24 grilles ; doit être utilisé pour les anciennes grilles à 12 .g-grid-12 en tant que parent. La classe de largeur de colonne reste la même, l'IA n'a qu'à déterminer d'abord le système parent.

Grille 24 en temps réel

6 / 24

12 / 24

6 / 24

décalage 4 + échelle 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 grille compatible

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>

Matrice complète du nom de classe

Capacité	Nom de la classe	Portée ou description
Récipient racine	`g-row`、`g-grid-24`、`g-grid-12`	24, 24, 12 colonnes
Largeur de colonne	`g-col-1`…`g-col-24`	échelle 1–24; 12 grille utilise 1–12
Automatique et remplissage	`g-col-auto`、`g-col-fill`、`g-col-fill-from-1`…`g-col-fill-from-24`	Placement automatique d'un seul rail, remplissage de lignes entières, remplissage déterministe des colonnes restantes à partir de lignes de grille spécifiées
Par défaut par rapport à la ligne entière	`g-col`、`g-col-full`	Les deux occupent explicitement toute la ligne
Déduction	`g-offset-0`…`g-offset-23`	Débranchement de la direction logique de démarrage en ligne
Lignes de grille explicites	`g-col-start-1`…`g-col-start-25` `g-col-end-1`…`g-col-end-25`	Mise en page complexe non contiguë
Répondant	`g-sm-col-`、`g-md-col-`、`g-lg-col-`、`g-xl-col-`、`g-2xl-col-*`	Les colonnes, le décalage, les lignes de début et de fin, l'état d'affichage et la gouttière sont tous réactifs
Séquence	`g-order-0`…`g-order-24`	Aussi disponible en version à cinq vitesses
Espacement	`g-gutter-`、`g-gutter-x-`、`g-gutter-y-*`	0、1、2、3、4、5、6、8、10、12
Alignement des lignes	`g-row-top`、`g-row-middle`、`g-row-bottom`、`g-row-stretch`	Contrôler l'alignement transversal des colonnes
Alignement sur une seule colonne	`g-col-self-start`、`g-col-self-center`、`g-col-self-end`、`g-col-self-stretch`	Écrasement d'une seule colonne
Disposition automatique	`g-row-dense`、`g-row-no-gutter`	Rembourrage dense et espacement zéro
État de l'affichage	`g-col-hidden`、`g-md-col-visible`	Chaque point d'arrêt a caché / visible
Sous-réseau	`g-subgrid`、`g-subgrid-cols`、`g-subgrid-rows`	Hériter de la piste de grille parent lorsque le navigateur le prend en charge
Imprimer	`g-print-col-1`…`g-print-col-24`	Il y a aussi offset d'impression, début, fin, caché, visible

Point d'arrêt

préfixe	Largeur minimale du port de vue	Exemple
`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`

Demande de contenant

Utilisation dans les couches externes lorsque la largeur du composant est déterminée par le panneau plutôt que par la fenêtre d'affichage. .g-grid-container, la colonne utilise 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, nichage et impression

Le décalage et le quadrillage suivent la direction logique en ligne du CSS ; dans dir="rtl" démarre automatiquement par la droite, pas besoin d'un autre ensemble de classes.
N'importe quelle colonne peut être replacée g-row、g-grid-24 ou g-grid-12, formant un raster imbriqué.
Utilisation côté impression g-print-col-* Réarrangement explicite ;g-print-col-hidden Masquer les colonnes qui ne doivent pas être imprimées.

Liste des capacitésDocumente le numéro du système, la largeur des colonnes, le décalage, les points d'arrêt, les points d'arrêt du conteneur, l'espacement et la matrice de test du raster ;Exemple de page de raster indépendantPour une vérification réelle 24/12, RTL, Container Query et structure d'impression. Les contrôles de build vérifient toutes les classes une par une au lieu de simplement vérifier quelques exemples.

Système d'aménagement de zone traditionnel

Le deuxième type de fonctionnalité consolide les squelettes de pages réutilisés à long terme en 16 mises en page sémantiques. Les zones doivent être nommées dans une direction logique cohérente ; L'IA doit d'abord sélectionner la disposition racine la plus proche, puis remplir les composants et ne pas réorganiser la grille, le positionnement et le CSS pliable côté mobile.

16 modèlesFenêtre + ConteneurRTLZone de sécuritéTauri/ElectronImprimer

Protocole de nommage :top / start / main / end / bottom sont cinq espaces communs ;start et end change avec le sens d'écriture. Les canevas spéciaux qui nécessitent un visuel fixe gauche/droite devraient clarifier la direction par eux-mêmes sans rompre la sémantique logique commune.

Mise en page en temps réel de cinq régions

Haut

Espace de travail principal

16 types de squelettes finis

Disposition	Classe racine	Pièces directes/scénarios applicables
Haut / Main / Bas	`g-region-stack`	`g-region-top`、`g-region-main`、`g-region-bottom`;Site Web général et pages de documentation
Début/Main/Fin	`g-region-inline`	`g-region-start`、`g-region-main`、`g-region-end`;Trois colonnes de contenu
Cinq zones	`g-region-frame`	haut / début / principal / fin / bas; portail et arrière-plan complexe
Graal sacré	`g-holy-grail`	Alias sémantique de cinq régions; pages Web traditionnelles adaptées
Coque d'application de barre latérale unique	`g-sidebar-shell`	haut / départ / principal; tableau de bord et CMS
Double barre latérale	`g-double-sidebar-layout`	start / main / fin; éditeur, console de gestion
Vue maître-esclave	`g-master-detail`	`g-master`、`g-detail`;Courriel, contact, commande
Liste/détails/inspecteur	`g-list-detail-inspector`	`g-region-list`、`g-detail`、`g-region-inspector`;Super CMS
Le pied coule au fond	`g-sticky-footer-layout`	haut/main/fond; courte page de contenu
En-tête fixe	`g-fixed-header-layout`	`g-fixed-header-bar`、`g-fixed-header-main`
Barre latérale fixe	`g-fixed-sidebar-layout`	`g-fixed-sidebar`、`g-fixed-sidebar-main`;Pour terminal mobile `is-open`
Barre auxiliaire collante	`g-sticky-aside-layout`	Contenu + `g-sticky-aside`; Table des matières de l'article, résumé du règlement
Courbe de travail à quai	`g-dock-layout`	`g-dock-top/start/main/end/bottom`; Tauri/Electron, IDE
Colonnes réglables	`g-split-view`	`g-split-view-primary/secondary`;Coordonné `data-g-split-pane`
Espace de travail plein écran	`g-fullscreen-workspace`	`g-workspace-toolbar/main/status`; Toile, média, artefact IA
Zone de sécurité mobile	`g-mobile-layout`	`g-mobile-layout-header/content/bottom`;PWA et mobile WebView

Cinq domaines et 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 et colonnes réglables

<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="Ajuster la largeur des deux panneaux latéraux"></div>
  <section class="g-split-panel g-split-view-secondary">...</section>
</div>

Réponses, contenants, États et variables

Lorsque la fenêtre d'affichage est inférieure à 768 px, les dispositions multi-colonnes, Maître/Détail et Inspecteur sont disposées verticalement dans l'ordre sémantique ; le Dock ne conserve que la zone principale par défaut et est disponible is-start-open ou is-end-open Changer de panneau mobile.
Lors de l'intégration d'un atelier à cartes, modal ou zoomable, utilisez g-region-container Emballage ; Les conteneurs de taille inférieure à 768 px se réduiront indépendamment, quelle que soit la largeur de la fenêtre du navigateur.
is-start-collapsed、is-end-collapsed Station de contrôle ;g-region-panel is-collapsed Masquer le panneau de la zone générale ;is-contained Créez des mises en page fixes, ancrées et plein écran sécurisées intégrées dans l'aperçu ou le concepteur.
Cotes passées --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 Ajustement.
Les fichiers fixes, collants, plein écran et en colonnes sont aplatis dans le flux de documents normal lors de l'impression ; les poignées de séparation sont automatiquement masquées.

Liste des capacités lisibles par machine16 présentations, fonctionnalités et matrices de test détaillées ;Page d'exemple de disposition de zone indépendanteCouvre RTL, requête de conteneur, zone fixe, Dock, vue fractionnée, zone de sécurité mobile et espace de travail plein écran. Existant g-app-shell、g-mobile-shell、g-desktop-shell Reste compatible et peut continuer à être utilisé comme shell de niveau métier.

La disposition classique primitives

Les capacités de classe 3 fournissent 22 primitives de mise en page intrinsèquement réactives. Ils fonctionnent en fonction du contenu et de l'espace disponible et ne nécessitent généralement pas de points d'arrêt de page ; L'IA doit donner la priorité à la sélection des primitives en fonction de l'intention de mise en page, puis ajuster la taille et l'espacement via les variables exposées.

22 primitivesRéactivité intrinsèqueDemande de renseignements sur les conteneursRTLMouvement réduitImprimer

Différences par rapport aux classes d'outils :Les classes utilitaires décrivent les propriétés CSS individuelles et les primitives décrivent les relations spatiales stables. Par exemple g-sidebar-layout Passe automatiquement de la double colonne au portrait en fonction de la largeur minimale du contenu, sans obliger l'IA à deviner quel point d'arrêt de la fenêtre d'affichage doit être utilisé.

Bento en temps réel et primitives en streaming

En vedette 8 × 2

Taille 4 × 2

Tuile

Large

Repousser la séparation automatique et l'enroulement de ligne sécuritaire

Groupeenveloppe

matrice complète de 22 primitifs

Priorité	Classes et composants de racines	Objet et variables clés
Pioche	`g-stack`、`is-split`、`g-stack-split`	Rythme longitudinal ;`--g-stack-gap`
Groupe	`g-cluster`	Étiquettes, boutons, enveloppe de métadonnées; trou / aligner / justifier
Centre	`g-center`、`is-intrinsic`	Largeur de lecture, niveau ou centre de contenu; max/goutte
Barre latérale	`g-sidebar-layout`、`g-sidebar-pattern`、`is-end`	Barre latérale effondrée par la largeur du contenu; taille/contenu-min/gap
Commutateur	`g-switcher`	Couper de l'horizontale à la verticale lorsque l'espace est insuffisant; seuil / écart
Couverture	`g-cover`、`g-cover-center`	Contenu au milieu du port ou du contenant; min / rembourrage
Bobine	`g-reel`	défilement horizontal des cartes et des pistes multimédias; taille des éléments / trou
Cadre	`g-frame`	Rapport fixe et milieu de culture; rapport/ajustement/position
Objet médiatique	`g-media-object` + médias / corps / action	Avatar, texte, fonctionnement du terminal ;`is-end`、`is-stacked`
Ajustement automatique de la grille	`g-grid-auto-fit`、`g-grid-auto`	Plier la piste vide lorsque le contenu est petit; min / trou
Remplissage automatique de grille	`g-grid-auto-fill`	Gardez la position de rail vide, adapté pour la fixation de la fente de la carte; min / trou
Saignement	`g-bleed`、`is-full`	Les images et les citations dépassent la largeur du texte; taille / max
Répandre	`g-repel`	Le titre et l'action sont séparés aux deux extrémités et peuvent enrouler; trou / aligner
Imposter	`g-imposter-container` + `g-imposter`	Couche centrale de taille inconnue ;`is-fixed`, margin/max
Couverture	`g-overlay-layout` + base/couche	Outils de recouvrement des médias, annotations, état; aligner / justifier / marge
Masonerie	`g-masonry`	Colonnes de teneur en hauteur variable; colonnes/min/gap, colonne unique étroite pour conteneur
Bento	`g-bento` + large / plein / haut / en vedette	Commercialisation, cartes de tableau de bord non uniformes; ligne-min / écart / étendue
Rapport d'aspect	`g-aspect-ratio` + carré / portrait / paysage / vidéo / cinéma	Boîte proportionnelle universelle sans coupe forcée
Secteur de défilement	`g-scroll-area`、`is-block`、`is-inline`	Propriétaire de parchemin indépendant ; maximum/défilement excessif
Scroll Snap	`g-scroll-snap` + `g-scroll-snap-item`	Horizontal ou `is-block` Liste d'instantanés ; taille / rigueur / alignement
Zone de sécurité	`g-safe-area`、`is-padded`	Protection à quatre faces de l'écran, de l'écran arrondi et de l'indicateur à domicile
Région collante	`g-sticky-region`、`is-bottom`、`is-surface`	Scroll zone logique adsorption supérieure/bord inférieur; offset/z

Combinaisons couramment utilisées

<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>

Objet médiatique, recouvrement et défilement

<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>

Réponse et règles environnementales

Sidebar, Switcher, Auto Fit/Fill eux-mêmes répondent selon l'espace disponible, indépendamment de la largeur de l'appareil.
g-layout-container Créer un conteneur de composants; Media Object, Masonry et Bento s'effondrent indépendamment lorsqu'ils sont inférieurs à 640px. Le viewport fournit également une marge de 640px.
Toutes les sémantiques horizontales utilisent inline/start/end; Media Object, Bleed, Imposter, Overlay, Reel et Scroll Snap support RTL.
Les zones de défilement doivent être focalisées sur le clavier et fournir un nom accessible.
Les bobines, la zone de défilement, le snap de défilement, la maçonnerie, l'ampoule, la superposition et la région collante sont automatiquement aplaties lors de l'impression pour éviter que le contenu ne soit recadré.

Liste des capacitésEnregistrer les 22 primitives, les alias, les propriétés environnementales et les matrices d'essai;Page d'exemple primitive autonomeCouvre les réponses intrinsèques, RTL, les requêtes de conteneur, Bento, la maçonnerie, l'accrochage au défilement, les zones de sécurité et les structures d'impression. Déjà g-grid-auto et g-sidebar-layout Les interfaces restent compatibles.

Composantes publiques au niveau des pages

Les capacités de catégorie 4 fournissent 23 structures et états de pages hautement réutilisables. Ils s'assoient entre le squelette de mise en page et les composants d'affaires, unifiant les titres, actions, contexte, filtres, sélections de lots, actions de défilement et résultats d'exception afin que l'IA n'ait pas à réassembler des zones communes pour chaque page.

23 modèlesDemande de renseignements sur les conteneursSticky + fixeZone de sécuritéRTLImprimer

Exigences relatives au statut:La page ne peut implémenter que l'état normal des données. Au moins Chargement, Vide et Erreur doit être clair; pour l'acheminement et les applications complètes, 403, 404, 500, Hors ligne, et Maintenance devraient également être préparés. Gardener fournit les mêmes contenus, visuels, détails, actions et aide widgets pour ces états.

En-tête de page en temps réel et colonne publique

3 éléments sélectionnés

23 modes complets

Mode	Classe racine	Pièces, état et utilisation
En-tête de page	`g-page-header`	sourcils principaux / titre / description / méta / actions; compact, centré, collant
En-tête de section	`g-section-header`	main/titre/description/actions; par défaut, sans bordure
Sous-titres	`g-subheader`	titre / actions; barre de contexte secondaire dans la page
Barre d'outils	`g-toolbar`	début / centre / fin / titre / séparateur; compact, collant, défilant
Barre d'action	`g-action-bar`	`g-action-bar-main`; Opérations de la forme et de la page
Barre d'état	`g-status-bar`	section/texte/ `is-end`;État de l'éditeur et du bureau
Barre de commandement	`g-command-bar`	groupe/item/ raccourci; commandes horizontales et touches de raccourci
Barre de contexte	`g-context-bar`	contenu/actions; information, succès, avertissement, danger
Barre de filtre	`g-filter-bar`	action principale; surface du filtre collant
Barre d'action en vrac	`g-bulk-action-bar`	nombre / actions; actif, vide, caché
Barre de pied	`g-footer-bar`	actions de pied de page, statistiques d'exploitation forestière et recherche
Barre flottante	`g-floating-action-bar`	centre, extrémité, contenu; adaptation des zones de sécurité
Retour en haut	`g-back-to-top`	`data-g-scroll-top` Affiche, défile et restaure automatiquement le focus
Diviseur avec texte	`g-divider`	`g-divider-text`; centre, début, fin, verticale
Actions collantes	`g-sticky-actions`	`g-sticky-actions-main`;Scroll forme bas action
Chargement de la page	`g-page-loading`	contenu / titre / description; contenu, complet, superposition
Page vide	`g-page-empty`	Liste vide, première utilisation et aucun résultat de recherche
Erreur de page	`g-page-error`	Demande rejetée, réessayer, détails techniques facultatifs
403	`g-page-forbidden`	Autorisations insuffisantes, demande de permissions et retour à l'entrée
404	`g-page-not-found`	Défaut d'acheminement, recherche et page d'accueil
500	`g-page-server-error`	Erreurs de serveur, numéros de requête et relevés
Hors ligne	`g-page-offline`	Statut hors ligne, sécurité des données locales et reconnection
Entretien	`g-page-maintenance`	Fenêtres d'entretien, temps de récupération estimatif et page d'état

En-tête de page et barre d'outils

<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="Outils de page">
  <div class="g-toolbar-start">...</div>
  <div class="g-toolbar-center">...</div>
  <div class="g-toolbar-end">...</div>
</div>

Unifier la structure d'état des pages

<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">La page n'existe pas</h1>
    <p class="g-page-state-description">Le lien a peut-être expiré.</p>
    <div class="g-page-state-actions">
      <a class="g-btn g-btn-primary" href="/">Retour à la page d'accueil</a>
    </div>
  </div>
</main>

Réponse, durée d'exécution et impression

Dans la fenêtre ou g-page-component-container Lorsque la taille est inférieure à 640 px, la zone opérationnelle de l'en-tête de page passe à la ligne suivante, le centre de la barre d'outils occupe une ligne exclusive et la zone opérationnelle de la barre de contexte s'enroule complètement.
Tous les alignements de début, de fin et d'action utilisent la direction logique; Floating Action Bar, Back to Top lit également la zone de sécurité de l'appareil.
Haut de page Utiliser l'existant data-g-scroll-top Au moment de l'exécution, l'affichage est basé sur la position de défilement et revient progressivement en haut après avoir cliqué ; l'environnement de mouvement réduit utilise automatiquement le défilement instantané.
La barre d'interaction, le filtre, le masque de chargement et le bouton flottant sont cachés lors de l'impression; l'en-tête et la page de résultat sont aplatis, et la description d'erreur et le numéro de requête sont toujours conservés.
Le visuel, le code, le titre, la description, les détails, les actions et les éléments d'aide de l'état de la page peuvent être omis au besoin, mais le titre et l'entrée restituable ne devraient pas manquer en même temps.

Liste des capacitésEnregistrer 23 modes de pages, matrices d'exécution et matrices d'essai;Exemple de composant de page autonomeCouvre tous les en-têtes, champs communs, Chargement, Vide, Erreur, 403, 404, 500, Hors ligne, Maintenance, Container Query, et Retour en haut.

Système de pointe et d'aide

Les capacités de catégorie 5 fournissent 28 modes d'incitation, d'explication, d'orientation et de soutien continu. Le système couvre également l'aide en ligne à faible intrusion, les couches flottantes qui nécessitent une interaction, le guidage complexe du produit, le centre d'aide, les chemins de débogage et la rétroaction du contenu pour empêcher l'IA de simplement assembler temporairement un Tooltip.

28 modèles3 temps d'exécutionCollision connueClavierRTLImprimer

Séquence de sélection :Utilisez le texte d'aide, le conseil en ligne ou le conseil pour du contenu supplémentaire qui ne bloque pas le contenu; utilisez Tooltip lorsque les contrôles doivent être liés; utilisez Help Popover lorsque vous incluez des liens et des opérations; utilisez Tour pour l'enseignement en plusieurs étapes. Ne cachez pas les erreurs importantes ou lisez les informations légales dans une couche flottante.

Aide en temps réel

Toutes les largeurs de l'appareil peuvent être vérifiées par prévisualisation avant d'enregistrer.

Cette description a-t-elle été utile?

28 modes complets

Mode	Classe racine	Objectif et éléments clés
Conseil	`g-tip`	Défaut, info, succès, avertissement, danger; compétences compactes
Conseil en ligne	`g-inline-hint`	Brève explication à côté du texte ou des contrôles
Texte d'aide	`g-help-text`	Description persistante ci-dessous; succès, avertissement, sémantique du danger
Aide au déclenchement	`g-help-trigger`	Marque d'interrogation circulaire entrée; vol stationnaire, visible du focus
Outils	`g-tooltip`	`data-g-tooltip`;Hover, focus, Escape et aria-décrits par
Riche tooltip	`g-tooltip-rich`	titre/description; toujours pas interactif
Aidez Popover	`g-help-popover`	en-tête/titre/corps/actions; clic, fermeture externe, fuite
Définition	`g-definition`	Terminologie, abréviations et portail d'explication du concept industriel
Commande subséquente	`g-callout`	icône/titre/contenu; cinq couleurs sémantiques
Note	`g-note`	Commentaires sur la documentation, notes de compatibilité et marge
Faire / Ne pas	`g-guidance-pair`	do/dont/label; exemple de spécification côte à côte
Conseils clés	`g-key-hint`	Clés en une seule clé ou combinaison de clés
Liste abrégée	`g-shortcut-list`	élément / touches; comparaison des commandes et des touches de raccourci
Carte d'aide	`g-help-card`	icône / titre / description / actions
Groupe d'aide	`g-help-panel`	en-tête/corps/pied de page; inspecteur de tableau de bord et de bureau
Centre d'aide	`g-help-center`	en-tête/titre/description/recherche
Rubriques d'aide	`g-help-topics`	sujet/titre/meta; répond automatiquement à la grille des sujets
FAQ	`g-faq`	élément / question / réponse; réutiliser Accordion runtime
Aide contextuelle	`g-contextual-help`	Aide liée au contexte actuel de la page ou du formulaire
Coach Mark	`g-coach-mark`	titre / description / actions; enseignement de la fonction monopoint
Visite guidée	`g-tour`	étape / progrès / actions; suivant, prev, skip, complet, Escape
Pleins feux	`g-spotlight`	Tourne automatiquement l'emplacement de la cible et masque la page
Point chaud	`g-hotspot`	étiquette; point chaud de l'impulsion, étrier automatique à mouvement réduit
Conseil de fonctionnalité	`g-feature-hint`	badge/titre/description; nouvelle fonctionnalité en place prompt
Quoi de neuf	`g-whats-new`	item/marker/title/description; version mise à jour résumé
Liste de vérification de l'aide	`g-help-checklist`	élément / marqueur; en attente, complet
Dépannage	`g-troubleshooting`	étape / numéro / titre / description; dépannage de séquence
Aide Commentaires	`g-help-feedback`	actions; si le contenu est utile et prend en charge l'entrée de mise à niveau

Outils et aide à la popover

<span data-g-tooltip data-g-placement="top-center">
  <button class="g-help-trigger" data-g-tooltip-trigger
          aria-label="Comprendre l'état de la version">?</button>
  <span class="g-tooltip" data-g-tooltip-content hidden>
    Modifications visibles par les visiteurs après publication
  </span>
</span>

<span data-g-popover data-g-placement="bottom-end">
  <button data-g-popover-trigger>Pourquoi une vérification est-elle requise ?</button>
  <section class="g-help-popover" data-g-popover-content hidden>
    <h3 class="g-help-popover-title">Propriété du nom de domaine</h3>
    <div class="g-help-popover-body">...</div>
  </section>
</span>

Visite guidée déclarative

<button data-g-tour-open="publish-tour">Démarrer le démarrage</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>Sauter</button>
    <button data-g-tour-prev>Étape précédente</button>
    <button data-g-tour-next>Étape suivante</button>
  </footer>
</div>

Règles sur la durée, l'accessibilité et l'environnement

Une info-bulle s'affiche lors du survol du pointeur et du focus clavier, écrite automatiquement role="tooltip" et aria-describedby;Le contenu ne doit pas contenir de contrôles cliquables.
Popover pour contenu interactif, synchronisation automatique aria-expanded、aria-controls, prend en charge le clic externe et la fermeture Escape.
La couche flottante prend en charge l'alignement supérieur / inférieur / début / fin et début / centre / fin. Lorsqu'il n'y a pas assez d'espace, il bascule automatiquement et se limite au port de vue; RTL échange les directions logiques.
Tour maintient automatiquement étape, progression, objectif Spotlight, Précédent/Suivant/Skip/Restaurant de focus complet et déclencheur; aucune étape de but n'est affichée centrée.
Paire d'orientation mobile automatiquement une seule colonne, panneau d'aide changé à la bordure supérieure; Mouvement réduit éteint l'impulsion Hotspot et la transition Spotlight.
Imprimer et cacher Tooltip, Popover, Tour, Spotlight, Hotspot et actions de rétroaction, conserver Conseil, Callout, Note et le texte de dépannage.

Liste des capacitésEnregistrer les 28 modes, 8 types d'emplacements de flotteurs, 3 temps d'exécution partagés et matrices d'essai;Exemple de système d'aide autonomeCouvre toutes les classes de racines, RTL/Mobile Responsive, Tooltip, Popover, FAQ et visite en deux étapes.

Forme de combinaison traditionnelle

Les capacités de la catégorie 6 élèvent les commandes de base à 37 structures de formulaires stables, couvrant les pages Web régulières, les formulaires mobiles, les pages de paramètres du tableau de bord, les éditeurs de CMS et les inspecteurs de Tauri/Electron. Il existe des interfaces claires pour les étiquettes de terrain, les descriptions, la vérification, le regroupement d'entreprises, les ajouts et suppressions dynamiques et la soumission finale.

37 modèles5 temps d'exécutionDemande de renseignements sur les conteneursValidationRTLImprimer

Exigences sémantiques:Le titulaire de place ne peut pas remplacer l'étiquette; l'information requise, l'erreur et l'aide ne peuvent être exprimées par couleur seule; la case / Radio connexe doit être placée dans Fieldset with Legend; les erreurs au niveau du champ et le résumé de validation doivent être fournis après l'échec de la soumission.

Exemple de combinaison en temps réel

Informations sur le site

La structure des zones, la sélection des entreprises et l'état d'avancement des activités demeurent constants.

Sauvé

Nom du siteNécessaire

Afficher dans le titre du navigateur13 / 60

Voie de libération

/

Méthode de libération

Libérer immédiatementPasser à la version de production après avoir terminé le prévol.Libération prévueEffectuer l'édition par fuseau horaire du site.

Achèvement des données72%

37 modes complets

Mode	Classe racine	Objectif et éléments clés
Formulaire	`g-form`	Rythme vertical unifié; par défaut, bordé
Section des formulaires	`g-form-section`	en-tête/titre/description; partition de forme longue
Champ	`g-field`	en-tête/meta/requis/facultatif; étiquettes, commandes, descriptions
Ensemble de champs	`g-fieldset`	légende/description; groupe de champ semantique
Ligne de formulaire	`g-form-row`	Enveloppe à la largeur minimale du champ
Grille de formulaires	`g-form-grid`	2/3/4 colonnes, pleine surface; grille de forme déterministe
Forme horizontale	`g-form-horizontal`	Colonne d'étiquette fixe + colonne de commande flexible
Formulaire en ligne	`g-form-inline`	Filtre, recherche et portefeuille de présentations compactes
Forme compacte	`g-form-compact`	Tableau de bord, formulaire d'inspecteur de bureau haute densité
Groupe d'entrée	`g-input-group`	`g-input-addon`; Épissage du bouton, de la sélection et de l'entrée
Fixe d'entrée	`g-input-affix`	début / fin; monnaie, unité et icône statique
Champ de recherche	`g-search-field`	icône/action; structure standard pour l'entrée de recherche
Champ de mot de passe	`g-password-field`	`data-g-password-toggle`;Montrer/cacher et maintenir le curseur
Champ d'accès libre	`g-clearable-field`	`data-g-clear-input`;Événements clairs, entrées/changements et restauration du focus
Compteur de caractères	`g-character-field`	nombre; défaut, limite proche, limite supérieure
État de validation	`g-validation-state`	message; succès, avertissement, danger, erreur
Sommaire de validation	`g-validation-summary`	titre/liste; lien vers les champs après l'échec de la soumission
Groupe de la case à cocher	`g-check-group`	empilé, en ligne; regroupement d'options multiples
Groupe radio	`g-radio-group`	empilé, en ligne; regroupement d'une seule option
Ligne de commutation	`g-switch-row`	contenu / titre / description; Réglage du commutateur de page
Cartes de choix	`g-choice-group`	carte / titre / description; choix du paquet et du plan
Groupe de noms	`g-name-group`	Nom/prénom ou prénom/nom double champs, l'ordre peut être ajusté en fonction du contenu
Groupe d'adresses	`g-address-group`	ligne/ville/région/postal ; plan d'affaires à six voies
Groupe téléphonique	`g-phone-group`	Code pays, numéro, extension
Groupe monétaire	`g-money-group`	Monnaie + montant, direction logique angles arrondis
Fourchette de dates	`g-date-range-group`	début, séparateur, date de fin
Plage de temps	`g-time-range-group`	Début, séparateur, heure de fin
Unité de gestion	`g-unit-field`	Valeur numérique + unité fixe/facultative
Champ de portée	`g-range-field`	Portée + sortie; affichage numérique en temps réel
Champ de fichier	`g-file-field`	contrôle/nom; ligne de sélection de fichier unique
Champ répétable	`g-repeatable-field`	liste / élément / contenu / actions; addition et suppression du modèle, min/max, index
Champ conditionnel	`g-conditional-field`	contrôleur/présentation-quand; montrer, cacher, inerte
Actions en forme	`g-form-actions`	fin, début, entre, collant; Zone de sécurité
Statut d'enregistrement automatique	`g-autosave-status`	inactif, sauvegarde, sauvegarde, erreur
État d'avancement des formulaires	`g-form-progress`	méta/piste/valeur; remplir le degré d'achèvement
Examen des formulaires	`g-form-review`	ligne / étiquette / valeur / modifier; examen avant soumission
Groupe de consentement	`g-consent-group`	titre/description; modalités, autorisation et confirmation

Mise en page et combinaisons de champs

<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">Nom</label>
          <span class="g-field-required">Nécessaire</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>

Cinq types d'exécution déclarative

<div class="g-password-field" data-g-password-toggle>
  <input class="g-input" type="password">
  <button data-g-password-button type="button">Afficher le mot de passe</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">Ajouter</button>
  <template data-g-repeatable-template>...__INDEX__...</template>
</div>

Réceptivité, accessibilité et impression

g-form-container Construisez la requête de conteneur 640px; les combinaisons de forme Grid, horizontale, nom et adresse peuvent être effondrées indépendamment dans le panneau CMS intégré, avec des règles de viewport comme retour.
Toutes les combinaisons utilisent des attributs de direction logiques; le groupe d'entrée, l'argent, l'unité, les actions sur le terrain et les actions collantes maintiennent une relation de tête à queue correcte en vertu de RTL.
Synchronisation de basculement de mot de passe aria-pressed Répartir les entrées/modifications avec un nom accessible ; Effacer l'entrée ; Le nombre de caractères compte les caractères Unicode.
Le champ conditionnel définit à la fois caché, inerte et aria-hidden lorsqu'il est masqué ; Le champ répétable prend en charge les valeurs min/max, l'index de modèle, l'initialisation automatique des nouveaux contrôles et la récupération du focus après suppression.
Reduce Motion réduit l'animation d'enregistrement; imprime les mots de passe cachés, efface, ajoute, supprime et soumet, en conservant les valeurs du champ, les données de vérification et de vérification.

Liste des capacitésEnregistré 37 combinaisons, 5 cycles et matrice d'essai complète;Exemple de combinaison de formulaires indépendantsCouvre toutes les classes de racine, les groupes de champ d'affaires, les ajouts et suppressions dynamiques, l'affichage conditionnel, la réponse du conteneur, RTL et l'impression.

Combinaison de navigation traditionnelle

Les capacités de la catégorie 7 offrent 38 modes de navigation stables couvrant les sites Web publics, les portails d'entreprise, les tableaux de bord, les super CMS, le web mobile et les ordinateurs de bureau Tauri/Electron. Global, local, hiérarchique, sélectionné, en-page, tour de page, processus, mobile, commande et identité toutes les entrées ont des structures prêtes, et l'IA n'a pas besoin de réorganiser temporairement la navigation CSS.

38 modèles9 runtimes réutilisablesClavierZone de sécuritéRTLImprimer

Ordre de sélection :D'abord déterminer la portée de navigation (globale, locale, hiérarchique ou intrapage), puis déterminer la direction et le terminal; Les onglets ne commutent que les vues dans le même contexte, Fil d'Ariane n'exprime que la position, et Pagination n'exprime que le tour de la page de résultat, et ne devrait pas se remplacer.

Exemple de combinaison en temps réel

38 modes complets

Famille	Patterns et classes de racines	Objet
Mondial	Navbar `g-navbar`	Marque, zone centrale, opérations de queue et basculement des mouvements
	Primaire `g-primary-nav`	L'entrée de premier niveau la plus importante pour les produits
	Utilitaire `g-utility-nav`	Entrées auxiliaires telles que l'aide, le statut, la langue et la connexion
	Sous navigation `g-subnav`	Navigation secondaire dans une zone, un canal ou un objet
Partiellement et Bureau	Barre latérale `g-sidebar`	Tableau de bord et barre latérale persistante CMS
	Collapsible `g-collapsible-nav`	`data-g-nav-toggle`; Zone d'effondrement et menu mobile
	Voie ferrée `g-nav-rail`	`data-g-roving-nav`; Orientation et trajectoire étroites
	Barre d'activité `g-activitybar`	Interrupteur de la fonction principale de l'atelier Tauri/Electron
	Barre de menus `g-menubar`	Barre de menu de fichiers de bureau/modifier/afficher
Hiérarchie et menu	Mega Menu `g-mega-menu`	Entrée multicolonnes grand site
	Décrochage `g-dropdown`	Menu bouton; Arrow, Home, End, Escape
	Menu contextuel `g-context-menu`	`data-g-context-menu`; Clic droit, Maj+F10, anti-débordement de la fenêtre
	Navigation dans l'arborescence `g-tree-nav`	`data-g-tree`; Niveaux illimités, expansion et touches fléchées
Emplacement et sélection	Fil d'Ariane `g-breadcrumb`	Emplacement actuel et voies d'ancêtre
	Tables `g-tabs`	`data-g-tabs`;Même changement de vue
	Tables verticaux `g-vertical-tabs`	Paramètres Page et Inspecteur Vue du portrait
	Segmenté `g-segmented`	Un petit nombre de méthodes d'affichage mutuellement exclusives
	Navigation des pilules `g-pill-nav`	Catégories, statut et canaux de contenu
	Navigation de l'ancre `g-anchor-nav`	Répertoire des articles statiques
	Scrollspy `g-scrollspy-nav`	`data-g-scrollspy`;Synchroniser la position actuelle avec défilement
Ensemble de résultats	Pagination `g-pagination`	Plage numérique avec nombre total de pages connu
	Pagination de curseur `g-cursor-pagination`	Curseurs d'API et lot précédent/suivant
	Charger plus `g-load-more-nav`	Alimentations mobiles et chargement progressif
Processus et documentation	Étape `g-stepper`	État d'avancement du processus
	Wizard Navigation `g-wizard-nav`	Répertoire et zone de contenu des étapes de processus prolongées
	Navigation arrière `g-back-nav`	Retour à l'objet ou à la liste de niveau supérieur
	Précédent / Suivant `g-prev-next-nav`	Séquence d'articles, tutoriels et détails
	Sauter la navigation `g-skip-nav`	Navigation répétée sautée pour les utilisateurs de clavier
Terminal mobile	Support mobile `g-mobile-top-nav`	Actions de retour, de titre et de queue
	Navigation de fond `g-bottom-nav`	3–5 destinations mobiles de premier niveau et zone de sécurité
	Barre d'onglet mobile `g-mobile-tab-bar`	Étiquette de haut niveau pour application mobile
	Navigation des tiroirs `g-drawer-nav`	Navigation coulissante côté petit écran et récupération du focus
Commandement et identité	Palette de commande `g-command-palette`	Entrée de la commande de recherche globale
	Navigation des commandes `g-command-nav`	Liste de commandes en ligne et touches de raccourci
	Navigation par saut `g-jump-nav`	`data-g-jump-nav`;Sélectionnez pour passer aux chapitres de page longue
	Navigation rapide `g-quick-nav`	Récents, favoris et entrées fréquemment utilisées
	Navigation locale `g-locale-nav`	Langue, région et version du site
	Navigation de compte `g-account-nav`	Utilisateurs, organisations, paramètres et sorties

Cinq nouveaux comportements déclaratifs

<button data-g-nav-toggle="mobile-menu">Menu</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">Chapitre</option></select>
</label>

Règles d'accessibilité, de réceptivité et d'environnement

Utilisation actuelle de la page aria-current="page", la position actuelle de la page est utilisée aria-current="location", Tabs use aria-selected;Ne vous fiez pas uniquement à la couleur.
Roving Nav prend en charge le paysage/portrait, RTL, les touches à quatre voies, la maison et la fin; le menu contextuel prend en charge le bouton droit de la souris, la touche de menu clavier, Maj + F10, la récupération d'évasion et de focus.
g-nav-container Construisez la réactivité du conteneur 640px; Navbar, les onglets verticaux et les Magiciens peuvent être effondrés indépendamment dans la fente du CMS ou l'inspecteur de bureau.
Gestion de la navigation inférieure et de la barre d'onglets mobile safe-area-inset-bottom;Le tiroir utilise une direction logique, entrant par la droite dans RTL.
Réduction du mouvement éteint les transitions de Tiroir, d'Arbre et de Lien de Saut; Couleurs forcées fournit des contours d'article courants explicites; impression cache la navigation de fonctionnement et conserve Fil d'Ariane, les pages avant et arrière des documents, et l'information de processus.

Liste des capacitésenregistre 38 modes de navigation, 11 familles de navigation, 9 types d'exécutions de réutilisation et une matrice d'essai complète;Exemple de navigation indépendanteCouvre la navigation globale, hiérarchique, sélection, menu, en page, processus, mobile et de bureau, et peut tester directement les interactions clavier et clic droit.

Combinaison d'affichage et de fonctionnement des données

Les capacités de la catégorie 8 fournissent 48 modes de données stables, traitant l'affichage des données et la manipulation des données comme le même ensemble de contrats. Site Web ordinaire, tableau de bord, super CMS, liste mobile, rapport d'analyse et banc de travail Tauri/Electron haute densité, tous peuvent sélectionner directement des tables, des enregistrements, des listes, des hiérarchies, des flux, des indicateurs, des visualisations, des plans, des espaces ou des modes de fonctionnement.

48 modèles8 runtimes réutilisablesSticky / StackedGrille de clavierRTLImprimer

Ordre de sélection :Déterminer d'abord le formulaire de données, puis l'intensité de fonctionnement. Utiliser la liste de descriptions ou la valeur clé pour un petit nombre d'attributs statiques; utiliser la liste ou la table pour plusieurs enregistrements; utiliser la grille de données uniquement lorsque les cellules nécessitent un mouvement et une modification du clavier; utiliser la table de l'arbre ou de l'arbre pour les données hiérarchiques; les tendances et les comparaisons fournissent d'abord des valeurs lisibles, puis ajouter des graphiques.

Exemple de combinaison en temps réel

2,480Publié

128En attente de réexamen

6Élément de risque

page	État	Visites
Page d'accueil de l'entreprise	Publié	28,420
Centre de produits	En cours de révision	16,208

48 modes complets

Famille	Patterns et classes de racines	Objet et principales capacités
Tableau	Tableau `g-table`	Table sémantique de base; rayée, plane, compacte
	Tableau réactif `g-responsive-table`	défilement horizontal, cardage mobile, première et dernière colonnes collantes
	Grille de données `g-data-grid`	Grille ARIA, touches à quatre voies, Home/End
	Grille modifiable `g-editable-grid`	Cellule modifiable, édition, invalide
	Tableau des arbres `g-tree-table`	Niveau d'identification, expansion de la ligne parent-enfant
	Tableau groupé `g-grouped-table`	Groupe par région, date, type
	Tableau extensible `g-expandable-table`	Ligne de détails et `g-row-disclosure`
	Tableau comparatif `g-comparison-table`	Comparaison horizontale des paquets, versions et capacités
	Table pivotante `g-pivot`	Résumé croisé, en-têtes de rangée collants
Documents et listes	Liste des descriptions `g-description-list`	Peu d'étiquettes et de valeurs statiques
	Valeur clé `g-key-value`	Valeurs, texte long et actions uniques
	Détails du dossier `g-record-detail`	Détails complets d'un seul dossier commercial
	Groupe de la liste `g-list-group`	Listes génériques et lignes interactives
	Liste des médias `g-media-list`	Avatar, vignette, actions du corps et de la queue
	Liste dense `g-dense-list`	Listes des bureaux et des inspecteurs à haute densité
	Liste virtuelle `g-virtual-list`	Coque d'hébergement fenêtre pour les enregistrements en vrac
Hiérarchie et débit	Arbre `g-tree`	Niveaux infinis, expansion et mouvement du clavier
	Calendrier `g-timeline`	Jalons et historique du statut
	Aliments pour animaux `g-activity-feed`	Flux d'activité de l'utilisateur et du système
	Registre de vérification `g-audit-log`	Groupe de date, opérateur, action et heure
Indicateurs et graphiques	KPI `g-kpi`	Valeur clé et direction ascendante et descendante
	Liste des statistiques `g-stat-list`	Ensemble compact de valeurs statistiques
	Carte métrique `g-metric-card`	Valeurs, étiquettes et graphiques de petites tendances
	Sparkline `g-sparkline`	Barre ou SVG Microtend
	Statistiques de progrès `g-progress-stats`	Progrès et proportion de classification
	Graphique `g-chart`	Titres indépendants de la bibliothèque graphique, zones de tracé et conteneurs d'action
	Légende des données `g-data-legend`	Étiquettes de couleur, de famille et lisibles
	Classement `g-ranking`	Classement, nom et valeur
	Sommaire de l'état `g-status-summary`	Aperçu rapide des quantités d'état
Plan et espace	Calendrier `g-calendar`	Grille hebdomadaire et mensuelle et événements
	Ordre du jour `g-agenda`	Liste des horaires linéaires
	Kanban `g-kanban`	Colonnes de phase et cartes de tâches
	Gantt `g-gantt`	Tâches, échéancier et barres de progression
	Organigramme `g-org-chart`	Nœuds organisationnels et relations hiérarchiques
	Carte `g-map-shell`	Panneaux de cartes, outils et résultats
	Matrice de données `g-data-matrix`	Autorisations, capacités et matrice d'état bidimensionnel
	Carte thermique `g-heatmap`	Activité, contribution et densité
Opérations de données	Barre d'outils de données `g-data-toolbar`	Rechercher, filtrer, compter les résultats et actions
	Opérateur de colonne `g-column-chooser`	Affichage et cache des colonnes
	Vues sauvegardées `g-saved-views`	Enregistrement des filtres, tri et configuration des colonnes
	Groupe spécial des exportations `g-export-panel`	Format, portée et exportation sur le terrain
	État des données `g-data-state`	Chargement, Vide, Erreur, Hors ligne
	Commutateur de vue `g-data-view-switcher`	Changement de tableau, de liste et de carte
	Résumé de la sélection `g-selection-summary`	Sélectionner la quantité et l'action du lot
	Densité du tableau `g-table-density`	Confort, densité standard et compacte
	Résumé du filtre `g-filter-summary`	Conditions actuelles et un clic clair
	Constructeur de tri `g-sort-builder`	Ordre de tri de champs multiples
	Inspecteur des données `g-data-inspector`	CMS et contrôleurs d'enregistrements de bureau

Six nouveaux comportements déclaratifs

<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="Tout sélectionner">
  <button data-g-sort-key="revenue" data-g-sort-type="number">Recettes</button>
  <input data-g-select-row type="checkbox" value="record-id">
  <button data-g-row-toggle="detail-id" aria-expanded="false">Développer</button>
  <label><input data-g-toggle-column="owner" checked>Responsable</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="Texte d'index facultatif">...</article>
  <div data-g-filter-empty hidden>Aucun résultat</div>
</div>

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

Règles sur la durée, l'accessibilité et l'environnement

Le tri des tableaux conserve automatiquement les en-têtes des tableaux. aria-sort, prend en charge le tri de texte, de chiffres, de date et stable ; la ligne de détail se déplace avec la ligne principale pendant le tri.
La sélection de ligne conserve la sélection complète, la sélection partielle,indeterminate, OK aria-selected, Sélection de l'intervalle de travail et Résumé de la sélection.
La divulgation des lignes sert à la fois aux lignes de détail et à la table arborescente, à gérer aria-controls、aria-expanded, effondrement d'échappement et masquage récursif de sous-lignes.
Colonne Toggle conserve au moins une colonne; Data Filter prend en charge la normalisation Unicode, multi-mot-clé ET la correspondance, le nombre de résultats, et vide; Data View prend en charge les touches fléchées, Maison, et Fin.
g-data-container Créer un pliage de conteneur de 640 px ; Stacked Table utilise chaque grille sur de petits écrans data-g-label Générez des cartes lisibles sans casser la sémantique des tables de bureau.
Toutes les structures adoptent des attributs de direction logiques et prennent en charge RTL; Forced Colors fournit des contours de sélection; imprime des opérations de données cachées, élargit les lignes de détail et de hiérarchie, et supprime le découpage par défilement.

Liste des capacitésEnregistre 48 modes de données, 11 familles de données, 8 types d'exécutions multiplexées et une matrice d'essai complète;Exemple de données indépendantesLe tri, la sélection, l'expansion, la visibilité de la colonne, la recherche, la commutation de vue, le déplacement des tables empilées et la grille de clavier peuvent être testés directement.

Composants de sélection et de fabrication

Les capacités de la catégorie 9 font de la sélection des objets, de l'expression des plages de sélection, de l'exécution par lots et de l'enregistrement des conditions de sélection un protocole complet. Convient pour super CMS, cession de permission, gestion des membres, médiathèque, domaines connexes, tableau de bord, moteur de bureau mobile et bureau Tauri/Electron.

32 modèles7 runtimes réutilisablesSélection multipleHiérarchieClavierRTL/Imprimé

Sélection en temps réel et opérations par lots

Page de documentation

Tout sélectionner

Vue actuelle0 / 3

Démarrage rapideDocuments publicsPubliéRéférence de l'APIDocumentation du développeurProjetFAQCentre d'aidePublié

Matrice complète de 32 modes

#	Classe de motif/root	Objet et contrat
01	Contrôle de sélection `g-selection-control`	Sélectionner les informations sur la quantité, le total et l'étendue
02	Tout sélectionner `g-select-all-control`	Sélection complète et sélection partielle pour une période indéterminée
03	Inverser `g-invert-selection-control`	Inverser les éléments actuellement disponibles
04	Gamme `g-range-selection-control`	Choix de l'intervalle de déplacement
05	Barre d'outils par lots `g-batch-toolbar`	Actions de lots collants conscientes de la zone de sécurité
06	Portée de la sélection `g-selection-scope`	Limites de sélection des listes, des tableaux ou des arbres
07	Transfert `g-transfer`	Déplacement et recherche bidirectionnels sélectionné/tout
08	Liste double `g-dual-list`	Autorisations, membres, étiquettes double liste
09	Sélectionner un arbre `g-tree-select`	Affichage hiérarchique multi-sélection et chemin
10	Cascadère `g-cascader`	Sélections en cascade pour l'expansion niveau par niveau
11	Picker de mention `g-mention-picker`	@ personne, canal ou ressource
12	Utilisateur `g-user-picker`	Avatar, nom, équipe et sélection multiple
13	Picker d'organisation `g-organization-picker`	Arbre organisationnel, départements et postes
14	Récupérateur de ressources `g-resource-picker`	Fichiers, pages, sources de données et actifs
15	Récupérateur de médias `g-media-picker`	Grille de vignettes et sélection multiple des médias
16	Picker d'icônes `g-icon-picker`	Recherche d'icônes, grille et état sélectionné
17	Cueillette de couleur `g-color-picker`	Aperçu des couleurs, entrées et montres
18	Fourchette de dates `g-date-range-picker`	Préréglage, calendrier bimensuel et fourchette de dates
19	Plage de temps `g-time-range-picker`	Intervalle de temps et expression croisée des jours
20	Filtres sauvegardés `g-saved-filters`	Conditions du filtre réutilisable
21	Vues sauvegardées `g-saved-views`	Captures de filtre, de colonne, de tri et de densité
22	Opérateur de colonne `g-column-chooser`	Cacher les colonnes et conserver au moins une colonne
23	Constructeur de tri `g-sort-builder`	Collation dynamique sur plusieurs champs
24	Constructeur de groupe `g-group-builder`	Règles dynamiques de regroupement multi-champs
25	Récupérateur d'entités `g-entity-picker`	Sélecteur unifié d'entités commerciales
26	Picker d'étiquettes `g-tag-picker`	Recherche d'étiquettes, création et sélection multiple
27	Picker de relation `g-relation-picker`	Documents, pages et relations parents-enfants
28	Confirmation en vrac `g-bulk-confirmation`	Confirmation de l'impact de l'opération par lots dangereux
29	Progrès en vrac `g-bulk-progress`	Progrès, échecs et opérations de base étape par étape
30	Panneau collecteur `g-picker-panel`	Couche flottante de bureau et panneau mobile inférieur
31	Résumé du picteur `g-picker-summary`	Résumé des valeurs sélectionnées et des résultats de sélection
32	Résumé de la sélection `g-selection-summary`	Quantité sélectionnée et actions rapides

Interface d'exécution déclarative

<section data-g-row-select>
  <input type="checkbox" data-g-select-all>
  <button data-g-invert-selection>Sélection inverse</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">Utilisateur</button>
  </div>
</div>

Règles d'exécution et d'environnement

row-select Prend en charge toutes les sélections, la sélection inverse, la sélection d'éléments clairs et visibles, l'intervalle de décalage, la sortie de quantité, l'affichage de la colonne de lots et l'affichage des lignes. aria-selected。
transfer Supporte le mouvement bidirectionnel de sélection/tout, recherche des deux côtés, quantité et état vide, et touches fléchées Ctrl/Command + gauche et droite.
picker Unified single/multiple selection, Unicode search, Chip delete, sortie de champ caché, touches fléchées, Maison, Fin, Entrée, Espace, Échapper et cliquer à l'extérieur pour fermer.
data-g-cascader Maintenir les chemins et les valeurs ;data-g-saved-choice Filtres, vues, icônes et échantillons de service ;data-g-builder-list Prise en charge de l'ajout, de la suppression et du mouvement des règles de tri/regroupement de modèles.
g-selection-container Fournit l'effondrement du conteneur 640px; le panneau mobile Picker devient automatiquement le panneau inférieur, et la barre d'outils par lots évite la zone de sécurité.
La direction logique, RTL, Reduced Motion, Forced Colors et l'impression sont prises en charge dans tous les modes; les commandes qui changent l'état de sélection sont cachées lors de l'impression, et les résumés des résultats sont conservés.

Liste des capacitésEnregistrer les 32 modes, 8 familles de capacités et matrices d'essai;Exemple de sélection indépendantSélectionner tout, sélection inverse, sélection de la plage, transfert, sélection, Cascader, choix sauvegardé et constructeur dynamique peut être testé directement.

Système de fichiers et de contenu

Les capacités de la catégorie 10 couvrent le cycle de vie complet des fichiers depuis l'entrée dans le système, le téléchargement et l'organisation, jusqu'à l'aperçu, l'édition, la collaboration, la révision et le stockage. Web, mobile backend, super CMS, media center et l'éditeur de bureau Tauri/Electron peuvent tous être réutilisés directement, sans avoir besoin de l'IA pour organiser temporairement des CSS de travail complexes.

32 modèles6 runtimes réutilisablesTélécharger + ÉditeurBureau + MobileClavierRTL/Imprimé

Téléchargement, édition et révision en temps réel

Charger la file d'attenteTerminé 0 · Activités 0

PDFManuel du produit.pdf

Contenu modifiable

Modifier ce texte pour vérifier les statistiques de caractères et l'état d'enregistrement automatique.

- Prend uniquement en charge les pages Web

+ Prise en charge Web et ordinateur de bureau

Matrice complète de 32 modes

#	Classe de motif/root	Objet et contrat
01	Dépôt de fichiers `g-file-drop`	Cliquez/Drag, entrée de fichier et état de glisser
02	Liste de fichiers `g-file-list`	Lignes de fichiers compactes, méta-informations et actions
03	Requête de chargement `g-upload-queue`	Nombreuses files d'attente, comptage, arrêt et suppression
04	Type de chargement `g-chunk-upload`	État de la fragmentation, retour du point d'arrêt protocole visuel
05	Mise à jour des progrès `g-upload-progress`	Valeurs de progrès, texte de statut et ARIA
06	Échec du chargement `g-failed-upload`	Raison de l'échec, de la réessayer et de l'enlèvement
07	Carte de fichier `g-file-card`	Thumbnails, noms, propriétés et actions rapides
08	Arbre de dossiers `g-folder-tree`	Niveau de répertoire, nombre et chemin actuel
09	Navigateur de fichiers `g-file-browser`	Catalogue, recherche, grille/liste et sélection de clavier
10	Aperçu des dossiers `g-file-preview`	Vue d'ensemble, outils de zoom et méta-information
11	Médiathèque `g-media-library`	Barre de travail et de détails des actifs médiatiques
12	Grille de médias `g-media-grid`	vignettes réactives et état de sélection
13	Renseignements sur les médias `g-media-details`	Aperçu, texte alte, copyright et dimensions
14	Image de culture `g-image-crop`	Étape, échelle et inspecteur des cultures
15	Annotation d'image `g-image-annotation`	Points forts, notes et notes de révision
16	Visionneur de documents `g-document-viewer`	Papier, vignettes, tour de page et zoom
17	Affichage PDF `g-pdf-viewer`	PDF.js, coque de pont native ou de bureau
18	Lecteur vidéo `g-video-player`	16:9 Contrôles d'étape, de progression et de lecture
19	Lecteur audio `g-audio-player`	Couverture, formes d'onde/Timeline et commandes
20	Éditeur de code `g-code-editor`	Numéro de ligne, tableau de codes et barre d'état
21	Éditeur de texte riche `g-rich-text-editor`	Outils de formatage, texte modifiable et statistiques
22	Éditeur de marquage `g-markdown-editor`	Code source/vue double colonne et pliage mobile
23	Éditeur de blocs `g-block-editor`	Poignées de blocs, textes et actions
24	Révision Comparer `g-revision-compare`	Différences latérales/unifiées et sémantique d'ajout et de suppression
25	Enregistrer automatiquement `g-autosave-indicator`	Mauvais, sauvegarde, sauvegarde, erreur
26	Aperçu du contenu `g-content-outline`	Niveau de titre du document et chapitre actuel
27	Barre d'outils de l'éditeur `g-editor-toolbar`	Groupes de commande, statut appuyé et touches raccourcies
28	Trouver et remplacer `g-find-replace`	Recherche, remplacement, résultats et navigation
29	Fil de commentaire `g-comment-thread`	Avatar, texte, heure et réponse collaborative
30	Historique de la version `g-version-history`	Version Délai, version actuelle et récupération
31	Propriétés du fichier `g-file-properties`	Type, propriétaire, valeur de contrôle et droit d'auteur
32	Compteur de stockage `g-storage-meter`	Quota, occupation et progrès de la classification

Interface d'exécution déclarative

<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>

Règles sur la durée, l'accessibilité et l'environnement

dropzone Gérer la profondeur de glissement, l'activation du clavier et les événements de fichiers réels ;upload-manager Conservez l'état de la file d'attente, la progression, les pauses, les tentatives, les suppressions et le nombre global.
file-browser Fournit la recherche Unicode, la commutation grille/liste, la sélection unique, les touches fléchées, Début, Fin, Entrée et Espace, et publie les événements de sélection.
editor-shell Unifier les commandes d'outils, les raccourcis Ctrl/Command, le nombre de caractères et de mots; les protocoles communs pour les éditeurs de texte riche, de Markdown, de code et de blocs.
revision-compare Basculer les différences côte à côte/unifiées ;autosave Exprime Dirty, Saving, Saved et Error, et prend en charge les sauvegardes différées et immédiates.
g-content-container Utiliser le repli du conteneur de 704 px ; le navigateur de fichiers, les détails des médias, l'éditeur d'images, les vignettes de documents, les doubles colonnes Markdown et la comparaison de versions ont tous des mises en page mobiles.
Tous les modes utilisent la direction logique et couvrent RTL, Réduction du mouvement, Couleurs forcées, et Imprimer; Imprime les caches charge et modifie les actions, aplatit la zone de défilement, et préserve les informations de texte et de révision.

Liste des capacitésEnregistrer les 32 modes, 8 familles de capacités et matrices d'essai;Exemple de système de contenu autonomeCouvre le téléchargement, la navigation de fichiers, les médias, les images, les documents, audio et vidéo, quatre types d'éditeurs, la collaboration, les versions et le stockage.

Système d'identification et de compte

Les capacités de la catégorie 11 couvrent le cycle de vie complet d'une identité depuis l'entrée dans le système, la vérification, la récupération, l'autorisation, la session, le locataire, l'appareil et la vérification de sécurité. Ce n'est pas une seule carte de connexion, mais 32 combinaisons stables qui fonctionnent directement sur PC, mobile web, Dashboard, Super CMS et Tauri/Electron bureau WebView.

Combinaison de vérification en temps réel

Vérifier le numéro de téléphone mobile

Code de vérification envoyé au +86 138***6608

Définir un nouveau mot de passe

Résistance du mot de passeNon défini

Au moins 8 chiffres
Lettres majuscules
Lettres minuscules
Numéro
Symbole

!

Nouveau dispositif détecté

Linux · Firefox · Pékin

Matrice complète de 32 modes

#	Mode	Classe racine	Objet et éléments clés
01	Authentification centrée	`g-auth-centered`	Entrée à une rangée, terminal mobile, produit léger ; coopération `g-auth-container`、`g-auth-panel`
02	Certification en colonne	`g-auth-split`	`g-auth-split-aside` Zone de marque + `g-auth-split-main` Zone de formulaire
03	Connexion	`g-sign-in`	Courriel/nom d'utilisateur, mot de passe, séjour connecté, récupération d'entrée et `g-auth-provider`
04	Enregistrement	`g-registration`	Enregistrement personnel/entreprise, confirmation des termes, force du mot de passe
05	Récupérer le mot de passe	`g-password-recovery`	Méthodes de récupération des courriels, des téléphones mobiles et des administrateurs
06	Réinitialiser le mot de passe	`g-password-reset`	Nouveau mot de passe, confirmation du mot de passe, statut de jeton expiré
07	Vérification par courriel	`g-email-verification`	`g-verification-icon`, adresse, calendrier de report
08	Vérification des téléphones mobiles	`g-phone-verification`	Code pays, numéro masqué et OTP
09	Défi de l'AMF	`g-mfa-challenge`	Authentificateur, SMS, clé de sécurité, code de récupération et appareils fiables
10	Entrée OTP	`g-otp-input`	`g-otp-cell`; Entrée numérique, coller, backspace et touches fléchées
11	Passkey	`g-passkey`	`g-passkey-graphic`, validateur de plate-forme et portail multi-appareils
12	SSO	`g-sso`	SAML/OIDC, Découverte du domaine d'entreprise et liste des fournisseurs
13	Connexion au code QR	`g-qr-login`	`g-qr-login-layout`、`g-qr-code`, état de rafraîchissement et d'expiration
14	Lien magique	`g-magic-link`	Connexion email sans mot de passe, période de validité et rappel à usage unique
15	Inviter	`g-invitation`	`g-invitation-details`, organisation, rôle, invitant et durée de validité
16	Première configuration	`g-first-time-setup`	Mot de passe, informations, organisation et préférences de sécurité pour la première fois
17	Ecran de verrouillage	`g-lock-screen`	`g-lock-screen-panel`, heure, utilisateur actuel et déverrouillage rapide
18	Session expirée	`g-session-expired`	`g-session-expired-panel`, instructions de modification locales et recertification
19	Sélection de compte	`g-account-chooser`	`g-auth-choice`, avatar, email et nouveau compte
20	Sélection des locataires	`g-tenant-chooser`	Espace de travail, rôle de l'organisation, membres et locataires actuels
21	Commutation d'identité	`g-identity-switcher`	`g-identity-switcher-menu`, identité des rôles et aperçu des visiteurs
22	Renseignements complets	`g-profile-setup`	`g-auth-avatar`, nom, position, fuseau horaire et langue
23	Centre de sécurité des comptes	`g-account-security`	`g-security-section` Mots de passe agrégés, MFA, appareils et connexions
24	Gestion des appareils	`g-device-management`	`g-device-item`, appareil actuel, emplacement, heure et annulation
25	Activité de connexion	`g-login-activity`	`g-login-event`, Méthode, PI, emplacement, succès et risque
26	Incident de sécurité	`g-security-alert`	`g-security-alert-actions` Confirmer l'identité ou protéger le compte
27	Code de récupération	`g-recovery-codes`	`g-recovery-code` Grille, copie, téléchargement et régénération
28	Appareil fiable	`g-trusted-device`	MFA Passer la date limite et le risque pour l'équipement public Description
29	Compte connecté	`g-connected-accounts`	`g-connected-account`, état de connexion et fonctionnement de déconnexion
30	Résistance du mot de passe	`g-password-strength`	`g-password-strength-meter`、`g-password-rule` avec notation en temps réel
31	Autorisation et consentement	`g-auth-consent`	`g-auth-consent-scope` Portée de la permission, autorisation et refus
32	Résultats de la certification	`g-auth-result`	`g-auth-result-icon`; Succès, échec et statut de traitement

Interface d'exécution déclarative

Comportement	Propriétés	Capacité
Basculer le mot de passe	`data-g-password-toggle`	Afficher / cacher et maintenir le curseur
Entrée OTP	`data-g-otp-input`	Auto-avance, backspace, touches fléchées, pâte de chaîne entière, événement d'achèvement
Résistance du mot de passe	`data-g-password-strength`	Cinq règles, 0–4 Rating, ARIA Progress
Heureur	`data-g-auth-timer`	Renvoi, code QR et compte à rebours/expiration de session
Choix sauvegardé	`data-g-saved-choice`	Choix du compte et du locataire
Décrochage	`data-g-dropdown`	Menu de commutation d'identité
Copie	`data-g-copy`	Copie du code de récupération
Boîte de dialogue	`data-g-dialog`	Révoquer l'appareil, confirmation d'opération sensible

<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>

Statut, points de fin et règles de sécurité

Le champ Mot de passe utilise le mot de passe correct autocomplete; La saisie du code de vérification bit par bit nécessite toujours un nom accessible et laisse la valeur complète cachée pour la soumission.
OTP prend en charge le filtrage numérique, l'avance automatique, l'espace arrière, les touches fléchées gauche et droite, Début, Fin et Coller ; libéré une fois terminé gardener:otpcomplete。
Le résultat d'authentification doit être clair Succès, Erreur et En attente; l'expiration de la session doit indiquer si les données non soumises sont conservées et les événements de sécurité ne peuvent pas être exprimés uniquement par la couleur.
Le compte, le locataire et l'identité sont des concepts différents. Utilisez Choctor/Switcher respectivement pour éviter les erreurs de fonctionnement dans le CMS multi-organisation.
L'authentification des colonnes converge vers une seule colonne au-dessous de 704px; les cartes sont réaménagées avec le QR, les règles et les codes de récupération au-dessous de 384px; les opérations de fond respectent la zone de sécurité.
Tous les styles couvrent RTL, Mouvement réduit, Couleurs forcées et impression. Imprimer les mots de passe cachés, les fournisseurs, les comptes à rebours et les opérations sensibles, en ne conservant que les informations de vérification de sécurité nécessaires.

Liste des capacitésEnregistre les 32 modes, 8 familles de capacités, 8 classes d'exécutions multiplexées et une matrice d'essai complète;Exemple de système de compte indépendantCouvre tous les modes et permet de tester directement le code OTP, la force du mot de passe, le compte à rebours, la sélection des comptes et des locataires et le menu d'identité.

Commerce et paiements

Les capacités de la catégorie 12 couvrent la chaîne de transaction complète de découverte de produits, les spécifications et les prix, les paniers d'achat, le règlement, l'exécution, les paiements, les commandes et la facturation d'abonnement. 32 combinaisons prêtes à être utilisées dans PC Mall, Mobile Web, Dashboard, Super CMS, Digital Goods, SaaS et Tauri/Electron Desktop WebView.

Portefeuille de négociation en temps réel

G

Studio GardenerLicence d'entreprise · Windows

¥699.00

Total partiel

Réduction

Livraison

Copie

Sélectionnez la plateforme

Matrice complète de 32 modes

#	Mode	Classe racine	Objet et éléments clés
01	Carte produit	`g-commerce-product-card`	`g-product-media`、`g-product-card-badge`, titre, prix et action
02	Liste des produits	`g-commerce-product-list`	`g-product-list-item`, Médias, sommaire, prix et actions en ligne
03	Détails du produit	`g-commerce-product-detail`	`g-product-detail-summary`, titre, fournisseur, SKU, stock et action d'achat
04	Galerie de produits	`g-commerce-product-gallery`	`g-product-gallery-thumb` et stade; comportement réutilisable du carrousel
05	Sélection UGS	`g-sku-selector`	`g-sku-group`、`g-sku-option`, désactive la combinaison et la sortie de sélection complète
06	Étape de la quantité	`g-quantity-stepper`	`g-quantity-button`, entrée, min/max/étape et événements de changement
07	Affichage des prix	`g-price-display`	`g-price-current`, prix d'origine, remise, cycle, description et inventaire TTC `g-stock-status`
08	Entrée du panier	`g-commerce-cart-item`	`g-cart-item-media`, spécification, quantité, total des lignes et exploitation
09	Panier	`g-cart`	Liaison de quantité,`g-cart-empty`, Sous-total, Offres, Expédition, Taxes et Total
10	Mini panier	`g-mini-cart`	Récipients, listes et `g-mini-cart-footer`
11	Résumé du panier	`g-cart-summary`	Montant de la ligne de dépenses `g-cart-summary-total`
12	Règlement	`g-commerce-checkout`	`g-checkout-section` Zone principale + Sticky `g-checkout-sidebar` + Zone de sécurité `g-checkout-mobile-actions`
13	Étapes de règlement	`g-checkout-steps`	`g-checkout-step-marker`, état complet/en cours/en attente
14	Sélection d'adresse	`g-address-selector`	Choix sauvegardé, adresse par défaut et nouvelle entrée
15	Carte d'adresse	`g-address-card`	`g-address-main`, personne de contact, numéro de téléphone, adresse détaillée, tags et édition
16	Mode d'expédition	`g-shipping-method`	`g-shipping-option`, ponctualité, transporteur, prix et statut injoignable
17	Option de retrait en libre-service	`g-pickup-selector`	`g-pickup-option`, magasin, distance, heures d'ouverture et inventaire
18	Code promo	`g-coupon`	`g-coupon-status`; Idle, appliqué, invalide et clair
19	Liste de promotion	`g-promotion-list`	`g-promotion-item`, Code, seuil, exclusion mutuelle et période de validité
20	Informations sur la facture	`g-invoice-information`	`g-invoice-fields`, type de facture, en-tête, numéro fiscal et mode de réception
21	Mode de paiement	`g-payment-method`	`g-payment-option`, carte bancaire, portefeuille, solde, statut hors ligne et désactivé
22	Panneau de paiement	`g-payment-sheet`	`g-payment-sheet-total`, montant, confirmation, invite de contrôle des risques et retour
23	Résultat du paiement	`g-payment-result`	`g-payment-result-icon`; Succès, échec, traitement et actions ultérieures
24	Récapitulatif de la commande	`g-commerce-order-summary`	Articles, réductions, expédition, taxes, paiement & `g-order-summary-total`
25	Délai de commande	`g-commerce-order-timeline`	`g-order-timeline-item`, nœud, heure, logistique et étapes actuelles
26	Détails de la commande	`g-order-detail`	En-tête, état, article, adresse, paiement, facture et `g-order-detail-section`
27	Forfait abonnement	`g-subscription-plan`	`g-plan-price-value`, Cycle, fonction, en vedette et action
28	Comparaison des prix	`g-pricing-comparison`	Colonne de capacité collante, différence d'emballage, cellule booléenne/montant/prix
29	Dosagemètre	`g-commerce-usage-meter`	`g-usage-meter-track`, courant/limite, période de réinitialisation, Avertissement/Danger
30	Historique de facturation	`g-billing-history`	`g-billing-history-item`, période, montant, état, PDF et filtrage
31	État du remboursement	`g-refund-status`	`g-refund-status-progress`, montant, retour initial, arrivée estimée et échec
32	Récapitulatif fiscal	`g-tax-summary`	`g-tax-summary-row`, montant non taxé, type de taxe, taux de taxe, région et montant total TTC

Interface d'exécution déclarative

Comportement	Propriétés	Capacité
Échelle de quantité	`data-g-quantity-stepper`	min/max/étape, état du bouton, normalisation des entrées,`gardener:quantitychange`
Sélecteur SKU	`data-g-sku-selector`	Sélection radio groupée, spécifications désactivées, itinérance au clavier, sortie JSON,`gardener:skuchange`
Panier	`data-g-cart`	Calcul du centième entier, couplage quantité/déplacement, sous-total/déduction/fret/taxe/total
Coupon	`data-g-coupon`	Code valide déclaratif, applicable/invalide/claire et événements
Choix sauvegardé	`data-g-saved-choice`	Adresse, expédition, ramassage et options de paiement
Carrousel	`data-g-carousel`	Galerie de produits
Décrochage	`data-g-dropdown`	Mini panier

<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>

Montant, état et règles environnementales

Le panier utilise le calcul de l'entier de la plus petite unité monétaire et la couche d'affichage est transmise à Intl.NumberFormatpour éviter les erreurs de montant à virgule flottante ; la fiscalité, la superposition préférentielle, l'inventaire et la vérification des paiements sont toujours décidés par le backend de l'entreprise.
Les SKU désactivés, les stocks bas/épuisés, les codes de réduction invalides, les paiements réussis/erreurs/en attente et les remboursements en cours/terminé/échoué ont tous des statuts indépendants et ne peuvent pas s'appuyer uniquement sur la couleur.
L'adresse, la livraison, le retrait, la facture et le paiement sont des objets métier différents ; le shell de règlement est responsable de leur organisation et ne code pas en dur les règles métier back-end en CSS.
g-commerce-container Réduire les détails/consulter les doubles colonnes à 704 px, réorganiser les éléments de campagne et sélectionner les cartes à 480 px ; requête de fenêtre d'affichage comme solution de secours lorsqu'il n'y a pas de contexte de conteneur.
Tous les modes couvrent le clavier, le RTL, le mouvement réduit, les couleurs forcées et l'impression; la facturation mobile respecte la zone de sécurité, l'impression cache les actions d'achat et conserve les informations sur la commande, la facture et la taxe.
Surface blanche par défaut avec 4px petits coins arrondis; le composant utilise uniquement des jetons de thème, qui peuvent être réutilisés dans 42 jeux de couleurs principales et tous les axes de thème orthogonale.

Liste des capacitésEnregistre les 32 modes, 8 familles de capacités, 7 types d'exécutions multiplexées et une matrice d'essai complète;Exemple d'entreprise indépendante et de paiementCouvre catalogue, SKU, panier, caisse, exécution, paiements, commandes, abonnements, facturation, remboursements et taxes.

Composants mobiles

Les capacités de la catégorie 13 ne se contentent pas de réduire les composants de bureau, mais complètent les structures uniques des pages Web mobiles, PWA, applications hybrides et WebView de bureau. 32 modes couvrent les zones de sécurité et les ports de vue dynamiques, la navigation mobile, les pop-ups bas, les gestes et défilements, la découverte et le filtrage, l'entrée et le clavier, l'authentification/facturation/média mobiles, ainsi que hors ligne, les permissions et les états d'erreur vides.

32 modèles8 familles14 runtimes réutilisablesZone de sécuritéToucherRTLImprimer

Ordre de sélection :Sélectionnez d'abord g-mobile-safe-shell ou le shell d'une page existante, puis appuyez sur la combinaison "Navigation → Contenu → Calques temporaires → Actions collantes → Commentaires système". La navigation inférieure est utilisée pour 3 à 5 destinations de premier niveau ; Les onglets Swipe sont utilisés pour basculer dans le même contexte ; La feuille inférieure effectue de courtes tâches ; La boîte de dialogue plein écran comporte de longues tâches et ne peut pas être mélangée les unes aux autres.

Combinaison mobile en temps réel

Courbe de travail mobile

G

Entrée des opérations de glissement

Gestures, boutons et Escape sont tous disponibles.

Continuer le chargement

Contrat de téléphonie mobile

100svh Fournit une altitude initiale stable,100dvh Suivez les modifications de la barre du navigateur.
Utilisation à quatre faces env(safe-area-inset-*); La barre inférieure, la barre d'achat, la barre de collations et les invites gestuelles ne remplacent pas l'indicateur d'accueil.
Les cibles tactiles dans les environnements Coarse Pointer mesurent au moins 44 px ; tous les composants gestuels conservent les chemins des boutons ou du clavier.
L'attribut de direction logique prend en charge RTL ; Le mouvement réduit désactive les transitions de déplacement ; Les couleurs forcées améliorent les contours sélectionnés ; l'impression aplatit automatiquement les coques.

Matrice complète de 32 modes

#	Mode	Classe racine	Objet et éléments clés
01	Enceinte de zone sécurisée	`g-mobile-safe-shell`	`g-mobile-safe-content`, svh/dvh, zone de sécurité à quatre côtés, aperçu confiné
02	Barre d'application supérieure	`g-mobile-app-bar`	`g-mobile-app-bar-start/title/actions`,Collant,Grand titre
03	Navigation inférieure	`g-mobile-bottom-navigation`	`g-mobile-bottom-navigation-item`, 3–5 destinations de premier niveau et état actuel
04	Couche élastique inférieure	`g-mobile-bottom-sheet`	`g-mobile-sheet-panel/handle/header/footer`, contraintes de focus, Échap, verrouillage du défilement
05	Menu Actions	`g-mobile-action-sheet`	`g-mobile-action-list/item`, Partager, Supprimer et Actions contextuelles
06	Déroulez pour actualiser	`g-mobile-pull-refresh`	`g-mobile-pull-refresh-indicator/content`, seuil, API Actualiser/Compléter
07	Chargement infini	`g-mobile-infinite-load`	IntersectionObservateur, Recul de bouton de charge, Chargement/Fait
08	Fonctionnement de la diapositive	`g-mobile-swipe-actions`	`g-mobile-swipe-actions-track/main/buttons`, LTR/RTL, bouton et secours de repli
09	Onglet coulissant	`g-mobile-swipe-tabs`	`g-mobile-swipe-tab`, adsorption à défilement horizontal et sémantique des onglets
10	Classement des services mobiles	`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	Filtrage mobile	`g-mobile-filter-sheet`	Contenu du filtre, pied de page collant, réinitialisation et actions de résultat
12	Barre d'achat collante	`g-mobile-purchase-bar`	`g-mobile-purchase-main`、`g-mobile-purchase-actions`, prix, quantité et zone de sécurité
13	Recherche mobile	`g-mobile-search`	`g-mobile-search-field/icon`, annuler et effacer
14	Déplacer le sélecteur	`g-mobile-picker`	`g-mobile-picker-grid/option`, sélection simple/multiple et choix sauvegardé
15	Sélecteur de roues	`g-mobile-wheel-picker`	`g-mobile-wheel-column/option`, Snap de défilement, touches fléchées, sortie JSON
16	Bouton d'action flottant	`g-mobile-fab`	Principalement créer des actions, des zones de sécurité et des compensations de barre inférieure
17	Boîte de dialogue plein écran	`g-mobile-fullscreen-dialog`	Formulaires longs, tâches d'édition, gestion des focus et visionnage dynamique
18	Évitement de clavier	`g-mobile-keyboard-avoidance`	`--g-keyboard-offset`, Faire défiler le revêtement et former la surface visible
19	Demande de gestuelle	`g-mobile-gesture-hint`	`g-mobile-gesture-hint-line`, première utilisation et zone de gestes du système
20	Bannière hors ligne	`g-mobile-offline-banner`	Cache contenu prompt, réessayer et réseau de récupération
21	Contrôle de segmentation	`g-mobile-segmented-control`	`g-mobile-segmented-item`, 2–5 vues mutuellement exclusives
22	Diffusion de contenu mobile	`g-mobile-feed`	`g-mobile-feed-item/main`, actions des médias, du corps et de la queue
23	Carrousel de carte	`g-mobile-card-carousel`	Snap de défilement horizontal, Peek, option Carousel runtime
24	Formulaire mobile	`g-mobile-form`	`g-mobile-form-actions`, soumission complète et champs tactiles
25	Authentification mobile	`g-mobile-auth`	`g-mobile-auth-actions`, code de connexion/enregistrement/vérification et environnement du clavier
26	Règlement mobile	`g-mobile-checkout`	`g-mobile-checkout-actions/summary`, confirmation de commande et zone de sécurité
27	Visualisation de médias mobiles	`g-mobile-media-viewer`	`g-mobile-media-viewer-stage/tools`Barres d'outils panoramique, zoom et plein écran
28	Barre d'outils du clavier	`g-mobile-keyboard-toolbar`	Point précédent, point suivant, fin, format et méthode d'entrée bord supérieur
29	Sélectionner le mode	`g-mobile-selection-mode`	`g-mobile-selection-main/actions`, comptage et actions batch
30	Barre d'appui	`g-mobile-snackbar`	`g-mobile-snackbar-main`, retour court, annulation et décalage de la barre inférieure
31	Invite d'autorisation	`g-mobile-permission-prompt`	`g-mobile-permission-icon`、`g-mobile-permission-actions`, Emplacement, Notifications, Caméra et Médias
32	État vide/érreur/hors ligne	`g-mobile-state`	`g-mobile-state-icon/actions`, Vide/Erreur/Hors ligne/Succès

Interface d'exécution déclarative

Comportement	Propriétés	Interface clé
Fiche mobile	`data-g-mobile-sheet` / `data-g-mobile-sheet-open`	Ouvrir/Fermer/Toggle, piège de mise au point, verrou roulant, Drop arrière, Échapper
Tirez rafraîchir	`data-g-pull-refresh`	`gardener:refresh`、`complete()`, sauvegarde des boutons
Charge infinie	`data-g-infinite-load`	`gardener:loadmore`、`complete({done})`, Observateur intersectionnel
Faire glisser les actions	`data-g-swipe-actions`	Reveal/Fermer/Toggle, LTR/RTL Gesture, bouton, fuite
Récupérateur de roues	`data-g-wheel-picker`	Défilement Snap、Clic/Flèche/Début/Fin、`gardener:wheelchange`
Réutiliser le runtime	`data-g-tabs`、`data-g-saved-choice`、`data-g-dialog`、`data-g-toast`	Tags, Segmentation/Sélection, Boîte de dialogue Plein écran, Snackbar

<button data-g-mobile-sheet-open="filters">Filtre</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>

Points de vente, conditions et limites des activités

Utilisation de Safe Area Shell 100svh Ajouter 100dvh; Si l'entreprise souhaite suivre le clavier logiciel, il peut être mis à jour via Visual Viewport/pont hôte. --g-keyboard-offset。
Les gestuelles ne font qu'améliorer l'efficacité : Pull Refresh a un chemin de bouton de rafraîchissement, Infinite Load a "charger plus", Swipe Actions a Toggle, et Wheel Picker a un support clavier.
Les demandes d'autorisation natives, l'état du réseau, le chargement des données, le paiement, l'authentification et l'échelle des médias sont implémentés par l'entreprise ou l'hôte; Gardener fournit une vision stable, l'état, les événements et les interfaces accessibles sans forger de résultats.
Fond Feuille est adapté pour les tâches courtes, Feuille d'action est adapté pour les listes d'action, et Feuille de filtre est adapté pour le filtrage; utiliser la boîte de dialogue plein écran pour l'édition complexe, et toujours utiliser la boîte de dialogue dédiée pour la confirmation destructrice.
Surface blanche par défaut, bordure 1px et 4px petits coins arrondis; grands coins arrondis et ombres fortes ne sont pas par défaut pour mobile.
Tous les 32 modes entrent dans les manifestes de composants et les répertoires de composants dynamiques; l'API complète de source CSS énumère également les modules, les sélecteurs, les variables et l'état.

Liste des capacitésEnregistrer les 32 modes, les 8 familles de capacités et la matrice d'essai complète;Exemple de terminal mobile autonomeEssais directs de la barre d'application, de la navigation de fond, des onglets de balayage, des actions de balayage, des charges infinies, des feuilles action/filtre et des sélecteurs mobiles.

Composants spécifiques au bureau

Les fonctionnalités de la catégorie 14 couvrent 32 modes de haute réutilisation de Tauri, Electron, WebView de bureau, et l'atelier de bureau simulé dans le navigateur. Il décompose la fenêtre Chrome, la navigation mondiale, Dock / espace de travail, commandes et entrée, documents et fichiers, intégration du système, mises à jour du cycle de vie, récupération et état dans des interfaces stables; AI n'a pas besoin d'inventer temporairement des barres de titre, des mises en page IDE ou des invites système.

Relation avec la disposition générique du bureau :g-desktop-shell、g-titlebar、g-workbench continue comme base de compatibilité ; cette rubrique g-desktop-workspace et 31 modes compagnons constituent une couche de composition plus complète et plus précise pour les applications de bureau.

Espace de travail en direct

Gardener Studio — Espace documentaire

Zone d'édition des CMS de bureau

Les étiquettes, les colonnes, le quai, l'inspecteur et la barre d'état maintiennent tous une densité élevée, de petits coins arrondis et des chemins de clavier complets.

↑

Nouvelle version disponible

Téléchargé, en attente de redémarrage.

Matrice complète de 32 modes

#	Patterns et classes de racines	Composante stable/statut/objectif
1	Barre de titre autochtone `g-native-titlebar`	`g-native-titlebar-start`、`g-native-titlebar-title`、`g-native-titlebar-end`
2	Commandes de fenêtres `g-desktop-window-controls`	`g-desktop-window-button`; Réduire, Agrandir/Restaurer, Fermer
3	Barre de menu `g-desktop-menubar`	`g-desktop-menubar-item`; Séquence d'entrée et de plate-forme de Menu
4	Barre d'activité `g-desktop-activity-bar`	`g-desktop-activity-item`;Module actuel, outil global
5	Panneau de quai `g-desktop-dock-panel`	`g-desktop-panel-header`、`g-desktop-panel-body`,Frappé
6	Panne de séparation résiguable `g-desktop-split-pane`	`g-split-panel`、`g-split-handle`;Paysage/Portrait
7	Inspecteur `g-desktop-inspector-panel`	Propriétés, styles, vérification, information contextuelle
8	Barre d'état `g-desktop-status-bar`	`g-desktop-status-group`、`g-desktop-status-item`
9	Palette de commande `g-desktop-command-palette`	`g-desktop-command-panel`、`g-desktop-command-input`、`g-desktop-command-results`、`g-desktop-command-item`
10	Enregistreur raccourci `g-shortcut-recorder`	`g-shortcut-recorder-control`、`g-shortcut-recorder-keys`、`g-shortcut-recorder-status`
11	Menu contextuel `g-desktop-context-menu`	`g-desktop-menu-item`、`g-desktop-menu-separator`
12	Tables non sauvés `g-desktop-document-tabs`	`g-desktop-document-tab`、`g-desktop-document-tab-close`;Actif, sale, épinglé
13	Région de Drag `g-desktop-drag-region`	`g-desktop-no-drag` Protéger les boutons, les liens et les entrées
14	Chargement de la fenêtre `g-window-loading`	`g-window-loading-icon`、`g-window-loading-progress`
15	Mise à jour disponible `g-update-available`	Version, notes de publication, report/redémarrage des mises à jour
16	Demande de permission `g-desktop-permission-request`	`g-desktop-notice-icon`、`g-desktop-notice-main`、`g-desktop-notice-actions`
17	Récupérateur de fichiers autochtones `g-native-file-picker`	`g-native-file-picker-value`; La sélection unique, la sélection multiple et le dossier sont déterminés par l'entrée/l'hôte
18	Coque de menu de la barre d'état `g-tray-menu`	Réutiliser les éléments du menu de bureau; état en ligne, entrée de fenêtre et sortie
19	Porte-fenêtres multiples `g-multi-window-placeholder`	`g-desktop-state-icon`、`g-desktop-state-actions`
20	Espace de travail `g-desktop-workspace`	`g-desktop-workspace-main`;Grille Titre/Activité/Principal/Inspecteur/Statut
21	Commutateur de fenêtres `g-desktop-window-switcher`	`g-desktop-window-switcher-panel`、`g-desktop-window-list`、`g-desktop-window-item`、`g-desktop-window-main`
22	Documents récents `g-recent-documents`	`g-recent-document`、`g-recent-document-main`、`g-recent-document-path`
23	Barre d'outils de bureau `g-desktop-toolbar`	`g-desktop-toolbar-group`、`g-desktop-toolbar-separator`
24	Panneau inférieur `g-desktop-bottom-panel`	Tâches relatives au terminal, aux journaux, aux questions, à la sortie et au contexte
25	Centre de travail de fond `g-background-task-center`	`g-background-task`、`g-background-task-main`、`g-background-task-progress`
26	Centre de notification `g-desktop-notification-center`	`g-desktop-notification`、`g-desktop-notification-main`;Non lu
27	Synchronisation `g-sync-status`	`g-sync-status-dot`; Synchronisation, synchronisé, hors ligne, erreur
28	Mise à jour des progrès `g-update-progress`	`g-update-progress-header`、`g-update-progress-track`、`g-update-progress-value`
29	Récupération des accidents `g-crash-recovery`	Restaurer le document, restaurer la session, coffre-fort, abandonner la restauration
30	Avis d'instance unique `g-single-instance-notice`	Passer à la fenêtre existante, continuer à la nouvelle fenêtre, annuler
31	Poignard à maillons profonds `g-deep-link-handler`	Afficher la source, la cible, permettre/dénoncer et "Ne pas demander à nouveau"
32	À propos de Dialog `g-about-dialog`	`g-about-dialog-icon`; Portail de versions, licences, mises à jour et diagnostics

Durée d'exécution déclarée

Comportement	Propriétés/Déclencheur	Clavier et événements
Enregistreur raccourci	`data-g-shortcut-recorder`、`data-g-shortcut-control`、`data-g-shortcut-output`	Esc annule, suppression efface, problèmes `gardener:shortcutchange`
Onglets de bureau	`data-g-desktop-tabs`、`data-g-desktop-tab`、`data-g-desktop-tab-close`	Flèche/Accueil/Fin, Ctrl/⌘+Tab, Ctrl/⌘+W, touche du milieu pour fermer
Récupérateur de fichiers autochtones	`data-g-native-file-picker`、`data-g-native-file-trigger`、`data-g-native-file-value`	Repli d'entrée natif ; émis `gardener:nativefiles`
Commutateur de fenêtres	`data-g-window-switcher`、`data-g-window-item`	Ctrl/⌘+`, touches fléchées, Entrée, Échap
Réutiliser le runtime	`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`	Colonnes, commandes, menus, navigation, Dock, barre d'état et boîte de dialogue À propos

Contrat hôte Tauri/Electron

<!-- Chargez un adaptateur uniquement si l'hôte a fourni un pont sur liste blanche -->
<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>

Utilisation des électrons contextIsolation Avec le préchargement de sécurité, exposez uniquement les méthodes de liste blanche telles que Réduire, Maximiser/Restaurer et Fermer ; n'activez pas l'intégration de nœuds et n'exposez aucun canal IPC à la page.
Tauri v2 est injecté dans l'API de la fenêtre par l'application; les capacités de permission, le système de fichiers, Updater, Deep Link, Tray et multi-window sont configurés en fonction de la capacité de l'application et ne sont pas automatiquement appliqués par CSS.
app-region: drag et -webkit-app-region: drag Uniquement responsable des zones déplaçables ; les boutons, liens, entrées et menus doivent être placés dans g-desktop-no-drag Ou protégé par sélecteur intégré.
Plateforme disponible data-g-os="macos" ou data-g-platform="macos" Basculer le contrôle des fenêtres des feux de circulation ; Windows/Linux conserve le contrôle rectangulaire droit.
Les mises à jour, les permissions, la sélection de fichiers, le plateau, la multi-fenêtre, l'enchaînement profond, l'instance unique et la récupération d'écrasement exigent tous que l'entreprise ou l'hôte retourne des résultats réels; les composants fournissent seulement une présentation prévisible, des événements, une mise au point et des structures d'état.

Réceptivité, accessibilité et impression

g-desktop-workspace Construisez une requête de conteneur : moins de 56rem cache l'inspecteur, moins de 40rem cache le Dock et simplifie la barre de titre; des panneaux indépendants peuvent encore être affichés par l'intermédiaire de Toggle.
Les balises de document, le panneau de commande, les menus, les colonnes, l'enregistrement des touches de raccourci et le sélecteur de fenêtre ont tous des chemins de clavier ; Les balises sales émettent un message annulable avant la fermeture beforetabclose。
L'attribut direction logique remplace RTL; Réduction du mouvement arrête les impulsions de synchronisation; Couleurs forcées fournit un aperçu clair de l'activité/tab/command actuelle.
Cacher la fenêtre Chrome, barre d'activité, barre d'état, barre d'outils, panneau inférieur et toutes les couches flottantes lors de l'impression, étendre le contenu principal, Dock et Inspecteur pour éviter le recadrage.
Surface blanche par défaut, bordure 1px et 4px petits coins arrondis; les ombres ne sont utilisées que pour les superpositions réelles telles que les panneaux de commande, les commutateurs de fenêtre et les menus.

Liste des capacitésEnregistrer les 32 modes, 8 familles de capacités et matrices d'essai;Exemple de bureau autonomeCouvre les fenêtres, espaces de travail, onglets, commandes, raccourcis, fichiers, plateaux, mises à jour, notifications et état de restauration.

Produits AI et composants interactifs intelligents

Les capacités de la catégorie 15 couvrent l'ensemble de la chaîne de tâches de l'adjointe à l'IA, du copilote, de l'équipe de travail de l'agent, des outils de génération, des Q et A de la base de connaissances, des produits multimodaux et du client de bureau de l'IA. Les 32 modes s'étendent de l'entrée de session à l'invite, au raisonnement, à la sortie en continu, à l'approbation d'outil, à la multi-agent, à la source et à l'artefact, au contexte et au coût, à la voix, aux permissions, à la protection de la vie privée, à la sécurité et à l'évaluation de la rétroaction, et ne réduisent pas les erreurs de produit d'IA à "chat bulle + boîte d'entrée".

Différences par rapport au protocole de génération de pages AI :Cette section est pour l'interface utilisateur produit AI pour les utilisateurs finaux; le texte suivant Protocole de génération de pages AI est une contrainte pour utiliser Gardener sur des générateurs. Le premier fournit des composants d'interface, et le second spécifie l'ordre dans lequel les capacités, recettes, composants et classes d'outils sont sélectionnés.

Espace de travail en temps réel sur l'IA

Contexte 38%

Veuillez générer un portail d'entreprise multi-locataires.

G

Gardener AgentTravail

Recette de portail d'entreprise assortie, vérifier les autorisations, les composants CMS et Dashboard.

Correspond aux besoins du locataire, du workflow, du tableau de bord, de la bibliothèque multimédia.

Exiger l'approbation du modèle de page d'écriture

Modifier seulement le répertoire généré du projet actuel.

portée : générée/** · opération : création/mise à jour

Matrice complète de 32 modes

#	Patterns et classes de racines	Composante stable/statut/objectif
1	Espace de travail AI `g-ai-shell`	`g-ai-sidebar`、`g-ai-sidebar-header`、`g-ai-main`、`g-ai-header`
2	Liste de conversations `g-conversation-list`	`g-conversation-item`、`g-conversation-title`;Histoire, épinglé, groupé et session en cours
3	Fil de chat `g-chat`	`g-chat-list`、`g-ai-empty-chat`; Vide, Chargement, Streaming, Erreur
4	Message AI `g-message`	`g-message-avatar`、`g-message-meta`、`g-message-body`、`g-message-actions`;Utilisateur/Assistant/Système
5	Compositeur rapide `g-composer`	`g-composer-input`、`g-composer-toolbar`、`g-composer-status`; Entrée pour envoyer, Maj+Entrée pour terminer et arrêter
6	Pièce jointe `g-attachment`	`g-attachment-list`、`g-attachment-preview`、`g-attachment-name`、`g-attachment-meta`
7	Démarreur rapide `g-prompt-starter`	`g-prompt-starter-header`、`g-prompt-suggestions`、`g-prompt-suggestion`
8	Bibliothèque rapide `g-prompt-library`	`g-prompt-card`;Recherche, catégorie, collection, modèle paramétré
9	Menu de citation / Slash `g-ai-command-menu`	`g-ai-command-group`、`g-ai-command-item`、`g-mention`、`g-slash-command`
10	Sélecteur de modèle `g-model-selector`	`g-model-selector-trigger`、`g-model-selector-menu`、`g-model-option`
11	Penser `g-thinking`	`g-thinking-trigger`、`g-thinking-content`; Frappé, élargi, en streaming
12	Réponse de Streaming `g-streaming-response`	`g-streaming-response-header`、`g-streaming-response-body`、`g-streaming-response-actions`、`g-stream-cursor`
13	Appel d'outils `g-tool-call`	`g-tool-call-header`、`g-tool-call-status`、`g-tool-call-body`、`g-tool-call-progress`
14	Approbation de l'outil `g-approval`	`g-approval-title`、`g-approval-scope`、`g-approval-actions`;Approuvé/Rejeté/Annulé/Expiré
15	État de l'agent `g-agent-status`	Idle, travail, attente, bloqué, complet, échoué
16	Régime des mandataires `g-plan`	`g-plan-header`、`g-plan-list`、`g-plan-item`
17	Conseil multi-agents `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`; Transfert de contenu et reprise manuelle
19	Sources / Citations `g-sources`	`g-source-list`、`g-source`、`g-citation`;Positionnement et crédibilité des citations
20	Espace de travail artéfact `g-artifact-layout`	Boîte de dialogue et prévisualisation/code/document à double surface
21	Panneau d'artéfacts `g-artifact-panel`	`g-artifact-toolbar`、`g-artifact-tabs`、`g-artifact-content`、`g-artifact-status`
22	Arbre de fichiers AI `g-file-tree`	`g-file-tree-item`;Hierarchie, expansion, sélection et navigation au clavier
23	Historique de la version `g-version-list`	`g-version`;Produit par, temps, version actuelle, comparer et restaurer
24	Galerie de la génération `g-generation-grid`	`g-generation-card`;Résultats multiples, variations, sélections et édition continue
25	Titulaire d'un lieu de production `g-generation-placeholder`	Enquêté, générateur, partiel, complet, échoué
26	Contexte/mémoire `g-ai-context-manager`	`g-ai-memory-list`、`g-ai-memory-item`、`g-ai-context-sources`、`g-context-meter`
27	Coût / Limite tarifaire `g-ai-usage-panel`	`g-ai-usage-grid`、`g-ai-usage-metric`、`g-ai-limit-status`、`g-cost`、`g-limit`
28	Session vocale `g-voice-state`	`g-voice-bar`、`g-voice-state-label`; Écoute, traitement, discours, erreur
29	Portée de la permission `g-permission-scope`	`g-permission-scope-header`、`g-permission-scope-list`;Ressource, exploitation, date limite, source
30	Avis de confidentialité `g-privacy-notice`	Formation, conservation, politiques transfrontalières, politiques ministérielles et description de renseignements sensibles
31	Sécurité / Avis de politique `g-ai-safety-notice`	`g-ai-safety-icon`、`g-ai-safety-main`、`g-ai-safety-actions`
32	Commentaires/Évaluation `g-ai-feedback`	`g-ai-feedback-question`、`g-ai-feedback-options`、`g-ai-feedback-option`、`g-ai-feedback-detail`

Runtimes dédiés ou réutilisés

Comportement	Propriétés	Interface clé
Compositeur IA	`data-g-ai-composer`、`data-g-composer-input`、`data-g-composer-send`、`data-g-composer-stop`	Hauteur automatique, Entrée/Maj+Entrée,`promptsubmit`、`promptstop`, État de diffusion
Remplissage rapide	`data-g-prompt-fill`、`data-g-prompt-target`、`data-g-prompt-value`	Remplissez le modèle Starter/Bibliothèque dans le Composer spécifié et émettez une entrée.
Approbation IA	`data-g-ai-approval`、`data-g-approval-choice`	Annulable avant l'événement, approuvé/rejeté/annulé, réinitialisation de l'API
Commentaires IA	`data-g-ai-feedback`、`data-g-feedback-value`、`data-g-feedback-detail`	Raison de l'évaluation, explication complémentaire,`feedbackchange`、`feedbacksubmit`
Réutiliser le runtime	`data-g-dropdown`、`data-g-accordion`、`data-g-roving-nav`、`data-g-tabs`、`data-g-tree`	Sélection de modèle, Thinking/Tool, menu de commandes, balise Artifact, arborescence de fichiers

<form class="g-composer" data-g-ai-composer>
  <textarea class="g-composer-input"
            data-g-composer-input></textarea>
  <button data-g-composer-stop hidden>Arrêt</button>
  <button data-g-composer-send>Envoyer</button>
  <span data-g-composer-status></span>
</form>

Statut, fiducie et limites des entreprises

Le streaming doit fournir les états Stop, Paused/Stopupper/Complete/Error; l'animation du curseur n'est améliorée que, Reduce Motion éteint l'animation.
La pensée affiche un résumé de raisonnement lisible ou un progrès par défaut et n'exige pas que la chaîne de raisonnement privé modèle soit divulguée; le produit doit clairement distinguer entre « résumé », « journal d'outils » et « réponse finale ».
Séparation de l'appel d'outils et approbation de l'outil : L'état de l'appel ne peut remplacer la confirmation de l'autorisation; les autorisations destructives, de communication externe, de paiement, de données sensibles et persistantes doivent être vraiment approuvées par l'exécution de l'entreprise.
Sources/Citations représente une relation de citation et ne prouve pas automatiquement l'authenticité; l'entreprise doit conserver l'URL source, le fragment, le temps et l'accessibilité, et le contenu généré doit encore être vérifié.
Contexte/mémoire doit permettre l'affichage de la source, la suppression ou la désactivation; La limite des coûts/taux doit utiliser le mesurage réel du moteur et ne peut être estimée par la façade pour prétendre être une facture.
Avis de sécurité ne remplace pas la politique côté serveur; Avis de confidentialité ne remplace pas le consentement légal. L'assurance-chômage doit montrer pourquoi elle a été bloquée, si elle peut faire appel et comment les données sont conservées et utilisées.
Utiliser la surface blanche, la bordure 1px et les petits coins arrondis 4px dans tous les modes; effondrer les modes Artifact, Sidebar et Dual Column à 960/704/512px largeur du conteneur, et remplacer RTL, Couleurs forcées et Imprimer.

Liste des capacitésEnregistrer les 32 modes, les 8 familles d'aptitudes et la matrice de test complète;Exemple d'IA autonomeCouvre Dialog, Compositeur, Prompt, Thinking, Tool Approval, Agent, Artefact, Construire, Contexte, Charges, Permissions, Sécurité, Voix et Rétroaction.

Complete page et solutions industrielles

La catégorie 16 est la couche de composition la plus élevée de Gardener: les 15 premières catégories fournissent la disposition, les composants, les chaînes d'affaires et les interactions spécifiques, et cette catégorie les solidifie en 32 contrats à pleine page directement sélectionnables. Il couvre les particuliers et les entreprises, les sites Web publics et les entreprises de référence, les entreprises en général et les industries verticales, et est également adapté pour les navigateurs, les pages Web mobiles, PWA, Tauri et Electron WebView. AI devrait d'abord sélectionner la classe racine de page et Recipe correspondant ici, puis remplir les composants au lieu d'organiser la page entière CSS à partir de zéro.

32 pages complètes52 recettes totales8 famillesDemande de renseignements sur les conteneursRTLImprimer

Tableau de bord en temps réel squelette page pleine

Aperçu général de l'entreprise

Plateforme de contenu multi-tenu

Les en-têtes, les indicateurs, le contenu principal, les zones auxiliaires et les plis mobiles ont des contrats stables.

Site28,640↑ 12.4%

page486kSur 42 sujets

Examen138Traitement des besoins

32 matrices des pages complètes

#	Classe racine de la page	Principaux composants et utilisations
1	Débarquement de produits `g-product-landing`	`g-landing-hero`, copie, visuel, preuve, coupe ; Produits SaaS, applications, IA et nouvelles versions de produits
2	Accueil `g-corporate-home`	`g-corporate-hero`, confiance, réseau de solutions; portail de groupe, de marque, d'institution et d'entreprise
3	Maison individuelle `g-personal-home`	`g-personal-intro`, liens, chronologie ; marque personnelle, CV et page d'accueil d'expert
4	Portefeuille `g-portfolio-page`	`g-portfolio-hero`, en vedette, grille de projet; conception, photographie, développement et bibliothèque de cas
5	Index du blog `g-blog-index`	`g-blog-index-header`, catégories, grille d'entrée; blog, nouvelles et informations d'entreprise
6	Article `g-article-page`	`g-article-page-layout`, corps, toc, méta ; longs articles, actualités, tutoriels et impression
7	Portail Docs `g-docs-portal`	`g-docs-layout`, barre latérale, principal, toc; produit, API et documentation interne
8	Centre d'aide `g-help-center-page`	`g-help-center-hero`, recherche, mise en page, à part ; FAQ et assistance client
9	Résultats de la recherche `g-search-results-page`	`g-search-results-layout`, filtres, liste, résultat ; rechercher dans le site, les documents, les produits et les ressources
10	Personne-ressource `g-contact-page`	`g-contact-layout`, détails, formulaire ; contact, conseil commercial et collecte de leads
11	Prix `g-pricing-page`	`g-pricing-page-header`, grille, carte ; SaaS, adhésions et forfaits de services
12	Tableau de bord `g-dashboard-overview`	`g-dashboard-metrics`, mise en page, panneau ; aperçu des opérations, cockpit et surveillance
13	Liste des administrateurs `g-admin-list-page`	`g-admin-list-header`, filtres, contenu, barre d'outils ; gestion des ressources en arrière-plan
14	Détails du dossier `g-record-detail-page`	`g-record-detail-layout`, section principale, secondaire, section ; détails du client, de la commande, du contenu et des actifs
15	Paramètres `g-settings-center`	`g-settings-center-layout`, navigation, contenu, section ; produits, organisations et préférences de bureau
16	Centre utilisateur `g-user-center`	`g-user-center-layout`, navigation, contenu ; information, sécurité, commandes et droits d'adhésion
17	Notifications `g-notification-center-page`	`g-notification-groups`, groupe, ligne ; notifications, rappels et mises à jour
18	À bord `g-onboarding-flow`	`g-onboarding-aside`, principale, étape, progression ; initialisation, règlement et importation
19	CRM `g-crm-workspace`	`g-crm-layout`, nav, principal, inspecteur, pipeline ; clients, opportunités d'affaires et suivi des ventes
20	Espace de travail du projet `g-project-workspace`	`g-project-layout`, tableau, colonne, inspecteur ; projets, tâches et collaboration R&D
21	Centre de soutien `g-support-center`	`g-support-layout`, fil de discussion, messages, réponse ; service client, bon de travail et après-vente
22	Centre d'approbation `g-approval-center`	`g-approval-layout`, file d'attente, colonne, inspecteur ; processus, coût, contenu et approbation de l'autorité
23	Base de connaissances `g-knowledge-base`	`g-knowledge-hero`, recherche, mise en page; wiki d'entreprise, bibliothèque système et aide interne
24	Portail d'apprentissage `g-learning-portal`	`g-learning-layout`, grille de cours, carte; cours, formation et portail scolaire
25	Portail événementiel `g-event-portal`	`g-event-hero`, grille, carte ; conférences, expositions, événements communautaires et diffusés en direct
26	Portail de réservation `g-booking-portal`	`g-booking-layout`, résultats, synthèse ; réservations médicales, de lieux, d'hôtels et de services
27	Soins de santé `g-healthcare-portal`	`g-healthcare-layout`, résumé, dossier, alerte industrielle ; patients et services de santé
28	Finances `g-finance-portal`	`g-finance-layout`, résumé, compte, alerte de l'industrie; banque, richesse et financement des entreprises
29	Fonction publique `g-public-service-portal`	`g-public-service-layout`, résumé, rubrique ; affaires gouvernementales, progrès des candidatures et services pratiques
30	Marché `g-marketplace-page`	`g-marketplace-hero`, filtres, grille, carte ; marché des applications, des services, des talents et des plug-ins
31	Communauté `g-community-page`	`g-community-hero`, flux, barre latérale, publication ; contenu de la communauté, du forum et des utilisateurs
32	Centre d'état `g-status-center-page`	`g-status-overall`, services, historique, incident ; état, panne, maintenance et SLA

Partie publique pleine page

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 et g-solution-empty peut être réutilisé sur 32 types de pages pour garantir que la syntaxe de base de l'IA ne change pas lors d'un changement de secteur.

Sélection, composition et limites des activités

Commencer par solution.* Recette Déterminez le type de page complète, puis sélectionnez la plate-forme, l'axe du sujet et la densité.
La classe racine est responsable des réponses au niveau des pages et des relations de zone; les composants de forme, de données, d'authentification, d'affaires, mobiles, de bureau et d'IA sont toujours peuplés des 15 premières classes.
Les pages marketing, personnelle et de contenu utilisent le défilement naturel des documents; le tableau de bord et le Workbench permettent des colonnes multiples de haute densité; Les services de santé, les finances et le gouvernement ne sont que des contrats d'assurance-chômage et ne remplacent pas les règlements, l'authentification, la protection des renseignements personnels, la vérification et les règles commerciales de soutien.
Tous les modes utilisent l'orientation logique, les petits coins arrondis, la surface blanche; s'effondre à 960px et 704px largeur conteneur, supporte RTL, Mouvement réduit, Couleurs forcées et l'impression.
Les pages racine CRM, Project, Dashboard, Paramètres et Notification peuvent être placées dans Tauri/Electron g-desktop-workspace;Les véritables fenêtres, fichiers, mises à jour et autorisations restent sous la responsabilité de l'adaptateur de bureau.

<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>

Liste des capacitésenregistre les 32 modes racine et 8 familles de capacités;Liste des recettesFournit le terminal, les widgets, le temps d'exécution et le but de chaque page;Exemple autonomeSite public commutable, tableau de bord, CRM, portail industriel et aperçu du centre de statut.

API et schéma publics

De 0.3.0 Démarrer,gardener.public-api.json est une liste canonique d'interfaces publiques de dénomination et de programmation, enregistrant entièrement les couches CSS, les entrées de package, les propriétés de thème, les exportations JavaScript, les comportements, les événements, les adaptateurs de bureau et les champs de compatibilité.

Lecture du manifeste de l'API publique...

Dénomination unifiée

Gamme	Spécification	Exemple
Classes CSS	`g-` + cas de kébab	`g-command-palette`
Variables CSS	`--g-` + cas de kébab	`--g-color-primary`
Attributs comportementaux	`data-g-{behavior}`	`data-g-dialog`
Événement	`gardener:{event}`	`gardener:beforeopen`
Interaction des métadonnées	`behaviors: string[]`	`["dialog"]`
Bridging de bureau	`adapters: string[]`	`["tauri","electron"]`
Plateforme	`platforms: string[]`	`["web","mobile"]`
Identification de la recette	Cas de kébab séparé par points	`solution.admin-list`

Schéma complet

Les onze ensembles de schémas utilisent JSON Schema 2020-12, et les champs inconnus sont rejetés:Composantes、Recettes、Capacités、Services publics、Manifeste、API publique、Constructions、Construction personnalisée、Budgets d'exécution、Rapport sur le rendement、Compatibilité. Tous les schémas d'objet désactivent les champs inconnus ou déclarent explicitement des types de valeurs dynamiques.npm run test:schema Exécution de 48 cas d'utilisation de validation standard à l'aide d'Ajv 2020-12, couvrant dix documents de version/configuration, des champs racine inconnus, dix types de champs imbriqués inconnus, dix types de champs obligatoires imbriqués manquants, des références entre schémas, des identifiants JavaScript, des formats SHA-256, un état de régression de base et des alias compatibles avec les schémas de composants existants ;npm run contracts Continuer à effectuer quinze ensembles de tests de contrat négatifs et vérifier les références croisées des manifestes, la cohérence du code source et des artefacts de build, les sélecteurs, l'attribution des composants réels, l'intégrité SHA-256/SRI, les commandes de build reproductibles, les types/paramètres/signatures de modules, les membres d'instance, les attributs de données, les charges utiles d'événements, les adaptateurs, les types et les scripts de version, les lignes de base de compatibilité, les archives de build, 42 artefacts budgétaires absolus et relatifs, les résultats budgétaires, les versions et le package complet. exportations.

Les 9 modules exportés

Interface module de lecture...

Les 66 comportements et membres d'instance

Chaque élément répertorie les propriétés d'initialisation déclaratives, et getInstance() Renvoie tous les membres de l'objet qui peuvent être appelés.

Contrat de lecture de comportement...

Tous les 75 événements et charges utiles

Répertoriez chaque élément dans son intégralité CustomEvent.detail ; les événements bouillonnent et peuvent être annulés pour before Les sept épreuves du début sont passables preventDefault() Protection du processus empêchant les opérations ultérieures.

Contrat d'événement de lecture...

Tous les attributs de données d'exécution

Les 309 propriétés disponibles pour l'auteur sont divisées en 66 entrées de comportement dans le contrat de comportement ci-dessus, 166 sélecteurs de structure/action et 77 propriétés de configuration supplémentaires; il y a également 27 propriétés d'état maintenues par l'exécution. Les propriétés d'état peuvent être lues simultanément comme configuration initiale, mais les trois premiers ensembles disponibles pour l'auteur sont mutuellement exclusifs et ne sont pas comptés en double.

Sélecteur de structure et d'action

Propriétés du sélecteur de lecture...

Propriétés de configuration supplémentaires

Propriétés de configuration de lecture...

État de la maintenance du temps de fonctionnement

Attributs d'état de lecture...

Contrat d'adaptateur Tauri / Electron

Contrat d'adaptateur de lecture...

Règles de compatibilité

Le champ de spécification du manifeste est behaviors. vieux champ runtimeBehaviors Partout 0.x Ligne de version réservée comme alias compatible en lecture seule ; vieux metadata/schema.json Continuez à pointer vers le nouveau schéma de composants. 1.0.0 promeut le contrat public à Stable et utilise une base de référence de compatibilité lisible par machine pour enregistrer toutes les entrées publiques, couches, thèmes, environnements d'exécution, composants et recettes de 0.9.0 ; 1.x doit fournir des enregistrements de modifications et des instructions de migration avant de supprimer toute entrée compatible, et doit passer par la période de dépréciation d'au moins deux versions mineures. La suppression réelle ne peut avoir lieu que dans une nouvelle version majeure.

Catalogue des composants

Liste des composants gardener.manifest.json, contient des catégories, types, états, sélecteurs, variantes, widgets, fonctions, plateformes, comportements, adaptateurs et contrats d'accessibilité. La dynamique ci-dessous affiche toutes les entrées et toutes les métadonnées, plutôt qu'une liste curated.

Liste des composants de lecture...

État des composants

Les nouveaux composants doivent être examinés pour les paramètres par défaut, Hover, Focus Visible, Active, Disabled, Readonly, Loading, Empty, Error, and Success; chaque composant n'affichera pas tous les statuts, mais il doit être clair si « sans objet » ou « couvert ».

Durée d'exécution du JavaScript

Indépendant du framework d'exécution, réussi data-g-* Initialisation automatique. MutationObserver gère simultanément les nouveaux nœuds et les attributs comportementaux ajoutés, et convient au SPA, au canevas CMS et au streaming AI pour générer du DOM.

Lecture du manifeste d'exécution...

Boîte de dialogue déclarative

<button data-g-dialog-open="confirm">Ouvrir</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">Confirmer l'opération</h2>
    <button data-g-close>Annuler</button>
  </section>
</div>

API de programmation

import Gardener from "@gardener/css";

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

Gardener.toast({
  title: "Enregistré avec succès",
  message: "La page a été publiée",
  tone: "success"
});

API	Description
`init(root)`	Initialise tout le comportement du nœud racine lui-même et de ses descendants.
`destroy(root)`	Relâchez les auditeurs, les minuteurs et les références d'instance.
`register(name, factory)`	Enregistrer le comportement personnalisé du projet.
`getInstance(element, name)`	Obtenez une instance de comportement unique ou spécifiée.
`emit(element, name, detail)`	Envoi d'un événement Gardener annulable.
`toast(options)`	Créer un état ou un avertissement.
`behaviors`	Lisez le nom de comportement actuellement enregistré.

Événement

gardener:init、gardener:beforeopen、gardener:open、gardener:beforeclose、gardener:close、gardener:change、gardener:dismiss. Avant que l'événement puisse être passé preventDefault() Annuler.

Contrôle d'accès à l'essai au moment de l'exécution (depuis 0,40)

npm run test:runtime Utilisez Node.js intégré coureur de test et Happy DOM pour comparer bidirectionnellement les membres de l'instance réelle pour les 66 comportements de la liste publique, et vérifier l'initialisation, l'idempotence, la destruction et la réinitialisation; tout en couvrant les nœuds dynamiques de MutationObserver, les attributs dynamiques, l'enlèvement des sous-arbres, la destruction de la portée, la coexistence multi-comportement, la destruction globale et l'initialisation événement bouillonnant.

Lorsqu'un comportement d'exécution est ajouté ou rebaptisé, l'API publique, les appareils échantillon/comportement et les tests par comportement doivent être synchronisés, sinon les tests échoueront en raison des appareils, instances ou membres manquants.

Page recette

Recette complète JSON Définit la classe racine de page haute fréquence, tous les composants nécessaires, les plateformes applicables, les comportements, les adaptateurs de bureau et l'utilisation. Ce n'est pas un modèle de capture d'écran, mais une structure stable qui peut être changée en thèmes, est réactive et peut être continuellement combinée. L'expansion suivante conserve tous les champs pour chaque recette.

Liste des recettes de lecture...

Les systèmes d'IA et de gabarit devraient correspondre en premier recette.id, vérifier à nouveau plates-formes, enfin utiliser pièces détachées forme une structure complète. Ne laissez pas passer une recette pleine page avec un seul composant similaire.

Protocole de génération de pages AI

Gardener fournit cinq couches de sources de vérité pour l'IA : la liste publique des API répond « quels noms et entrées stables sont autorisés à être utilisés », la liste des capacités répond « si les capacités régulières de l'industrie sont mises en œuvre », la liste des composants répond « ce qui est là », la liste des classes d'outils répond « quel est le nom précis de la classe », et la liste des recettes répond « comment démarrer une page complexe ».

{
  "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"
  ]
}

Générer des contraintes

Vérifiez d'abord gardener.capabilities.json, confirment que les capacités industrielles correspondant aux exigences ont été atteintes.
Il est interdit d'inventer des informations qui n'existent pas dans le Manifeste g-* .
Les pages à haute réutilisation ne sont pas assemblées à partir de zéro lorsque des recettes existent.
Prioriser l'utilisation des classes de composants sémantiques; les classes d'outils ne traitent que les différences locales.
Les composants interactifs doivent utiliser le temps d'exécution enregistré et des structures ARIA spécifiées.
Vérifier les paramètres, clavier, focus, status, RTL, impression et environnements à contraste élevé avant la sortie.
Lorsqu'il y a des lacunes, enregistrez-les en tant qu'exigences de capacité-cadre et ne mélangez pas les CSS temporaires dans les interfaces système.

Tauri/Electron

.g-desktop-shell Fournit une disposition de fenêtre fixe adaptée aux éditeurs, aux outils d'IA et aux super CMS. Passer data-g-platform et data-g-os Détails de la plateforme de contrôle.

<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>

Mise en place sécurisée

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

// preload N'exposer que les actions de la liste blanche
contextBridge.exposeInMainWorld("gardenerDesktop", {
  windowAction: action => ipcRenderer.send("gardener:window-action", action)
});

Ne pas activer l'intégration des nœuds dans le soumissionnaire et n'exposer aucune CIB à la page. L'adaptateur accepte seulement de minimiser, maximiser, fermer et faire glisser les actions de la liste blanche.

Constructions à la demande, types, compatibilité entre les versions et accès à la mainlevée

1.0.0 Rouler cinq plates-formes, 28 paquets de composants, des budgets de compression et de rendement officiels à la base de référence mesurée de la version précédente, et mettre à niveau le contrat public à Stable, en continuant de conserver les types, la compatibilité entre les versions et l'accès réel du paquet de lancement npm.gardener.builds.jsonEnregistré les cinq profils de plate-forme, 28 paquets de composants, 506 mappages de composants dans un ou plusieurs paquets propriétaires réels, signatures de sélecteur, cibles de navigateur, paramètres de constructeur, et SHA-256/SRI pour les 42 artefacts de production;gardener.performance.jsonEnregistrer les résultats bruts, gzip, Brotli, le rapport de compression et le volume de paquets npm de chaque construction officielle.

TypeScript est compatible avec les versions croisées

Les builds sont automatiquement générés à partir de l'API publique gardener.d.ts、gardener.tauri.d.ts et gardener.electron.d.ts. 66 comportements et 75 événements forment un type d'union littéral complet ;npm run test:types Compilez de vrais consommateurs en utilisant le mode strict TypeScript, couvrant les exportations par défaut et nommées, les usines de comportement, les toasts, les requêtes d'instance et deux types de ponts de bureau.

gardener.compatibility.json Solidification de 1 145 contrats hérités de la version 0.9.0, comprenant les 47 entrées de package, les couches CSS, les thèmes, les environnements d'exécution, les propriétés de données, les adaptateurs, 506 composants et 52 recettes.npm run verify:compatibility Autoriser les ajouts 1.x ultérieurs et interdire les suppressions sans chemins de migration ; au seuil stable de 1.0.0, les entrées existantes seront également vérifiées de manière inverse pour voir si elles sont manquantes. Les entrées obsolètes restent dans au moins deux versions mineures et ne peuvent être supprimées que dans une nouvelle version majeure. Sa structure fermée est composée de Schéma de compatibilité Contraintes.

Le package prend explicitement en charge Node.js >=18.18, Chrome/Edge/Firefox 100+, Safari/iOS 15.4+ et ESM ; le portail principal et l'adaptateur de bureau fournissent des conditions types Exporter. L'initialisation automatique du runtime est marquée comme sideEffectspour éviter toute suppression accidentelle par le conditionneur.npm run verify:package Vérifiera la liste blanche réelle des packages npm, chaque cible d'exportation, type de fichier, les fuites du répertoire de développement et Publint ;prepublishOnly Appliquer terminé release:verifyet activez les packages publics et npm Provenance.

5 fichiers de plateforme

Dossier	Entrée du colis	Couche exclusive	Environnement d'exploitation
Web	`./platform/web.css`	Composants génériques, à l'exclusion des combinaisons mobiles/desktop spécifiques	Pages PC et web responsive
mobile	`./platform/mobile.css`	Composants universels + compositions mobiles	Réseau mobile, PWA, hybride WebView
Bureau	`./platform/desktop.css`	Composants communs + bureau / compositions de bureau	Navigateur de bureau et shell d'application
tauri	`./platform/tauri.css`	Adaptateur de bureau à entrée légère indépendante CSS + Tauri	Tauri v2
électron	`./platform/electron.css`	Adaptateur de pont de sécurité CSS + Electron	Renderer Electron

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

Génération simultanée de CSS lisible par répertoire, formelle .min.css, carte source externe et manifeste de build fermé ; Tauri/Electron copie également l'adaptateur JavaScript correspondant. L'entrée officielle du package de la plateforme est unifiée avec .css terminez et vérifiez que l'héritage imbriqué peut être entièrement étendu via le test d'empaquetage CSS du package d'installation réel.

28 paquets de composants stables

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 Standardiser l'export de tous les packages compressés officiels ci-dessus,./component/* Réservé comme alias compatible. Lors de la construction par nom de composant, le constructeur dépend du sélecteur de classe et data-g-* Le code source réel correspond aux propriétés, résolvant 506 composants en un ou plusieurs packages d'appartenance complets au lieu de tronquer les sélecteurs individuels, de sorte que les pseudo-classes, états, animations, sous-parties, requêtes de conteneur et règles de dépendance ne soient pas perdus.

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

Les paramètres incluent --platform、--components、--packs、--utilities / --no-utilities et --out. Les plates-formes, packages ou composants inconnus échouent immédiatement ; le listing de sortie est donné par Schéma de construction personnalisé Vérification.

Chaque manifeste de compilation personnalisé génère également SHA-256 et SRI standard pour CSS lisible, CSS compressé, Carte source, et l'adaptateur Tauri/Electron copié avec le paquet. Le destinataire peut vérifier par fichier que la livraison est complète et n'a pas été remplacée, sans compter sur la machine de construction.

Constructions reproductibles au niveau des octets

npm run verify:reproducible enregistrera la sortie officielle actuelle, réexécutera la version complète, puis comparera le CSS, JavaScript, la carte source, les métadonnées et gardener.builds.json . Toute différence non déterministe dans le manifeste de sortie ou le contenu du fichier échouera ; le rapport de performance ne participe pas à la comparaison d'octets car il contient le temps d'exécution, mais son contrat numérique est revu de manière indépendante par la commande budgétaire.

Compresse formelle et budgétisation du rendement

Les CSS et JavaScript formels utilisent esbuild pour la compression au niveau de la syntaxe sans utiliser de remplacement régulier ; l'entrée de compression principale et chaque build personnalisée génèrent une carte source externe traçable. Le CSS compressé utilise une bannière MIT stable qui ne change pas avec les versions pour éviter que le texte de la version pure ne perturbe la ligne de base de Brotli. Le CSS et le runtime non compressés fournissent toujours des versions précises.npm run budget En utilisant gzip niveau 9 et Brotli qualité 11, calculez simultanément raw, gzip et Brotli pour les 42 produits de compression officiels et vérifiez le taux de compression du CSS complet, du Runtime et npm pack --dry-run Nombre de fichiers compressés, décompressés et renvoyés. 1.0.0 utilise les résultats de mesure réels de la version scellée 0.9.0 comme référence immédiate, limitant la croissance brute de chaque produit à pas plus de 2 %, gzip/Brotli à pas plus de 3 %, le package npm emballé à pas plus de 3 %, déballé à pas plus de 2 % et le nombre de fichiers à pas plus de 10 % ; les cinq produits de plateforme ont tous des références historiques directes. Les mesures du volume d'inclusion sont arrondies à 4 Ko emballés et à 64 Ko non emballés, formant une limite supérieure déterministe qui ne sous-estime pas le véritable volume d'inclusion et n'est pas affectée par le cycle de compactage autonome du rapport de performance. L’échec du plafond absolu ou du plafond relatif bloquera la libération.

Produit contrôlé	limite supérieure brute	gzip limite supérieure	Limite supérieure de Brotli
jardinier.min.css	1,050 000 B	145 000 B	65 000 B
jardinier.core.min.css	65 000 B	9 000 B	6 000 B
jardinier.themes.min.css	60 000 B	7 500 B	5 000 B
jardinier.utilities.min.css	550 000 B	80 000 B	18 000 B
jardinier.components.min.css	400 000 B	55 000B	42 000 B
jardinier.ai.min.css	30 000 B	6 000 B	5 000 B
jardinier.runtime.min.js	105 000 B	30 000 B	25 000 B
plate-forme/web.min.css	1 000 000 B	140 000 B	60 000 B
plate-forme/mobile.min.css	1 020 000 B	142 000 B	62 000 B
plate-forme/desktop.min.css	1 030 000 B	143 000 B	63 000 B
plate-forme/tauri.min.css	256 B	256 B	256 B
plate-forme/électron.min.css	256 B	256 B	256 B

Le tableau ci-dessus énumère 12 entrées principales CSS/Runtime; le document budgétaire détaille également la couverture de 2 adaptateurs de bureau, 28 paquets de composants et un total de 42 produits officiellement compressés, sans utiliser un plafond général de partage pour remplacer les inspections de produits uniques.

Le budget du paquet npm est de 2 050 000 B emballés, 16 500 000 B déballés, jusqu'à 92 fichiers. ressources budgétaires performance-budgets.json Gestion et Budgets Schema et Schéma du rapport Protection.

npm run build       # Packages complets et hiérarchisés de 28 composants et 5 fichiers de plate-forme
npm run verify:reproducible # Créez et vérifiez en continu fichier SHA par fichier-256
npm run budget      # 42 Contrôle budgétaire absolu/relatif pour les packages production + npm
npm run verify:compatibility # 1,145 Article 0.9.0 Contrat public
npm run test:types # TypeScript Vérification stricte du consommateur
npm run verify:package # npm Listes blanches, cibles d'exportation et publication
npm run test:build  # 10 Cas d'utilisation de build, de compatibilité, de type, de version et de chemin de défaillance

Accessibilité et internationalisation

Le cadre fournit une base pour les styles de focus, le mouvement réduit, le contraste élevé et les couleurs forcées, mais la désignation sémantique et l'ordre de contenu restent la responsabilité de l'auteur de la page.

ClavierLes onglets, Menu, Arbre, Grille, Carousel, Splitter, Dialog et Palette de Commande ont tous des chemins de clavier.

ObjetBoîte de dialogue et panneau de commande contraignent focus, restaure la source de déclenchement après la fermeture; les éléments invisibles quittent l'ordre de l'onglet.

NomLes boutons d'icônes nécessitent l'étiquetage aria; les formulaires exigent l'étiquetage, l'étiquetage aria ou l'étiquetage aria.

État dynamiqueToast utilise statut/alerte; expansion, sélection, élément courant synchronisé par statut ARIA.

DirectionLa disposition utilise des propriétés logiques et les composants remplacent la direction d'animation et les flèches sous RTL.

Animationpréfère réduire la vitesse de compression de la durée d'animation et éteindre le défilement en douceur.

Liste de contrôle de livraison

La page a le bon lang et titre unique.
La hiérarchie des caps est continue et le repère a un nom identifiable.
Toutes les images sont adaptées à leur usage alt; Utilisez un alt vide pour les images décoratives.
Clavier uniquement pour les tâches critiques, le focus est toujours visible.
Les couleurs du texte et de l'état correspondent à WCAG AA; ne peuvent pas compter uniquement sur la couleur pour exprimer l'état.
Toujours utilisable à l'échelle de 200%, RTL, Mouvement réduit, Couleurs forcées.
Les cibles tactiles mobiles utilisent une densité tactile d'au moins 44px.

1.0.0 Matrice d'essai automatisée

Contrôle d'accès	Environnement	Quantité	Dépassement
`test:build`	Node.js + esbuild + Ajv	10	Limites de la plate-forme, propriété de composants réels, compression formelle, Carte source, SHA-256/SRI, constructions reproductibles, budgets absolus/relatifs, types, lignes de base de compatibilité, politiques de support, constructions personnalisées, chemins de défaillance et résolution d'installation du paquet npm
`test:browser`	Chromium de bureau + WebKit	48	Tous les 21 exemples, Page d'accueil et documentation, console, requête, style, dépassement horizontal, clavier de dialogue et cycle de vie de focus
`test:browser:firefox`	Bureau Firefox	24	Même que l'accès par défaut de bureau; exécuté sur hôte ou CI avec Playwright Firefox système runtime
`test:mobile`	Pixel 7 Chromium + iPhone 13 WebKit	52	Tous les 21 exemples, Page d'accueil d'atterrissage et documentation, reflow, 44px cible tactile, Feuille de fond, écran étroit 320px et écran paysage
`test:a11y`	Chromium+ Axe	25	21 exemples et accueil de deux pages de WCAG 2 A/AA, 2.1 A/AA, 2.2 AA, plus clavier, focus, RTL, réduction du mouvement, couleurs forcées
`test:html`	parse5	24	21 Exemples, Paramétrage de la maison et des documents, Duplicate IDs, ARIA Références, Langues, Titres, Viewports et Listes

npm run test:html             # 24 Cas d'utilisation de la structure HTML
npm run test:browser          # Chromium + WebKit，48 Cas d'utilisation du bureau
npm run test:browser:firefox  # Firefox Contrôle d'accès autonome, 24 cas d'utilisation de bureau
npm run test:browser:all      # Chromium + Firefox + WebKit，72 Cas d'utilisation du bureau
npm run test:mobile           # Pixel 7 + iPhone 13，52 cas d'utilisation mobiles
npm run test:a11y             # Axe、Matrice clavier et environnement, 25 cas d'utilisation
npm run test:e2e              # 125 cas d'utilisation réels du navigateur par défaut
npm run test:types            # TypeScript Contrôle strict des accès des consommateurs
npm run verify:compatibility  # 1,145 Élément de référence compatible 0.9.0
npm run verify:package        # npm Fichiers, exportations et publication
npm test                      # 281 Cas d'utilisation de l'automatisation par défaut et toutes les portes statiques, contractuelles, de type, compatibles, de version, reproductibles et budgétaires

Axe Gate bloque toutes les violations détectées par les règles WCAG A/AA sélectionnées, les passe sans dégradation par impact, et produit la règle, le sélecteur de noeuds, HTML, et le résumé de remise en état. L'automatisation ne peut remplacer les tests de lecture d'écrans humains; les produits de production devraient toujours utiliser NVDA/JAWS/VoiceOver pour les visites critiques.

Impression et sortie de documents

La couche d'impression de base fera basculer le texte noir sur un fond blanc, masquera les couches flottantes et la navigation fixe, répétera les en-têtes de tableau, empêchera les cartes et les médias de se propager sur les pages et permettra aux codes longs de s'enrouler automatiquement. Raster complet disponible en plus g-print-col-1 À g-print-col-24, classes d'impression offset et visible/cachée, utilisées pour un réarrangement indépendant dans la largeur du papier. Les éditeurs de rapports, de factures et de CMS disposent également de capacités d'impression au niveau des recettes.

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

Les classes d'outils disponibles incluent g-print-hidden、g-print-block、g-print-break-before et g-break-inside-avoid。

Personnaliser, inspecter et libérer

Couverture du projet

@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;
  }
}

Vérification du cadre

npm run build      # Packages complets et hiérarchisés de 28 composants et 5 fichiers de plate-forme
npm run build:platform -- --platform mobile # Construction orientée plateforme
npm run build:custom -- --components button,dialog # Construction dirigée par les composants
npm run verify:reproducible # Construction reproductible au niveau octet du contrôle d'accès
npm run budget     # raw / gzip / Brotli、Budgets absolus/relatifs et des packages npm
npm run verify:compatibility # 0.9.0 Référence contrat public cross-version
npm run test:types # TypeScript Vérification stricte du consommateur
npm run verify:package # npm Fichiers, cibles d'exportation et publication
npm run test:schema # Ajv 2020-12 Vérifier onze ensembles de schémas
npm run test:build # 10 Cas d'utilisation de build, type, compatibilité, version et chemin de défaillance
npm run contracts  # Schema、API publique, noms et contrats entre manifestes croisés
npm run test:runtime # 66 Comportement et cycle de vie du DOM
npm run test:html   # Exemple et structure HTML de l'accueil
npm run check      # Cohérence des thèmes, des composants, de l'exécution et du manifeste
npm run audit      # Token、Contraste, limites des paquets, exportation et version
npm run validate   # Recettes, exemples de noms de classes et accessibilité de base
npm run test:e2e   # Navigateurs multiples, mobile et Axe
npm test           # Effectuer toutes les vérifications du cadre

node website/scripts/build-css-catalog.mjs
node website/scripts/check.mjs
node website/scripts/check-coverage.mjs  # Vérification zéro omission du document

Les nouvelles capacités doivent être synchronisées

Mettre en œuvre CSS ou Runtime.
Inscription metadata/components.json。
Enregistrement des capacités industrielles metadata/capabilities.json, enregistrement de pages complexes metadata/recipes.json。
Examiner la matrice complète de l'état et de l'environnement.
Ajouter des exemples et une entrée de validation.
Reconstruisez tous les manifestes et exécutez les régressions du navigateur.

Le navigateur d'annuaire du site de documents lit directement css/dist, Vue, React, AngularJS et Blazor metadata / dist Liste. Par conséquent, une fois le framework construit, il n'est pas nécessaire de mettre à jour manuellement le CSS ou le nombre de composants, les noms de comportement, les entrées ou les données de recherche de classes d'outils des quatre ensembles de couches d'adaptation.