Gardener Documentación

Inicio rápido

Gardener puede usar solo CSS o cargar un tiempo de ejecución sin dependencia para un comportamiento interactivo. El paquete completo incluye todos los temas, componentes y clases de herramientas de forma predeterminada.

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

Visual predeterminado:Lienzo blanco, texto neutro, esquinas redondeadas básicas de 4 píxeles, sombra restringida. Las esquinas redondeadas y una jerarquía fuerte deben seleccionarse explícitamente y no contaminarán las páginas comerciales ordinarias.

Orden de selección recomendado

Confirmar destino y tipo de página.
Priorizar la selección de estructuras a partir de recetas de páginas.
Función de llenado con componentes registrados.
Utilice únicamente clases de herramientas para manejar el diseño y el espaciado local.
Finalmente configure el eje del tema y verifique la matriz de entorno completa.

Instalación y paquetes

La compilación actual no tiene dependencias de tiempo de ejecución de terceros. Disponible a través del administrador de paquetes o copiado directamente dist/ .

npm install @gardener/css

Exportar	Contenido	Escenarios de uso
`@gardener/css`	CSS completo + entrada de tiempo de ejecución predeterminado	Úselo directamente desde el primer momento
`core.css`	Token, eje temático, Restablecer, Base	Biblioteca de componentes de creación propia
`themes.css`	42 Color principal y modo de visualización	Reutilizar solo temas
`utilities.css`	Todas las clases de herramientas responsivas	Página de fórmula atómica
`components.css`	Componentes genéricos que no son de IA y rásteres completos	Sistema empresarial
`ai.css`	Componentes específicos de IA	Chat, Agente, Herramienta de Generación
`./tauri`	Adaptador de control de ventana Tauri	WebView
`./electron`	Adaptador de puentes de seguridad Electron	Cliente de escritorio
`./manifest`	Lista de componentes y entornos	Herramientas de IA/Automatización
`./utilities-manifest`	Declaración de clase de herramienta y condiciones de respuesta	Búsqueda de nombre de clase exacto
`./recipes`	Receta de página de alta frecuencia	Selección de esqueleto de página
`./capabilities`	Estado de implementación de capacidad industrial y matriz de interfaz	Prevenir omisiones a nivel de concepto
`./public-api`	Denominación pública, comportamientos, eventos y contratos de adaptador	Generadores y herramientas de integración
`./builds`	Archivos de plataforma, paquetes de componentes, propiedad de componentes y contratos de constructor	Generar por plataforma/componente
`./performance`	informes de tamaño de paquetes raw, gzip, Brotli y npm	Puerta de rendimiento de liberación
`./components-manifest`	Lista de orígenes de componentes	Recuperación de componentes y generación de código
`./schema/*`	Diez conjuntos de esquemas JSON cerrados	Verificación de contrato

Agrupar por capa

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

Gardener Vue 3 Project

@gardener/vue es la capa de adaptación oficial de Vue 3 de Gardener CSS 1.0.0, la versión actual es 1.0.0 Estable, compatible con Vue >=3.4.0 <4.0.0 con Node.js >=18.18. Mapea los 506 componentes CSS y 66 comportamientos DOM elemento por elemento, al tiempo que proporciona 538 exportaciones de tiempo de ejecución raíz, 21 exportaciones de tipo TypeScript, 29 puntos de entrada de paquetes y 28 proxies de paquetes CSS de componentes.

506Componente G* nombrado

538Exportación del tiempo de ejecución raíz

29Entrada de paquete público

28Paquete CSS de componentes

Instalación y complementos globales

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

Cobertura completa de opciones de complementos prefix、components、directive y initialize. Necesita personalizar el prefijo, registrar solo algunos componentes, cerrar v-gardener o se debe pasar la inicialización del tiempo de ejecución diferida createGardenerVue(options) Crear complemento.

Proveedor de temas y componentes bajo demanda

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

GardenerProvider Los diez ejes temáticos de son theme、mode、neutral、typography、shape、density、elevation、motion、platform y os. La casa y las muestras permanecen blancas con esquinas redondeadas claras y pequeñas de forma predeterminada; El modo oscuro no está habilitado de forma predeterminada.

Propiedades públicas, transmisión transparente y Ref de todos los componentes.

Propiedades	Propósito	Acuerdo
`as`	Modificar elemento raíz o componente Vue	Preserve Gardener clase, propiedades y ranuras
`variant`	Aplicar variante	Acepta una cadena o un conjunto de cadenas
`state`	Estado del componente de la aplicación	Convertir a `is-*` Clase de estado
`config`	Declarar configuración de tiempo de ejecución	Convertir al correspondiente `data-g-*` Propiedades
`initialize`	Controlar la inicialización del comportamiento del DOM	Predeterminado `true`
`modelValue`	Valor de enlace bidireccional de Vue	Se admiten eventos de Gardener personalizados y de forma nativa
`modelEvent`	Especificar eventos de sincronización personalizados	Uso `gardener:*` Nombre del evento
`modelKey`	Obtener valor de la carga útil del evento	Leer `CustomEvent.detail` Especificar campo

Se pasan todos los atributos nativos, eventos DOM y ranuras. Plantilla de componente Ref divulgación unificada element、getInstance() y refresh(). Utilizado en estructuras compuestas como cuadros de diálogo y cajones. GardenerPart Cree componentes internos estándar para evitar romper los contratos de selector de comportamiento y CSS.

v-model, eventos personalizados e instrucciones

<GInput v-model="keyword" />

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

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

vGardener(nombre de plantilla v-gardener) Montar, actualizar y destruir comportamientos específicos junto con el ciclo de vida de Vue. Estándares de uso de entradas nativas update:modelValue;Componentes complejos aprobados modelEvent y modelKey Puentee los eventos personalizados de Gardener al mismo protocolo.

Los 7 componibles

useGardenerAcceda a capacidades de ejecución, inicialización y destrucción

useGardenerBehaviorComportamiento de vinculación y acceso a instancias

useGardenerEventEscucha con seguridad de tipos para jardinero:* eventos

useGardenerThemeLeer y actualizar el estado del tema de diez ejes

useGardenerToastCrear y administrar Tostadas

useTauriWindowControlsBotón de ventana de vinculación de Tauri y ciclo de destrucción

useElectronWindowControlsCiclo de seguridad y de destrucción de Electron

Entrada estilo web, móvil y de escritorio

Entrada	Contenido	Escenarios aplicables
`@gardener/vue/style.css`	Estilo Gardener completo	Listo para usar y prototipo
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Entrada de estilo en capas	Construcción personalizada
`platform/web.css`	Capacidades web generales	PC, sitio web responsivo, Panel de control
`platform/mobile.css`	Combinación universal + móvil	Página web móvil, PWA, WebView
`platform/desktop.css`	Combinación Universal + Escritorio	Navegador de escritorio y shell de aplicaciones
`platform/tauri.css`	Portal de escritorio + adaptación de Tauri	Ventana Tauri
`platform/electron.css`	Portal de escritorio + adaptación Electron	Electron ventana
`component-css/*`	28 proxies de paquetes CSS de componentes estables	Carga por dominio funcional

Entrada raíz recomendada para aplicaciones generales o @gardener/vue/components Obtén el mejor batido de árboles; @gardener/vue/bundle.min.js es una entrada de archivo único precomprimido. La importación SSR no accede a los objetos globales del navegador y el comportamiento solo se inicializa después de montar el componente, por lo que se puede utilizar para la renderización e hidratación del lado del servidor.

Las 29 entradas de paquetes públicos

JavaScript:.、./components、./component、./composables、./directives、./plugin、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Estilo:./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 y ./component-css/*. Información del contrato y paquete:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exportaciones de tiempo de ejecución sin componentes y tipos de TypeScript

32 tiempos de ejecución sin componentes exportados como: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 componibles y vGardener。

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

Esquema público, metadatos y acceso de publicación

API pública、Compatibilidad y Rendimiento Ambos tienen esquemas JSON que desactivan campos desconocidos;Catálogo de componentes JSON Legible directamente mediante IA, generadores de código y herramientas de documentación. El presupuesto para el paquete comprimido completo es 328.220 B raw, 51.602 B gzip, 26.926 B Brotli; soltero GButton El resultado real de la sacudida del árbol es 3718 B. La compilación determinista cubre 87 archivos, el paquete npm verifica 98 archivos, 284,183 B empaquetados, 3,729,929 B desempaquetados.

cd vue
npm run release:verify

# Compilación, generación de anulaciones, esquema, tipos de SFC de Vue, unidades y ciclo de vida de DOM、
# Chromium / WebKit / Firefox / Móvil, WCAG A/AA, ejemplo、
# Sacudida de árboles, compilaciones reproducibles, presupuesto de rendimiento, empaquetado de npm y publint

Los 506 componentes de Vue

Los siguientes directorios se fusionan directamente API pública de Vue y Metadatos del componente, detalla los nombres de exportación de Vue, nombres CSS, categorías, tipos, selectores, variantes, estados, widgets, comportamientos y plataformas. No es una muestra destacada; Los 506 elementos están en el mismo directorio de búsqueda.

Leyendo el manifiesto del componente Vue...

Gardener React Proyecto

@gardener/react es la capa de adaptación oficial de React de Gardener CSS 1.0.0, la versión actual es 1.0.0 Estable, admite reaccionar >=18.3.0 <20.0.0 con Node.js >=18.18. Asigna los 506 componentes CSS y 66 comportamientos DOM elemento por elemento, al tiempo que proporciona 538 exportaciones de tiempo de ejecución raíz, 22 exportaciones de tipo TypeScript, 29 puntos de entrada de paquetes públicos y 28 proxies de paquetes CSS de componentes.

506Componente G* nombrado

538Exportación del tiempo de ejecución raíz

29Entrada de paquete público

28Paquete CSS de componentes

Instalación y componentes raíz

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

Todos los componentes admiten la importación bajo demanda; el constructor puede comenzar desde la entrada raíz o @gardener/react/components Sacude el árbol. Cada componente generado conserva el tipo de atributo exacto de su etiqueta HTML predeterminada, p. GButton Aceptar type="submit"，GInput Aceptar type y autoComplete, al tiempo que permite as Cambiar a otros elementos nativos o componentes de React.

Proveedor de temas y diez ejes temáticos

<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="Alcance del tema de aplicación"
>
  <App />
</GardenerProvider>

GardenerProvider Los diez ejes temáticos de son theme、mode、neutral、typography、shape、density、elevation、motion、platform y os. También transmite de forma transparente nombre de clase, estilo, ID, ARIA y otros atributos nativos; useGardenerTheme para temas de alfabetización, useGardenerThemeContext para leer el contexto directamente. El valor predeterminado sigue siendo Luz blanca con pequeñas esquinas redondeadas y el tema oscuro no se habilitará automáticamente.

10 propiedades comunes para todos los componentes

Propiedades	Propósito	Acuerdo
`as`	Modificar elemento raíz o componente de React	Conservar clase, propiedades, hijos y referencia de Gardener
`variant`	Aplicar variante	Cadena o matriz de cadenas de solo lectura
`state`	Estado del componente de la aplicación	Convertir a `is-*` Clase de estado
`config`	Configuración del comportamiento de declaración	Convertir al correspondiente `data-g-*` Propiedades
`initialize`	Controlar la inicialización del comportamiento del DOM	Predeterminado `true`
`value`	Valor controlado	Admite formularios nativos y eventos de Gardener personalizados
`defaultValue`	Valor inicial no controlado	casilla booleana asignada a `defaultChecked`
`valueEvent`	Especificar evento de sincronización de valores	Disponible `gardener:*` Nombre del evento
`valueKey`	Obtener valor de la carga útil del evento	Leer `CustomEvent.detail` Especificar campo
`onValueChange`	Recibir nuevo valor con evento original	Deduplicación automática de entrada/cambio nativo

Atributos nativos, eventos, hijos y className Todos se transmiten de forma transparente. Componente Ref público unificado element、getInstance() y refresh(); Estructuras compuestas disponibles. GardenerPart Crear componentes internos. casilla de verificación booleana value Uso checked, la radio conserva el valor de la cadena para garantizar una semántica coherente de los formularios de React.

Valores controlados, eventos personalizados e instancias de comportamiento

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

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

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

useGardenerBehavior Vincular 66 comportamientos a un elemento, documento o componente Manejarlos y destruirlos al descargarlos;initialize La inicialización automática de componentes se puede desactivar para facilitar la toma de control unificada por parte del tiempo de ejecución a nivel de página. El comportamiento de pasar explícitamente un atributo de datos tiene prioridad sobre generar un valor predeterminado.

Los 7 ganchos

useGardenerAcceda a capacidades de tiempo de ejecución, inicialización, observación y destrucción

useGardenerBehaviorComportamiento de vinculación y acceso a instancias

useGardenerEventEscucha con seguridad de tipos para jardinero:* eventos

useGardenerThemeLeer y actualizar el estado del tema de diez ejes

useGardenerToastCrear y administrar Tostadas

useTauriWindowControlsBotón de ventana de vinculación de Tauri y ciclo de destrucción

useElectronWindowControlsCiclo de seguridad y de destrucción de Electron

Entrada estilo web, móvil y de escritorio

Entrada	Contenido	Escenarios aplicables
`@gardener/react/style.css`	Estilo Gardener completo	Listo para usar y prototipo
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Entrada de estilo en capas	Construcción personalizada
`platform/web.css`	Capacidades web generales	PC, sitio web responsivo, Panel de control
`platform/mobile.css`	Combinación universal + móvil	Página web móvil, PWA, WebView
`platform/desktop.css`	Combinación Universal + Escritorio	Navegador de escritorio y shell de aplicaciones
`platform/tauri.css`	Portal de escritorio + adaptación de Tauri	Ventana Tauri
`platform/electron.css`	Portal de escritorio + adaptación Electron	Electron ventana
`component-css/*`	28 proxies de paquetes CSS de componentes estables	Carga por dominio funcional

SSR, hidratación y puenteo de escritorio

La entrada del paquete se puede importar de forma segura en el lado del servidor. Los 506 componentes han pasado por SSR elemento por elemento y el comportamiento solo se inicializa durante el ciclo de vida del Efecto; la marca del lado del servidor Hydration no genera errores recuperables y es compatible con StrictMode. Tauri y Electron se utilizan respectivamente. @gardener/react/tauri y @gardener/react/electron Portales independientes para que ninguno de los portales exporte accidentalmente la API puente de otra plataforma.

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

Las 29 entradas de paquetes públicos

JavaScript:.、./components、./component、./hooks、./provider、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Estilo:./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 y ./component-css/*. Información del contrato y paquete:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exportaciones de tiempo de ejecución sin componentes y tipos de TypeScript

32 tiempos de ejecución sin componentes exportados como: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 tipos exportados como:GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerComponentProps、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerGeneratedComponent、GardenerOwnProps、GardenerPlatform、GardenerReactComponentName、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerValueChange。

Esquema público, rendimiento y acceso a la versión

API pública、Compatibilidad y Rendimiento Ambos validados por el esquema JSON con campos desconocidos desactivados;Catálogo de componentes JSON Legible directamente mediante IA, generadores de código y herramientas de documentación. La medida real del paquete comprimido completo es 326.064 B raw, 50.126 B gzip, 26.381 B Brotli; soltero GButton El resultado real de la sacudida del árbol es 2599 B. La compilación determinista cubrió 87 archivos, el paquete npm verificó 98 archivos, 262 706 B empaquetados, 2 438 775 B desempaquetados y la auditoría de seguridad de la dependencia de producción fue 0 vulnerabilidades.

cd react
npm run release:verify

# API pública y de compilación, esquema, TypeScript, SSR de 506 componentes, hidratación, ciclo de vida DOM、
# Chromium / WebKit / Firefox / Pixel 7 / iPhone 13、WCAG A/AA、
# Sacudida de árboles, compilaciones reproducibles, presupuesto de rendimiento, empaquetado de npm y publint

Los 506 componentes de React

Los siguientes directorios se fusionan directamente React Public API y Metadatos del componente, que detalla los nombres de exportación de React, nombres CSS, categorías, tipos, etiquetas predeterminadas, selectores, variantes, estados, widgets, comportamientos y plataformas. No es una muestra destacada; Los 506 elementos están en el mismo directorio de búsqueda.

Leyendo el manifiesto del componente React...

Gardener AngularJS Proyecto

@gardener/angularjs es la capa oficial de adaptación del sistema heredado de AngularJS 1.x para Gardener CSS 1.0.0, la versión actual es 1.0.0 Estable. Valida AngularJS >=1.8.2 <1.9.0 con Node.js >=18.18, mapeo elemento por elemento de los 506 componentes CSS y 66 comportamientos DOM, y proporciona 535 exportaciones de tiempo de ejecución raíz, 24 exportaciones de tipo TypeScript, 29 puntos de entrada de paquetes públicos y 28 proxies de paquetes CSS de componentes.

Límites del sistema heredado:AngularJS finalizó el soporte oficial y no se conocen avisos de seguridad para el marco en sí que no tengan correcciones ascendentes. Esta capa de adaptación angular Manténgalo como una dependencia de pares externa, que no lo incluye en el producto Gardener y no cubre riesgos a nivel de marco. A los nuevos proyectos se les da prioridad para elegir Vue, React o entradas independientes del marco; Los proyectos existentes también deben implementar desinfección de insumos, CSP, listas blancas de recursos, autorización mínima del puente de escritorio y plan de migración. Para conocer los requisitos completos, consulte Línea base de seguridad de AngularJS。

506Generar instrucciones de componentes

535Exportación del tiempo de ejecución raíz

29Entrada de paquete público

28Paquete CSS de componentes

Instalación, carga de ESM y fábrica de módulos

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

Los paquetes npm de AngularJS no son ESM nativos y, por lo tanto, deben usarse en herramientas de compilación como Vite import "angular/angular.js" Importar los efectos secundarios de window.angular Traspaso explícito createGardenerAngularJS;No confíe en inestable import angular from "angular" Importado por defecto. El paquete Gardener en sí no lee AngularJS global y la entrada raíz es segura para el análisis de la cadena de herramientas SSR.

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

components Acepta un nombre de componente, un nombre de directiva AngularJS o un nombre de exportación de ESM, restringido por 506 tipos de unión; Los nombres desconocidos arrojarán inmediatamente un error. Las instalaciones repetidas de la misma instancia de AngularJS, nombre de módulo y opciones equivalentes son idempotentes. Cuando diferentes subconjuntos de componentes, dependencias u opciones de inicialización utilizan módulos con el mismo nombre, se informará explícitamente un error para evitar la obtención silenciosa de módulos semirregistrados.

Directivas de elementos, directivas de atributos y semántica

<gardener-provider gardener-theme="garden" gardener-mode="light" gardener-shape="small">
  <g-card gardener-variant="interactive">Contenido del comando de elemento</g-card>
  <button g-button gardener-variant="primary" type="submit">Guardar</button>
  <input g-input ng-model="vm.keyword" aria-label="Palabras clave">
</gardener-provider>

Cada componente comienza con restrict: "EA" Admite formas de elementos y atributos, p. <g-card> / gCard y <article g-card>. Cuando se trata de semántica nativa como botón, entrada, selección, formulario, tabla, navegación, aparte, etc., se debe dar prioridad al uso de atributos para permitir que los teclados, el envío de formularios, la validación del navegador y las tecnologías de asistencia continúen usando comportamientos nativos.

Propiedades públicas para los 8 componentes

Nombres de propiedades de AngularJS	Método de escritura de plantillas	Propósito
`gardenerVariant`	`gardener-variant`	Aplicar variantes de componentes separados por espacios o comas
`gardenerState`	`gardener-state`	Asignar uno o más `is-*` Clase de estado
`gardenerConfig`	`gardener-config`	Objeto de expresión de escucha en profundidad y mapa a `data-g-*` Configuración
`gardenerInitialize`	`gardener-initialize`	Habilitar dinámicamente o deshabilitar completamente la inicialización del comportamiento DOM
`ngModel`	`ng-model`	Preservar el modelo de formulario nativo de AngularJS o unir valores de componentes personalizados
`gardenerValueEvent`	`gardener-value-event`	Seleccionar para actualizar modelo `gardener:*` Eventos personalizados
`gardenerValueKey`	`gardener-value-key`	Desde `CustomEvent.detail` Leer el campo especificado
`gardenerOnValueChange`	`gardener-on-value-change`	Llamar a expresión y proporcionar `$value`、`$event` lugareños

El identificador de instrucciones se almacena en angular.element(node).data("$gardenerHandle"), divulgación unificada element、getInstance()、refresh() y destroy()。refresh() El subárbol de nodos se destruirá primero y luego se inicializará según la configuración actual; alcance $destroy elimina el evento y destruye la instancia de comportamiento.

ngModel, formas nativas y eventos de 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">Correo electrónico</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 semántica del modelo de entrada nativa, área de texto y selección aún es administrada por AngularJS y no estará cubierta por la capa de adaptación. ngModel.$render o llamada repetida $setViewValue; La casilla de verificación contiene valores booleanos, la radio contiene valores de opciones y la selección múltiple contiene matrices. El complejo componente Gardener actualiza el modelo mediante eventos y usos personalizados. gardenerOnValueChange Reciba valores de devolución de llamada consistentes.

Comandos, servicios y temas de diez ejes comunes

gGardenerPlantilla de escritura g-gardener, declara, cambia y destruye dinámicamente comportamientos arbitrarios

gardenerProviderLa forma de elemento o atributo proporciona un tema de diez ejes e inicializa el subárbol

GardenerRuntimeinit · destruir · getInstance · emitir · observar

GardenerThemeatributos · aplicar · leer · borrar

GardenerToastmostrar(opciones)

Cobertura completa del eje temático theme、mode、neutral、typography、shape、density、elevation、motion、platform y os, correspondiente a la plantilla gardener-theme Para gardener-os. La muestra predeterminada mantiene la luz blanca y las pequeñas esquinas redondeadas.

Estilos web, móvil, de escritorio y por dominio

Entrada	Contenido	Escenarios aplicables
`@gardener/angularjs/style.css`	Estilo Gardener completo	Integración progresiva y lista para usar en sistemas heredados
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Entrada de estilo en capas	Construcción personalizada
`platform/web.css`	Capacidades web generales	Sitio web y panel de control para PC
`platform/mobile.css`	Componentes móviles y zonas seguras	Página web móvil, PWA, WebView
`platform/desktop.css`	Combinación de espacio de trabajo de escritorio	Navegador de escritorio y shell de aplicaciones
`platform/tauri.css`	Portal de escritorio + adaptación de Tauri	Ventana Tauri
`platform/electron.css`	Portal de escritorio + adaptación Electron	Electron ventana
`component-css/*`	28 proxies de paquetes CSS de componentes estables	Carga por dominio funcional

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

Las entradas de Tauri y Electron están aisladas entre sí y ambas regresan al cinturón. available y destroy() Objeto vinculante; la capa de renderizado solo debe recibir capacidades de puente mínimas incluidas en la lista blanca.

Las 29 entradas de paquetes públicos

JavaScript:.、./components、./directives、./services、./module、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Estilo:./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 y ./component-css/*. Información del contrato y paquete:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Exportaciones de tiempo de ejecución sin componentes y tipos de TypeScript

29 tiempos de ejecución sin componentes exportados como: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 tipos exportados como:GardenerAngularJSComponentExportName、GardenerAngularJSComponentName、GardenerAngularJSDirectiveFactory、GardenerAngularJSDirectiveName、GardenerAngularJSModule、GardenerAngularJSOptions、GardenerAngularJSStatic、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerEventName、GardenerPlatform、GardenerRuntimeService、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeAxis、GardenerThemeService、GardenerThemeState、GardenerValueChangeLocals。

Esquema público, compatibilidad, rendimiento y acceso a versiones

API pública、Compatibilidad y Rendimiento Ambos están validados por el esquema JSON con los campos desconocidos desactivados; Los rangos de soporte de AngularJS también se escriben en la línea base de compatibilidad legible por máquina.Catálogo de componentes JSON Legible directamente mediante IA, generadores de código y herramientas de documentación. La medida real del paquete comprimido completo es 404.094 B raw, 59.499 B gzip, 29.785 B Brotli; soltero GButtonDirective es 4,515 B. La compilación determinista cubrió 83 archivos, la verificación del paquete npm 95 archivos, 325,747 B empaquetados, 2,938,245 B desempaquetados, la auditoría de carga de producción del propio Gardener fue 0 vulnerabilidades.

cd angular
npm run release:verify

# API pública y generada, 3 conjuntos de esquemas, TypeScript, AngularJS 1.8.2 / 1.8.3、
# 506 Registro de directivas, ciclo de vida de ngModel y DOM, Chromium/WebKit/Firefox、
# Pixel 7 / iPhone 13、WCAG A/AA、Sacudida de árboles, compilaciones reproducibles, rendimiento, paquetización y publicación

La puerta actual contiene 17 pruebas de tiempo de ejecución/contrato, 3 pruebas de esquema, 20 pruebas de integración de navegador móvil y Five Engine y 1 auditoría automatizada Ax WCAG A/AA. completo npm audit Los avisos conocidos para la ontología AngularJS seguirán mostrándose fielmente; Este es un riesgo heredado que debe aislarse, aceptarse o migrarse y no puede marcarse como solucionado.

Los 506 componentes de AngularJS

Los siguientes directorios se fusionan directamente API pública de AngularJS y Metadatos del componentedetalla el nombre de exportación de fábrica de la directiva ESM, el nombre CSS, la categoría, el tipo, la etiqueta predeterminada, el selector, la variante, el estado, el widget, el comportamiento y la plataforma. No es una muestra destacada; Los 506 elementos están en el mismo directorio de búsqueda.

Leyendo el manifiesto del componente AngularJS…

Gardener Blazor Proyecto

Gardener.Blazor es la biblioteca de clases oficial de Razor para Gardener CSS 1.0.0, la versión actual es 1.0.0 Estable. estabilizar los activos para net10.0 Compilado y verificado con un consumidor independiente de NuGet net11.0;Se aplica a Blazor Web App Static SSR, Interactive Server, Interactive WebAssembly, Auto, Standalone WebAssembly, Hybrid y Desktop WebView.

506 Componentes de la maquinilla de afeitar 66 Comportamiento DOM 75 Eventos de tiempo de ejecución 28 Tipo de trama 43 Recursos estáticos

Instalación, registro y recursos estáticos

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

Los componentes se cargan según demanda durante el primer renderizado interactivo _content/Gardener.Blazor/gardener.blazor.js, no se necesitan etiquetas de script escritas a mano. Además de la gama completa de estilos, también ofrecemos 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 y 28 components/*.min.css Entrada de dominio de componente, todos los archivos comprimidos oficiales llevan un mapa fuente externo.

Componentes, proveedores y SSR

@using Gardener.Blazor.Components

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

Cada componente CSS tiene su correspondiente G* escriba y conserve etiquetas semánticas, selectores, estados, widgets, comportamientos, plataforma y metadatos de accesibilidad predeterminados. La fase SSR estática genera directamente HTML completo y solo monta el comportamiento DOM después de establecer una conexión interactiva; Los cambios en las firmas de los parámetros actualizarán el montaje y el oyente cerrará la sesión cuando se lance el componente. GardenerComponent Puede renderizar dinámicamente por nombre de metadatos,GardenerBehavior Los comportamientos se pueden adjuntar a cualquier contenido,GardenerPart Se utiliza para generar clases de componentes acordadas.

Parámetros, refnums y formularios comunes

Todos los componentes generados comparten 20 parámetros:As、Id、Class、Style、Variant、Variants、State、States、Config、Initialize、Value、ValueChanged、ValueEvent、ValueKey、OnValueChange、EventNames、PreventDefaultEvents、OnEvent、ChildContent、AdditionalAttributes。

La referencia del componente proporciona 6 miembros de instancia:Element、RefreshAsync、DestroyAsync、FocusAsync、GetBehaviorMembersAsync、InvokeBehaviorAsync。 GardenerField<TValue> Herencia InputBase<TValue>, soporte EditForm、EditContext, Anotaciones de datos, estado de validación, entrada, selección y área de texto.

Vinculación de valores, 75 eventos y 7 protecciones de sincronización

<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 Manejar entrada/cambio nativo,ValueEvent y ValueKey Manejo de eventos personalizados complejos. Los valores se convierten a cadenas .NET, booleanos, números, matrices o diccionarios; DOM, Archivo, BigInt, funciones y referencias circulares se serializan de forma segura. GardenerEvents.All Exponer los 75 eventos,GardenerEvents.Guards Beforeapproval, beforeclose, beforefilepicker, beforeopen, beforepromptstop, beforepromptsubmit, beforetabclose 7 eventos de protección expuestos que deben bloquearse sincrónicamente antes de los límites asincrónicos de JS/.NET. Los miembros de comportamiento y los contratos detallados del evento están disponibles en GardenerRuntimeCatalog Consulta.

Temas, servicios y puentes de escritorio

GardenerProvider Tema de soporte, modo, neutro, tipografía, forma, densidad, elevación, movimiento, plataforma, tema anidado de diez ejes;GardenerThemePresets.All Contiene 42 temas de color, con el fondo blanco predeterminado Claro y pequeñas esquinas redondeadas pequeñas. Los 5 servicios de alcance son GardenerRuntime、GardenerThemeService、GardenerToastService、GardenerTauriService、GardenerElectronService. Desktop Bridge solo llama a los objetos de la lista blanca expuestos explícitamente por la capa de precarga del host y no abre las capacidades globales de Node.

Tipos públicos completos y contratos legibles por máquina

Los 28 tipos de tramas son: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 pública de Blazor、Metadatos del componente、Compatibilidad、Rendimiento Ambos han cerrado el esquema JSON. La documentación legible también incluye API、66 comportamientos、75 eventos、43 recursos estáticos、Tiempo de ejecución、Accesibilidad y SSR y Liberar control de acceso。

Calidad de la versión 1.0.0

Versión de versión con 0 advertencias, 0 errores; 506 componentes pasaron todos SSR estático verdadero. Browser Matrix cubre Chromium, Firefox, WebKit, ventanas gráficas de escritorio y móviles, teclado y Axe WCAG A/AA; CI exige Firefox. NuGet utiliza una caché aislada para publicar aplicaciones de consumo y validar manifiestos de puntos finales de activos web estáticos; También hay un consumidor de paquete de vista previa .NET 11 independiente. El ensamblaje medido es 343.552 B, 43 recursos estáticos totalizan 7.608.327 B, CSS gzip 139.269 B, tiempo de ejecución gzip 25.989 B, Blazor bridge gzip 2.054 B, nupkg aproximadamente 1,22 MiB, por debajo del límite estricto de 6.000.000 B; todo por debajo del presupuesto estricto y DLL/XML reproducible.

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

Los 506 componentes de Blazor

Los siguientes directorios se fusionan directamente API pública de Blazor y Metadatos del componente, que detalla los tipos de Razor, nombres CSS, categorías, tipos, etiquetas predeterminadas, selectores, estados, variantes, widgets, comportamientos, plataformas y contratos de accesibilidad. No es una muestra destacada; Los 506 elementos están en el mismo directorio de búsqueda.

Leyendo el manifiesto del componente Blazor...

Principios de diseño

Prioridad neutralEl estilo predeterminado es adecuado para individuos, empresas, backends y estaciones de contenido, y no preestablece una personalidad de marca fuerte.

Predeterminado Esquinas redondeadas pequeñas--g-radius-md Fijado en 0,25rem; Las cápsulas y filetes se utilizan sólo para mayor claridad semántica.

La redundancia es mejor que la ausenciaLas estructuras complejas altamente reutilizables existen como componentes o recetas y no requieren que la IA se combine temporalmente cada vez.

Separación de semántica y aparienciaEl color principal, el modo de visualización, la densidad, la fuente, la forma y la plataforma se pueden cambiar de forma independiente.

Atributo de dirección lógicaLos componentes utilizan preferentemente la dirección en línea/bloque para reducir la cobertura específica de RTL.

Verificable por máquinaLos componentes, las clases de utilidades, las recetas y las capacidades de tiempo de ejecución tienen manifiestos y comprobaciones de compilación.

Orden de capas CSS

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

Se recomienda escribir el estilo personalizado del proyecto gardener.overridespara evitar aumentar el peso del selector.

Sistema temático

El tema de color solo es responsable del color principal de la marca; el modo de visualización es independiente de otros ejes temáticos. Este sitio utiliza Light para mantener una experiencia de documento en blanco, pero el marco también proporciona Dark, System y High Contrast.

Leyendo lista de temas...

Eje temático

Propiedades	Valores disponibles	Propósito
`data-g-theme`	jardín, azul, violeta, etc. 42 artículos	Color principal de la marca
`data-g-mode`	claro, oscuro, sistema, alto contraste	Modo de visualización
`data-g-neutral`	frío, cálido, gris, tinta, crema, plano, papel	Fondo y texto neutros
`data-g-typography`	sistema, corporativo, humanista, editorial, técnico, geométrico, redondeado, clásico, compacto, cjk	Temperamento de fuente
`data-g-shape`	afilado, pequeño, mediano, suave, redondo	Formas y redondeos
`data-g-density`	compacto, estándar, cómodo, táctil	Controlar densidad
`data-g-elevation`	plano, bordeado, en capas, flotante	Bordes y sombras
`data-g-motion`	ninguno, tranquilo, estándar, rápido	Ritmo de animación
`data-g-platform`	web, móvil, escritorio, tauri, electron	Detalles de la plataforma
`data-g-os`	ventanas, macos, linux	Apariencia del sistema de escritorio

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

Ficha de Diseño

El componente solo consume tokens semánticos. La personalización de la marca debe anular el token en lugar de copiar las reglas del componente.

Familia	Ejemplo	Descripción
Color	`--g-color-primary`、`--g-color-primary-text`	Color de relleno separado del color de primer plano legible
Superficie	`--g-color-canvas`、`--g-color-surface-raised`	Lona, superficie normal, elevada, leve y hundida
Texto	`--g-color-text`、`--g-color-text-muted`	Texto, texto debilitado y de respaldo
Semántica	`--g-color-success`、`--g-color-danger-soft`	Éxito, advertencia, peligro, información y fondo suave
Espaciado	`--g-space-0`…`--g-space-96`	Contiene valores de medio orden, orden decimal y píxeles
Fuente	`--g-font-size-sm`、`--g-line-height-normal`	Tamaño de fuente, grosor de fuente, alto de línea, familia de fuentes
Forma	`--g-radius-sm`…`--g-radius-full`	Esquinas redondeadas pequeñas predeterminadas, se pueden extender explícitamente
Animación	`--g-duration-fast`、`--g-ease-standard`	Duración y flexibilización
Jerarquía	`--g-z-dropdown`、`--g-z-dialog`	Secuencia de apilamiento estable de capa flotante, Dialog, Toast, etc.
Diseño	`--g-header-height`、`--g-sidebar-width`	Tamaño del shell de la aplicación

Cobertura parcial

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

API completa de CSS

Este índice es proporcionado por css/src/**/*.css Generado automáticamente, que cubre cada módulo de código fuente, clase semántica, selector primitivo, token, enlace de estado personalizado, atributo de datos y fotograma clave; para clases de herramientas utilice la lista completa dedicada en la siguiente sección. Es un directorio de nivel fuente, no un ejemplo destacado.

—Módulo de código fuente

—Todas las categorías

—Selector Semántico

—Ficha

Reglas de anulación:cada uno g-* La clase debe aparecer en la lista CSS Full API o Clases de herramientas; cada componente, tiempo de ejecución y receta de página también deben aparecer en sus respectivos directorios. La verificación de compilación calcula SHA-256 archivo por archivo para evitar que los directorios se queden atrás del código fuente.

Buscar en todas las interfaces CSS

Leyendo el índice CSS…

Todos los módulos de código fuente

Expanda cualquier módulo para ver las clases, tokens, estados, atributos de datos y fotogramas clave expuestos por el archivo. El módulo de herramientas generativas se vincula a un inventario separado de 11,498 artículos.

Leyendo lista de módulos...

Herramientas

Utilizado por todas las herramientas g- . El prefijo reactivo precede al nombre de la función, p.e. g-md-grid-cols-2. Los puntos decimales se escriben con un guión bajo, por ejemplo g-p-2_5; Usa valores negativos g-neg-mt-4。

Punto de interrupción	Ancho mínimo	Terminal típico
`g-sm-*`	480px	Teléfono móvil grande
`g-md-*`	768px	Tableta
`g-lg-*`	1024px	Escritorio pequeño
`g-xl-*`	1280 píxeles	Escritorio estándar
`g-2xl-*`	1536px	Banco de trabajo de pantalla ancha

Uso prioritario start/end、x/y y otras herramientas de dirección lógica. Úselo solo si se requiere explícitamente la orientación física left/right。

Buscar en la lista completa de herramientas

Ingrese un nombre de clase, selector completo, propiedad CSS, valor o condición de respuesta. Para evitar mostrar 11.498 elementos a la vez, ingrese al menos dos caracteres antes de mostrarlos en lotes de 100 elementos a la vez; entrar g- Puede explorar todo el contenido lote por lote.Manifiesto JSON sin formatoContiene todos los elementos adecuados para la lectura directa mediante IA y herramientas de construcción.

Lista de herramientas de lectura...

Sistema de diseño

El diseño base es responsable de los contenedores y las cuadrículas, y el shell de la aplicación es responsable de las áreas fijas, los límites de desplazamiento y el ajuste final. Para páginas complejas, no comience directamente con una gran cantidad de clases de herramientas de posicionamiento.

.g-contenedorAncho de página estándar y márgenes izquierdo y derecho adaptables.

.g-pila/.g-clusterCombinación horizontal de flujo vertical y ajuste de palabras.

.g-grid-autoCuadrícula de tarjetas adaptable sin puntos de interrupción.

.g-app-shellShell básico de backend para barra lateral, encabezado de página y contenido principal.

.g-mobile-shellNavegación superior e inferior y áreas seguras.

.g-desktop-shellBarra de título, barra de actividad, banco de trabajo, inspector y barra de estado.

Ejemplo de panel

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

Sistema de red completo 24/12

Gardener utiliza 24 ráster como principal protocolo compatible para backend empresarial, CMS y formularios finos, al pasar .g-grid-12 Proporciona 12 cuadrículas tradicionales. Ambos utilizan CSS Grid nativo, dirección lógica y puntos de interrupción unificados, y no dependen de márgenes negativos.

24 columnas12 compatibles5 puntos de interrupciónRTLConsulta de contenedorImprimir

Selección de interfaz:.g-row y .g-grid-24 Equivalente, apto para 24 rejillas; debe usarse para 12 cuadrículas heredadas .g-grid-12 como padre. La clase de ancho de columna sigue siendo la misma, la IA solo necesita determinar primero el sistema principal.

Cuadrícula 24 en tiempo real

6 / 24

12 / 24

6 / 24

desplazamiento 4 + intervalo 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>

Compatible con 12 cuadrículas

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>

Matriz completa de nombres de clases

Habilidad	Nombre de clase	Alcance o descripción
Contenedor raíz	`g-row`、`g-grid-24`、`g-grid-12`	24, 24, 12 columnas
Ancho de columna	`g-col-1`…`g-col-24`	abarca 1–24; 12 usos de la cuadrícula 1–12
Automático y Llenado	`g-col-auto`、`g-col-fill`、`g-col-fill-from-1`…`g-col-fill-from-24`	Colocación automática de un solo carril, llenado de filas completas, llenado determinista de las columnas restantes a partir de líneas de cuadrícula especificadas
Predeterminado versus línea completa	`g-col`、`g-col-full`	Ambos ocupan explícitamente toda la línea
Desplazamiento	`g-offset-0`…`g-offset-23`	Desplazamiento desde la dirección lógica de inicio en línea
Líneas de cuadrícula explícitas	`g-col-start-1`…`g-col-start-25` `g-col-end-1`…`g-col-end-25`	Diseño complejo no contiguo
Responsivo	`g-sm-col-`、`g-md-col-`、`g-lg-col-`、`g-xl-col-`、`g-2xl-col-*`	La columna, el desplazamiento, las líneas de inicio y fin, el estado de visualización y el medianil responden
Secuencia	`g-order-0`…`g-order-24`	También disponible en versión responsiva de cinco velocidades
Espaciado	`g-gutter-`、`g-gutter-x-`、`g-gutter-y-*`	0、1、2、3、4、5、6、8、10、12
Alineación de filas	`g-row-top`、`g-row-middle`、`g-row-bottom`、`g-row-stretch`	Controlar la alineación del eje transversal de las columnas
Alineación de una sola columna	`g-col-self-start`、`g-col-self-center`、`g-col-self-end`、`g-col-self-stretch`	Sobrescribiendo una sola columna
Diseño automático	`g-row-dense`、`g-row-no-gutter`	Acolchado denso y espacio cero
Estado de visualización	`g-col-hidden`、`g-md-col-visible`	Cada punto de interrupción está oculto/visible
Subcuadrícula	`g-subgrid`、`g-subgrid-cols`、`g-subgrid-rows`	Heredar seguimiento de cuadrícula principal cuando el navegador lo admita
Imprimir	`g-print-col-1`…`g-print-col-24`	También hay impresión desplazada, inicio, fin, oculta, visible

Punto de interrupción

prefijo	Ancho mínimo de la ventana gráfica	Ejemplo
`sm`	480px	`g-sm-col-12`
`md`	768px	`g-md-offset-4`
`lg`	1024px	`g-lg-col-start-7`
`xl`	1280 píxeles	`g-xl-gutter-6`
`2xl`	1536px	`g-2xl-col-8`

Consulta de contenedor

Se usa en capas exteriores cuando el ancho del componente está determinado por el panel en lugar de por la ventana gráfica .g-grid-container, la columna utiliza 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, anidamiento e impresión

El desplazamiento y las líneas de cuadrícula siguen la dirección lógica en línea de CSS; en dir="rtl" comienza automáticamente desde la derecha, sin necesidad de otro conjunto de clases.
Cualquier columna se puede volver a colocar g-row、g-grid-24 o g-grid-12, formando un ráster anidado.
Uso del lado de impresión g-print-col-* Reordenamiento explícito;g-print-col-hidden Ocultar columnas que no deben imprimirse.

Lista de capacidadesDocumenta el número de sistema, el ancho de columna, el desplazamiento, los puntos de interrupción, los puntos de interrupción del contenedor, el espaciado y la matriz de prueba del ráster;Página de muestra de ráster independientePara verificación real 24 / 12, RTL, Consulta de Contenedor y estructura de impresión. Las comprobaciones de compilación verifican todas las clases una por una en lugar de simplemente verificar algunos ejemplos.

Sistema de distribución de áreas tradicional

El segundo tipo de capacidad solidifica los esqueletos de páginas reutilizados a largo plazo en 16 diseños semánticos. Las áreas deben denominarse en una dirección lógica coherente; La IA debe seleccionar primero el diseño raíz más cercano, luego completar los componentes y no reorganizar la cuadrícula, el posicionamiento y el CSS plegable del lado móvil.

16 patronesVentana gráfica + contenedorRTLÁrea seguraTauri/ElectronImprimir

Protocolo de denominación:top / start / main / end / bottom son cinco áreas comunes;start y end cambia con la dirección de escritura. Los lienzos especiales que requieren una visión fija izquierda/derecha deben aclarar la dirección por sí solos sin romper la semántica lógica común.

Diseño de cinco regiones en tiempo real

Arriba

Espacio de trabajo principal

16 tipos de esqueletos terminados

Diseño	Clase raíz	Piezas directas/escenarios aplicables
Superior / Principal / Inferior	`g-region-stack`	`g-region-top`、`g-region-main`、`g-region-bottom`;Sitio web general y páginas de documentación
Inicio/Principal/Fin	`g-region-inline`	`g-region-start`、`g-region-main`、`g-region-end`;Tres columnas de contenido
Cinco áreas	`g-region-frame`	arriba/inicio/principal/fin/abajo; portal y fondo complejo
Santo Grial	`g-holy-grail`	Alias semántico de cinco regiones; páginas web responsivas tradicionales
Shell de aplicación de barra lateral única	`g-sidebar-shell`	arriba/inicio/principal; Panel de control y CMS
Doble barra lateral	`g-double-sidebar-layout`	inicio/principal/fin; editor, consola de administración
Vista maestro-esclavo	`g-master-detail`	`g-master`、`g-detail`;Correo electrónico, contacto, pedido
Lista/Detalles/Inspector	`g-list-detail-inspector`	`g-region-list`、`g-detail`、`g-region-inspector`;Súper CMS
El pie de página desciende hasta el fondo	`g-sticky-footer-layout`	arriba/principal/abajo; página de contenido breve
Encabezado fijo	`g-fixed-header-layout`	`g-fixed-header-bar`、`g-fixed-header-main`
Barra lateral fija	`g-fixed-sidebar-layout`	`g-fixed-sidebar`、`g-fixed-sidebar-main`;Para terminal móvil `is-open`
Barra auxiliar adhesiva	`g-sticky-aside-layout`	Contenido + `g-sticky-aside`; Índice del artículo, resumen de la liquidación.
Banco de trabajo para muelle	`g-dock-layout`	`g-dock-top/start/main/end/bottom`; Tauri/Electron, IDE
Columnas ajustables	`g-split-view`	`g-split-view-primary/secondary`;Coordenada `data-g-split-pane`
Espacio de trabajo de pantalla completa	`g-fullscreen-workspace`	`g-workspace-toolbar/main/status`;Lienzo, medios, artefacto de IA
Zona segura móvil	`g-mobile-layout`	`g-mobile-layout-header/content/bottom`;PWA y WebView móvil

Cinco áreas y Maestro/Detalle

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

Muelle y columnas regulables

<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="Ajustar el ancho de ambos paneles laterales"></div>
  <section class="g-split-panel g-split-view-secondary">...</section>
</div>

Respuestas, Contenedores, Estados y Variables

Cuando la ventana gráfica tiene menos de 768 píxeles, los diseños de varias columnas, Maestro/Detalle e Inspector se organizan verticalmente en orden semántico; el Dock solo conserva el área principal de forma predeterminada y está disponible is-start-open o is-end-open Cambiar panel móvil.
Al incrustar una tarjeta, un banco de trabajo modal o con zoom, utilice g-region-container Envoltura; Los contenedores de menos de 768 px se colapsarán de forma independiente, independientemente del ancho de la ventana del navegador.
is-start-collapsed、is-end-collapsed Muelle de control;g-region-panel is-collapsed Ocultar panel de área general;is-contained Haga que los diseños fijos, acoplables y de pantalla completa sean seguros e integrados en la vista previa o en el diseñador.
Dimensiones aprobadas --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 Ajuste.
Los documentos fijos, fijos, de pantalla completa y en columnas se aplanan en el flujo normal de documentos al imprimir; Las manijas divisorias se ocultan automáticamente.

Lista de capacidades legibles por máquinaSe detallan 16 diseños, características y matrices de prueba;Página de ejemplo de diseño de área independienteCubre RTL, consulta de contenedor, área fija, muelle, vista dividida, área segura móvil y espacio de trabajo de pantalla completa. existente g-app-shell、g-mobile-shell、g-desktop-shell Sigue siendo compatible y se puede seguir utilizando como shell de nivel empresarial.

Primitivas de diseño clásico

Las capacidades de Clase 3 proporcionan 22 primitivas de diseño con capacidad de respuesta intrínseca. Funcionan según el contenido y el espacio disponible y, por lo general, no requieren puntos de interrupción de página; La IA debe priorizar la selección de primitivas según la intención del diseño y luego ajustar el tamaño y el espaciado a través de las variables expuestas.

22 primitivasRespuesta intrínsecaConsulta de contenedorRTLMovimiento reducidoImprimir

Diferencias con las clases de herramientas:Las clases de utilidad describen propiedades CSS individuales y las primitivas describen relaciones espaciales estables. por ejemplo g-sidebar-layout Cambia automáticamente de columna doble a vertical según el ancho mínimo del contenido, sin necesidad de que la IA adivine qué punto de interrupción de la ventana gráfica se debe usar.

Bento en tiempo real y primitivas de streaming

Destacados 8×2

Alto 4×2

Azulejo

Ancho

Repeler la separación automática y el enrollado seguro de la línea

Clústerenvoltura

Matriz completa de 22 primitivas

Primitivo	Clases raíz y componentes	Propósito y variables clave
Pila	`g-stack`、`is-split`、`g-stack-split`	Ritmo longitudinal;`--g-stack-gap`
Clúster	`g-cluster`	Etiquetas, botones, ajuste de metadatos; brecha / alinear / justificar
Centro	`g-center`、`is-intrinsic`	Ancho, nivel o centro de contenido de lectura; máximo/canal
Barra lateral	`g-sidebar-layout`、`g-sidebar-pattern`、`is-end`	Barra lateral colapsada por el ancho del contenido; tamaño/contenido-min/brecha
Conmutador	`g-switcher`	Cortar de horizontal a vertical cuando no hay suficiente espacio; umbral / brecha
Cubierta	`g-cover`、`g-cover-center`	Contenido en el medio de la ventana gráfica o contenedor; min / relleno
Carrete	`g-reel`	Desplazamiento horizontal de tarjetas y pistas multimedia; tamaño del artículo / espacio
Marco	`g-frame`	Proporción fija y medios recortados; relación/ajuste/posición
Objeto multimedia	`g-media-object` + medios / cuerpo / acción	Avatar, texto, operación de terminal;`is-end`、`is-stacked`
Ajuste automático de cuadrícula	`g-grid-auto-fit`、`g-grid-auto`	Doblar la pista vacía cuando el contenido es pequeño; min / brecha
Autocompletar cuadrícula	`g-grid-auto-fill`	Mantener la posición del riel vacío, adecuada para fijar la ranura de la tarjeta; min / brecha
Sangrado	`g-bleed`、`is-full`	Las imágenes y citas exceden el ancho del texto; tamaño / máx.
Repeler	`g-repel`	El título y la acción están separados en ambos extremos y pueden ajustarse; brecha / alinear
Impostor	`g-imposter-container` + `g-imposter`	Capa central de tamaño desconocido;`is-fixed`, margen/máx.
Superposición	`g-overlay-layout` + base/capa	Herramientas de superposición de medios, anotaciones, estado; alinear / justificar / margen
Albañilería	`g-masonry`	Columnas de contenido de altura variable; columnas/min/espacio, contenedor estrecho de una sola columna
Bento	`g-bento` + ancho / completo / alto / destacado	Marketing, Tarjetas no uniformes del tablero; fila-min / espacio / tramo
Relación de aspecto	`g-aspect-ratio` + cuadrado / retrato / paisaje / vídeo / cine	Caja proporcional universal sin corte forzado
Área de desplazamiento	`g-scroll-area`、`is-block`、`is-inline`	Propietario de pergamino independiente; máximo/sobredesplazamiento
Ajuste de desplazamiento	`g-scroll-snap` + `g-scroll-snap-item`	Horizontal o `is-block` Lista de instantáneas; tamaño / rigor / alinear
Área segura	`g-safe-area`、`is-padded`	Muesca, pantalla redondeada e indicador de inicio con protección en los cuatro lados
Región fija	`g-sticky-region`、`is-bottom`、`is-surface`	Adsorción lógica del borde superior/inferior del área de desplazamiento; desplazamiento/z

Combinaciones de uso común

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

Objeto multimedia, superposición y desplazamiento

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

Reglas de respuesta y entorno

La barra lateral, el conmutador y el ajuste/relleno automático responden según el espacio disponible, independientemente del ancho del dispositivo.
g-layout-container Crear contenedor de componentes; Media Object, Masonry y Bento colapsan de forma independiente cuando tienen menos de 640 px. La ventana gráfica también proporciona un margen de 640 px.
Toda la semántica horizontal utiliza inline/start/end; Objeto multimedia, sangrado, impostor, superposición, carrete y ajuste de desplazamiento admiten RTL.
Las áreas desplazables deben poder enfocarse con el teclado y proporcionar un nombre accesible; El movimiento reducido suprime el desplazamiento suave de las primitivas.
El carrete, el área de desplazamiento, la captura de desplazamiento, la mampostería, el impostor, la superposición y la región adhesiva se aplanan automáticamente al imprimir para evitar que se recorte el contenido.

Lista de capacidadesRegistre las 22 primitivas, alias, propiedades de entorno y matrices de prueba;Página de ejemplo de primitiva independienteCubre respuestas intrínsecas, RTL, consultas de contenedores, Bento, Masonry, ajuste de desplazamiento, áreas seguras y estructuras de impresión. Ya g-grid-auto y g-sidebar-layout Las interfaces siguen siendo compatibles.

Componentes públicos a nivel de página

Las capacidades de categoría 4 proporcionan 23 estructuras y estados de páginas altamente reutilizables. Se ubican entre el esqueleto del diseño y los componentes comerciales, unificando títulos, acciones, contexto, filtros, selecciones por lotes, acciones de desplazamiento y resultados de excepciones para que la IA no tenga que volver a ensamblar áreas comunes para cada página.

23 patronesConsulta de contenedorFijo + FijoÁrea seguraRTLImprimir

Requisitos de estado:La página no puede implementar solo el estado de datos normal. Al menos deben quedar claros Cargando, Vacío y Error; para enrutar y completar aplicaciones, también se deben preparar 403, 404, 500, fuera de línea y mantenimiento. Gardener proporciona el mismo contenido, imágenes, detalles, acciones y widgets de ayuda para estos estados.

Encabezado de página y columna pública en tiempo real

3 elementos seleccionados

23 modos completos

Modo	Clase raíz	Piezas, estado y uso
Encabezado de página	`g-page-header`	principal/ceja/título/descripción/meta/acciones; compacto, centrado, pegajoso
Encabezado de sección	`g-section-header`	principal/título/descripción/acciones; predeterminado, sin bordes
Subtítulo	`g-subheader`	título/acciones; barra de contexto secundaria dentro de la página
Barra de herramientas	`g-toolbar`	inicio/centro/fin/título/separador; compacto, pegajoso, desplazable
Barra de acciones	`g-action-bar`	`g-action-bar-main`; Operaciones de cola de página y formulario
Barra de estado	`g-status-bar`	sección/texto/ `is-end`;Estado del editor y del escritorio
Barra de comandos	`g-command-bar`	grupo/elemento/atajo; Comandos horizontales y teclas de acceso directo.
Barra de contexto	`g-context-bar`	contenido/acciones; información, éxito, advertencia, peligro
Barra de filtro	`g-filter-bar`	principal/acciones; área de filtro pegajoso
Barra de acciones masivas	`g-bulk-action-bar`	recuento/acciones; activo, vacío, oculto
Barra de pie de página	`g-footer-bar`	acciones de pie de página, registro de estadísticas y paginación
Barra de acción flotante	`g-floating-action-bar`	centro, final, contenido; adecuación zona segura
Volver al inicio	`g-back-to-top`	`data-g-scroll-top` Mostrar, desplazarse y restaurar el enfoque automáticamente
Divisor con Texto	`g-divider`	`g-divider-text`; centro, inicio, fin, vertical
Acciones fijas	`g-sticky-actions`	`g-sticky-actions-main`;Desplazarse desde la acción inferior
Cargando página	`g-page-loading`	contenido/título/descripción; contenido, completo, superpuesto
Página vacía	`g-page-empty`	Lista vacía, uso por primera vez y sin resultados de búsqueda
Error de página	`g-page-error`	Solicitud fallida, reintento, detalles técnicos opcionales
403	`g-page-forbidden`	Permisos insuficientes, solicitar permisos y regresar a la entrada
404	`g-page-not-found`	Fallo de enrutamiento, búsqueda y entrada de página de inicio
500	`g-page-server-error`	Errores del servidor, números de solicitud y reintentos
Sin conexión	`g-page-offline`	Estado sin conexión, seguridad de datos locales y reconexión
Mantenimiento	`g-page-maintenance`	Ventanas de mantenimiento, tiempo estimado de recuperación y página de estado

Encabezado de página y barra de herramientas

<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="Herramientas de página">
  <div class="g-toolbar-start">...</div>
  <div class="g-toolbar-center">...</div>
  <div class="g-toolbar-end">...</div>
</div>

Unificar estructura de estado de página

<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 página no existe</h1>
    <p class="g-page-state-description">Es posible que el enlace haya caducado.</p>
    <div class="g-page-state-actions">
      <a class="g-btn g-btn-primary" href="/">Regresar a la página de inicio</a>
    </div>
  </div>
</main>

Respuesta, tiempo de ejecución e impresión

En la ventana gráfica o g-page-component-container Cuando el tamaño es inferior a 640 px, el área operativa del encabezado de página se mueve a la siguiente línea, el centro de la barra de herramientas ocupa una línea exclusiva y el área operativa de la barra contextual se ajusta por completo.
Todas las alineaciones de inicio, fin y acción utilizan dirección lógica; La barra de acción flotante, Volver al principio también lee el área segura del dispositivo.
Volver al inicio Usar existente data-g-scroll-top En tiempo de ejecución, la visualización se basa en la posición de desplazamiento y regresa suavemente a la parte superior después de hacer clic; el entorno de movimiento reducido utiliza automáticamente el desplazamiento instantáneo.
La barra de interacción, el filtro, la máscara de carga y el botón flotante se ocultan al imprimir; el encabezado y la página de resultados se aplanan y la descripción del error y el número de solicitud aún se conservan.
Los componentes visuales, código, título, descripción, detalles, acciones y ayuda del estado de la página se pueden omitir según sea necesario, pero el título y la entrada restaurable no deben faltar al mismo tiempo.

Lista de capacidadesRegistra 23 modos de página, tiempo de ejecución y matrices de prueba;Ejemplo de componente de página independienteCubre todos los encabezados, campos comunes, Cargando, Vacío, Error, 403, 404, 500, Sin conexión, Mantenimiento, Consulta de contenedor y Volver al principio.

Sistema de consejos y ayuda

Las capacidades de categoría 5 brindan 28 modos de indicaciones, explicaciones, orientación y soporte continuo. El sistema también cubre ayuda en línea de baja intrusión, capas flotantes que requieren interacción, orientación compleja de productos, centro de ayuda, rutas de depuración y comentarios de contenido para evitar que la IA solo cree temporalmente una información sobre herramientas.

28 patrones3 tiempos de ejecuciónColisión conscienteTecladoRTLImprimir

Secuencia de selección:Utilice texto de ayuda, sugerencia en línea o sugerencia para contenido complementario que no bloquee el contenido; utilice información sobre herramientas cuando los controles deban estar vinculados; utilice Help Popover cuando incluya enlaces y operaciones; Utilice Tour para la enseñanza de pasos cruzados. No oculte errores importantes ni información legal de lectura obligatoria en una capa flotante.

Paquete de ayuda en tiempo real

Todos los anchos de los dispositivos se pueden verificar mediante vista previa antes de guardarlos.

¿Le resultó útil esta descripción?

28 modos completos

Modo	Clase raíz	Propósito y componentes clave
Consejo	`g-tip`	Predeterminado, información, éxito, advertencia, peligro; habilidades compactas
Sugerencia en línea	`g-inline-hint`	Breve explicación junto al texto o controles
Texto de ayuda	`g-help-text`	Descripción persistente debajo del campo; semántica de éxito, advertencia y peligro.
Activador de ayuda	`g-help-trigger`	Entrada circular con signo de interrogación; flotar, foco visible
Información sobre herramientas	`g-tooltip`	`data-g-tooltip`;Pasar el cursor, enfocar, escapar y aria-descrito por
Información sobre herramientas enriquecida	`g-tooltip-rich`	título/descripción; todavía no es interactivo
Ventana emergente de ayuda	`g-help-popover`	encabezado/título/cuerpo/acciones; clic, cierre externo, Escape
Definición	`g-definition`	Portal de explicación de terminología, abreviaturas y conceptos de la industria
Llamada	`g-callout`	icono/título/contenido; cinco colores semánticos
Nota	`g-note`	Comentarios de documentación, notas de compatibilidad y notas marginales
Hacer/No hacer	`g-guidance-pair`	hacer/no hacer/etiquetar; ejemplo de especificación en paralelo
Sugerencia clave	`g-key-hint`	Teclas en una sola tecla o combinación de teclas
Lista de accesos directos	`g-shortcut-list`	elemento/claves; comparación de comandos y teclas de acceso directo
Tarjeta de ayuda	`g-help-card`	ícono / título / descripción / acciones
Panel de ayuda	`g-help-panel`	encabezado/cuerpo/pie de página; Inspector de panel y escritorio
Centro de ayuda	`g-help-center`	encabezado/título/descripción/búsqueda
Temas de ayuda	`g-help-topics`	tema/título/meta; responder automáticamente a la cuadrícula de temas
Preguntas frecuentes	`g-faq`	elemento/pregunta/respuesta; reutilizar el tiempo de ejecución del acordeón
Ayuda contextual	`g-contextual-help`	Ayuda vinculada a la página actual o al contexto del formulario
Marca Del Entrenador	`g-coach-mark`	título/descripción/acciones; enseñanza de función de un solo punto
Visita guiada	`g-tour`	paso/progreso/acciones; siguiente, anterior, omitir, completar, escapar
Foco	`g-spotlight`	El recorrido rastrea automáticamente la ubicación de destino y enmascara la página
Punto de acceso	`g-hotspot`	; punto caliente de pulso, silenciamiento automático de movimiento reducido
Sugerencia sobre funciones	`g-feature-hint`	insignia/título/descripción; mensaje de nueva característica en el lugar
Novedades	`g-whats-new`	elemento/marcador/título/descripción; resumen de actualización de versión
Lista de verificación de ayuda	`g-help-checklist`	elemento/marcador; pendiente, completo
Solución de problemas	`g-troubleshooting`	paso/número/título/descripción; solución de problemas de secuencia
Comentarios de ayuda	`g-help-feedback`	acciones; si el contenido es útil y admite la entrada de actualización

Ventana emergente de información sobre herramientas y ayuda

<span data-g-tooltip data-g-placement="top-center">
  <button class="g-help-trigger" data-g-tooltip-trigger
          aria-label="Comprender el estado de la versión">?</button>
  <span class="g-tooltip" data-g-tooltip-content hidden>
    Cambios visibles para los visitantes después de la publicación
  </span>
</span>

<span data-g-popover data-g-placement="bottom-end">
  <button data-g-popover-trigger>¿Por qué se requiere verificación?</button>
  <section class="g-help-popover" data-g-popover-content hidden>
    <h3 class="g-help-popover-title">Propiedad del nombre de dominio</h3>
    <div class="g-help-popover-body">...</div>
  </section>
</span>

Visita guiada declarativa

<button data-g-tour-open="publish-tour">Iniciar arranque</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>Saltar</button>
    <button data-g-tour-prev>Paso anterior</button>
    <button data-g-tour-next>Siguiente paso</button>
  </footer>
</div>

Reglas de tiempo de ejecución, accesibilidad y entorno

La información sobre herramientas se muestra cuando el puntero se desplaza y el teclado se enfoca, se escribe automáticamente role="tooltip" y aria-describedby;El contenido no debe contener controles en los que se pueda hacer clic.
Ventana emergente para contenido interactivo, sincronización automática aria-expanded、aria-controls, admite clic externo y cierre Escape.
La capa flotante admite la alineación superior/inferior/inicio/final y de inicio/centro/final. Cuando no haya suficiente espacio, se volteará automáticamente y se limitará a la ventana gráfica; RTL intercambiará direcciones lógicas.
El recorrido mantiene automáticamente los pasos, el progreso, el objetivo Destacado, Anterior/Siguiente/Omitir/Completado y activa la restauración del enfoque; no se muestran pasos de objetivo centrados.
Par de guía móvil automáticamente en una sola columna, el panel de ayuda cambió al borde superior; El movimiento reducido desactiva el pulso de Hotspot y la transición de Spotlight.
Imprima y oculte información sobre herramientas, ventana emergente, recorrido, foco, punto de acceso y acciones de comentarios, conserve sugerencias, leyendas, notas y texto de solución de problemas.

Lista de capacidadesRegistre los 28 modos, 8 tipos de ubicaciones flotantes, 3 tiempos de ejecución compartidos y matrices de prueba;Ejemplo de sistema de ayuda independienteCubre todas las clases raíz, RTL/Responsivo para dispositivos móviles, información sobre herramientas, ventana emergente, preguntas frecuentes y recorrido en dos pasos.

Forma combinación tradicional

Las capacidades de categoría 6 elevan los controles básicos a 37 estructuras de formulario estables, que cubren páginas web normales, formularios móviles, páginas de configuración del panel, editores de CMS e inspectores de Tauri/Electron. Hay interfaces claras para etiquetas de campo, descripciones, verificación, agrupación de negocios, adiciones y eliminaciones dinámicas y envío final.

37 patrones5 tiempos de ejecuciónConsulta de contenedorValidaciónRTLImprimir

Requisitos semánticos:El marcador de posición no puede reemplazar la etiqueta; La información requerida, de error y de ayuda no se puede expresar únicamente mediante el color; La casilla de verificación/radio relacionada debe colocarse en Fieldset con Legend; Los errores a nivel de campo y el resumen de validación deben proporcionarse después de un error en el envío.

Ejemplo de combinación en tiempo real

Información del sitio

La estructura de campo, la selección de negocios y el estado de progreso se mantienen consistentes.

Guardado

Nombre del sitioRequerido

Mostrar en el título del navegador13 / 60

Ruta de liberación

/

Método de liberación

Liberar inmediatamenteCambie a la versión de producción después de completar la verificación previa.Lanzamiento programadoRealizar publicación por zona horaria del sitio.

Finalización de datos72%

37 modos completos

Modo	Clase raíz	Propósito y componentes clave
Formulario	`g-form`	Ritmo vertical unificado; predeterminado, bordeado
Sección de formulario	`g-form-section`	encabezado/título/descripción; partición de forma larga
Campo	`g-field`	encabezado/meta/requerido/opcional; etiquetas, controles, descripciones
Conjunto de campos	`g-fieldset`	leyenda/descripción; grupo de campos relacionados semánticos
Fila del formulario	`g-form-row`	Ajustar al ancho mínimo del campo
Cuadrícula de formulario	`g-form-grid`	2/3/4 columnas, luz completa; cuadrícula de forma determinista
Formulario Horizontal	`g-form-horizontal`	Columna de etiqueta fija + columna de control flexible
Formulario en línea	`g-form-inline`	Filtrar, buscar y compactar el portafolio de envíos
Forma compacta	`g-form-compact`	Panel de control, formulario de alta densidad del inspector de escritorio
Grupo de entrada	`g-input-group`	`g-input-addon`;Botón, Selección y Empalme de Entrada
Afijo de entrada	`g-input-affix`	inicio/fin; moneda, unidad e icono estático
Campo de búsqueda	`g-search-field`	icono/acción; estructura estándar para la entrada de búsqueda
Campo de contraseña	`g-password-field`	`data-g-password-toggle`;Mostrar/ocultar y mantener el cursor
Campo borrable	`g-clearable-field`	`data-g-clear-input`;Borrar, ingresar/cambiar eventos y restaurar el enfoque
Contador de caracteres	`g-character-field`	recuento; predeterminado, cerca del límite, por encima del límite
Estado de validación	`g-validation-state`	; éxito, advertencia, peligro, error
Resumen de validación	`g-validation-summary`	título/lista; enlace a campos después de un envío fallido
Grupo de casillas de verificación	`g-check-group`	apilados, en línea; agrupación de opciones múltiples
Grupo de radio	`g-radio-group`	apilados, en línea; agrupación de opción única
Fila de interruptores	`g-switch-row`	contenido/título/descripción; Configuración del cambio de página
Tarjetas de elección	`g-choice-group`	tarjeta/título/descripción; selección de paquetes y planes
Nombre Grupo	`g-name-group`	Campos dobles de apellido/nombre o nombre/apellido, el orden se puede ajustar según el contenido
Grupo de direcciones	`g-address-group`	línea/ciudad/región/postal; diseño empresarial de seis pistas
Grupo telefónico	`g-phone-group`	Código de país, número, extensión
Grupo Monetario	`g-money-group`	Moneda + monto, dirección lógica, esquinas redondeadas
Rango de fechas	`g-date-range-group`	fecha de inicio, separador, finalización
Rango de tiempo	`g-time-range-group`	Hora de inicio, separador, finalización
Campo de unidad	`g-unit-field`	Valor numérico + unidad fija/opcional
Campo de rango	`g-range-field`	Rango + salida; visualización numérica en tiempo real
Campo de archivo	`g-file-field`	control/nombre; línea de selección de archivo único
Campo repetible	`g-repeatable-field`	lista/elemento/contenido/acciones; adición y eliminación de plantillas, mín./máx., índice
Campo condicional	`g-conditional-field`	controlador/mostrar cuándo; mostrar, ocultar, inerte
Acciones de formulario	`g-form-actions`	final, inicio, entre, pegajoso; Área Segura
Estado de guardado automático	`g-autosave-status`	inactivo, guardando, guardado, error
Progreso del formulario	`g-form-progress`	meta/pista/valor; Complete el grado de finalización.
Revisión de formulario	`g-form-review`	fila/etiqueta/valor/editar; revisar antes de enviar
Grupo de consentimiento	`g-consent-group`	título/descripción; términos, autorización y confirmación

Combinaciones de diseño y campos

<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">Nombre</label>
          <span class="g-field-required">Requerido</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>

Cinco tipos de tiempo de ejecución declarativo

<div class="g-password-field" data-g-password-toggle>
  <input class="g-input" type="password">
  <button data-g-password-button type="button">Mostrar contraseña</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">Agregar</button>
  <template data-g-repeatable-template>...__INDEX__...</template>
</div>

Capacidad de respuesta, accesibilidad e impresión

g-form-container Generar consulta de contenedor de 640px; Las combinaciones de cuadrícula de formulario, horizontal, nombre y dirección se pueden contraer de forma independiente dentro del panel CMS integrado, con reglas de ventana gráfica como alternativa.
Todas las combinaciones utilizan atributos de dirección lógica; El grupo de entrada, el dinero, la unidad, las acciones de campo y las acciones fijas mantienen una relación directa correcta en RTL.
Sincronización de alternancia de contraseña aria-pressed Entrada/cambio de despacho con Nombre Accesible; Borrar entrada; El recuento de caracteres cuenta los caracteres Unicode.
El campo condicional establece oculto, inerte y aria-hidden al mismo tiempo cuando se oculta; El campo repetible admite mínimo/máximo, índice de plantilla, inicialización automática de nuevos controles y recuperación de enfoque después de la eliminación.
El movimiento reducido reduce la animación de guardado; imprime contraseñas ocultas, borra, adiciones, eliminaciones y acciones de envío, conservando valores de campo e información de verificación y auditoría.

Lista de capacidadesSe registraron 37 combinaciones, 5 tiempos de ejecución y matriz de prueba completa;Ejemplo de combinación de formulario independienteCubre todas las clases raíz, grupos de campos comerciales, adiciones y eliminaciones dinámicas, visualización condicional, respuesta de contenedor, RTL e impresión.

Combinación de navegación tradicional

Las capacidades de categoría 7 proporcionan 38 modos de navegación estables que cubren sitios web públicos, portales empresariales, paneles, super CMS, web móvil y escritorios Tauri/Electron. Las entradas globales, locales, jerárquicas, seleccionadas, en página, de paso de página, de proceso, móviles, de comando y de identidad tienen estructuras listas para usar, y la IA no necesita reorganizar temporalmente el CSS de navegación.

38 patrones9 tiempos de ejecución reutilizablesTecladoÁrea seguraRTLImprimir

Orden de selección:Primero determine el alcance de navegación (global, local, jerárquica o intrapágina), y luego determine la dirección y terminal; Las pestañas solo cambian las vistas dentro del mismo contexto, Breadcrumb solo expresa la posición y Paginación solo expresa el cambio de página del conjunto de resultados y no deben reemplazarse entre sí.

Ejemplo de combinación en tiempo real

38 modos completos

Familia	Patrones y clases raíz	Propósito
Mundial	Barra de navegación `g-navbar`	Marca, zona central, operaciones de cola y alternancia de movimiento
	Primario `g-primary-nav`	La entrada más importante del primer nivel para productos.
	Utilidad `g-utility-nav`	Entradas auxiliares como ayuda, estado, idioma e inicio de sesión
	Subnavegación `g-subnav`	Navegación secundaria dentro de un área de producto, canal u objeto
Parcial y Escritorio	Barra lateral `g-sidebar`	Panel de control y barra lateral persistente de CMS
	Plegable `g-collapsible-nav`	`data-g-nav-toggle`;Contraer área y menú móvil
	Riel de navegación `g-nav-rail`	`data-g-roving-nav`; Enfoque clave de dirección y pista estrecha
	Barra de actividades `g-activitybar`	Cambio de función principal del banco de trabajo Tauri/Electron
	Barra de menú `g-menubar`	Barra de menú de tipo Archivo/Editar/Ver del escritorio
Jerarquía y menú	Megamenú `g-mega-menu`	Entrada de varias columnas a un sitio grande
	Menú desplegable `g-dropdown`	Menú de botones; Flecha, Inicio, Fin, Escape
	Menú contextual `g-context-menu`	`data-g-context-menu`; Clic derecho, Shift+F10, ventana gráfica antidesbordamiento
	Navegación en árbol `g-tree-nav`	`data-g-tree`; Niveles ilimitados, expansión y teclas de flecha.
Ubicación y selección	Ruta de navegación `g-breadcrumb`	Ubicación actual y rutas de antepasados
	Pestañas `g-tabs`	`data-g-tabs`;Cambio de vista de la misma capa
	Pestañas verticales `g-vertical-tabs`	Página de configuración y vista vertical del inspector
	Segmentado `g-segmented`	Una pequeña cantidad de métodos de visualización mutuamente excluyentes
	Navegación de píldoras `g-pill-nav`	Categorías, estado y canales de contenido
	Navegación desde ancla `g-anchor-nav`	Directorio de artículos estáticos
	Scrollspy `g-scrollspy-nav`	`data-g-scrollspy`;Sincronizar la posición actual con el desplazamiento
Conjunto de resultados	Paginación `g-pagination`	Paginación numérica con número total de páginas conocido
	Paginación con cursor `g-cursor-pagination`	Cursores API y lote anterior/siguiente
	Cargar más `g-load-more-nav`	Feeds móviles y carga progresiva
Proceso y documentación	Paso a paso `g-stepper`	Estado de progreso del proceso corto
	Navegación del asistente `g-wizard-nav`	Directorio de pasos de proceso largos y área de contenido
	Navegación hacia atrás `g-back-nav`	Regresar al objeto o lista de nivel superior
	Anterior / Siguiente `g-prev-next-nav`	Secuencia de artículos, tutoriales y detalles
	Saltar navegación `g-skip-nav`	Navegación repetida omitida para usuarios de teclado
Terminal móvil	Parte superior móvil `g-mobile-top-nav`	Acciones de retorno, título y cola
	Navegación inferior `g-bottom-nav`	3 a 5 destinos móviles de primer nivel y área segura
	Barra de pestañas Móvil `g-mobile-tab-bar`	Etiqueta de nivel superior de aplicación móvil
	Navegación por cajón `g-drawer-nav`	Navegación deslizante lateral en pantalla pequeña y recuperación de enfoque
Comando e Identidad	Paleta de comandos `g-command-palette`	Entrada del comando de búsqueda global
	Navegación por comandos `g-command-nav`	Lista de comandos en línea y teclas de acceso directo
	Navegación por salto `g-jump-nav`	`data-g-jump-nav`;Seleccione para saltar a capítulos de páginas largas
	Navegación rápida `g-quick-nav`	Entradas recientes, favoritas y de uso frecuente
	Navegación local `g-locale-nav`	Idioma, región y versión del sitio
	Navegación de cuenta `g-account-nav`	Usuarios, Organizaciones, Configuraciones y Salidas

Cinco nuevos comportamientos declarativos

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

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

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

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

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

Reglas de accesibilidad, capacidad de respuesta y entorno

Uso de la página actual aria-current="page", se utiliza la posición de página actual aria-current="location", Uso de pestañas aria-selected;No confíe únicamente en el color.
Roving Nav admite paisaje/retrato, RTL, teclas de cuatro direcciones, Inicio y Fin; El menú contextual admite el botón derecho del mouse, la tecla de menú del teclado, Shift+F10, Escape y recuperación de enfoque.
g-nav-container Cree una capacidad de respuesta de contenedor de 640 px; La barra de navegación, las pestañas verticales y los asistentes se pueden contraer de forma independiente dentro de la ranura del CMS o del inspector de escritorio.
Navegación inferior y manejo de la barra de pestañas móvil safe-area-inset-bottom;El cajón usa dirección lógica, ingresando desde la derecha en RTL.
El movimiento reducido desactiva las transiciones de cajón, árbol y omitir enlace; Forced Colors proporciona esquemas explícitos de elementos actuales; La impresión oculta la navegación de la operación y conserva la ruta de navegación, las páginas delantera y trasera del documento y la información del proceso.

Lista de capacidadesRegistra 38 modos de navegación, 11 familias de navegación, 9 tipos de tiempos de ejecución de reutilización y una matriz de prueba completa;Ejemplo de navegación independienteCubre la navegación global, jerárquica, de selección, de menú, en página, de procesos, móvil y de escritorio, y puede probar directamente las interacciones del teclado y del clic derecho.

Combinación de visualización de datos y operación

Las capacidades de categoría 8 proporcionan 48 modos de datos estables, tratando la "visualización de datos" y la "manipulación de datos" como el mismo conjunto de contratos. Un sitio web ordinario, un panel de control, un súper CMS, una lista móvil, un informe de análisis y un banco de trabajo de alta densidad Tauri/Electron pueden seleccionar directamente tablas, registros, listas, jerarquías, flujos, indicadores, visualizaciones, planes, espacios o modos de operación.

48 patrones8 tiempos de ejecución reutilizablesAdhesivo / ApiladoCuadrícula del tecladoRTLImprimir

Orden de selección:Determine primero el formulario de datos y luego la intensidad de la operación. Utilice la lista de descripción o el valor clave para una pequeña cantidad de atributos estáticos; use Lista o Tabla para múltiples registros; use Data Grid solo cuando las celdas requieran movimiento y edición del teclado; utilice Árbol o Tabla de árbol para datos jerárquicos; Las tendencias y comparaciones proporcionan primero valores legibles y luego agregan gráficos.

Ejemplo de combinación en tiempo real

2,480Publicado

128Pendiente de revisión

6Elemento de riesgo

página	Estado	Visitas
Página de inicio de la empresa	Publicado	28,420
Centro de productos	En revisión	16,208

48 modos completos

Familia	Patrones y clases raíz	Propósito y capacidades clave
Tabla	Tabla `g-table`	Tabla semántica básica; rayado, flotante, compacto
	Tabla Responsiva `g-responsive-table`	Desplazamiento horizontal, tarjetas móviles, primera y última columna fijas
	Cuadrícula de datos `g-data-grid`	ARIA Grid, teclas de cuatro direcciones, Inicio/Fin
	Cuadrícula editable `g-editable-grid`	Celda editable, edición, no válida
	Mesa de árbol `g-tree-table`	Nivel de sangría, expansión de línea padre-hijo
	Tabla agrupada `g-grouped-table`	Agrupar por región, fecha, tipo
	Mesa expandible `g-expandable-table`	Línea de detalles y `g-row-disclosure`
	Tabla comparativa `g-comparison-table`	Comparación horizontal de paquetes, versiones y capacidades
	Tabla dinámica `g-pivot`	Resumen cruzado, encabezados de fila fijos
Registros y listas	Lista de descripciones `g-description-list`	Pocas etiquetas y valores estáticos
	Valor clave `g-key-value`	Valores, textos explicativos y acciones individuales
	Detalle del registro `g-record-detail`	Detalles completos de un único registro comercial
	Listar grupo `g-list-group`	Listas genéricas y filas interactivas
	Lista de medios `g-media-list`	Acciones de avatar, miniatura, cuerpo y cola
	Lista densa `g-dense-list`	Listas de alta densidad de Desktop e Inspector
	Lista virtual `g-virtual-list`	Shell de alojamiento con ventana para registros masivos
Jerarquía y flujo	Árbol `g-tree`	Niveles infinitos, expansión y movimiento de teclado
	Línea de tiempo `g-timeline`	Historial de hitos y estados
	Feed de actividades `g-activity-feed`	Flujo de actividad del usuario y del sistema
	Registro de auditoría `g-audit-log`	Grupo de fechas, operador, acción y hora
Indicadores y gráficos	KPI `g-kpi`	Valor clave y dirección ascendente y descendente
	Lista de estadísticas `g-stat-list`	Un conjunto compacto de valores estadísticos
	Tarjeta Métrica `g-metric-card`	Valores, etiquetas y pequeños gráficos de tendencias
	Minigráfico `g-sparkline`	Microtendencia en barra o SVG
	Estadísticas de progreso `g-progress-stats`	Progreso y proporción de clasificación
	Gráfico `g-chart`	Títulos, áreas de trazado y contenedores de acciones independientes de la biblioteca de gráficos
	Leyenda de datos `g-data-legend`	Etiquetas de color, familia y legibles
	Clasificación `g-ranking`	Clasificación, nombre y valor
	Resumen de estado `g-status-summary`	Resumen rápido de cantidades de estado
Plano y espacio	Calendario `g-calendar`	Cuadrícula horaria y eventos semanales/mensuales
	Agenda `g-agenda`	Lista de programación lineal
	Kanban `g-kanban`	Columnas de fase y tarjetas de tareas
	Gantt `g-gantt`	Tareas, línea de tiempo y barras de progreso
	Organigrama `g-org-chart`	Nodos organizacionales y relaciones jerárquicas
	Mapa `g-map-shell`	Paneles de resultados, herramientas y lienzo del mapa
	Matriz de datos `g-data-matrix`	Matriz de permisos, capacidades y estados bidimensionales
	Mapa de calor `g-heatmap`	Actividad, Contribución y Densidad
Operaciones de datos	Barra de herramientas de datos `g-data-toolbar`	Buscar, filtrar, conteo de resultados y acciones
	Selector de columnas `g-column-chooser`	Visualización y ocultación de columnas
	Vistas guardadas `g-saved-views`	Guardado de filtros, clasificación y configuraciones de columnas
	Panel de exportación `g-export-panel`	Exportación de formato, rango y campo
	Estado de los datos `g-data-state`	Cargando, Vacío, Error, Sin conexión
	Conmutador de vistas `g-data-view-switcher`	Cambio de vista de tabla, lista y tarjeta
	Resumen de selección `g-selection-summary`	Seleccionar cantidad y acción de lote
	Densidad de la tabla `g-table-density`	Densidad Confort, Estándar y Compacta
	Resumen de filtros `g-filter-summary`	Condiciones actuales y borrado con un clic
	Generador de clasificación `g-sort-builder`	Orden de clasificación de múltiples campos
	Inspector de datos `g-data-inspector`	Comprobadores de registros de escritorio y CMS

Seis nuevos comportamientos declarativos

<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="Seleccionar todo">
  <button data-g-sort-key="revenue" data-g-sort-type="number">Ingresos</button>
  <input data-g-select-row type="checkbox" value="record-id">
  <button data-g-row-toggle="detail-id" aria-expanded="false">Ampliar</button>
  <label><input data-g-toggle-column="owner" checked>Persona a cargo</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="Texto de índice opcional">...</article>
  <div data-g-filter-empty hidden>Sin resultados</div>
</div>

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

Reglas de tiempo de ejecución, accesibilidad y entorno

Table Sort mantiene automáticamente los encabezados de las tablas aria-sort, admite texto, número, fecha y clasificación estable; la fila de detalles se mueve con la fila principal durante la clasificación.
La selección de fila mantiene la selección completa, la selección parcial yindeterminate, OK aria-selected, Selección de intervalo de turno y Resumen de selección.
La divulgación de filas sirve tanto para la fila de detalles como para la tabla de árbol, se mantiene aria-controls、aria-expanded, colapso de escape y ocultación recursiva de subfilas.
La alternancia de columnas conserva al menos una columna; El filtro de datos admite la normalización Unicode, la coincidencia Y de palabras clave múltiples, el recuento de resultados y el vacío; Vista de datos admite teclas de flecha, Inicio y Fin.
g-data-container Crear contenedor plegable de 640 px; Stacked Table usa cada cuadrícula en pantallas pequeñas data-g-label Genere tarjetas legibles sin alterar la semántica de las tablas de escritorio.
Todas las estructuras adoptan atributos de dirección lógica y admiten RTL; Colores forzados proporciona esquemas de selección; imprima operaciones de datos ocultos, expanda filas de detalles y jerarquía y elimine el recorte de desplazamiento.

Lista de capacidadesRegistra 48 modos de datos, 11 familias de datos, 8 tipos de tiempos de ejecución multiplexados y una matriz de prueba completa;Ejemplo de datos independientesSe pueden probar directamente la clasificación, selección, expansión, visibilidad de columnas, búsqueda, cambio de vista, movimiento de tablas apiladas y cuadrícula de teclado.

Selección y procesamiento por lotes de componentes

Las capacidades de categoría 9 convierten "la selección de objetos, la expresión de rangos de selección, la ejecución por lotes y el almacenamiento de condiciones de selección" en un protocolo completo. Adecuado para super CMS, asignación de permisos, gestión de miembros, biblioteca multimedia, campos relacionados, panel de control, backend móvil y banco de trabajo de escritorio Tauri/Electron.

32 patrones7 tiempos de ejecución reutilizablesSelección múltipleJerarquíaTecladoRTL/Imprimir

Selección en tiempo real y operaciones por lotes

Página de documentación

Seleccionar todo

Vista actual0 / 3

Inicio rápidoDocumentos públicosPublicadoReferencia APIDocumentación del desarrolladorBorradorPreguntas frecuentesCentro de ayudaPublicado

Matriz completa de 32 modos

#	Patrón/Clase raíz	Objeto y contrato
01	Control de selección `g-selection-control`	Seleccionar información de cantidad, total y rango
02	Seleccionar Todo `g-select-all-control`	Selección completa y selección parcial indeterminada
03	Invertir `g-invert-selection-control`	Invertir artículos disponibles actualmente
04	Rango `g-range-selection-control`	Selección de intervalo de cambio
05	Barra de herramientas por lotes `g-batch-toolbar`	Acciones por lotes fijos que reconocen la zona segura
06	Alcance de la selección `g-selection-scope`	Límites de selección para listas, tablas o árboles
07	Transferencia `g-transfer`	Mover y buscar bidireccionales seleccionados/todos
08	Lista dual `g-dual-list`	Lista doble de permisos, miembros, etiquetas
09	Selección de árbol `g-tree-select`	Multiselección jerárquica y visualización de ruta
10	Cascada `g-cascader`	Selecciones en cascada para expansión nivel por nivel
11	Selector de menciones `g-mention-picker`	@ persona, canal o recurso
12	Selector de usuarios `g-user-picker`	Avatar, nombre, equipo y selecciones múltiples
13	Selector de organizaciones `g-organization-picker`	Árbol de organización, departamentos y puestos
14	Selector de recursos `g-resource-picker`	Archivos, páginas, fuentes de datos y activos
15	Selector de medios `g-media-picker`	Cuadrícula de miniaturas y selección múltiple de medios
16	Selector de iconos `g-icon-picker`	Búsqueda de iconos, grilla y estado seleccionado
17	Selector de color `g-color-picker`	Vista previa, entrada y muestras de color
18	Rango de fechas `g-date-range-picker`	Calendario bimensual preestablecido y rango de fechas
19	Rango de tiempo `g-time-range-picker`	Intervalo de tiempo y expresión entre días
20	Filtros guardados `g-saved-filters`	Condiciones del filtro reutilizable
21	Vistas guardadas `g-saved-views`	Instantáneas de filtro, columna, clasificación y densidad
22	Selector de columnas `g-column-chooser`	Ocultar columnas y mantener al menos una columna
23	Generador de clasificación `g-sort-builder`	Intercalación dinámica de múltiples campos
24	Generador de grupos `g-group-builder`	Reglas dinámicas de agrupación de campos múltiples
25	Selector de entidades `g-entity-picker`	Selector unificado de entidades comerciales
26	Selector de etiquetas `g-tag-picker`	Búsqueda, creación y selección múltiple de etiquetas
27	Selector de relaciones `g-relation-picker`	Registros, páginas y relaciones entre padres e hijos
28	Confirmación masiva `g-bulk-confirmation`	Confirmación del impacto de la operación por lotes peligrosos
29	Progreso masivo `g-bulk-progress`	Progreso paso a paso, fallas y operaciones en segundo plano
30	Panel selector `g-picker-panel`	Capa flotante de escritorio y panel inferior móvil
31	Resumen del selector `g-picker-summary`	Resumen de valores seleccionados y resultados de selección
32	Resumen de selección `g-selection-summary`	Cantidad seleccionada y acciones rápidas

Interfaz de tiempo de ejecución declarativa

<section data-g-row-select>
  <input type="checkbox" data-g-select-all>
  <button data-g-invert-selection>Selección inversa</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">Usuario</button>
  </div>
</div>

Reglas de entorno y tiempo de ejecución

row-select Admite todas las selecciones, selección inversa, selección de artículos clara y visible, intervalo de turno, salida de cantidad, visualización de columnas de lotes y visualización de filas aria-selected。
transfer Admite movimiento bidireccional de seleccionados/todos, búsqueda en ambos lados, cantidad y estado de Vacío, y Ctrl/Comando + teclas de flecha izquierda y derecha.
picker Selección única/múltiple unificada, búsqueda Unicode, eliminación de chip, salida de campo oculto, teclas de flecha, Inicio, Fin, Intro, Espacio, Escape y haga clic afuera para cerrar.
data-g-cascader Mantener rutas y valores;data-g-saved-choice Filtros, vistas, íconos y muestras de servicio;data-g-builder-list Admite la adición, eliminación y movimiento de reglas de clasificación/agrupación de plantillas.
g-selection-container Proporciona un colapso del contenedor de 640 px; el panel selector móvil se convierte automáticamente en el panel inferior y la barra de herramientas por lotes evita el área segura.
Todos los modos admiten dirección lógica, RTL, movimiento reducido, colores forzados e impresión; Los controles que cambian el estado de selección se ocultan al imprimir y los resúmenes de resultados se conservan.

Lista de capacidadesRegistra los 32 modos, 8 familias de capacidades y matrices de prueba;Ejemplo de selección independienteSeleccionar todo, Selección inversa, Selección de rango, Transferencia, Selector, Cascada, Elección guardada y Generador dinámico se pueden probar directamente.

Sistema de archivos y contenidos

Las capacidades de categoría 10 cubren el ciclo de vida completo de los archivos, desde el ingreso al sistema, la carga y la organización, hasta la vista previa, la edición, la colaboración, la revisión y el almacenamiento. La web, el backend móvil, el súper CMS, el centro multimedia y el editor de escritorio Tauri/Electron se pueden reutilizar directamente, sin la necesidad de que la IA organice temporalmente CSS complejos en el banco de trabajo.

32 patrones6 tiempos de ejecución reutilizablesSubir + EditorEscritorio + MóvilTecladoRTL/Imprimir

Carga, edición y revisión en tiempo real

Cola de cargaCompleto 0 · Actividades 0

PDFManual del producto.pdf

Contenido editable

Modifique este texto para verificar las estadísticas de caracteres y el estado de guardado automático.

- Solo admite páginas web

+ Soporte web y de escritorio

Matriz completa de 32 modos

#	Patrón/Clase raíz	Objeto y contrato
01	Entrega de archivos `g-file-drop`	Hacer clic/arrastrar, entrada de archivo y estado de arrastre
02	Lista de archivos `g-file-list`	Líneas de archivos compactos, metainformación y acciones
03	Cola de carga `g-upload-queue`	Múltiples colas de archivos, conteo, pausa y eliminación
04	Carga de fragmentos `g-chunk-upload`	Estado de fragmentación, protocolo visual de reanudación del punto de interrupción
05	Progreso de la carga `g-upload-progress`	Valores de progreso, texto de estado y ARIA
06	Error al cargar `g-failed-upload`	Motivo del error, reintento y eliminación
07	Tarjeta de archivo `g-file-card`	Miniaturas, nombres, propiedades y acciones rápidas
08	Árbol de carpetas `g-folder-tree`	Nivel de directorio, número y ruta actual
09	Explorador de archivos `g-file-browser`	Selección de catálogo, búsqueda, cuadrícula/lista y teclado
10	Vista previa de archivo `g-file-preview`	Vista previa del lienzo, herramientas de zoom y metainformación
11	Biblioteca multimedia `g-media-library`	Panel de trabajo de recursos multimedia y barra de detalles
12	Cuadrícula de medios `g-media-grid`	Miniaturas responsivas y estado de selección
13	Detalles de medios `g-media-details`	Vista previa, texto alternativo, derechos de autor y dimensiones
14	Recorte de imagen `g-image-crop`	Etapa de cultivo, escala e inspector
15	Anotación de imagen `g-image-annotation`	Puntos destacados, calificaciones y notas de revisión
16	Visor de documentos `g-document-viewer`	Papel, miniaturas, paso de página y zoom
17	Visor de PDF `g-pdf-viewer`	PDF.js, shell puente nativo o de escritorio
18	Reproductor de vídeo `g-video-player`	Controles de etapa, progreso y reproducción 16:9
19	Reproductor de audio `g-audio-player`	Portada, Formas de onda/Línea de tiempo y controles
20	Editor de código `g-code-editor`	Número de línea, lienzo de códigos y barra de estado
21	Editor de texto enriquecido `g-rich-text-editor`	Herramientas de formato, texto editable y estadísticas
22	Editor de rebajas `g-markdown-editor`	Código fuente/vista previa de doble columna y plegado móvil
23	Editor de bloques `g-block-editor`	Identificadores de bloques, texto y acciones
24	Comparación de revisiones `g-revision-compare`	Diferencias unificadas/lado a lado y semántica de adición y eliminación
25	Autoguardado `g-autosave-indicator`	Sucio, Guardando, Guardado, Error
26	Esquema de contenido `g-content-outline`	Nivel de título del documento y capítulo actual
27	Barra de herramientas del editor `g-editor-toolbar`	Grupos de comandos, estado presionado y teclas de método abreviado
28	Buscar y reemplazar `g-find-replace`	Buscar, reemplazar, resultados y navegación
29	Hilo de comentarios `g-comment-thread`	Avatar, texto, hora y respuesta colaborativa
30	Historial de versiones `g-version-history`	Cronología de la versión, versión actual y recuperación
31	Propiedades del archivo `g-file-properties`	Tipo, propietario, valor del cheque y copyright
32	Medidor de almacenamiento `g-storage-meter`	Cuota, Clasificación, Ocupación y Progreso

Interfaz de tiempo de ejecución declarativa

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

Reglas de tiempo de ejecución, accesibilidad y entorno

dropzone Maneja la profundidad de arrastre, la activación del teclado y eventos de archivos reales;upload-manager Mantener el estado de la cola, el progreso, las pausas, los reintentos, las eliminaciones y los recuentos agregados.
file-browser Proporciona búsqueda Unicode, cambio de cuadrícula/lista, selección única, teclas de flecha, Inicio, Fin, Intro y Espacio, y publica eventos de selección.
editor-shell Unificar comandos de herramientas, atajos de Ctrl/Comando, recuento de caracteres y palabras; Protocolos comunes para texto enriquecido, Markdown, editores de código y bloques.
revision-compare Alternar diferencias lado a lado/unificadas;autosave Expresa Sucio, Guardado, Guardado y Error, y admite guardados retrasados e inmediatos.
g-content-container Utilice el colapso del contenedor de 704 px; El explorador de archivos, los detalles multimedia, el editor de imágenes, las miniaturas de documentos, las columnas dobles de Markdown y la comparación de versiones tienen diseños móviles.
Todos los modos utilizan dirección lógica y cubren RTL, movimiento reducido, colores forzados e impresión; Imprimir oculta las acciones de carga y edición, aplana el área de desplazamiento y conserva el texto y la información de revisión.

Lista de capacidadesRegistra los 32 modos, 8 familias de capacidades y matrices de prueba;Ejemplo de sistema de contenido independienteCubre carga, exploración de archivos, medios, imágenes, documentos, audio y video, cuatro tipos de editores, colaboración, versiones y almacenamiento.

Sistema de inicio de sesión y cuenta

Las capacidades de categoría 11 cubren el ciclo de vida completo de una identidad, desde el ingreso al sistema, la verificación, la recuperación, la autorización hasta la sesión, el inquilino, el dispositivo y la auditoría de seguridad. No es una única tarjeta de inicio de sesión, sino 32 combinaciones estables que funcionan directamente en PC, web móvil, Dashboard, Super CMS y WebView de escritorio Tauri/Electron.

Combinación de verificación en tiempo real

Verificar número de teléfono móvil

Código de verificación enviado al +86 138****6608

Establecer nueva contraseña

Seguridad de la contraseñaNo establecido

Al menos 8 dígitos
Letras mayúsculas
Letras minúsculas
Número
Símbolo

!

Nuevo dispositivo detectado

Linux · Firefox · Pekín

Matriz completa de 32 modos

#	Modo	Clase raíz	Propósito y componentes clave
01	Autenticación centrada	`g-auth-centered`	Entrada de una sola fila, terminal móvil, producto liviano; cooperación `g-auth-container`、`g-auth-panel`
02	Certificación de columna	`g-auth-split`	`g-auth-split-aside` Área de marca + `g-auth-split-main` Área de formulario
03	Iniciar sesión	`g-sign-in`	Correo electrónico/nombre de usuario, contraseña, permanecer conectado, recuperar entrada y `g-auth-provider`
04	Registro	`g-registration`	Registro personal/empresarial, confirmación de términos, seguridad de contraseña
05	Recuperar contraseña	`g-password-recovery`	Métodos de recuperación de correo electrónico, teléfono móvil y administrador
06	Restablecer contraseña	`g-password-reset`	Nueva contraseña, confirmar contraseña, estado de token vencido
07	Verificación por correo electrónico	`g-email-verification`	`g-verification-icon`, dirección, tiempo de reenvío
08	Verificación de teléfono móvil	`g-phone-verification`	Código de país, número enmascarado y OTP
09	Desafío MFA	`g-mfa-challenge`	Autenticador, SMS, clave de seguridad, código de recuperación y dispositivos confiables
10	Entrada OTP	`g-otp-input`	`g-otp-cell`; Entrada de dígitos, pegar, retroceso y teclas de flecha
11	Clave de acceso	`g-passkey`	`g-passkey-graphic`, validador de plataforma y portal multidispositivo
12	SSO	`g-sso`	SAML/OIDC, detección de dominios empresariales y lista de proveedores
13	Inicio de sesión con código QR	`g-qr-login`	`g-qr-login-layout`、`g-qr-code`, estado de actualización y vencimiento
14	Enlace Mágico	`g-magic-link`	Inicio de sesión por correo electrónico sin contraseña, período de validez y recordatorio de un solo uso
15	Invitar a unirse	`g-invitation`	`g-invitation-details`, organización, rol, invitante y período de validez
16	Configuración por primera vez	`g-first-time-setup`	Contraseña por primera vez, información, organización y preferencias de seguridad
17	Pantalla de bloqueo	`g-lock-screen`	`g-lock-screen-panel`, hora, usuario actual y desbloqueo rápido
18	La sesión expiró	`g-session-expired`	`g-session-expired-panel`, instrucciones de cambio local y recertificación
19	Selección de cuenta	`g-account-chooser`	`g-auth-choice`, avatar, correo electrónico y cuenta nueva
20	Selección de inquilino	`g-tenant-chooser`	Espacio de trabajo, función de la organización, membresía e inquilino actual
21	Cambio de identidad	`g-identity-switcher`	`g-identity-switcher-menu`, identidad de rol y vista previa de visitante
22	Información completa	`g-profile-setup`	`g-auth-avatar`, nombre, cargo, zona horaria e idioma
23	Centro de seguridad de cuentas	`g-account-security`	`g-security-section` Contraseñas agregadas, MFA, dispositivos y conexiones
24	Administración de dispositivos	`g-device-management`	`g-device-item`, dispositivo actual, ubicación, hora y cancelación
25	Actividad de inicio de sesión	`g-login-activity`	`g-login-event`, Método, IP, Ubicación, Éxito y Riesgo
26	Incidente de seguridad	`g-security-alert`	`g-security-alert-actions` Confirmar identidad o proteger cuenta
27	Código de recuperación	`g-recovery-codes`	`g-recovery-code` Grid, copiar, descargar y regenerar
28	Dispositivo confiable	`g-trusted-device`	Descripción del riesgo de equipo público y fecha límite de omisión de MFA
29	Cuenta conectada	`g-connected-accounts`	`g-connected-account`, estado de conexión y operación de desconexión
30	Seguridad de la contraseña	`g-password-strength`	`g-password-strength-meter`、`g-password-rule` con puntuación en tiempo real
31	Autorización y consentimiento	`g-auth-consent`	`g-auth-consent-scope` Alcance, permitir y denegar permiso
32	Resultados de la certificación	`g-auth-result`	`g-auth-result-icon`; Éxito, fracaso y estado de procesamiento.

Interfaz de tiempo de ejecución declarativa

Comportamiento	Propiedades	Habilidad
Alternar contraseña	`data-g-password-toggle`	Mostrar/ocultar y mantener el cursor
Entrada OTP	`data-g-otp-input`	Avance automático, retroceso, teclas de flecha, pegado de cadena completa, evento de finalización
Seguridad de la contraseña	`data-g-password-strength`	Cinco reglas, calificación de 0 a 4, progreso de ARIA
Temporizador de autenticación	`data-g-auth-timer`	Reenvío, código QR y cuenta regresiva/vencimiento de sesión
Elección guardada	`data-g-saved-choice`	Selección de cuenta e inquilino
Menú desplegable	`data-g-dropdown`	Menú de cambio de identidad
Copiar	`data-g-copy`	Copia del código de recuperación
Diálogo	`data-g-dialog`	Revocar dispositivo, confirmación de operación 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>

Estado, terminales y reglas de seguridad

El campo de contraseña se usa correctamente autocomplete; La entrada del código de verificación bit a bit aún requiere un nombre accesible y deja el valor completo oculto para su envío.
OTP admite filtrado numérico, avance automático, retroceso, teclas de flecha izquierda y derecha, inicio, finalizar y pegar; liberado cuando esté completo gardener:otpcomplete。
El resultado de la autenticación debe ser claro Éxito, Error y Pendiente; la caducidad de la sesión debe indicar si se conservan los datos no enviados y los eventos de seguridad no pueden expresarse únicamente por color.
Cuenta, inquilino e identidad son conceptos diferentes. Utilice Chooser/Switcher respectivamente para evitar un mal funcionamiento en CMS de varias organizaciones.
La autenticación de columnas converge en una sola columna por debajo de 704 px; las tarjetas se reorganizan con QR, reglas y códigos de recuperación por debajo de 384 px; Las operaciones de fondo respetan el Área Segura.
Todos los estilos cubren RTL, movimiento reducido, colores forzados e impresión. Imprima contraseñas ocultas, proveedores, cuentas regresivas y operaciones confidenciales, conservando solo la información de auditoría de seguridad necesaria.

Lista de capacidadesRegistra los 32 modos, 8 familias de capacidades, 8 clases de tiempos de ejecución multiplexados y matriz de prueba completa;Ejemplo de sistema de cuentas independientesCubre todos los modos y permite la prueba directa de OTP, seguridad de la contraseña, cuenta regresiva, selección de cuenta/inquilino y menú de identidad.

Comercio y Pagos

Las capacidades de categoría 12 cubren la cadena de transacciones completa de descubrimiento de productos, especificaciones y precios, carritos de compras, liquidación, cumplimiento, pagos, pedidos y facturación de suscripciones. 32 combinaciones listas para usar en PC Mall, Mobile Web, Dashboard, Super CMS, Digital Goods, SaaS y Tauri/Electron Desktop WebView.

Portafolio de negociación en tiempo real

GRAMO

Gardener StudioLicencias empresariales · Windows

¥699.00

Subtotal

Descuento

Entrega

Hacer frente

Seleccionar plataforma

Matriz completa de 32 modos

#	Modo	Clase raíz	Propósito y componentes clave
01	Ficha de producto	`g-commerce-product-card`	`g-product-media`、`g-product-card-badge`, título, precio y acción
02	Lista de productos	`g-commerce-product-list`	`g-product-list-item`Acciones de medios, resumen, precio y fila
03	Detalles del producto	`g-commerce-product-detail`	`g-product-detail-summary`, Título, Proveedor, SKU, Inventario y Acción de compra
04	Galería de productos	`g-commerce-product-gallery`	`g-product-gallery-thumb` y escenario; Comportamiento del carrusel reutilizable
05	Selección de SKU	`g-sku-selector`	`g-sku-group`、`g-sku-option`, deshabilita la combinación y la salida de selección completa
06	Paso de cantidad	`g-quantity-stepper`	`g-quantity-button`, eventos de entrada, mín/máx/paso y cambio
07	Visualización de precios	`g-price-display`	`g-price-current`, precio original, descuento, ciclo, descripción e inventario con impuestos incluidos `g-stock-status`
08	Entrada al carrito de compras	`g-commerce-cart-item`	`g-cart-item-media`, especificación, cantidad, total de filas y operación
09	Carrito de compras	`g-cart`	Vinculación de cantidad,`g-cart-empty`, Subtotal, Ofertas, Envío, Impuestos y Total
10	Mini carrito de compras	`g-mini-cart`	Contenedores desplegables, listas y `g-mini-cart-footer`
11	Resumen del carrito de compras	`g-cart-summary`	Suma de la línea de gastos `g-cart-summary-total`
12	Liquidación	`g-commerce-checkout`	`g-checkout-section` Área principal + Adhesivo `g-checkout-sidebar` + Área Segura `g-checkout-mobile-actions`
13	Pasos de liquidación	`g-checkout-steps`	`g-checkout-step-marker`, estado completado/actual/pendiente
14	Selección de dirección	`g-address-selector`	Elección guardada, dirección predeterminada y nueva entrada
15	Tarjeta de dirección	`g-address-card`	`g-address-main`, persona de contacto, número de teléfono, dirección detallada, etiquetas y edición
16	Método de envío	`g-shipping-method`	`g-shipping-option`, puntualidad, transportista, precio y estado de inalcanzable
17	Opción de recogida automática	`g-pickup-selector`	`g-pickup-option`, tienda, distancia, horario de atención e inventario
18	Código de descuento	`g-coupon`	`g-coupon-status`; Inactivo, Aplicado, Inválido y Borrado
19	Lista de ascensos	`g-promotion-list`	`g-promotion-item`, Código, umbral, exclusión mutua y período de validez
20	Información de factura	`g-invoice-information`	`g-invoice-fields`, tipo de factura, encabezado, número fiscal y método de recibo
21	Método de pago	`g-payment-method`	`g-payment-option`, tarjeta bancaria, billetera, saldo, estado fuera de línea y deshabilitado
22	Panel de pago	`g-payment-sheet`	`g-payment-sheet-total`, monto, confirmación, aviso de control de riesgo y devolución
23	Resultado del pago	`g-payment-result`	`g-payment-result-icon`; Éxito, fracaso, tramitación y acciones posteriores.
24	Resumen del pedido	`g-commerce-order-summary`	Artículos, Descuentos, Envíos, Impuestos, Pagos y Ventas `g-order-summary-total`
25	Cronograma de pedidos	`g-commerce-order-timeline`	`g-order-timeline-item`, nodo, tiempo, logística y pasos actuales
26	Detalles del pedido	`g-order-detail`	Encabezado, estado, artículo, dirección, pago, factura y `g-order-detail-section`
27	Paquete de suscripción	`g-subscription-plan`	`g-plan-price-value`, Ciclo, Función, Destacados y Acción
28	Comparación de precios	`g-pricing-comparison`	Columna de capacidad fija, diferencia de paquete, celda booleana/cantidad/precio
29	Medidor de dosis	`g-commerce-usage-meter`	`g-usage-meter-track`, corriente/límite, período de reinicio, Advertencia/Peligro
30	Historial de facturación	`g-billing-history`	`g-billing-history-item`, período, monto, estado, PDF y filtrado
31	Estado del reembolso	`g-refund-status`	`g-refund-status-progress`, monto, devolución original, llegada estimada y falla
32	Resumen de impuestos	`g-tax-summary`	`g-tax-summary-row`, monto libre de impuestos, tipo de impuesto, tasa impositiva, región y monto total de impuestos incluidos

Interfaz de tiempo de ejecución declarativa

Comportamiento	Propiedades	Habilidad
Cantidad por pasos	`data-g-quantity-stepper`	mín/máx/paso, estado del botón, normalización de entrada,`gardener:quantitychange`
Selector de SKU	`data-g-sku-selector`	Selección de radio agrupada, especificaciones deshabilitadas, roaming de teclado, salida JSON,`gardener:skuchange`
Carrito	`data-g-cart`	Cálculo de centavos enteros, vinculación de cantidad/remoción, subtotal/descuento/flete/impuesto/total
Cupón	`data-g-coupon`	Código declarativo válido, estados y eventos de aplicar/inválido/borrar
Elección guardada	`data-g-saved-choice`	Opciones de dirección, envío, recogida y pago
Carrusel	`data-g-carousel`	Galería de productos
Menú desplegable	`data-g-dropdown`	Mini carrito de compras

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

Reglas de cantidad, estado y entorno

El carrito utiliza el cálculo entero de la unidad monetaria más pequeña y la capa de visualización se entrega a Intl.NumberFormatpara evitar errores de cantidad en punto flotante; los impuestos, la superposición preferencial, el inventario y la verificación de pagos todavía son adjudicados por el backend empresarial.
Los SKU deshabilitados, el inventario bajo/agotado, el código de descuento no válido, el pago exitoso/error/pendiente y el reembolso en procesamiento/completo/fallido tienen estados independientes y no pueden depender únicamente del color.
La dirección, la entrega, la recogida, la factura y el pago son objetos comerciales diferentes; el shell de liquidación es responsable de organizarlos y no codifica las reglas comerciales de back-end en CSS.
g-commerce-container Contraer columnas duales de detalles/pago a 704 px, reordenar líneas de pedido y seleccionar tarjetas a 480 px; consulta de ventana gráfica como alternativa cuando no hay contexto de contenedor.
Todos los modos cubren teclado, RTL, movimiento reducido, colores forzados e impresión; la facturación móvil respeta el Área Segura, la impresión oculta las acciones de compra y conserva la información del pedido, la factura y los impuestos.
Superficie blanca predeterminada con pequeñas esquinas redondeadas de 4px; el componente solo utiliza tokens temáticos, que se pueden reutilizar en 42 conjuntos de colores principales y todos los ejes temáticos ortogonales.

Lista de capacidadesRegistra los 32 modos, 8 familias de capacidades, 7 tipos de tiempos de ejecución multiplexados y una matriz de prueba completa;Ejemplo de pago y negocio independienteCubre catálogo, SKU, carrito, pago, cumplimiento, pagos, pedidos, suscripciones, facturación, reembolsos e impuestos.

Componentes específicos para dispositivos móviles

Las capacidades de la categoría 13 no se limitan simplemente a limitar los componentes de escritorio, sino que complementan las estructuras únicas de las páginas web móviles, PWA, aplicaciones híbridas y WebView de escritorio. 32 modos cubren áreas seguras y ventanas gráficas dinámicas, navegación móvil, ventanas emergentes inferiores, gestos y desplazamiento, descubrimiento y filtrado, entrada y teclado, autenticación/facturación/medios móviles, así como fuera de línea, permisos y estados de error vacíos.

32 patrones8 familias14 tiempos de ejecución reutilizablesÁrea seguraToqueRTLImprimir

Orden de selección:Seleccionar primero g-mobile-safe-shell o el shell de la página existente, luego presione la combinación "Navegación → Contenido → Capas temporales → Acciones fijas → Comentarios del sistema". La navegación inferior se utiliza para entre 3 y 5 destinos de primer nivel; Las pestañas deslizables se utilizan para cambiar dentro del mismo contexto; La hoja inferior realiza tareas breves; El diálogo de pantalla completa conlleva tareas largas y no se pueden mezclar entre sí.

Combinación móvil en tiempo real

Banco de trabajo móvil

GRAMO

Entrada de operación deslizante

Gestos, botones y Escape están disponibles.

Continuar cargando

Contrato móvil

100svh Proporciona altitud inicial estable,100dvh Siga los cambios en la barra del navegador.
Uso en los cuatro lados env(safe-area-inset-*); La barra inferior, la barra de compras, la barra de refrigerios y las indicaciones de gestos no anulan el indicador de inicio.
Los objetivos táctiles en entornos de puntero grueso tienen al menos 44 píxeles; Todos los componentes de gestos conservan las rutas de los botones o del teclado.
El atributo de dirección lógica admite RTL; El movimiento reducido desactiva las transiciones de desplazamiento; Forced Colors realza los contornos seleccionados; La impresión aplana automáticamente las conchas.

Matriz completa de 32 modos

#	Modo	Clase raíz	Propósito y componentes clave
01	Gabinete de zona segura	`g-mobile-safe-shell`	`g-mobile-safe-content`, svh/dvh, Área segura de cuatro lados, vista previa contenida
02	Barra superior de aplicaciones	`g-mobile-app-bar`	`g-mobile-app-bar-start/title/actions`,Adhesivo,Título grande
03	Navegación inferior	`g-mobile-bottom-navigation`	`g-mobile-bottom-navigation-item`, 3 a 5 destinos de primer nivel y estado actual
04	Capa elástica inferior	`g-mobile-bottom-sheet`	`g-mobile-sheet-panel/handle/header/footer`, restricciones de enfoque, Escape, bloqueo de desplazamiento
05	Menú de acciones	`g-mobile-action-sheet`	`g-mobile-action-list/item`Compartir, eliminar y acciones contextuales
06	Desplácese hacia abajo para actualizar	`g-mobile-pull-refresh`	`g-mobile-pull-refresh-indicator/content`, umbral, Actualizar/Completar API
07	Carga infinita	`g-mobile-infinite-load`	IntersectionObserver, Botón de reserva de carga, Cargando/Listo
08	Operación de diapositiva	`g-mobile-swipe-actions`	`g-mobile-swipe-actions-track/main/buttons`, LTR/RTL, botón y escape de reserva
09	Pestaña deslizante	`g-mobile-swipe-tabs`	`g-mobile-swipe-tab`, adsorción con desplazamiento horizontal y semántica de pestañas
10	Clasificación de móviles	`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	Filtrado móvil	`g-mobile-filter-sheet`	Filtrar contenido, pie de página fijo, restablecer y acciones de resultados
12	Barra de compra adhesiva	`g-mobile-purchase-bar`	`g-mobile-purchase-main`、`g-mobile-purchase-actions`, precio, cantidad y zona de seguridad
13	Búsqueda Móvil	`g-mobile-search`	`g-mobile-search-field/icon`, cancelar y borrar
14	Mover Selector	`g-mobile-picker`	`g-mobile-picker-grid/option`, selección única/múltiple y opción guardada
15	Selector de ruedas	`g-mobile-wheel-picker`	`g-mobile-wheel-column/option`, desplazamiento rápido, teclas de flecha, salida JSON
16	Botón de acción flotante	`g-mobile-fab`	Crear principalmente acciones, áreas seguras y desplazamientos de la barra inferior
17	Cuadro de diálogo de pantalla completa	`g-mobile-fullscreen-dialog`	Formularios largos, tareas de edición, administración de enfoque y ventanas gráficas dinámicas
18	Evitación del teclado	`g-mobile-keyboard-avoidance`	`--g-keyboard-offset`, Relleno de desplazamiento y área visible del formulario
19	Mensaje de gesto	`g-mobile-gesture-hint`	`g-mobile-gesture-hint-line`, uso por primera vez y área de gestos del sistema
20	Banner sin conexión	`g-mobile-offline-banner`	Solicitud de contenido de caché, reintento y recuperación de red
21	Control de segmentación	`g-mobile-segmented-control`	`g-mobile-segmented-item`, 2 a 5 vistas mutuamente excluyentes
22	Transmisión de contenido móvil	`g-mobile-feed`	`g-mobile-feed-item/main`, acciones de medios, cuerpo y cola
23	Carrusel de tarjetas	`g-mobile-card-carousel`	Ajuste de desplazamiento horizontal, vista previa, tiempo de ejecución de carrusel opcional
24	Formulario móvil	`g-mobile-form`	`g-mobile-form-actions`, envío de ancho completo y campos táctiles
25	Autenticación móvil	`g-mobile-auth`	`g-mobile-auth-actions`, código de inicio de sesión/registro/verificación y entorno de teclado
26	Liquidación móvil	`g-mobile-checkout`	`g-mobile-checkout-actions/summary`, confirmación de pedido y área de seguridad
27	Visualización de medios móviles	`g-mobile-media-viewer`	`g-mobile-media-viewer-stage/tools`Barras de herramientas de panorámica, zoom y pantalla completa
28	Barra de herramientas del teclado	`g-mobile-keyboard-toolbar`	Elemento anterior, elemento siguiente, finalización, formato y método de entrada en el borde superior
29	Seleccionar modo	`g-mobile-selection-mode`	`g-mobile-selection-main/actions`, conteo y acciones por lotes
30	Cafetería	`g-mobile-snackbar`	`g-mobile-snackbar-main`, retroalimentación breve, deshacer y desplazamiento de barra inferior
31	Solicitud de permiso	`g-mobile-permission-prompt`	`g-mobile-permission-icon`、`g-mobile-permission-actions`, Ubicación, Notificaciones, Cámara y Medios
32	Vacío/Error/Estado fuera de línea	`g-mobile-state`	`g-mobile-state-icon/actions`, Vacío/Error/Sin conexión/Éxito

Interfaz de tiempo de ejecución declarativa

Comportamiento	Propiedades	Interfaz clave
Hoja Móvil	`data-g-mobile-sheet` / `data-g-mobile-sheet-open`	Abrir/Cerrar/Alternar, trampa de enfoque, bloqueo de desplazamiento, Fondo, Escape
Actualización de extracción	`data-g-pull-refresh`	`gardener:refresh`、`complete()`, botón de respaldo
Carga Infinita	`data-g-infinite-load`	`gardener:loadmore`、`complete({done})`, IntersecciónObservador
Acciones de deslizamiento	`data-g-swipe-actions`	Mostrar/Cerrar/Alternar, Gesto LTR/RTL, Botón, Escape
Selector de ruedas	`data-g-wheel-picker`	Ajuste de desplazamiento、Clic/Flecha/Inicio/Fin、`gardener:wheelchange`
Reutilizar tiempo de ejecución	`data-g-tabs`、`data-g-saved-choice`、`data-g-dialog`、`data-g-toast`	Etiquetas, Segmentación/Selección, Diálogo de pantalla completa, Snackbar

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

Puntos finales, gestos y límites comerciales

Uso de Shell de área segura 100svh Agregar 100dvh; Si la empresa desea seguir el teclado virtual, se puede actualizar a través del puente Visual Viewport/host. --g-keyboard-offset。
Los gestos solo mejoran la eficiencia: Pull Refresh tiene una ruta de botón de actualización, Infinite Load tiene "cargar más", Swipe Actions tiene Toggle y Wheel Picker tiene soporte para teclado.
Las solicitudes de permisos nativos, el estado de la red, la carga de datos, el pago, la autenticación y el escalado de medios son implementados por la empresa o el host; Gardener proporciona visión estable, estado, eventos e interfaces accesibles sin forjar resultados.
La hoja inferior es adecuada para tareas breves, la hoja de acción es adecuada para listas de acciones y la hoja de filtro es adecuada para filtrar; use el cuadro de diálogo de pantalla completa para ediciones complejas y aún use el cuadro de diálogo dedicado para confirmación destructiva.
Superficie blanca predeterminada, borde de 1 px y esquinas redondeadas pequeñas de 4 px; Las esquinas grandes y redondeadas y las sombras fuertes no son lo predeterminado para los dispositivos móviles.
Los 32 modos van a manifiestos de componentes y directorios de componentes dinámicos; La API completa de fuente CSS también enumera módulos, selectores, variables y estado.

Lista de capacidadesRegistre los 32 modos, 8 familias de capacidades y la matriz de prueba completa;Ejemplo de terminal móvil independientePrueba directa de la barra de aplicaciones, navegación inferior, pestañas de deslizamiento, acciones de deslizamiento, carga infinita, hoja de acción/filtro y selectores móviles.

Componentes específicos de escritorio

Las capacidades de categoría 14 cubren 32 modos de alta reutilización de Tauri, Electron, WebView de escritorio y banco de trabajo de escritorio simulado en el navegador. Desglosa la ventana de Chrome, la navegación global, el Dock/espacio de trabajo, los comandos y la entrada, los documentos y archivos, la integración del sistema, las actualizaciones del ciclo de vida, la recuperación y el estado en interfaces estables; La IA no necesita inventar temporalmente barras de título, diseños IDE o mensajes del sistema.

Relación con el diseño de escritorio genérico:g-desktop-shell、g-titlebar、g-workbench continúa como base de compatibilidad; esta sección g-desktop-workspace y 31 modos complementarios son una capa de composición más completa y precisa para aplicaciones de escritorio.

Espacio de trabajo de escritorio en vivo

Gardener Studio — Espacio para documentos

Área de edición del CMS de escritorio

Las etiquetas, las columnas, el Dock, el inspector y la barra de estado mantienen alta densidad, pequeñas esquinas redondeadas y rutas de teclado completas.

↑

Nueva versión disponible

Descargado, esperando reinicio.

Matriz completa de 32 modos

#	Patrones y clases raíz	Componente/estado/propósito estable
1	Barra de título nativa `g-native-titlebar`	`g-native-titlebar-start`、`g-native-titlebar-title`、`g-native-titlebar-end`
2	Controles de ventana `g-desktop-window-controls`	`g-desktop-window-button`; Minimizar, Maximizar/Restaurar, Cerrar
3	Barra de menú `g-desktop-menubar`	`g-desktop-menubar-item`;Entrada de menú y secuencia de plataforma
4	Barra de actividades `g-desktop-activity-bar`	`g-desktop-activity-item`;Módulo actual, herramienta global
5	Panel de acoplamiento `g-desktop-dock-panel`	`g-desktop-panel-header`、`g-desktop-panel-body`,Colapsado
6	Panel dividido redimensionable `g-desktop-split-pane`	`g-split-panel`、`g-split-handle`;Paisaje/Retrato
7	Inspector `g-desktop-inspector-panel`	Propiedades, estilos, auditoría, información contextual
8	Barra de estado `g-desktop-status-bar`	`g-desktop-status-group`、`g-desktop-status-item`
9	Paleta de comandos `g-desktop-command-palette`	`g-desktop-command-panel`、`g-desktop-command-input`、`g-desktop-command-results`、`g-desktop-command-item`
10	Grabador de accesos directos `g-shortcut-recorder`	`g-shortcut-recorder-control`、`g-shortcut-recorder-keys`、`g-shortcut-recorder-status`
11	Menú contextual `g-desktop-context-menu`	`g-desktop-menu-item`、`g-desktop-menu-separator`
12	Pestañas no guardadas `g-desktop-document-tabs`	`g-desktop-document-tab`、`g-desktop-document-tab-close`；Activo, Sucio, Fijado
13	Región de arrastre `g-desktop-drag-region`	`g-desktop-no-drag` Proteger botones, enlaces y entradas
14	Carga de ventana `g-window-loading`	`g-window-loading-icon`、`g-window-loading-progress`
15	Actualización disponible `g-update-available`	Versión, notas de la versión, posponer/reiniciar actualizaciones
16	Solicitud de permiso `g-desktop-permission-request`	`g-desktop-notice-icon`、`g-desktop-notice-main`、`g-desktop-notice-actions`
17	Selector de archivos nativo `g-native-file-picker`	`g-native-file-picker-value`; La selección única, la selección múltiple y la carpeta están determinadas por la entrada/host
18	Menú de bandeja `g-tray-menu`	Reutilizar elementos del menú del escritorio; estado en línea, entrada y salida de ventana
19	Marcador de posición de ventanas múltiples `g-multi-window-placeholder`	`g-desktop-state-icon`、`g-desktop-state-actions`
20	Espacio de trabajo de escritorio `g-desktop-workspace`	`g-desktop-workspace-main`;Título/Actividad/Principal/Inspector/Cuadrícula de estado
21	Conmutador de ventana `g-desktop-window-switcher`	`g-desktop-window-switcher-panel`、`g-desktop-window-list`、`g-desktop-window-item`、`g-desktop-window-main`
22	Documentos recientes `g-recent-documents`	`g-recent-document`、`g-recent-document-main`、`g-recent-document-path`
23	Barra de herramientas del escritorio `g-desktop-toolbar`	`g-desktop-toolbar-group`、`g-desktop-toolbar-separator`
24	Panel Inferior `g-desktop-bottom-panel`	Terminal, registros, preguntas, resultados y tareas en segundo plano
25	Centro de tareas en segundo plano `g-background-task-center`	`g-background-task`、`g-background-task-main`、`g-background-task-progress`
26	Centro de notificaciones `g-desktop-notification-center`	`g-desktop-notification`、`g-desktop-notification-main`;No leído
27	Estado de sincronización `g-sync-status`	`g-sync-status-dot`; Sincronización, sincronizado, sin conexión, error
28	Progreso de la actualización `g-update-progress`	`g-update-progress-header`、`g-update-progress-track`、`g-update-progress-value`
29	Recuperación tras fallo `g-crash-recovery`	Restaurar documento, restaurar sesión, inicio seguro, abandonar restauración
30	Aviso de instancia única `g-single-instance-notice`	Cambiar a ventana existente, continuar a ventana nueva, cancelar
31	Controlador de enlace profundo `g-deep-link-handler`	Mostrar origen, destino, permitir/denegar y "No volver a preguntar"
32	Diálogo Acerca de `g-about-dialog`	`g-about-dialog-icon`; Portal de versión, licencia, actualización y diagnóstico

Tiempo de ejecución declarativo

Comportamiento	Propiedades/Disparador	Teclado y eventos
Grabador de accesos directos	`data-g-shortcut-recorder`、`data-g-shortcut-control`、`data-g-shortcut-output`	Esc cancela, Eliminar borra, problemas `gardener:shortcutchange`
Pestañas del escritorio	`data-g-desktop-tabs`、`data-g-desktop-tab`、`data-g-desktop-tab-close`	Flecha/Inicio/Fin, Ctrl/⌘+Tab, Ctrl/⌘+W, tecla central para cerrar
Selector de archivos nativo	`data-g-native-file-picker`、`data-g-native-file-trigger`、`data-g-native-file-value`	Reserva de entrada nativa; emitido `gardener:nativefiles`
Conmutador de ventana	`data-g-window-switcher`、`data-g-window-item`	Ctrl/⌘+`, teclas de flecha, Intro, Escape
Reutilizar tiempo de ejecución	`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`	Columnas, comandos, menús, navegación, Dock, bandeja y cuadro de diálogo Acerca de

Contrato de anfitrión de electrones/Tauri

<!-- Cargue un adaptador solo si el host ha proporcionado un puente incluido en la lista blanca -->
<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>

Uso de electrones contextIsolation Con la carga previa de seguridad, solo se exponen métodos de lista blanca como Minimizar, Maximizar/Restaurar y Cerrar; no habilite la integración de nodos y no exponga ningún canal de IPC a la página.
La aplicación inyecta Tauri v2 en la API de Windows; Las capacidades de permisos, el sistema de archivos, el actualizador, el vínculo profundo, la bandeja y las ventanas múltiples se configuran de acuerdo con la capacidad de la aplicación y CSS no los solicita automáticamente.
app-region: drag y -webkit-app-region: drag Solo responsable de las áreas que se pueden arrastrar; Los botones, enlaces, entradas y menús deben colocarse en g-desktop-no-drag O protegido por selector incorporado.
Plataforma disponible data-g-os="macos" o data-g-platform="macos" Alternar control de ventana de semáforo; Windows/Linux mantiene el control rectangular derecho.
Las actualizaciones, los permisos, la selección de archivos, la bandeja, las ventanas múltiples, el encadenamiento profundo, la instancia única y la recuperación ante fallas requieren que la empresa o el host arrojen resultados reales; Los componentes solo proporcionan presentaciones, eventos, enfoque y estructuras de estado predecibles.

Capacidad de respuesta, accesibilidad e impresión

g-desktop-workspace Consulta de contenedor de compilación: menos de 56 rem oculta el inspector, menos de 40 rem oculta el Dock y simplifica la barra de título; La empresa aún puede mostrar paneles independientes a través de Toggle.
Las etiquetas de documentos, el panel de comandos, los menús, las columnas, la grabación de teclas de método abreviado y el conmutador de ventanas tienen rutas de teclado; Las etiquetas sucias emiten un mensaje cancelable antes de cerrar beforetabclose。
El atributo de dirección lógica anula RTL; El movimiento reducido detiene los pulsos de sincronización; Colores forzados proporciona un esquema claro para la actividad/pestaña/comando actual.
Oculte la ventana Chrome, la barra de actividad, la barra de estado, la barra de herramientas, el panel inferior y todas las capas flotantes al imprimir, expanda el contenido principal, el Dock y el Inspector para evitar el recorte.
Superficie blanca predeterminada, borde de 1 px y esquinas redondeadas pequeñas de 4 px; Las sombras solo se usan para superposiciones reales, como paneles de comando, conmutadores de ventanas y menús.

Lista de capacidadesRegistra los 32 modos, 8 familias de capacidades y matrices de prueba;Ejemplo de escritorio independienteCubre ventanas, espacios de trabajo, pestañas, comandos, accesos directos, archivos, bandejas, actualizaciones, notificaciones y estado de restauración.

Productos de IA y componentes interactivos inteligentes

Las capacidades de categoría 15 cubren la cadena de tareas completa del asistente de IA, el copiloto, el banco de trabajo del agente, las herramientas de generación, la base de conocimientos de preguntas y respuestas, los productos multimodales y el cliente de escritorio de IA. Los 32 modos se extienden desde el ingreso a la sesión hasta el aviso, razonamiento, salida de transmisión, aprobación de herramientas, multiagente, fuente y artefacto, contexto y costo, voz, permisos, privacidad, seguridad y evaluación de retroalimentación, y no reducen los errores del producto de IA a "burbuja de chat + cuadro de entrada".

Diferencias con el protocolo de generación de páginas AI:Esta sección es para la interfaz de usuario del producto de IA para usuarios finales; el siguiente texto Protocolo de generación de páginas AI es una restricción para el uso de Gardener en generadores. El primero proporciona componentes de interfaz y el segundo especifica el orden en el que se seleccionan capacidades, recetas, componentes y clases de herramientas.

Espacio de trabajo de IA en tiempo real

Contexto 38%

Genere un portal empresarial multiinquilino.

GRAMO

Gardener AgenteTrabajando

Coincidencia de receta de Enterprise Portal, verificación de permisos, CMS y componentes del panel.

Coincide con inquilino, flujo de trabajo, panel y biblioteca multimedia.

Requerir aprobación para plantilla de página de escritura

Modificar solo el directorio generado del proyecto actual.

alcance: generado/** · operación: crear/actualizar

Matriz completa de 32 modos

#	Patrones y clases raíz	Componente/estado/propósito estable
1	Espacio de trabajo de IA `g-ai-shell`	`g-ai-sidebar`、`g-ai-sidebar-header`、`g-ai-main`、`g-ai-header`
2	Lista de conversaciones `g-conversation-list`	`g-conversation-item`、`g-conversation-title`;Historial, sesión fijada, agrupada y actual
3	Tema de conversación `g-chat`	`g-chat-list`、`g-ai-empty-chat`; Vacío, Cargando, Streaming, Error
4	Mensaje de IA `g-message`	`g-message-avatar`、`g-message-meta`、`g-message-body`、`g-message-actions`;Usuario/Asistente/Sistema
5	Compositor de mensajes `g-composer`	`g-composer-input`、`g-composer-toolbar`、`g-composer-status`; Ingrese para enviar, Mayús+Intro para ajustar y detener
6	Adjunto `g-attachment`	`g-attachment-list`、`g-attachment-preview`、`g-attachment-name`、`g-attachment-meta`
7	Arrancador rápido `g-prompt-starter`	`g-prompt-starter-header`、`g-prompt-suggestions`、`g-prompt-suggestion`
8	Biblioteca de mensajes `g-prompt-library`	`g-prompt-card`;Búsqueda, categoría, colección, plantilla parametrizada
9	Mención / Menú de barra diagonal `g-ai-command-menu`	`g-ai-command-group`、`g-ai-command-item`、`g-mention`、`g-slash-command`
10	Selector de modelo `g-model-selector`	`g-model-selector-trigger`、`g-model-selector-menu`、`g-model-option`
11	Pensando `g-thinking`	`g-thinking-trigger`、`g-thinking-content`; Contraído, ampliado, streaming
12	Respuesta de transmisión `g-streaming-response`	`g-streaming-response-header`、`g-streaming-response-body`、`g-streaming-response-actions`、`g-stream-cursor`
13	Llamada a herramienta `g-tool-call`	`g-tool-call-header`、`g-tool-call-status`、`g-tool-call-body`、`g-tool-call-progress`
14	Aprobación de herramienta `g-approval`	`g-approval-title`、`g-approval-scope`、`g-approval-actions`;Aprobado/Rechazado/Cancelado/Expirado
15	Estado del agente `g-agent-status`	Inactivo, funcionando, en espera, bloqueado, completo, fallido
16	Plan de agente `g-plan`	`g-plan-header`、`g-plan-list`、`g-plan-item`
17	Tablero multiagente `g-agent-board`	`g-agent-card`、`g-agent-card-header`、`g-agent-card-task`
18	Traspaso de agente `g-agent-handoff`	`g-agent-handoff-main`、`g-agent-handoff-actions`;Transferencia de contexto y toma de control manual
19	Fuentes / Citas `g-sources`	`g-source-list`、`g-source`、`g-citation`;Posicionamiento de citas y credibilidad
20	Espacio de trabajo de artefactos `g-artifact-layout`	Diseño de área dual de diálogo y vista previa/código/documento
21	Panel de artefactos `g-artifact-panel`	`g-artifact-toolbar`、`g-artifact-tabs`、`g-artifact-content`、`g-artifact-status`
22	Árbol de archivos AI `g-file-tree`	`g-file-tree-item`;Jerarquía, expansión, selección y navegación con teclado
23	Historial de versiones `g-version-list`	`g-version`;Generado por, hora, versión actual, comparar y restaurar
24	Galería de Generación `g-generation-grid`	`g-generation-card`;Múltiples resultados, variaciones, selecciones y edición continua
25	Marcador de posición de generación `g-generation-placeholder`	En cola, generando, parcial, completa, fallida
26	Contexto/Memoria `g-ai-context-manager`	`g-ai-memory-list`、`g-ai-memory-item`、`g-ai-context-sources`、`g-context-meter`
27	Límite de costo/tarifa `g-ai-usage-panel`	`g-ai-usage-grid`、`g-ai-usage-metric`、`g-ai-limit-status`、`g-cost`、`g-limit`
28	Sesión de voz `g-voice-state`	`g-voice-bar`、`g-voice-state-label`; Escuchar, Procesar, Hablar, Error
29	Alcance del permiso `g-permission-scope`	`g-permission-scope-header`、`g-permission-scope-list`;Recurso, operación, fecha límite, fuente
30	Aviso de privacidad `g-privacy-notice`	Capacitación, retención, políticas corporativas transfronterizas y descripción de información sensible
31	Aviso de política/seguridad `g-ai-safety-notice`	`g-ai-safety-icon`、`g-ai-safety-main`、`g-ai-safety-actions`
32	Comentarios/Evaluación `g-ai-feedback`	`g-ai-feedback-question`、`g-ai-feedback-options`、`g-ai-feedback-option`、`g-ai-feedback-detail`

Tiempos de ejecución dedicados versus reutilizados

Comportamiento	Propiedades	Interfaz clave
Compositor de IA	`data-g-ai-composer`、`data-g-composer-input`、`data-g-composer-send`、`data-g-composer-stop`	Altura automática, Intro/Mayús+Intro,`promptsubmit`、`promptstop`, Estado de transmisión
Solicitud de llenado	`data-g-prompt-fill`、`data-g-prompt-target`、`data-g-prompt-value`	Complete la plantilla de Inicio/Biblioteca en el Compositor especificado y emita Entrada
Aprobación de IA	`data-g-ai-approval`、`data-g-approval-choice`	Cancelable antes del evento, Aprobado/Rechazado/Cancelado, Restablecer API
Comentarios de IA	`data-g-ai-feedback`、`data-g-feedback-value`、`data-g-feedback-detail`	Motivo de la evaluación, explicación adicional,`feedbackchange`、`feedbacksubmit`
Reutilizar tiempo de ejecución	`data-g-dropdown`、`data-g-accordion`、`data-g-roving-nav`、`data-g-tabs`、`data-g-tree`	Selección de modelo, Pensamiento/Herramienta, menú de comandos, etiqueta de artefacto, árbol de archivos

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

Estado, confianza y límites comerciales

La transmisión debe proporcionar estados Detenido, En pausa/Detenido/Completo/Error; La animación del cursor solo se mejora, el movimiento reducido desactiva la animación.
Thinking muestra un resumen de razonamiento o progreso legible de forma predeterminada y no requiere que se revele la cadena de razonamiento privada del modelo; el producto debe distinguir claramente entre "resumen", "registro de herramientas" y "respuesta final".
Separación de llamada de herramienta y aprobación de herramienta: el estado de la llamada no puede reemplazar la confirmación de permiso; La comunicación externa destructiva, el pago, los datos confidenciales y los permisos persistentes deben ser verdaderamente aprobados por la ejecución comercial.
Fuentes/Citas representa una relación de cita y no prueba automáticamente la autenticidad; la empresa debe conservar la URL de origen, el fragmento, la hora y la accesibilidad, y el contenido generado aún debe verificarse.
El Contexto/Memoria debe permitir ver la fuente, eliminarla o deshabilitarla; El límite de costo/tarifa debe utilizar la medición real del backend y el frontend no puede estimarlo para pretender ser una factura.
El aviso de seguridad no reemplaza la política del lado del servidor; El Aviso de Privacidad no reemplaza el consentimiento legal. La interfaz de usuario debe mostrar por qué se bloqueó, si se puede apelar y cómo se conservan y utilizan los datos.
Utilice Superficie blanca, borde de 1 px y esquinas redondeadas pequeñas de 4 px en todos los modos; colapsar los modos Artefacto, Barra lateral y Columna dual en un ancho de contenedor de 960/704/512 px y anular RTL, Colores forzados e Imprimir.

Lista de capacidadesRegistre los 32 modos, 8 familias de habilidades y la matriz de prueba completa;Ejemplo de IA independienteCubre diálogo, compositor, mensaje, pensamiento, aprobación de herramienta, agente, artefacto, compilación, contexto, cargos, permisos, seguridad, voz y comentarios.

Página completa y soluciones industriales

La categoría 16 es la capa de composición más alta de Gardener: las primeras 15 categorías proporcionan diseño, componentes, cadenas comerciales e interacciones finales específicas, y esta categoría los solidifica en 32 contratos de página completa directamente seleccionables. Cubre individuos y empresas, sitios web públicos y backends, empresas en general e industrias verticales, y también es adecuado para navegadores, páginas web móviles, PWA, Tauri y Electron WebView. La IA primero debe seleccionar aquí la clase raíz de la página y la Receta correspondiente, y luego completar los componentes en lugar de organizar todo el CSS de la página desde cero.

32 páginas completas52 recetas en total8 familiasConsulta de contenedorRTLImprimir

Esquema de página completa del panel de control en tiempo real

Descripción general de la empresa

Plataforma de contenido multiinquilino

Los encabezados a nivel de página, los indicadores, el contenido principal, las áreas auxiliares y los pliegues móviles tienen contratos estables.

Sitio28,640↑ 12.4%

página486kEn 42 temas

Revisión138Necesita procesamiento

Matrices de 32 páginas completas

#	Clase raíz de página	Principales componentes y usos
1	Aterrizaje del Producto `g-product-landing`	`g-landing-hero`, copia, visual, prueba, sección; SaaS, aplicaciones, productos de IA y lanzamientos de nuevos productos
2	Casa corporativa `g-corporate-home`	`g-corporate-hero`, confianza, cuadrícula de soluciones; Portal de grupo, marca, institución y empresa.
3	Hogar personal `g-personal-home`	`g-personal-intro`, enlaces, línea de tiempo; marca personal, currículum y página de inicio de expertos
4	Portafolio `g-portfolio-page`	`g-portfolio-hero`, destacado, cuadrícula del proyecto; diseño, fotografía, desarrollo y biblioteca de casos.
5	Índice de blogs `g-blog-index`	`g-blog-index-header`, categorías, grilla de entrada; blog, noticias e información corporativa
6	Artículo `g-article-page`	`g-article-page-layout`, cuerpo, toc, meta; Artículos largos, noticias, tutoriales e impresión.
7	Portal de documentos `g-docs-portal`	`g-docs-layout`, barra lateral, principal, toc; producto, API y documentación interna
8	Centro de ayuda `g-help-center-page`	`g-help-center-hero`, búsqueda, diseño, al lado; Preguntas frecuentes y autoayuda para el cliente
9	Resultados de la búsqueda `g-search-results-page`	`g-search-results-layout`, filtros, lista, resultado; buscar dentro del sitio, documentos, productos y recursos
10	Contacto `g-contact-page`	`g-contact-layout`, detalles, formulario; contacto, consulta de ventas y recogida de leads
11	Precios `g-pricing-page`	`g-pricing-page-header`, cuadrícula, tarjeta; SaaS, membresía y paquetes de servicios
12	Panel de control `g-dashboard-overview`	`g-dashboard-metrics`, diseño, panel; descripción general de la operación, cabina y monitoreo
13	Lista de administradores `g-admin-list-page`	`g-admin-list-header`, filtros, contenido, barra de herramientas; gestión de recursos en segundo plano
14	Detalle del registro `g-record-detail-page`	`g-record-detail-layout`, principal, lateral, sección; Detalles del cliente, pedido, contenido y activos.
15	Configuración `g-settings-center`	`g-settings-center-layout`, navegación, contenido, sección; productos, organizaciones y preferencias de escritorio
16	Centro de usuarios `g-user-center`	`g-user-center-layout`, navegación, contenido; información, seguridad, pedidos y derechos de membresía
17	Notificaciones `g-notification-center-page`	`g-notification-groups`, grupo, fila; notificaciones, recordatorios y actualizaciones
18	Incorporación `g-onboarding-flow`	`g-onboarding-aside`, principal, paso, progreso; inicialización, liquidación e importación
19	CRM `g-crm-workspace`	`g-crm-layout`, navegación, principal, inspector, tubería; clientes, oportunidades de negocio y seguimiento de ventas
20	Espacio de trabajo del proyecto `g-project-workspace`	`g-project-layout`, tablero, columna, inspector; proyectos, tareas y colaboración en I+D
21	Centro de soporte `g-support-center`	`g-support-layout`, hilo, mensajes, respuesta; atención al cliente, orden de trabajo y postventa
22	Centro de aprobación `g-approval-center`	`g-approval-layout`, cola, columna, inspector; proceso, costo, contenido y aprobación de la autoridad
23	Base de conocimientos `g-knowledge-base`	`g-knowledge-hero`, búsqueda, diseño; Wiki empresarial, biblioteca del sistema y ayuda interna.
24	Portal de aprendizaje `g-learning-portal`	`g-learning-layout`, cuadrícula del curso, tarjeta; portal de cursos, formación y escuela
25	Portal de eventos `g-event-portal`	`g-event-hero`, cuadrícula, tarjeta; conferencias, exposiciones, eventos comunitarios y de transmisión en vivo
26	Portal de Reservas `g-booking-portal`	`g-booking-layout`, resultados, resumen; reservas médicas, de recintos, hoteles y servicios
27	Atención médica `g-healthcare-portal`	`g-healthcare-layout`, resumen, registro, alerta de la industria; pacientes y servicios de salud
28	Finanzas `g-finance-portal`	`g-finance-layout`, resumen, cuenta, alerta de industria; banca, riqueza y finanzas corporativas
29	Servicio Público `g-public-service-portal`	`g-public-service-layout`, resumen, elemento; Asuntos gubernamentales, progreso de aplicaciones y servicios de conveniencia.
30	Mercado `g-marketplace-page`	`g-marketplace-hero`, filtros, grilla, tarjeta; mercado de aplicaciones, servicios, talento y complementos
31	Comunidad `g-community-page`	`g-community-hero`, feed, barra lateral, publicación; comunidad, foro y contenido de usuario
32	Centro de estado `g-status-center-page`	`g-status-overall`, servicios, historial, incidente; estado, fallo, mantenimiento y SLA

Parte pública de página completa

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 y g-solution-empty se puede reutilizar en 32 tipos de páginas para garantizar que la sintaxis básica de la IA no cambie al cambiar de industria.

Selección, composición y límites comerciales

Comenzar con solution.* Receta Determine el tipo de página completa, luego seleccione la plataforma, el eje del tema y la densidad.
La clase raíz es responsable de las respuestas a nivel de página y las relaciones de zona; los componentes de formulario, datos, autenticación, negocios, dispositivos móviles, escritorio e inteligencia artificial todavía se completan con las primeras 15 clases.
Las páginas de marketing, personales y de contenido utilizan el desplazamiento natural de los documentos; El tablero y el banco de trabajo permiten múltiples columnas de alta densidad; Atención médica, finanzas y gobierno son contratos de UI únicamente y no reemplazan las regulaciones, la autenticación, la privacidad, la auditoría ni las reglas comerciales de backend.
Todos los modos utilizan orientación lógica, pequeñas esquinas redondeadas, superficie blanca; se colapsa en un ancho de contenedor de 960 px y 704 px, admite RTL, movimiento reducido, colores forzados e impresión.
Las páginas raíz de CRM, Proyecto, Panel, Configuración y Notificación se pueden colocar en Tauri/Electron g-desktop-workspace;Las ventanas, archivos, actualizaciones y permisos reales siguen siendo responsabilidad del adaptador de escritorio.

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

Lista de capacidadesRegistra los 32 modos raíz y 8 familias de habilidades;Lista de recetasProporciona la terminal, los widgets, el tiempo de ejecución y el propósito de cada página;Ejemplo independienteSitio web público intercambiable, panel, CRM, portal industrial y vista previa del centro de estado.

API pública y esquema

Desde 0.3.0 Inicio,gardener.public-api.json es una lista canónica de interfaces de programación y nombres públicos, que registra completamente capas CSS, entradas de paquetes, propiedades de temas, exportaciones de JavaScript, comportamientos, eventos, adaptadores de escritorio y campos de compatibilidad.

Leyendo el manifiesto de API pública...

Nomenclatura unificada

Rango	Especificación	Ejemplo
Clases CSS	`g-` + estuche-kebab	`g-command-palette`
Variables CSS	`--g-` + estuche-kebab	`--g-color-primary`
Atributos de comportamiento	`data-g-{behavior}`	`data-g-dialog`
Evento	`gardener:{event}`	`gardener:beforeopen`
Interacción de metadatos	`behaviors: string[]`	`["dialog"]`
Puente de escritorio	`adapters: string[]`	`["tauri","electron"]`
Plataforma	`platforms: string[]`	`["web","mobile"]`
ID de receta	caja-kebab separada por puntos	`solution.admin-list`

Esquema completo

Los once conjuntos de esquemas utilizan el esquema JSON 2020-12 y los campos desconocidos se rechazan:Componentes、Recetas、Capacidades、Utilidades、Manifiesto、API pública、Construcciones、Construcción personalizada、Presupuestos de desempeño、Informe de desempeño、Compatibilidad. Todos los esquemas de objetos desactivan campos desconocidos o declaran explícitamente tipos de valores dinámicos.npm run test:schema Se ejecutaron 48 casos de uso de validación estándar utilizando Ajv 2020-12, que cubren diez documentos de versión/configuración, campos raíz desconocidos, diez tipos de campos anidados desconocidos, diez tipos de campos obligatorios anidados faltantes, referencias entre esquemas, identificadores de JavaScript, formatos SHA-256, estado de regresión de referencia y alias compatibles con esquemas de componentes heredados;npm run contracts Continúe realizando quince conjuntos de pruebas de contratos negativos y verifique referencias de manifiestos cruzados, coherencia del código fuente y de los artefactos de compilación, selectores, atribución de componentes reales, integridad SHA-256/SRI, comandos de compilación reproducibles, tipos/parámetros/firmas de módulos, miembros de instancia, atributos de datos, cargas útiles de eventos, adaptadores, tipos y scripts de lanzamiento, líneas base de compatibilidad, archivos de compilación, 42 artefactos de presupuesto absoluto y relativo, resultados de presupuesto, versiones y paquete completo. exportaciones.

Los 9 módulos exportados

Interfaz del módulo de lectura...

Los 66 comportamientos y miembros de instancia

Cada elemento enumera las propiedades de inicialización declarativas y getInstance() Devuelve todos los miembros del objeto a los que se les permite llamar.

Contrato de comportamiento de lectura...

Los 75 eventos y cargas útiles

Enumere cada elemento en su totalidad CustomEvent.detail ; Los eventos surgen y pueden cancelarse para before Los siete eventos al principio son transitables preventDefault() Protector de proceso que impide operaciones posteriores.

Contrato de evento de lectura...

Todos los atributos de datos en tiempo de ejecución

Las 309 propiedades disponibles para el autor se dividen en 66 entradas de comportamiento en el contrato de comportamiento anterior, 166 selectores de estructura/acción y 77 propiedades de configuración adicionales; También hay 27 propiedades de estado mantenidas por el tiempo de ejecución. Las propiedades de estado se pueden leer simultáneamente como configuración inicial, pero los primeros tres conjuntos disponibles para el autor son mutuamente excluyentes y no se cuentan dos veces.

Selector de estructura y acción

Leyendo propiedades del selector...

Propiedades de configuración adicionales

Leyendo propiedades de configuración...

Estado de mantenimiento en tiempo de ejecución

Leyendo atributos de estado...

Tauri / Electron Adapter Contract

Contrato de adaptador de lectura...

Reglas de compatibilidad

El campo de especificación para el Manifiesto es behaviors. viejo campo runtimeBehaviors En todas partes 0.x Línea de versión reservada como alias compatible de solo lectura; viejo metadata/schema.json Continúe señalando el nuevo esquema de componentes. 1.0.0 promueve el contrato público a Estable y utiliza una línea base de compatibilidad legible por máquina para guardar todas las entradas, capas, temas, tiempos de ejecución, componentes y recetas públicos de 0.9.0; 1.x debe proporcionar registros de cambios e instrucciones de migración antes de eliminar cualquier entrada compatible y debe pasar por el período de desuso de al menos dos versiones menores. La eliminación real sólo puede ocurrir en una nueva versión principal.

Catálogo de componentes

Lista de componentes de gardener.manifest.json, contiene categorías, tipos, estados, selectores, variantes, widgets, funciones, plataformas, comportamientos, adaptadores y contratos de accesibilidad. La siguiente dinámica muestra todas las entradas y todos los metadatos, en lugar de una lista seleccionada.

Leyendo la lista de componentes...

Requisitos de estado de los componentes

Se deben revisar los componentes nuevos para determinar si son Predeterminado, Pasar el cursor, Enfoque visible, Activo, Deshabilitado, Sólo lectura, Cargando, Vacío, Error y Éxito; No todos los componentes mostrarán todos los estados, pero debe quedar claro si "no aplicable" o "cubierto".

Tiempo de ejecución de JavaScript

Marco de tiempo de ejecución independiente, aprobado data-g-* Inicialización automática. MutationObserver maneja nuevos nodos y atributos de comportamiento agregados al mismo tiempo, y es adecuado para SPA, lienzo CMS y transmisión de IA para generar DOM.

Leyendo el manifiesto de tiempo de ejecución...

Diálogo declarativo

<button data-g-dialog-open="confirm">Abierto</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">Confirmar operación</h2>
    <button data-g-close>Cancelar</button>
  </section>
</div>

API de programación

import Gardener from "@gardener/css";

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

Gardener.toast({
  title: "Guardado exitosamente",
  message: "La página ha sido publicada.",
  tone: "success"
});

API	Descripción
`init(root)`	Inicializa todo el comportamiento del propio nodo raíz y sus descendientes.
`destroy(root)`	Liberación de escuchas, temporizadores y referencias de instancias.
`register(name, factory)`	Registrar comportamiento personalizado del proyecto.
`getInstance(element, name)`	Obtenga una instancia de comportamiento única o especificada.
`emit(element, name, detail)`	Envío de un evento de Gardener cancelable.
`toast(options)`	Crear un brindis de estado o advertencia.
`behaviors`	Leer el nombre del comportamiento registrado actualmente.

Evento

gardener:init、gardener:beforeopen、gardener:open、gardener:beforeclose、gardener:close、gardener:change、gardener:dismiss. Antes de que se pueda pasar el evento preventDefault() Cancelar.

Prueba de control de acceso en tiempo de ejecución (desde 0.4.0)

npm run test:runtime Utilice el ejecutor de pruebas integrado de Node.js y Happy DOM para comparar bidireccionalmente miembros de instancias reales para los 66 comportamientos en la lista pública y verificar la inicialización, idempotencia, destrucción y reinicialización; mientras cubre los nodos dinámicos de MutationObserver, los atributos dinámicos, la eliminación de subárboles, la destrucción del alcance, la coexistencia de múltiples comportamientos, la destrucción global y la propagación de eventos de inicialización.

Cuando se agrega o cambia el nombre de un comportamiento en tiempo de ejecución, la API pública, los dispositivos de muestra/suplementarios y las pruebas por comportamiento deben sincronizarse; de lo contrario, las pruebas fallarán debido a la falta de dispositivos, instancias o miembros.

Receta de página

Receta completa JSON Define la clase raíz de la página de alta frecuencia, todos los componentes necesarios, las plataformas aplicables, los comportamientos, los adaptadores de escritorio y el uso. No es una plantilla de captura de pantalla, sino una estructura estable que se puede convertir en temas, responde y se puede combinar continuamente. La siguiente expansión conserva todos los campos de cada receta.

Leyendo lista de recetas...

Los sistemas de plantillas e IA deben coincidir primero receta.id, verifique nuevamente plataformas, finalmente use piezas forma una estructura completa. No dejes pasar una receta de página completa con un solo componente similar.

Protocolo de generación de páginas AI

Gardener proporciona cinco capas de fuentes verdaderas para la IA: la lista de API pública responde "qué nombres y entradas estables se permiten usar", la lista de capacidades responde "si se implementan las capacidades regulares de la industria", la lista de componentes responde "qué hay allí", la lista de clases de herramientas responde "cuál es el nombre de clase exacto" y la lista de recetas responde "cómo iniciar una página compleja".

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

Generar restricciones

Verificar primero gardener.capabilities.json, confirme que se han alcanzado las capacidades de la industria correspondientes a los requisitos.
Está prohibido inventar información que no existe en el Manifiesto g-* .
Las páginas de alta reutilización no se ensamblan desde cero cuando existen recetas.
Priorizar el uso de clases de componentes semánticos; las clases de herramientas solo manejan diferencias locales.
Los componentes interactivos deben utilizar un tiempo de ejecución registrado y estructuras ARIA especificadas.
Verifique los terminales, el teclado, el enfoque, el estado, RTL, la impresión y los entornos de alto contraste antes de la salida.
Cuando haya lagunas, regístrelas como requisitos de capacidad del marco y no mezcle CSS temporal en las interfaces del sistema.

Tauri/Electron

.g-desktop-shell Proporciona un diseño de ventana gráfica fija adecuado para editores, herramientas de inteligencia artificial y super CMS. Pase data-g-platform y data-g-os 控制平台细节.

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

Puente seguro

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

// preload Exponer solo acciones de la lista blanca
contextBridge.exposeInMainWorld("gardenerDesktop", {
  windowAction: action => ipcRenderer.send("gardener:window-action", action)
});

No habilite la integración de nodos en el renderizador y no exponga ningún IPC a la página. El adaptador solo acepta acciones de minimizar, maximizar, cerrar y arrastrar a la lista blanca.

Compilaciones, tipos, compatibilidad entre versiones y acceso a versiones bajo demanda

1.0.0 Actualice cinco plataformas, 28 paquetes de componentes, compresión formal y presupuestos de rendimiento a la línea base medida de la versión anterior y actualice el contrato público a Estable, manteniendo los tipos, la compatibilidad entre versiones y el acceso real a los paquetes de lanzamiento de npm.gardener.builds.jsonSe registraron los 5 perfiles de plataforma, 28 paquetes de componentes, 506 asignaciones de componentes a uno o más paquetes propietarios reales, firmas de selector, destinos del navegador, parámetros del constructor y SHA-256/SRI para los 42 artefactos de producción;gardener.performance.jsonGuarde los resultados sin formato, gzip, Brotli, relación de compresión y volumen del paquete npm de cada compilación oficial.

TypeScript es compatible con versiones cruzadas

Las compilaciones se generan automáticamente desde la API pública gardener.d.ts、gardener.tauri.d.ts y gardener.electron.d.ts. 66 comportamientos y 75 eventos forman una unión tipo literal completa;npm run test:types Compile consumidores reales utilizando el modo estricto de TypeScript, que cubre exportaciones predeterminadas y con nombre, fábricas de comportamiento, notificaciones del sistema, consultas de instancias y dos tipos de puentes de escritorio.

gardener.compatibility.json Se solidificaron 1145 contratos heredados de 0.9.0, incluidas las 47 entradas de paquetes, capas CSS, temas, tiempos de ejecución, propiedades de datos, adaptadores, 506 componentes y 52 recetas.npm run verify:compatibility Permitir adiciones posteriores a 1.x y prohibir eliminaciones sin rutas de migración; en el punto de corte estable 1.0.0, las entradas existentes también se verificarán a la inversa para ver si faltan. Las entradas obsoletas permanecen en al menos dos versiones menores y solo se pueden eliminar en una nueva versión principal. Su estructura cerrada consta de Esquema de compatibilidad Restricciones.

El paquete admite explícitamente Node.js >=18.18, Chrome/Edge/Firefox 100+, Safari/iOS 15.4+ y ESM; El portal principal y el adaptador de escritorio proporcionan condiciones. types Exportar. La inicialización automática en tiempo de ejecución está marcada como sideEffectspara evitar la eliminación accidental por parte del empaquetador.npm run verify:package Verificará la lista blanca de paquetes npm reales, cada destino de exportación, tipo de archivo, fugas del directorio de desarrollo y Publint;prepublishOnly Aplicación completa release:verifyy habilite los paquetes públicos y la procedencia npm.

5 archivos de plataforma

Archivo	Entrada de paquete	Capa exclusiva	Entorno operativo
web	`./platform/web.css`	Componentes genéricos, excluidas combinaciones específicas de dispositivos móviles/de escritorio	PC y páginas web responsivas
móvil	`./platform/mobile.css`	Componentes universales + móviles / composiciones-móviles	Web móvil, PWA, Hybrid WebView
escritorio	`./platform/desktop.css`	Componentes comunes + escritorio / composiciones-de-escritorio	Navegador de escritorio y shell de aplicaciones
tauro	`./platform/tauri.css`	Adaptador CSS + Tauri de escritorio de herencia de entrada ligera independiente	Tauri v2
electrón	`./platform/electron.css`	Adaptador de puente de seguridad CSS + Electron	Electron Renderer

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

Generación simultánea de CSS legible por directorio, formal .min.css, mapa fuente externo y manifiesto de compilación cerrado; Tauri/Electron también copia el adaptador JavaScript correspondiente. La entrada oficial del paquete de plataforma está unificada con .css finalice y verifique que la herencia anidada se pueda expandir completamente mediante la prueba de empaquetado CSS del paquete de instalación real.

28 paquetes de componentes estables

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 Estandarizar la exportación de todos los paquetes comprimidos oficiales anteriores,./component/* Reservado como alias compatible. Al construir por nombre de componente, el constructor depende del selector de clase y data-g-* Accesos de código fuente real para propiedades, resolviendo 506 componentes en uno o más paquetes completos pertenecientes en lugar de truncar selectores individuales, para que no se pierdan pseudoclases, estados, animaciones, subpartes, consultas de contenedores y reglas de dependencia.

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

Los parámetros incluyen --platform、--components、--packs、--utilities / --no-utilities y --out. Las plataformas, paquetes o componentes desconocidos fallan inmediatamente; la lista de salida está dada por Esquema de compilación personalizado Verificación.

Cada manifiesto de compilación personalizado también genera SHA-256 y SRI estándar para CSS legible, CSS comprimido, mapa fuente y el adaptador Tauri/Electron copiado con el paquete. El destinatario puede verificar archivo por archivo que la entrega está completa y no ha sido reemplazada, sin depender de la máquina de construcción.

Construcciones reproducibles a nivel de bytes

npm run verify:reproducible registrará el resultado oficial actual, volverá a ejecutar la compilación completa y luego comparará CSS, JavaScript, mapa fuente, metadatos y gardener.builds.json . Cualquier diferencia no determinista en el manifiesto de salida o el contenido del archivo fallará; el informe de rendimiento no participa en la comparación de bytes porque contiene el tiempo de ejecución, pero el comando de presupuesto revisa de forma independiente su contrato numérico.

Compresión formal y presupuesto por desempeño

CSS y JavaScript formales utilizan esbuild para la compresión a nivel de sintaxis sin utilizar reemplazos regulares; la entrada de compresión principal y cada compilación personalizada generan un mapa fuente externo rastreable. CSS comprimido utiliza un banner MIT estable que no cambia con las versiones para evitar que el texto de la versión pura altere la línea base de Brotli. El CSS sin comprimir y el tiempo de ejecución aún proporcionan versiones precisas.npm run budget Utilizando gzip nivel 9 y Brotli calidad 11, calcule simultáneamente raw, gzip y Brotli para los 42 productos de compresión oficiales y verifique la relación de compresión de CSS completo, tiempo de ejecución y npm pack --dry-run Número de archivos empaquetados, desempaquetados y devueltos. 1.0.0 utiliza los resultados de medición reales de la versión sellada 0.9.0 como base inmediata, limitando el crecimiento bruto de cada producto a no más del 2%, gzip/Brotli a no más del 3%, el paquete npm empaquetado a no más del 3%, desempaquetado a no más del 2% y el número de archivos a no más del 10%; Los cinco productos de plataforma tienen líneas de base históricas directas. Las mediciones del volumen de inclusión se redondean a 4 KiB empaquetado y 64 KiB desempaquetado, formando un límite superior determinista que no subestima el verdadero volumen de inclusión y no se ve afectado por el ciclo de compactación autónomo del informe de desempeño. El fallo del límite absoluto o del límite relativo bloqueará la liberación.

Producto controlado	límite superior bruto	límite superior de gzip	Límite superior de Brotli
jardinero.min.css	1.050.000 B	145.000 B	65.000B
jardinero.core.min.css	65.000B	9.000B	6000B
jardinero.temas.min.css	60.000B	7.500 B	5000B
jardinero.utilidades.min.css	550.000B	80.000B	18.000B
jardinero.componentes.min.css	400.000B	55.000B	42.000B
jardinero.ai.min.css	30.000B	6000B	5000B
jardinero.runtime.min.js	105.000 B	30.000B	25.000B
plataforma/web.min.css	1.000.000B	140.000B	60.000B
plataforma/mobile.min.css	1.020.000 B	142.000 B	62.000B
plataforma/escritorio.min.css	1.030.000B	143.000 B	63.000B
plataforma/tauri.min.css	256B	256B	256B
plataforma/electron.min.css	256B	256B	256B

La tabla anterior enumera 12 entradas principales de CSS/tiempo de ejecución; El documento de presupuesto también detalla la cobertura de 2 adaptadores de escritorio, 28 paquetes de componentes y un total de 42 productos oficialmente comprimidos, sin utilizar un límite de reparto general para reemplazar las inspecciones de productos individuales.

El presupuesto del paquete npm es 2 050 000 B empaquetados, 16 500 000 B desempaquetados, hasta 92 archivos. fuente de presupuesto performance-budgets.json Gestión y sujeto por separado a Esquema de presupuestos y Esquema de informe Protección.

npm run build       # Paquetes completos, por niveles, de 28 componentes y 5 archivos de plataforma
npm run verify:reproducible # Compilación y verificación continua de SHA archivo por archivo-256
npm run budget      # 42 Control de acceso del presupuesto absoluto/relativo para paquetes de producción + npm
npm run verify:compatibility # 1,145 Elemento 0.9.0 Contrato público
npm run test:types # TypeScript Verificación estricta del consumidor
npm run verify:package # npm Listas blancas, destinos de exportación y Publint
npm run test:build  # 10 Casos de uso de compilación, compatibilidad, tipo, versión y ruta de falla

Accesibilidad e Internacionalización

El marco proporciona una base para estilos de enfoque, movimiento reducido, alto contraste y colores forzados, pero la denominación semántica y el orden del contenido siguen siendo responsabilidad del autor de la página.

TecladoLas pestañas, el menú, el árbol, la cuadrícula, el carrusel, el divisor, el cuadro de diálogo y la paleta de comandos tienen rutas de teclado.

EnfoqueEl panel de diálogo y comando restringe el enfoque, restaura la fuente de activación después del cierre; Orden de pestañas de salida de elementos invisibles.

NombreLos botones de iconos requieren etiqueta aria; los formularios requieren etiqueta, aria-label o aria-labelledby.

Estado dinámicoToast utiliza estado/alerta; expansión, selección, elemento actual sincronizado a través del estado ARIA.

DirecciónEl diseño utiliza propiedades lógicas y los componentes anulan la dirección de la animación y las flechas en RTL.

Animaciónprefiere el movimiento reducido, comprime la duración de la animación y desactiva el desplazamiento suave.

Lista de verificación de entrega

La página tiene la información correcta. lang y título único.
La jerarquía de encabezados es continua y el punto de referencia tiene un nombre identificable.
Todas las imágenes son aptas para su propósito. alt; Utilice alt vacío para imágenes decorativas.
Teclado solo para tareas críticas, el foco siempre está visible.
Los colores del texto y del estado cumplen con las WCAG AA; No podemos confiar únicamente en el color para expresar estatus.
Aún funciona con escala del 200 %, RTL, movimiento reducido y colores forzados.
Los objetivos táctiles móviles utilizan una densidad táctil de al menos aproximadamente 44 píxeles.

1.0.0 Matriz de pruebas automatizada

Control de acceso	Entorno	Cantidad	Anulación
`test:build`	Node.js + esbuild + Ajv	10	Límites de plataforma, propiedad real de componentes, compresión formal, mapa de origen, SHA-256/SRI, compilaciones reproducibles, presupuestos absolutos/relativos, tipos, líneas base de compatibilidad, políticas de soporte, compilaciones personalizadas, rutas de falla y resolución de instalación de paquetes npm
`test:browser`	Escritorio Chromium + WebKit	48	Los 21 ejemplos, página de inicio y documentación, consola, solicitud, estilo, desbordamiento horizontal, teclado de diálogo y ciclo de vida de enfoque
`test:browser:firefox`	Firefox de escritorio	24	Igual que el acceso predeterminado al escritorio; ejecutado en host o CI con el tiempo de ejecución del sistema Playwright Firefox
`test:mobile`	Pixel 7 Chromium + iPhone 13 WebKit	52	Los 21 ejemplos, página de inicio y documentación, redistribución, objetivo táctil de 44 px, hoja inferior, pantalla estrecha de 320 px y pantalla horizontal
`test:a11y`	Chromium+Axe	25	21 ejemplos y dos páginas de inicio de WCAG 2 A/AA, 2.1 A/AA, 2.2 AA, además de teclado, enfoque, RTL, movimiento reducido y colores forzados
`test:html`	análisis 5	24	21 ejemplos, análisis de documentos y de inicio, identificaciones duplicadas, referencias ARIA, idiomas, títulos, ventanas gráficas y listas

npm run test:html             # 24 Casos de uso de estructura HTML
npm run test:browser          # Chromium + WebKit，48 Casos de uso de escritorio
npm run test:browser:firefox  # Firefox Control de acceso independiente, 24 casos de uso de escritorio
npm run test:browser:all      # Chromium + Firefox + WebKit，72 Casos de uso de escritorio
npm run test:mobile           # Pixel 7 + iPhone 13，52 casos de uso móvil
npm run test:a11y             # Axe、Matriz de teclado y entorno, 25 casos de uso
npm run test:e2e              # Predeterminado 125 casos de uso reales del navegador
npm run test:types            # TypeScript Control estricto de acceso de consumidores
npm run verify:compatibility  # 1,145 Artículo 0.9.0 Línea base compatible
npm run verify:package        # npm Archivos, Exportaciones y Publint
npm test                      # 281 Casos de uso de automatización predeterminados y todas las puertas estáticas, de contrato, de tipo, compatibles, de lanzamiento, reproducibles y de presupuesto

Axe La puerta bloquea todas las violaciones detectadas por las reglas WCAG A/AA seleccionadas, las pasa sin rebajas por impacto, y produce la regla, selector de nodos, HTML, y resumen de remediación. La automatización no puede reemplazar las pruebas del lector de pantallas humanas; los productos de producción todavía deben utilizar NVDA/JAWS/VoiceOver para pasarelas críticas por misión.

Impresión y salida de documentos

La capa de impresión básica cambiará el texto negro sobre un fondo blanco, ocultará las capas flotantes y la navegación fija, repetirá los encabezados de las tablas, evitará que las tarjetas y los medios se extiendan entre las páginas y permitirá que los códigos largos se ajusten automáticamente. Ráster completo disponible adicionalmente g-print-col-1 Para g-print-col-24, impresión offset y clases visibles/ocultas, utilizadas para reorganización independiente dentro del ancho del papel. Los editores de informes, facturas y CMS también tienen capacidades de impresión a nivel de recetas.

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

Las clases de herramientas disponibles incluyen g-print-hidden、g-print-block、g-print-break-before y g-break-inside-avoid。

Personalizar, inspeccionar y liberar

Cobertura del proyecto

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

Verificación de marco

npm run build      # Paquetes completos, por niveles, de 28 componentes y 5 archivos de plataforma
npm run build:platform -- --platform mobile # Construcción orientada a plataforma
npm run build:custom -- --components button,dialog # Construcción dirigida por componentes
npm run verify:reproducible # Construcción reproducible a nivel de bytes de control de acceso
npm run budget     # raw / gzip / Brotli、Presupuestos de paquetes absolutos/relativos y npm
npm run verify:compatibility # 0.9.0 Línea base de contrato público entre versiones
npm run test:types # TypeScript Verificación estricta del consumidor
npm run verify:package # npm Archivos, destinos de exportación y Publint
npm run test:schema # Ajv 2020-12 Verificar once conjuntos de esquemas
npm run test:build # 10 Casos de uso de compilación, tipo, compatibilidad, versión y ruta de falla
npm run contracts  # Schema、API pública, denominación y contratos de manifiesto cruzado
npm run test:runtime # 66 Comportamiento y ciclo de vida DOM
npm run test:html   # Ejemplo y estructura HTML de Inicio
npm run check      # Coherencia de tema, componente, tiempo de ejecución y manifiesto
npm run audit      # Token、Contraste, Límites de Paquetes, Exportación y Versión
npm run validate   # Recetas, nombres de clases de ejemplo y accesibilidad básica
npm run test:e2e   # Múltiples navegadores, móviles y Ax
npm test           # Realizar todas las verificaciones de cuadros

node website/scripts/build-css-catalog.mjs
node website/scripts/check.mjs
node website/scripts/check-coverage.mjs  # Verificación de cero omisiones en documentos

Las nuevas capacidades deben sincronizarse

Implementar CSS o Runtime.
Registro metadata/components.json。
Registro de capacidad industrial metadata/capabilities.json, registro de página compleja metadata/recipes.json。
Revise la matriz de estado completa y la matriz de entorno.
Agregar ejemplos ejecutables y entradas de validación.
Reconstruya todos los manifiestos y ejecute regresiones del navegador.

El navegador de directorio del sitio del documento lee directamente css/dist, Vue, React, AngularJS y Blazor metadata / dist Lista. Por lo tanto, una vez creado el marco, no es necesario actualizar manualmente CSS o la cantidad de componentes, nombres de comportamiento, entradas o datos de búsqueda de clases de herramientas de los cuatro conjuntos de capas de adaptación.