Gardener 문서

빠른 시작

Gardener는 CSS만 사용하거나 상호 작용하는 행동을 위한 영 의존성 런타임을 적재할 수 있습니다. 전체 패키지에는 모든 테마, 구성 요소 및 도구 클래스가 기본적으로 포함되어 있습니다.

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

기본 시각적 개체:흰색 캔버스, 중립 텍스트, 4px 기본 둥근 모서리, 억제된 그림자. 둥근 모서리와 강력한 계층 구조는 명시적으로 선택되어야 하며 일반 비즈니스 페이지를 오염시키지 않습니다.

설치 및 패키지

현재 빌드에는 타사 런타임 종속성이 없습니다. 패키지 관리자를 통해 사용 가능하거나 직접 복사 가능 dist/ 의 정적 파일.

npm install @gardener/css

내보내기	내용	사용 시나리오
`@gardener/css`	전체 CSS + 기본 런타임 항목	상자에서 꺼내 바로 사용
`core.css`	토큰,테마축,리셋,베이스	자체 구축된 컴포넌트 라이브러리
`themes.css`	42 주색상 및 표시모드	주제만 재사용
`utilities.css`	모든 반응형 도구 클래스	원자 공식 페이지
`components.css`	비AI 일반 구성요소 및 완전한 래스터	비즈니스 시스템
`ai.css`	AI 전용 구성요소	채팅, 에이전트, 생성 도구
`./tauri`	Tauri 창 제어 어댑터	데스크탑 WebView
`./electron`	Electron 안전 교량 접합기	데스크톱 클라이언트
`./manifest`	구성요소 및 환경 목록	AI/자동화 도구
`./utilities-manifest`	도구 클래스 선언 및 응답 조건	정확한 클래스명 검색
`./recipes`	고주파 페이지 레시피	페이지 뼈대 선택
`./capabilities`	산업역량 구현현황 및 인터페이스 매트릭스	개념 수준 누락 방지
`./public-api`	공개 이름 지정, 동작, 이벤트 및 어댑터 계약	생성기 및 통합 도구
`./builds`	플랫폼 아카이브, 컴포넌트 패키지, 컴포넌트 소유권 및 빌더 계약	플랫폼/컴포넌트별로 생성
`./performance`	raw, gzip, Brotli 및 npm 패키지 크기 보고	출시 성능 게이트
`./components-manifest`	컴포넌트 소스 목록	구성요소 검색 및 코드 생성
`./schema/*`	폐쇄형 JSON 스키마 10개 세트	계약 확인

레이어별로 그룹화

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

Gardener Vue 3 프로젝트

@gardener/vue 는 Gardener CSS 1.0.0의 공식 Vue 3 적응 레이어이며, 현재 버전은 다음과 같습니다. 1.0.0 안정, Vue 지원 >=3.4.0 <4.0.0 Node.js 사용 >=18.18. 506개의 CSS 구성 요소와 66개의 DOM 동작을 항목별로 매핑하는 동시에 538개의 루트 런타임 내보내기, 21개의 TypeScript 유형 내보내기, 29개의 패키지 진입점 및 28개의 구성 요소 CSS 패키지 프록시를 제공합니다.

506명명된 G* 구성 요소

538루트 런타임 내보내기

29공개 패키지 항목

28구성요소 CSS 패키지

설치 및 글로벌 플러그인

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

플러그인 옵션의 전체 범위 prefix、components、directive 그리고 initialize. 접두어를 사용자 정의해야 하며, 일부 구성 요소만 등록하고, 닫습니다. v-gardener 또는 지연된 런타임 초기화가 전달되어야 합니다. createGardenerVue(options) 플러그인을 생성합니다.

주문형 구성요소 및 테마 제공자

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

GardenerProvider 의 10가지 주제축은 다음과 같습니다. theme、mode、neutral、typography、shape、density、elevation、motion、platform 그리고 os. 홈과 샘플은 기본적으로 가볍고 작은 둥근 모서리가 있는 흰색으로 유지됩니다. 어두운 모드는 기본적으로 활성화되어 있지 않습니다.

모든 컴포넌트의 공용 속성, 투명 전송 및 Ref

속성	목적	계약
`as`	루트 요소 또는 Vue 구성 요소 수정	Gardener 클래스, 속성 및 슬롯을 유지합니다.
`variant`	변형 적용	문자열 또는 문자열 배열을 허용합니다.
`state`	애플리케이션 구성요소 상태	다음으로 변환 `is-*` 상태 클래스
`config`	런타임 구성 선언	해당으로 변환 `data-g-*` 속성
`initialize`	제어 DOM 동작 초기화	기본값 `true`
`modelValue`	Vue 양방향 바인딩 값	기본 형식과 사용자 정의 Gardener 이벤트가 모두 지원됩니다.
`modelEvent`	사용자 정의 동기화 이벤트 지정	사용 `gardener:*` 이벤트 이름
`modelKey`	이벤트 페이로드에서 값 가져오기	읽기 `CustomEvent.detail` 필드 지정

모든 기본 속성, DOM 이벤트 및 슬롯이 전달됩니다. 컴포넌트 템플릿 참조 통합 공개 element、getInstance() 그리고 refresh(). 대화 상자 및 서랍과 같은 복합 구조에 사용됩니다. GardenerPart CSS 및 동작 선택기 계약 위반을 방지하기 위해 표준 내부를 만듭니다.

v-model, 맞춤 이벤트 및 지침

<GInput v-model="keyword" />

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

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

vGardener(템플릿 이름 v-gardener) Vue 수명 주기와 함께 지정된 동작을 마운트하고 새로 고치고 삭제합니다. 기본 입력 사용 표준 update:modelValue;복잡한 구성 요소가 통과됨 modelEvent 그리고 modelKey Bridge Gardener 사용자 정의 이벤트는 동일한 프로토콜에 적용됩니다.

컴포저블 7개 모두

useGardener런타임, 초기화 및 파기 기능에 액세스

useGardenerBehavior바인딩 동작 및 액세스 인스턴스

useGardenerEvent정원사를 위한 유형 안전 청취:* 이벤트

useGardenerTheme10축 테마 상태 읽기 및 업데이트

useGardenerToast토스트 생성 및 관리

useTauriWindowControlsBind Tauri 창 단추와 파괴 주기

useElectronWindowControls바인딩 Electron 안전 교량과 파괴 주기

웹, 모바일, 데스크탑 스타일 입구

입구	내용	적용 가능한 시나리오
`@gardener/vue/style.css`	Gardener 스타일 완료	즉시 사용 가능한 제품 및 프로토타입
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	레이어드 스타일 항목	커스텀 빌드
`platform/web.css`	일반 웹 기능	PC, 반응형웹, 대시보드
`platform/mobile.css`	유니버셜+모바일 결합	모바일 웹페이지, PWA, WebView
`platform/desktop.css`	유니버설 + 데스크탑 콤보	데스크톱 브라우저 및 애플리케이션 셸
`platform/tauri.css`	데스크탑 포털 + Tauri 적응	Tauri 창
`platform/electron.css`	데스크탑 포털 + Electron 적응	Electron 창
`component-css/*`	28개의 안정적인 구성요소 CSS 패키지 프록시	기능 영역별 로드

일반 응용프로그램에 권장되는 루트 항목 또는 @gardener/vue/components 최고의 나무 흔들림을 얻으십시오. @gardener/vue/bundle.min.js 은 사전 압축된 단일 파일 항목입니다. SSR 가져오기는 브라우저 전역 개체에 액세스하지 않으며 구성 요소가 마운트된 후에만 동작이 초기화되므로 서버 측 렌더링 및 Hydration에 사용할 수 있습니다.

공개 패키지 항목 29개 모두

자바스크립트:.、./components、./component、./composables、./directives、./plugin、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. 스타일:./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/*. 계약 및 패키지 정보:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

비구성요소 런타임 내보내기 및 TypeScript 유형

32개의 비구성요소 런타임을 다음으로 내보냈습니다.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개의 컴포저블 및 vGardener。

21가지 유형으로 내보냄:GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentKind、GardenerComponentPublicInstance、GardenerConfigValue、GardenerDirectiveOptions、GardenerDirectiveValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerPlatform、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerVueComponentName、GardenerVueOptions。

공개 스키마, 메타데이터 및 게시 액세스

공개 API、호환성 그리고 성능 둘 다 알 수 없는 필드를 끄는 JSON 스키마를 가지고 있습니다.구성요소 카탈로그 JSON AI, 코드 생성기 및 문서 도구에서 직접 읽을 수 있습니다. 전체 압축 패키지의 예산은 328,220B raw, 51,602B gzip, 26,926B Brotli입니다. 싱글 GButton 에 대한 실제 트리 쉐이킹 결과는 3,718B입니다. 결정적 빌드는 87개 파일을 다루고, npm 패키지는 98개 파일을 확인하며, 284,183B는 압축, 3,729,929B는 압축을 푼 상태입니다.

cd vue
npm run release:verify

# 재정의, 스키마, Vue SFC 유형, 단위 및 DOM 수명 주기 빌드, 생성、
# Chromium / WebKit / Firefox / 모바일, WCAG A/AA, 예시、
# 트리 쉐이킹, 재현 가능한 빌드, 성능 예산 책정, npm 패키징 및 퍼블리트

모든 506 Vue 구성 요소

다음 디렉터리는 직접 병합됩니다. Vue 공개 API 그리고 구성요소 메타데이터은 Vue 내보내기 이름, CSS 이름, 카테고리, 유형, 선택기, 변형, 상태, 위젯, 동작 및 플랫폼을 항목화합니다. 이는 주요 샘플이 아닙니다. 506개 항목은 모두 검색 가능한 동일한 디렉터리에 있습니다.

Vue 구성 요소 매니페스트를 읽는 중...

Gardener React Project

@gardener/react 는 Gardener CSS 1.0.0의 공식 React 적응 레이어이며, 현재 버전은 다음과 같습니다. 1.0.0 안정, React 지원 >=18.3.0 <20.0.0 Node.js 사용 >=18.18. 506개의 CSS 구성 요소와 66개의 DOM 동작을 항목별로 매핑하는 동시에 538개의 루트 런타임 내보내기, 22개의 TypeScript 유형 내보내기, 29개의 공개 패키지 진입점 및 28개의 구성 요소 CSS 패키지 프록시를 제공합니다.

506명명된 G* 구성 요소

538루트 런타임 내보내기

29공개 패키지 항목

28구성요소 CSS 패키지

설치 및 루트 구성 요소

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

구성요소는 모두 요청 시 가져오기라는 이름의 지원을 지원합니다. 빌더는 루트 항목에서 시작할 수 있습니다. @gardener/react/components 나무를 흔들어 보세요. 생성된 각 구성 요소는 기본 HTML 태그의 정확한 속성 유형을 유지합니다. GButton 수락 type="submit"，GInput 수락 type 그리고 autoComplete을 허용하면서 as 다른 기본 요소 또는 React 구성요소로 전환합니다.

토픽 제공자 및 10개의 토픽 축

<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="적용 주제 범위"
>
  <App />
</GardenerProvider>

GardenerProvider 의 10가지 주제축은 다음과 같습니다. theme、mode、neutral、typography、shape、density、elevation、motion、platform 그리고 os. 또한 className, 스타일, ID, ARIA 및 기타 기본 속성을 투명하게 전송합니다. useGardenerTheme 읽기 쓰기 주제의 경우, useGardenerThemeContext 컨텍스트를 직접 읽기 위한 것입니다. 기본값은 여전히 작은 둥근 모서리가 있는 흰색 조명이며, 어두운 테마는 자동으로 활성화되지 않습니다.

모든 구성 요소에 대한 10가지 공통 속성

속성	목적	계약
`as`	루트 요소 또는 React 구성 요소 수정	Gardener 클래스, 속성, 하위 및 Ref 유지
`variant`	변형 적용	문자열 또는 읽기 전용 문자열 배열
`state`	애플리케이션 구성요소 상태	다음으로 변환 `is-*` 상태 클래스
`config`	선언 동작 구성	해당으로 변환 `data-g-*` 속성
`initialize`	제어 DOM 동작 초기화	기본값 `true`
`value`	제어값	기본 양식 및 맞춤 Gardener 이벤트 지원
`defaultValue`	제어되지 않은 초기값	다음에 매핑된 확인란 부울 `defaultChecked`
`valueEvent`	값 동기화 이벤트 지정	가능 `gardener:*` 이벤트 이름
`valueKey`	이벤트 페이로드에서 값 가져오기	읽기 `CustomEvent.detail` 필드 지정
`onValueChange`	기존 Event로 새로운 값 받기	기본 입력/변경의 자동 중복 제거

기본 속성, 이벤트, 하위 및 className 모두 투명하게 전송됩니다. 구성 요소 참조 통합 공개 element、getInstance() 그리고 refresh(); 복합 구조를 사용할 수 있습니다. GardenerPart 내부 구성요소를 생성합니다. 확인란 부울 value 사용 checked, radio는 React 형식의 일관된 의미를 보장하기 위해 문자열 값을 유지합니다.

제어되는 값, 맞춤 이벤트 및 동작 인스턴스

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

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

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

useGardenerBehavior 66개의 동작을 요소, 문서 또는 구성 요소 핸들에 바인딩하고 언로드 시 파기합니다.initialize 페이지 수준 런타임에 의한 통합 인계를 용이하게 하기 위해 자동 구성요소 초기화를 끌 수 있습니다. 데이터 속성을 명시적으로 전달하는 동작은 기본값 생성보다 우선합니다.

후크 7개 모두

useGardener런타임, 초기화, 관찰 및 파괴 기능에 액세스

useGardenerBehavior바인딩 동작 및 액세스 인스턴스

useGardenerEvent정원사를 위한 유형 안전 청취:* 이벤트

useGardenerTheme10축 테마 상태 읽기 및 업데이트

useGardenerToast토스트 생성 및 관리

useTauriWindowControlsBind Tauri 창 단추와 파괴 주기

useElectronWindowControls바인딩 Electron 안전 교량과 파괴 주기

웹, 모바일, 데스크탑 스타일 입구

입구	내용	적용 가능한 시나리오
`@gardener/react/style.css`	Gardener 스타일 완료	즉시 사용 가능한 제품 및 프로토타입
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	레이어드 스타일 항목	커스텀 빌드
`platform/web.css`	일반 웹 기능	PC, 반응형웹, 대시보드
`platform/mobile.css`	유니버셜+모바일 결합	모바일 웹페이지, PWA, WebView
`platform/desktop.css`	유니버설 + 데스크탑 콤보	데스크톱 브라우저 및 애플리케이션 셸
`platform/tauri.css`	데스크탑 포털 + Tauri 적응	Tauri 창
`platform/electron.css`	데스크탑 포털 + Electron 적응	Electron 창
`component-css/*`	28개의 안정적인 구성요소 CSS 패키지 프록시	기능 영역별 로드

SSR, 수화 및 데스크탑 브리징

패키지 항목을 서버 측에서 안전하게 가져올 수 있습니다. 506개의 모든 구성 요소는 항목별 SSR을 거쳤으며 동작은 효과 수명 주기 동안에만 초기화됩니다. 서버 측 표시 Hydration은 복구 가능한 오류를 생성하지 않으며 StrictMode와 호환됩니다. Tauri와 Electron이 각각 사용됩니다. @gardener/react/tauri 그리고 @gardener/react/electron 포털이 실수로 다른 플랫폼의 브리징 API를 내보내지 않도록 하는 독립 포털입니다.

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

공개 패키지 항목 29개 모두

자바스크립트:.、./components、./component、./hooks、./provider、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. 스타일:./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 그리고 ./component-css/*. 계약 및 패키지 정보:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

비구성요소 런타임 내보내기 및 TypeScript 유형

32개의 비구성요소 런타임을 다음으로 내보냈습니다.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가지 유형이 다음과 같이 내보내집니다.GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerComponentProps、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerGeneratedComponent、GardenerOwnProps、GardenerPlatform、GardenerReactComponentName、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerValueChange。

공개 스키마, 성능 및 릴리스 액세스

공개 API、호환성 그리고 성능 둘 다 알 수 없는 필드가 꺼진 JSON 스키마로 검증되었습니다.구성요소 카탈로그 JSON AI, 코드 생성기 및 문서 도구에서 직접 읽을 수 있습니다. 전체 압축 패키지의 실제 측정값은 326,064 B raw, 50,126 B gzip, 26,381 B Brotli입니다. 싱글 GButton 에 대한 실제 트리 쉐이킹 결과는 2,599B입니다. 결정론적 빌드는 87개 파일을 다루었고, npm 패키지는 98개 파일을 검사했으며, 262,706B는 압축, 2,438,775B는 압축을 풀었고, 프로덕션 종속성 보안 감사에서는 취약점이 0이었습니다.

cd react
npm run release:verify

# 빌드 및 공개 API, 스키마, TypeScript, 506 구성 요소 SSR, 하이드레이션, DOM 수명 주기、
# Chromium / WebKit / Firefox / Pixel 7 / iPhone 13、WCAG A/AA、
# 트리 쉐이킹, 재현 가능한 빌드, 성능 예산 책정, npm 패키징 및 퍼블리트

506개의 React 컴포넌트 전체

다음 디렉터리는 직접 병합됩니다. React 공개 API 그리고 구성요소 메타데이터, React 내보내기 이름, CSS 이름, 카테고리, 유형, 기본 태그, 선택기, 변형, 상태, 위젯, 동작 및 플랫폼을 항목화합니다. 이는 주요 샘플이 아닙니다. 506개 항목은 모두 검색 가능한 동일한 디렉터리에 있습니다.

React 구성요소 매니페스트를 읽는 중...

Gardener AngularJS Project

@gardener/angularjs 는 Gardener CSS 1.0.0에 대한 공식 AngularJS 1.x 레거시 시스템 적응 레이어이며, 현재 버전은 다음과 같습니다. 1.0.0 안정. AngularJS의 유효성을 검사합니다. >=1.8.2 <1.9.0 Node.js 사용 >=18.18, 모든 506개의 CSS 구성 요소와 66개의 DOM 동작을 항목별로 매핑하고 535개의 루트 런타임 내보내기, 24개의 TypeScript 유형 내보내기, 29개의 공개 패키지 진입점 및 28개의 구성 요소 CSS 패키지 프록시를 제공합니다.

레거시 시스템 경계:AngularJS는 공식 지원을 종료했으며 업스트림 수정 사항이 없는 프레임워크 자체에 대해 알려진 보안 권고는 없습니다. 이 적응 레이어는 angular 이를 Gardener 제품에 적용하지 않고 프레임워크 수준 위험을 다루지 않는 외부 피어 종속성으로 유지합니다. 새로운 프로젝트에는 Vue, React 또는 프레임워크 독립적인 입구를 선택할 우선권이 부여됩니다. 기존 프로젝트에서는 입력 삭제, CSP, 리소스 화이트리스트, 데스크톱 브리지 최소 인증 및 마이그레이션 계획도 구현해야 합니다. 전체 요구사항은 다음을 참조하세요. AngularJS 보안 기준선。

506구성요소 명령어 생성

535루트 런타임 내보내기

29공개 패키지 항목

28구성요소 CSS 패키지

설치, ESM 로딩 및 모듈공장

npm install @gardener/angularjs @gardener/css angular

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

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

AngularJS npm 패키지는 기본 ESM이 아니므로 Vite와 같은 빌드 도구에서 사용해야 합니다. import "angular/angular.js" 의 부작용을 가져온 다음 window.angular 명시적 핸드오버 createGardenerAngularJS;불안정한 것에 의존하지 마십시오 import angular from "angular" 기본적으로 가져옵니다. Gardener 패키지 자체는 전역 AngularJS를 읽지 않으며 루트 항목은 SSR 툴체인 분석에 안전합니다.

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

components 506개의 통합 유형으로 제한된 구성 요소 이름, AngularJS 지시문 이름 또는 ESM 내보내기 이름을 허용합니다. 알 수 없는 이름은 즉시 오류를 발생시킵니다. 동일한 AngularJS 인스턴스, 모듈 이름 및 동등한 옵션의 반복 설치는 멱등성을 갖습니다. 서로 다른 구성 요소 하위 집합, 종속성 또는 초기화 옵션이 동일한 이름의 모듈을 사용하는 경우 반등록된 모듈을 자동으로 가져오는 것을 방지하기 위해 오류가 명시적으로 보고됩니다.

요소 지시어, 속성 지시어 및 의미론

<gardener-provider gardener-theme="garden" gardener-mode="light" gardener-shape="small">
  <g-card gardener-variant="interactive">요소 명령 내용</g-card>
  <button g-button gardener-variant="primary" type="submit">저장</button>
  <input g-input ng-model="vm.keyword" aria-label="키워드">
</gardener-provider>

각 구성요소는 다음으로 시작합니다. restrict: "EA" 요소 및 속성 형식을 모두 지원합니다. <g-card> / gCard 그리고 <article g-card>. 버튼, 입력, 선택, 양식, 테이블, 탐색, 따로 등과 같은 기본 의미 체계의 경우 키보드, 양식 제출, 브라우저 유효성 검사 및 보조 기술이 기본 동작을 계속 사용할 수 있도록 속성을 사용하는 데 우선순위를 두어야 합니다.

8개 구성 요소 모두에 대한 공용 속성

AngularJS 속성 이름	템플릿 작성 방법	목적
`gardenerVariant`	`gardener-variant`	공백 또는 쉼표로 구분된 구성요소 변형 적용
`gardenerState`	`gardener-state`	하나 이상의 매핑 `is-*` 상태 클래스
`gardenerConfig`	`gardener-config`	심도 청취 표현 객체 및 매핑 대상 `data-g-*` 구성
`gardenerInitialize`	`gardener-initialize`	DOM 동작 초기화를 동적으로 활성화하거나 완전히 비활성화합니다.
`ngModel`	`ng-model`	AngularJS 기본 양식 모델을 유지하거나 맞춤 구성요소 값을 연결합니다.
`gardenerValueEvent`	`gardener-value-event`	모델 업데이트 선택 `gardener:*` 맞춤 이벤트
`gardenerValueKey`	`gardener-value-key`	부터 `CustomEvent.detail` 지정된 필드를 읽습니다.
`gardenerOnValueChange`	`gardener-on-value-change`	호출 표현 및 제공 `$value`、`$event` 현지인

명령어 핸들은 다음 위치에 저장됩니다. angular.element(node).data("$gardenerHandle"), 통합 공개 element、getInstance()、refresh() 그리고 destroy()。refresh() 노드 하위 트리가 먼저 삭제된 다음 현재 구성에 따라 초기화됩니다. 범위 $destroy 은 이벤트를 제거하고 동작 인스턴스를 삭제합니다.

ngModel, 네이티브 폼, 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">이메일</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>

기본 입력, 텍스트 영역 및 선택의 모델 의미는 여전히 AngularJS 자체에서 관리되며 적응 레이어에서 다루지 않습니다. ngModel.$render 또는 반복 호출 $setViewValue; 확인란에는 부울 값이 저장되고 라디오에는 옵션 값이 저장되며 다중 선택에는 배열이 저장됩니다. 복잡한 Gardener 구성요소는 사용자 정의 이벤트를 통해 모델을 업데이트하고 gardenerOnValueChange 일관된 콜백 값을 수신합니다.

공통 명령, 서비스 및 10축 테마

gGardenerg-gardener를 작성하는 템플릿, 임의의 동작을 동적으로 선언, 전환 및 파괴

gardenerProvider요소 또는 속성 폼은 10축 테마를 제공하고 하위 트리를 초기화합니다.

GardenerRuntime초기화 · 파괴 · getInstance · 방출 · 관찰

GardenerTheme속성 · 적용 · 읽기 · 지우기

GardenerToast표시(옵션)

주제 축 전체 적용 범위 theme、mode、neutral、typography、shape、density、elevation、motion、platform 그리고 os, 템플릿에 해당 gardener-theme 에게 gardener-os. 기본 샘플은 흰색 빛과 작은 둥근 모서리를 유지합니다.

웹, 모바일, 데스크톱 및 도메인별 스타일

입구	내용	적용 가능한 시나리오
`@gardener/angularjs/style.css`	Gardener 스타일 완료	기존 시스템에 즉시 사용 가능하고 점진적인 통합
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	레이어드 스타일 항목	커스텀 빌드
`platform/web.css`	일반 웹 기능	PC 홈페이지 및 대시보드
`platform/mobile.css`	모바일 구성요소 및 안전 지대	모바일 웹페이지, PWA, WebView
`platform/desktop.css`	데스크탑 작업공간 조합	데스크톱 브라우저 및 애플리케이션 셸
`platform/tauri.css`	데스크탑 포털 + Tauri 적응	Tauri 창
`platform/electron.css`	데스크탑 포털 + Electron 적응	Electron 창
`component-css/*`	28개의 안정적인 구성요소 CSS 패키지 프록시	기능 영역별 로드

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

타우리 입구와 전자 입구가 서로 분리되어 있으며 둘 다 벨트로 돌아갑니다. available 그리고 destroy() ; 렌더링 레이어는 화이트리스트에 포함된 최소한의 브리징 기능만 수신해야 합니다.

공개 패키지 항목 29개 모두

자바스크립트:.、./components、./directives、./services、./module、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. 스타일:./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 그리고 ./component-css/*. 계약 및 패키지 정보:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

비구성요소 런타임 내보내기 및 TypeScript 유형

29개의 비구성요소 런타임을 다음으로 내보냈습니다.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가지 유형이 다음으로 내보내집니다.GardenerAngularJSComponentExportName、GardenerAngularJSComponentName、GardenerAngularJSDirectiveFactory、GardenerAngularJSDirectiveName、GardenerAngularJSModule、GardenerAngularJSOptions、GardenerAngularJSStatic、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerEventName、GardenerPlatform、GardenerRuntimeService、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeAxis、GardenerThemeService、GardenerThemeState、GardenerValueChangeLocals。

공개 스키마, 호환성, 성능 및 릴리스 액세스

공개 API、호환성 그리고 성능 둘 다 알 수 없는 필드가 꺼진 상태에서 JSON 스키마로 검증됩니다. AngularJS 지원 범위는 기계가 읽을 수 있는 호환성 기준에도 기록됩니다.구성요소 카탈로그 JSON AI, 코드 생성기 및 문서 도구에서 직접 읽을 수 있습니다. 전체 압축 패키지의 실제 측정값은 404,094 B raw, 59,499 B gzip, 29,785 B Brotli입니다. 싱글 GButtonDirective 에 대한 실제 트리 쉐이킹 결과는 4,515B입니다. 결정적 빌드에는 83개 파일, npm 패키지 확인 95개 파일, 325,747B 팩, 2,938,245B 언팩, Gardener의 자체 프로덕션 로드 감사에서는 취약점이 0이었습니다.

cd angular
npm run release:verify

# 생성 및 공개 API, 스키마 3세트, TypeScript, AngularJS 1.8.2 / 1.8.3、
# 506 지시어 등록, ngModel 및 DOM 생명주기, Chromium / WebKit / Firefox、
# Pixel 7 / iPhone 13、WCAG A/AA、트리 쉐이킹, 재현 가능한 빌드, 성능, 패킷화 및 공개

현재 게이트에는 런타임/계약 테스트 17개, 스키마 테스트 3개, Five 엔진 및 모바일 브라우저 통합 테스트 20개, Ax WCAG A/AA 자동 감사 1개가 포함되어 있습니다. 완료 npm audit AngularJS 온톨로지에 대해 알려진 권고 사항은 여전히 충실하게 표시됩니다. 이는 격리, 수용 또는 마이그레이션해야 하는 레거시 위험이며 수정된 것으로 표시할 수 없습니다.

모든 506 AngularJS 구성 요소

다음 디렉터리는 직접 병합됩니다. AngularJS 공개 API 그리고 구성요소 메타데이터는 ESM 지시어 팩토리 내보내기 이름, CSS 이름, 카테고리, 유형, 기본 태그, 선택기, 변형, 상태, 위젯, 동작 및 플랫폼을 항목화합니다. 이는 주요 샘플이 아닙니다. 506개 항목은 모두 검색 가능한 동일한 디렉터리에 있습니다.

AngularJS 구성 요소 매니페스트를 읽는 중…

Gardener Blazor Project

Gardener.Blazor 은 Gardener CSS 1.0.0의 공식 Razor 클래스 라이브러리이며, 현재 버전은 다음과 같습니다. 1.0.0 안정. 자산을 안정시키다 net10.0 독립적인 NuGet 소비자로 컴파일 및 검증됨 net11.0;Blazor 웹 앱 정적 SSR, 대화형 서버, 대화형 WebAssembly, 자동, 독립 실행형 WebAssembly, 하이브리드 및 데스크톱 WebView에 적용됩니다.

506 면도기 부품 66 DOM 동작 75 런타임 이벤트 28 프레임 종류 43 정적 자원

설치, 등록 및 정적 리소스

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

첫 번째 대화형 렌더링 중에 구성 요소가 요청 시 로드됩니다. _content/Gardener.Blazor/gardener.blazor.js, 손으로 쓴 스크립트 태그가 필요하지 않습니다. 다양한 스타일 외에도 우리는 또한 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 외 28 components/*.min.css 구성 요소 도메인 항목, 모든 공식 압축 파일에는 외부 소스 맵이 포함됩니다.

구성요소, 공급자 및 SSR

@using Gardener.Blazor.Components

<GardenerProvider Theme="garden" Mode="light" Shape="small"
                   Density="comfortable" Platform="web">
  <GAppShell>
    <GSidebar>내비게이션</GSidebar>
    <GMainRegion>
      <GCard>
        <GButton Variant="primary" @onclick="Save">저장</GButton>
      </GCard>
    </GMainRegion>
  </GAppShell>
</GardenerProvider>

각 CSS 구성요소에는 해당하는 G* 기본 의미 체계 태그, 선택기, 상태, 위젯, 동작, 플랫폼 및 접근성 메타데이터를 입력하고 유지합니다. 정적 SSR 단계는 완전한 HTML을 직접 출력하고 대화형 연결을 설정한 후에만 DOM 동작을 마운트합니다. 매개변수 서명을 변경하면 마운트가 새로 고쳐지고 구성 요소가 릴리스되면 리스너가 로그아웃됩니다. GardenerComponent 메타데이터 이름별로 동적으로 렌더링할 수 있으며,GardenerBehavior 동작은 모든 콘텐츠에 첨부될 수 있으며,GardenerPart 합의된 구성 요소 클래스를 출력하는 데 사용됩니다.

공통 매개변수, 참조 번호 및 형식

생성된 모든 구성요소는 20개의 매개변수를 공유합니다.As、Id、Class、Style、Variant、Variants、State、States、Config、Initialize、Value、ValueChanged、ValueEvent、ValueKey、OnValueChange、EventNames、PreventDefaultEvents、OnEvent、ChildContent、AdditionalAttributes。

구성요소 참조는 6개의 인스턴스 멤버를 제공합니다.Element、RefreshAsync、DestroyAsync、FocusAsync、GetBehaviorMembersAsync、InvokeBehaviorAsync。 GardenerField<TValue> 상속 InputBase<TValue>, 지원 EditForm、EditContext, DataAnnotations, 유효성 검사 상태, 입력, 선택 및 텍스트 영역.

값 바인딩, 75개 이벤트 및 7개 동기화 가드

<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 기본 입력/변경을 처리합니다.ValueEvent 그리고 ValueKey 복잡한 CustomEvent를 처리합니다. 값은 .NET 문자열, 부울, 숫자, 배열 또는 사전으로 변환됩니다. DOM, 파일, BigInt, 함수 및 순환 참조는 안전하게 직렬화됩니다. GardenerEvents.All 75개의 이벤트를 모두 노출하고,GardenerEvents.Guards beforeapproval, beforeclose, beforefilepicker, beforeopen, beforepromptstop, beforepromptsubmit, beforetabclose JS/.NET 비동기 경계 전에 동기적으로 차단되어야 하는 7개의 가드 이벤트가 노출됩니다. 행동 회원 및 이벤트 세부 계약은 다음에서 가능합니다. GardenerRuntimeCatalog 질의.

테마, 서비스 및 데스크탑 브리지

GardenerProvider 지원 테마, 모드, 중립, 타이포그래피, 모양, 밀도, 고도, 모션, 플랫폼, OS 10축 중첩 테마;GardenerThemePresets.All 기본 흰색 배경이 밝고 작고 둥근 모서리가 작은 42가지 색상 테마가 포함되어 있습니다. 5가지 범위 서비스는 다음과 같습니다. GardenerRuntime、GardenerThemeService、GardenerToastService、GardenerTauriService、GardenerElectronService. 데스크탑 브리지는 호스트 사전 로드 계층에 의해 명시적으로 노출된 화이트리스트 개체만 호출하고 노드의 전역 기능은 열지 않습니다.

완전한 공개 유형 및 기계 판독 가능 계약

28가지 프레임 유형은 다음과 같습니다.GardenerAccessibilityDefinition、GardenerAssets、GardenerBehavior、GardenerBehaviorDefinition、GardenerBehaviors、GardenerComponent、GardenerComponentBase、GardenerConstants、GardenerElectronService、GardenerEventArgs、GardenerEventDefinition、GardenerEvents、GardenerField<TValue>、GardenerJsModule、GardenerOptions、GardenerPart、GardenerPlatform、GardenerProvider、GardenerRuntime、GardenerServiceCollectionExtensions、GardenerThemePresets、GardenerRuntimeCatalog、GardenerTauriService、GardenerThemeService、GardenerThemeState、GardenerToastService、GardenerValueChangedEventArgs、GardenerComponentDefinition。

Blazor 공개 API、구성요소 메타데이터、호환성、성능 둘 다 JSON 스키마를 닫았습니다. 읽을 수 있는 문서에는 다음이 포함됩니다. API、66가지 행동、이벤트 75개、정적 자원 43개、런타임、접근성 및 SSR 그리고 접근통제 해제。

1.0.0 출시품질

경고 0개, 오류 0개로 릴리스 빌드; 506개의 구성 요소가 모두 진정한 정적 SSR을 통과했습니다. 브라우저 매트릭스에는 Chromium, Firefox, WebKit, 데스크톱 및 모바일 뷰포트, 키보드, Ax WCAG A/AA가 포함됩니다. CI는 Firefox를 의무화합니다. NuGet은 격리된 캐시를 사용하여 실제로 소비자 애플리케이션을 게시하고 정적 웹 자산 엔드포인트 매니페스트의 유효성을 검사합니다. 독립 실행형 .NET 11 Preview 패키지 소비자도 있습니다. 측정된 어셈블리는 343,552 B, 43개 정적 리소스 총 7,608,327 B, CSS gzip 139,269 B, 런타임 gzip 25,989 B, Blazor 브리지 gzip 2,054 B, nupkg 약 1.22 MiB, 6,000,000 B 하드 제한 미만입니다. 모두 하드 예산과 DLL/XML 재생산이 가능합니다.

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

모든 506 Blazor 구성 요소

다음 디렉터리는 직접 병합됩니다. Blazor 공개 API 그리고 구성요소 메타데이터, Razor 유형, CSS 이름, 카테고리, 유형, 기본 태그, 선택기, 상태, 변형, 위젯, 동작, 플랫폼 및 접근성 계약을 항목화합니다. 이는 주요 샘플이 아닙니다. 506개 항목은 모두 검색 가능한 동일한 디렉터리에 있습니다.

Blazor 구성 요소 매니페스트를 읽는 중...

설계원리

중립 우선순위기본 스타일은 개인, 기업, 백엔드 및 콘텐츠 스테이션에 적합하며 강력한 브랜드 개성을 미리 설정하지 않습니다.

작은 둥근 모서리 기본값--g-radius-md 0.25rem으로 고정; 캡슐과 필렛은 의미의 명확성을 위해서만 사용됩니다.

부재보다는 여유가 낫다재사용 가능성이 높은 복잡한 구조는 구성 요소나 레시피로 존재하며 매번 AI를 일시적으로 결합할 필요가 없습니다.

의미와 외관의 분리기본 색상, 디스플레이 모드, 밀도, 글꼴, 모양 및 플랫폼을 독립적으로 변경할 수 있습니다.

논리적 방향 속성구성요소는 RTL 관련 적용 범위를 줄이기 위해 인라인/블록 방향을 우선적으로 사용합니다.

기계 검증 가능구성요소, 유틸리티 클래스, 레시피 및 런타임 기능에는 매니페스트 및 빌드 검사가 있습니다.

CSS 레이어 순서

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

프로젝트 맞춤 스타일 작성을 권장합니다. gardener.overrides선택기 가중치 증가를 방지합니다.

테마 시스템

컬러 테마는 브랜드의 메인 컬러만을 담당합니다. 표시 모드는 다른 테마 축과 독립적입니다. 이 사이트는 흰색 문서 환경을 유지하기 위해 Light를 사용하지만 프레임워크는 Dark, System 및 High Contrast도 제공합니다.

주제 목록을 읽는 중...

주제 축

속성	사용 가능한 값	목적
`data-g-theme`	가든, 블루, 바이올렛 등 42품목	브랜드 메인 컬러
`data-g-mode`	밝음,어두움,계,고대비	디스플레이 모드
`data-g-neutral`	시원한, 따뜻한, 회색, 잉크, 크림, 청사진, 종이	중립적인 배경과 텍스트
`data-g-typography`	시스템,기업,인문주의,사설,기술,기하학,둥근,클래식,콤팩트,CJK	글꼴 기질
`data-g-shape`	샤프, 소형, 미디엄, 소프트, 라운드	모양 및 필렛
`data-g-density`	컴팩트, 스탠다드, 편안함, 터치	밀도 조절
`data-g-elevation`	평평한, 경계가 있는, 층이 있는, 떠 있는	테두리와 그림자
`data-g-motion`	없음, 차분한, 보통의, 빠른	애니메이션 리듬
`data-g-platform`	웹, 모바일, 데스크탑, 타우리, 전자	플랫폼 세부정보
`data-g-os`	윈도우, 맥, 리눅스	데스크탑 시스템 모습

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

디자인 토큰

구성요소는 의미론적 토큰만 소비합니다. 브랜드 사용자 정의는 구성 요소 규칙을 복사하는 대신 토큰을 재정의해야 합니다.

가족	예시	설명
색상	`--g-color-primary`、`--g-color-primary-text`	읽을 수 있는 전경색에서 채우기 색상이 분리됨
표면	`--g-color-canvas`、`--g-color-surface-raised`	캔버스, 보통, 양각, 약간, 함몰된 표면
텍스트	`--g-color-text`、`--g-color-text-muted`	텍스트, 약화 및 지원 텍스트
의미론	`--g-color-success`、`--g-color-danger-soft`	성공, 경고, 위험, 정보 및 부드러운 배경
간격	`--g-space-0`…`--g-space-96`	반순서, 소수순서 및 픽셀 값을 포함합니다.
글꼴	`--g-font-size-sm`、`--g-line-height-normal`	글꼴 크기, 글꼴 두께, 줄 높이, 글꼴 모음
모양	`--g-radius-sm`…`--g-radius-full`	기본적으로 작은 둥근 모서리, 명시적으로 확장 가능
애니메이션	`--g-duration-fast`、`--g-ease-standard`	기간 및 완화
계층 구조	`--g-z-dropdown`、`--g-z-dialog`	플로팅 레이어, 다이얼로그, 토스트 등의 안정적인 스택 순서
레이아웃	`--g-header-height`、`--g-sidebar-width`	적용 쉘 크기

부분보상

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

CSS 풀 API

이 색인은 다음에서 제공됩니다. css/src/**/*.css 모든 소스 코드 모듈, 의미 클래스, 기본 선택기, 토큰, 사용자 정의 상태 후크, 데이터 속성 및 키프레임을 포함하여 자동으로 생성됩니다. 도구 클래스의 경우 다음 섹션의 전용 전체 목록을 사용하세요. 이는 주요 예제가 아닌 소스 수준 디렉터리입니다.

—소스코드 모듈

—모든 카테고리

—의미 선택자

—토큰

재정의 규칙:각 g-* 클래스는 CSS 전체 API 또는 도구 클래스 목록에 나타나야 합니다. 각 구성 요소, 런타임 및 페이지 레시피도 해당 디렉터리에 나타나야 합니다. 빌드 확인은 파일별로 SHA-256을 계산하여 디렉터리가 소스 코드보다 뒤처지는 것을 방지합니다.

모든 CSS 인터페이스 검색

CSS 색인을 읽는 중…

모든 소스코드 모듈

파일에 의해 노출된 클래스, 토큰, 상태, 데이터 속성 및 키프레임을 보려면 모듈을 확장하세요. 생성 도구 모듈은 별도의 11,498개 항목 인벤토리에 연결됩니다.

모듈 목록을 읽는 중...

도구

모든 도구에서 사용됨 g- 접두사. 반응 접두사는 함수 이름 앞에 옵니다. g-md-grid-cols-2. 소수점은 밑줄로 표시됩니다. 예를 들어 g-p-2_5; 음수 값 사용 g-neg-mt-4。

중단점	최소폭	일반단말기
`g-sm-*`	480px	대형 휴대폰
`g-md-*`	768px	태블릿
`g-lg-*`	1024px	소형 데스크탑
`g-xl-*`	1280px	표준 데스크탑
`g-2xl-*`	1536px	와이드스크린 작업대

우선 사용 start/end、x/y 및 기타 논리적 방향 도구. 물리적 방향이 명시적으로 필요한 경우에만 사용하십시오. left/right。

전체 도구 목록 검색

클래스 이름, 전체 선택기, CSS 속성, 값 또는 응답 조건을 입력합니다. 한 번에 11,498개 항목을 렌더링하지 않으려면 한 번에 100개 항목을 일괄 표시하기 전에 두 문자 이상을 입력하십시오. 들어가다 g- 전체 콘텐츠를 일괄적으로 찾아볼 수 있습니다.원시 JSON 매니페스트AI 및 빌드 도구를 통한 직접 읽기에 적합한 모든 항목이 포함되어 있습니다.

도구 목록을 읽는 중...

레이아웃 시스템

기본 레이아웃은 컨테이너와 그리드를 담당하고 애플리케이션 셸은 고정 영역, 스크롤 경계 및 엔드 피팅을 담당합니다. 복잡한 페이지의 경우 많은 수의 위치 지정 도구 클래스로 직접 시작하지 마십시오.

.g-컨테이너표준 페이지 너비 및 적응형 왼쪽 및 오른쪽 여백.

.g-스택 / .g-클러스터수직 흐름과 단어 줄 바꿈의 수평 조합입니다.

.g-grid-auto중단점이 없는 적응형 카드 그리드입니다.

.g-app-쉘사이드바, 페이지 헤더 및 기본 콘텐츠에 대한 백엔드 기본 셸입니다.

.g-모바일-쉘상단 및 하단 탐색 및 안전 영역.

.g-desktop-쉘제목 표시줄, 활동 표시줄, 워크벤치, 검사기 및 상태 표시줄.

대시보드 예시

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

24 / 12 완전한 그리드 시스템

Gardener는 엔터프라이즈 백엔드, CMS 및 정밀 양식에 대한 주요 호환 프로토콜로 24 래스터를 사용하는 동시에 통과합니다. .g-grid-12 기존의 12그리드를 제공합니다. 둘 다 기본 CSS 그리드, 논리적 방향 및 통합 중단점을 사용하며 음수 여백에 의존하지 않습니다.

24열12호환중단점 5개RTL컨테이너 쿼리인쇄

인터페이스 선택:.g-row 그리고 .g-grid-24 동등하며 24그리드에 적합합니다. 레거시 12그리드에 사용해야 합니다. .g-grid-12 을 부모로 사용합니다. 열 너비 클래스는 동일하게 유지되며 AI는 상위 시스템만 먼저 결정하면 됩니다.

실시간 24그리드

6 / 24

12 / 24

6 / 24

오프셋 4 + 스팬 16

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

12그리드 호환

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>

완전한 클래스 이름 매트릭스

능력	클래스 이름	범위 또는 설명
루트 컨테이너	`g-row`、`g-grid-24`、`g-grid-12`	24, 24, 12열
열 너비	`g-col-1`…`g-col-24`	범위 1~24; 12 그리드는 1~12를 사용합니다.
자동 및 채우기	`g-col-auto`、`g-col-fill`、`g-col-fill-from-1`…`g-col-fill-from-24`	단일 레일 자동 배치, 전체 행 채우기, 지정된 그리드 선에서 나머지 열의 결정적 채우기
기본 vs. 전체 라인	`g-col`、`g-col-full`	둘 다 명시적으로 전체 줄을 차지합니다.
오프셋	`g-offset-0`…`g-offset-23`	논리적 인라인 시작 방향으로부터의 오프셋
명시적인 그리드 선	`g-col-start-1`…`g-col-start-25` `g-col-end-1`…`g-col-end-25`	복잡한 불연속 레이아웃
반응형	`g-sm-col-`、`g-md-col-`、`g-lg-col-`、`g-xl-col-`、`g-2xl-col-*`	열, 오프셋, 시작 및 끝 줄, 표시 상태 및 여백이 모두 반응합니다.
시퀀스	`g-order-0`…`g-order-24`	5단 반응형 버전으로도 사용 가능
간격	`g-gutter-`、`g-gutter-x-`、`g-gutter-y-*`	0、1、2、3、4、5、6、8、10、12
행 정렬	`g-row-top`、`g-row-middle`、`g-row-bottom`、`g-row-stretch`	열의 교차축 정렬 제어
단일 열 정렬	`g-col-self-start`、`g-col-self-center`、`g-col-self-end`、`g-col-self-stretch`	단일 열 덮어쓰기
자동 레이아웃	`g-row-dense`、`g-row-no-gutter`	촘촘한 패딩 및 제로 간격
표시 상태	`g-col-hidden`、`g-md-col-visible`	각 중단점은 숨겨지거나 표시됩니다.
서브그리드	`g-subgrid`、`g-subgrid-cols`、`g-subgrid-rows`	브라우저가 지원하는 경우 상위 그리드 트랙 상속
인쇄	`g-print-col-1`…`g-print-col-24`	인쇄 오프셋, 시작, 끝, 숨김, 표시도 있습니다

중단점

접두사	뷰포트 최소 너비	예시
`sm`	480px	`g-sm-col-12`
`md`	768px	`g-md-offset-4`
`lg`	1024px	`g-lg-col-start-7`
`xl`	1280px	`g-xl-gutter-6`
`2xl`	1536px	`g-2xl-col-8`

컨테이너 쿼리

구성요소 너비가 뷰포트가 아닌 패널에 의해 결정되는 경우 외부 레이어에 사용 .g-grid-container, 열은 다음을 사용합니다. 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, 중첩 및 인쇄

오프셋과 격자선은 CSS 논리적 인라인 방향을 따릅니다. 안으로 dir="rtl" 은 자동으로 오른쪽부터 시작하므로 다른 클래스 세트가 필요하지 않습니다.
모든 열을 다시 배치할 수 있습니다. g-row、g-grid-24 또는 g-grid-12, 중첩 래스터를 형성합니다.
인쇄면용 g-print-col-* 명시적 재배열;g-print-col-hidden 인쇄하지 말아야 할 열을 숨깁니다.

기능 목록래스터의 시스템 번호, 열 너비, 오프셋, 중단점, 컨테이너 중단점, 간격 및 테스트 매트릭스를 문서화합니다.독립 래스터 샘플 페이지24/12 실시간 검증을 위해 RTL, Container Query 및 프린팅 구조를 제공합니다. 빌드 확인은 단지 몇 가지 예를 확인하는 대신 모든 클래스를 하나씩 확인합니다.

전통적인 영역 레이아웃 시스템

두 번째 유형의 기능은 장기간 재사용된 페이지 뼈대를 16개의 의미 체계 레이아웃으로 통합합니다. 영역의 이름은 일관된 논리적 방향으로 지정되어야 합니다. AI는 가장 가까운 루트 레이아웃을 먼저 선택한 다음 구성 요소를 채워야 하며 그리드, 위치 지정 및 모바일 측 접기 CSS를 재구성하지 않아야 합니다.

16개 패턴뷰포트 + 컨테이너RTL안전지역Tauri/Electron인쇄

명명 프로토콜:top / start / main / end / bottom 은 5개의 공통 영역입니다.start 그리고 end 쓰기 방향에 따라 변경됩니다. 고정된 시각적 왼쪽/오른쪽이 필요한 특수 캔버스는 일반적인 논리적 의미를 깨지 않으면서 자체적으로 방향을 명확하게 해야 합니다.

실시간 5개 지역 레이아웃

상의

메인 작업공간

완성된 뼈대 16종

레이아웃	루트 클래스	직접 부품/적용 시나리오
상부/메인/하부	`g-region-stack`	`g-region-top`、`g-region-main`、`g-region-bottom`;일반 웹사이트 및 문서 페이지
시작/메인/끝	`g-region-inline`	`g-region-start`、`g-region-main`、`g-region-end`;콘텐츠 열 3개
5개 영역	`g-region-frame`	상단/시작/메인/끝/하단; 포털과 복잡한 배경
성배	`g-holy-grail`	5개 지역 의미론적 앨리어싱; 전통적인 반응형 웹페이지
단일 사이드바 애플리케이션 셸	`g-sidebar-shell`	상단/시작/메인; 대시보드 및 CMS
더블 사이드바	`g-double-sidebar-layout`	시작/메인/끝; 편집기, 관리 콘솔
마스터-슬레이브 보기	`g-master-detail`	`g-master`、`g-detail`;이메일, 연락처, 주문
목록/상세정보/검사자	`g-list-detail-inspector`	`g-region-list`、`g-detail`、`g-region-inspector`;슈퍼CMS
바닥글이 맨 아래로 가라앉습니다.	`g-sticky-footer-layout`	상단/메인/하단; 짧은 콘텐츠 페이지
고정 헤더	`g-fixed-header-layout`	`g-fixed-header-bar`、`g-fixed-header-main`
고정 사이드바	`g-fixed-sidebar-layout`	`g-fixed-sidebar`、`g-fixed-sidebar-main`;이동 단말기의 경우 `is-open`
끈끈한 보조바	`g-sticky-aside-layout`	내용 + `g-sticky-aside`; 기사 목차, 결제 요약
도크 작업대	`g-dock-layout`	`g-dock-top/start/main/end/bottom`; Tauri/Electron, 안
조정 가능한 기둥	`g-split-view`	`g-split-view-primary/secondary`;좌표 `data-g-split-pane`
전체 화면 작업 공간	`g-fullscreen-workspace`	`g-workspace-toolbar/main/status`;캔버스, 미디어, AI 아티팩트
모바일 안전지대	`g-mobile-layout`	`g-mobile-layout-header/content/bottom`;PWA 및 모바일 WebView

5개 영역 및 마스터/디테일

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

도킹 및 조절 가능한 기둥

<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="양쪽 측면 패널 너비 조정"></div>
  <section class="g-split-panel g-split-view-secondary">...</section>
</div>

응답, 컨테이너, 상태 및 변수

뷰포트가 768px보다 작은 경우 다중 열, 마스터/세부 사항 및 검사기 레이아웃이 의미 순서에 따라 수직으로 정렬됩니다. Dock은 기본적으로 기본 영역만 유지하며 사용할 수 있습니다. is-start-open 또는 is-end-open 모바일 패널을 전환합니다.
카드, 모달 또는 확대/축소 가능한 워크벤치를 삽입할 때 다음을 사용하세요. g-region-container 포장; 768px보다 작은 컨테이너는 브라우저 창 너비에 관계없이 독립적으로 축소됩니다.
is-start-collapsed、is-end-collapsed 컨트롤 도크;g-region-panel is-collapsed 일반 영역 패널을 숨깁니다.is-contained 고정, 도킹, 전체 화면 레이아웃을 미리보기 또는 디자이너에 안전하게 포함시킵니다.
치수 통과됨 --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 조정.
인쇄 시 고정, 고정, 전체 화면 및 기둥 형식이 일반 문서 흐름으로 병합됩니다. 구분선 핸들은 자동으로 숨겨집니다.

기계 판독 가능 기능 목록16개의 레이아웃, 기능 및 테스트 매트릭스가 항목별로 표시됩니다.독립 영역 레이아웃 예시 페이지RTL, 컨테이너 쿼리, 고정 영역, 도크, 분할 보기, 모바일 안전 영역 및 전체 화면 작업 공간을 다룹니다. 기존 g-app-shell、g-mobile-shell、g-desktop-shell 호환성이 유지되며 비즈니스 수준 셸로 계속 사용할 수 있습니다.

클래식 레이아웃 프리미티브

클래스 3 기능은 22개의 본질적으로 반응하는 레이아웃 프리미티브를 제공합니다. 내용과 사용 가능한 공간에 따라 작동하며 일반적으로 페이지 중단점이 필요하지 않습니다. AI는 레이아웃 의도에 따라 프리미티브를 우선적으로 선택한 다음 노출된 변수를 통해 크기와 간격을 조정해야 합니다.

프리미티브 22개내재적 반응형컨테이너 쿼리RTL움직임 감소인쇄

도구 클래스와의 차이점:유틸리티 클래스는 개별 CSS 속성을 설명하고 기본 요소는 안정적인 공간 관계를 설명합니다. 예를 들어 g-sidebar-layout AI가 사용해야 하는 뷰포트 중단점을 추측할 필요 없이 콘텐츠 최소 너비를 기준으로 이중 열에서 세로로 자동 전환합니다.

실시간 도시락 및 스트리밍 프리미티브

22개 프리미티브의 완전한 행렬

원시	루트 클래스 및 구성요소	목적 및 주요 변수
스택	`g-stack`、`is-split`、`g-stack-split`	종방향 리듬;`--g-stack-gap`
클러스터	`g-cluster`	라벨, 버튼, 메타데이터 랩; 간격 / 정렬 / 양쪽 맞춤
센터	`g-center`、`is-intrinsic`	읽기 너비, 수준 또는 콘텐츠 센터; 최대/거터
사이드바	`g-sidebar-layout`、`g-sidebar-pattern`、`is-end`	콘텐츠 너비에 따라 사이드바가 접혔습니다. 크기/내용-최소/간격
스위처	`g-switcher`	공간이 부족할 경우 가로에서 세로로 잘라냅니다. 임계값 / 간격
표지	`g-cover`、`g-cover-center`	뷰포트 또는 컨테이너 중앙에 있는 콘텐츠. 최소 / 패딩
릴	`g-reel`	카드 및 미디어 트랙의 수평 스크롤; 품목 크기 / 간격
프레임	`g-frame`	고정 비율 및 잘린 미디어; 비율/적합/위치
미디어 개체	`g-media-object` +미디어/본체/액션	아바타, 텍스트, 단말조작;`is-end`、`is-stacked`
그리드 자동 맞춤	`g-grid-auto-fit`、`g-grid-auto`	콘텐츠가 작을 경우 빈 트랙을 접습니다. 최소 / 간격
그리드 자동 채우기	`g-grid-auto-fill`	카드 슬롯을 고정하기에 적합한 빈 레일 위치를 유지하십시오. 최소 / 간격
블리드	`g-bleed`、`is-full`	그림과 인용문이 텍스트 너비를 초과합니다. 크기 / 최대
리펠	`g-repel`	제목과 작업은 양쪽 끝이 분리되어 있으며 줄바꿈할 수 있습니다. 간격 / 정렬
임포스터	`g-imposter-container` + `g-imposter`	크기를 알 수 없는 중앙 레이어;`is-fixed`, 마진/최대
오버레이	`g-overlay-layout` + 베이스/레이어	미디어 오버레이 도구, 주석, 상태; 정렬 / 양쪽 정렬 / 여백
벽돌	`g-masonry`	가변 높이 콘텐츠 열; 열/최소/간격, 좁은 컨테이너 단일 열
도시락	`g-bento` +와이드 / 풀 / 톨 / 피처	마케팅, 대시보드 비균일 카드; 행-분/간격/스팬
화면 비율	`g-aspect-ratio` + 정사각형/인물/풍경/비디오/시네마	강제절단이 없는 만능비례박스
스크롤 영역	`g-scroll-area`、`is-block`、`is-inline`	독립 스크롤 소유자; 최대/오버스크롤
스크롤스냅	`g-scroll-snap` + `g-scroll-snap-item`	수평 또는 `is-block` 스냅 목록; 크기 / 엄격함 / 정렬
안전지역	`g-safe-area`、`is-padded`	노치, 둥근 화면 및 홈 인디케이터 4면 보호
끈끈한 영역	`g-sticky-region`、`is-bottom`、`is-surface`	스크롤 영역 논리적 상/하단 가장자리 흡착; 오프셋/z

일반적으로 사용되는 조합

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

미디어 개체, 오버레이 및 스크롤링

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

대응 및 환경규칙

사이드바, 전환기, 자동 맞춤/채우기 자체는 장치 너비와 관계없이 사용 가능한 공간에 따라 반응합니다.
g-layout-container 구성요소 컨테이너를 생성합니다. 640px보다 작으면 미디어 객체, Masonry 및 Bento가 독립적으로 축소됩니다. 뷰포트는 640px 여백도 제공합니다.
모든 수평 의미는 인라인/시작/끝을 사용합니다. 미디어 개체, 블리드, 임포스터, 오버레이, 릴 및 스크롤 스냅은 RTL을 지원합니다.
스크롤 가능한 영역은 키보드로 초점을 맞출 수 있어야 하며 접근 가능한 이름을 제공해야 합니다. 모션 감소는 프리미티브의 부드러운 스크롤을 억제합니다.
릴, 스크롤 영역, 스크롤 스냅, 벽돌, 임포스터, 오버레이 및 고정 영역은 인쇄 시 내용이 잘리는 것을 방지하기 위해 자동으로 병합됩니다.

기능 목록22개의 기본 요소, 별칭, 환경 속성 및 테스트 행렬을 모두 등록합니다.독립형 기본 예제 페이지내장 응답, RTL, 컨테이너 쿼리, Bento, Masonry, 스크롤 스냅, 안전 영역 및 인쇄 구조를 다룹니다. 이미 g-grid-auto 그리고 g-sidebar-layout 인터페이스는 계속 호환됩니다.

페이지 수준 공개 구성요소

카테고리 4 기능은 재사용 가능성이 높은 23개의 페이지 구조 및 상태를 제공합니다. 레이아웃 뼈대와 비즈니스 구성 요소 사이에 위치하여 제목, 작업, 컨텍스트, 필터, 일괄 선택, 스크롤 작업 및 예외 결과를 통합하므로 AI가 각 페이지의 공통 영역을 다시 조립할 필요가 없습니다.

23개 패턴컨테이너 쿼리고정+고정안전지역RTL인쇄

상태 요구 사항:페이지가 일반 데이터 상태만 구현할 수 없습니다. 최소한 로드 중, 비어 있음 및 오류가 지워져야 합니다. 라우팅 및 완전한 애플리케이션을 위해 403, 404, 500, 오프라인 및 유지 관리도 준비되어야 합니다. Gardener는 이러한 상태에 대해 동일한 콘텐츠, 시각 자료, 세부 정보, 작업 및 도움말 위젯을 제공합니다.

실시간 페이지 헤더 및 공개 컬럼

3개 항목이 선택됨

23가지 완전한 모드

모드	루트 클래스	부품, 상태 및 용도
페이지 헤더	`g-page-header`	메인/눈썹/제목/설명/메타/액션; 콤팩트하고 중앙에 위치하며 끈적끈적하다
섹션 헤더	`g-section-header`	메인/제목/설명/액션; 기본, 경계 없음
하위 헤더	`g-subheader`	제목/작업; 페이지 내의 보조 컨텍스트 표시줄
툴바	`g-toolbar`	시작 / 가운데 / 끝 / 제목 / 구분 기호; 컴팩트하고 끈적하며 스크롤 가능
액션바	`g-action-bar`	`g-action-bar-main`; 양식 및 페이지 꼬리 작업
상태 표시줄	`g-status-bar`	섹션/텍스트/ `is-end`;편집기 및 데스크탑 상태
명령 모음	`g-command-bar`	그룹/항목/바로가기; 수평 명령 및 단축키
컨텍스트 바	`g-context-bar`	콘텐츠/작업; 정보, 성공, 경고, 위험
필터바	`g-filter-bar`	메인/액션; 끈끈한 필터 영역
대량 작업 표시줄	`g-bulk-action-bar`	카운트/액션; 활성, 비어 있음, 숨겨진
바닥글 표시줄	`g-footer-bar`	바닥글 작업, 통계 기록 및 페이징
플로팅 액션바	`g-floating-action-bar`	중앙, 끝, 포함; 안전지대 적응
맨 위로 돌아가기	`g-back-to-top`	`data-g-scroll-top` 초점 자동 표시, 스크롤 및 복원
텍스트가 있는 구분선	`g-divider`	`g-divider-text`; 중심, 시작, 끝, 수직
고정 작업	`g-sticky-actions`	`g-sticky-actions-main`;스크롤 양식 하단 동작
페이지 로딩 중	`g-page-loading`	내용/제목/설명; 포함됨, 전체, 오버레이
페이지가 비어 있음	`g-page-empty`	목록이 비어 있고 처음 사용하며 검색 결과가 없습니다.
페이지 오류	`g-page-error`	요청 실패, 재시도, 선택적 기술 세부정보
403	`g-page-forbidden`	권한부족, 권한신청 후 입구로 돌아가기
404	`g-page-not-found`	라우팅실패, 검색 및 홈페이지 진입
500	`g-page-server-error`	서버 오류, 요청 번호 및 재시도
오프라인	`g-page-offline`	오프라인 상태, 로컬 데이터 보안 및 재접속
유지보수	`g-page-maintenance`	유지 관리 기간, 예상 복구 시간 및 상태 페이지

페이지 헤더 및 도구 모음

<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="페이지 도구">
  <div class="g-toolbar-start">...</div>
  <div class="g-toolbar-center">...</div>
  <div class="g-toolbar-end">...</div>
</div>

페이지 상태 구조 통합

<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">페이지가 존재하지 않습니다</h1>
    <p class="g-page-state-description">링크가 만료되었을 수 있습니다.</p>
    <div class="g-page-state-actions">
      <a class="g-btn g-btn-primary" href="/">홈페이지로 돌아가기</a>
    </div>
  </div>
</main>

응답, 런타임 및 인쇄

뷰포트에서 또는 g-page-component-container 크기가 640px 미만인 경우 페이지 헤더의 작업 영역이 다음 줄로 이동하고 도구 모음 중앙이 전용 줄을 차지하며 컨텍스트 바 작업 영역이 완전히 래핑됩니다.
모든 시작, 종료 및 작업 정렬은 논리적 방향을 사용합니다. 플로팅 작업 표시줄, 맨 위로 이동은 장치 안전 영역도 읽습니다.
맨 위로 돌아가기 기존 사용 data-g-scroll-top 런타임 시 디스플레이는 스크롤 위치를 기반으로 하며 클릭 후 원활하게 맨 위로 돌아갑니다. 모션 감소 환경에서는 자동으로 인스턴트 스크롤링을 사용합니다.
인쇄 시 상호작용 막대, 필터, 마스크 로딩 및 플로팅 버튼이 숨겨집니다. 헤더와 결과 페이지는 평면화되고 오류 설명과 요청 번호는 계속 유지됩니다.
페이지 상태의 시각적 요소, 코드, 제목, 설명, 세부 정보, 작업 및 도움말 구성 요소는 필요에 따라 생략할 수 있지만 제목과 복원 가능한 항목이 동시에 누락되어서는 안 됩니다.

기능 목록23개의 페이지 모드, 런타임 및 테스트 매트릭스를 등록합니다.독립형 페이지 구성 요소 예모든 헤더, 공통 필드, 로드 중, 비어 있음, 오류, 403, 404, 500, 오프라인, 유지 관리, 컨테이너 쿼리 및 맨 위로 이동을 다룹니다.

팁 및 도움말 시스템

카테고리 5 기능은 프롬프트, 설명, 안내 및 지속적인 지원의 28가지 모드를 제공합니다. 이 시스템은 또한 AI가 일시적으로 도구 설명을 작성하는 것을 방지하기 위해 침입이 적은 인라인 도움말, 상호 작용이 필요한 부동 레이어, 복잡한 제품 안내, 도움말 센터, 디버깅 경로 및 콘텐츠 피드백을 다룹니다.

28패턴런타임 3개충돌 인식키보드RTL인쇄

선택 순서:콘텐츠를 차단하지 않는 보충 콘텐츠에 대해서는 도움말 텍스트, 인라인 힌트 또는 팁을 사용하세요. 컨트롤을 바인딩해야 하는 경우 도구 설명을 사용하세요. 링크와 작업을 포함할 때 도움말 팝오버를 사용하세요. 크로스 스텝 교육을 위해 Tour를 사용하세요. 플로팅 레이어에 중요한 오류나 꼭 읽어야 할 법적 정보를 숨기지 마세요.

실시간 도움말 패키지

저장하기 전에 미리보기를 통해 모든 장치 너비를 확인할 수 있습니다.

이 설명이 도움이 되었나요?

28개의 완전한 모드

모드	루트 클래스	목적 및 주요 구성요소
팁	`g-tip`	기본값, 정보, 성공, 경고, 위험; 컴팩트한 기술
인라인 힌트	`g-inline-hint`	텍스트 또는 컨트롤 옆에 있는 간단한 설명
도움말 텍스트	`g-help-text`	필드 아래에 지속적인 설명이 있습니다. 성공, 경고, 위험 의미론
도움말 트리거	`g-help-trigger`	원형 물음표 입구; 호버, 초점 표시
툴팁	`g-tooltip`	`data-g-tooltip`;호버, 포커스, 이스케이프 및 아리아 설명
리치 툴팁	`g-tooltip-rich`	제목/설명; 아직 상호작용이 안 돼
팝오버 도움말	`g-help-popover`	헤더/제목/본문/작업; 클릭, 외부 닫기, 탈출
정의	`g-definition`	용어, 약어 및 산업 개념 설명 포털
콜아웃	`g-callout`	아이콘/제목/내용; 다섯 가지 의미 색상
참고	`g-note`	문서 설명, 호환성 참고 사항 및 한계
하다/하지 마세요	`g-guidance-pair`	하세요/하지 마세요/라벨을 붙이세요; 병렬 사양 예
핵심힌트	`g-key-hint`	단일 키 또는 키 조합의 키
바로가기 목록	`g-shortcut-list`	아이템/키; 명령과 단축키 비교
도움말 카드	`g-help-card`	아이콘 / 제목 / 설명 / 동작
도움말 패널	`g-help-panel`	머리글/본문/바닥글; 대시보드 및 데스크탑 검사기
도움말 센터	`g-help-center`	헤더/제목/설명/검색
도움말 항목	`g-help-topics`	주제/제목/메타; 주제 그리드에 자동으로 응답
FAQ	`g-faq`	항목/질문/답변; 아코디언 런타임 재사용
상황별 도움말	`g-contextual-help`	현재 페이지 또는 양식 컨텍스트에 바인딩된 도움말
마크코치	`g-coach-mark`	제목/설명/동작; 단일 지점 기능 티칭
가이드 투어	`g-tour`	단계/진행/행동; 다음, 이전, 건너뛰기, 완료, 탈출
스포트라이트	`g-spotlight`	둘러보기는 자동으로 대상 위치를 추적하고 페이지를 마스킹합니다.
핫스팟	`g-hotspot`	라벨; 펄스 핫스팟, 모션 감소 자동 정지
기능 힌트	`g-feature-hint`	배지/제목/설명; 새로운 기능 내부 프롬프트
새로운 소식	`g-whats-new`	항목/마커/제목/설명; 버전 업데이트 요약
도움말 체크리스트	`g-help-checklist`	아이템/마커; 보류 중, 완료
문제 해결	`g-troubleshooting`	단계/번호/제목/설명; 시퀀스 문제 해결
도움말 피드백	`g-help-feedback`	액션; 콘텐츠가 유용하고 업그레이드 항목을 지원하는지 여부

도구 설명 및 도움말 팝오버

<span data-g-tooltip data-g-placement="top-center">
  <button class="g-help-trigger" data-g-tooltip-trigger
          aria-label="릴리스 상태 이해">?</button>
  <span class="g-tooltip" data-g-tooltip-content hidden>
    게시 후 방문자에게 변경사항 표시
  </span>
</span>

<span data-g-popover data-g-placement="bottom-end">
  <button data-g-popover-trigger>인증이 필요한 이유는 무엇인가요?</button>
  <section class="g-help-popover" data-g-popover-content hidden>
    <h3 class="g-help-popover-title">도메인 이름 소유권</h3>
    <div class="g-help-popover-body">...</div>
  </section>
</span>

선언적 가이드 투어

<button data-g-tour-open="publish-tour">부팅 시작</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>건너뛰기</button>
    <button data-g-tour-prev>이전 단계</button>
    <button data-g-tour-next>다음 단계</button>
  </footer>
</div>

런타임, 접근성 및 환경 규칙

포인터를 가리키고 키보드 초점을 맞추면 도구 설명이 표시되고 자동으로 작성됩니다. role="tooltip" 그리고 aria-describedby;콘텐츠에는 클릭 가능한 컨트롤이 포함되어서는 안 됩니다.
인터랙티브 콘텐츠를 위한 팝오버, 자동 동기화 aria-expanded、aria-controls은 외부 클릭 및 이스케이프 닫기를 지원합니다.
플로팅 레이어는 상단/하단/시작/끝 및 시작/가운데/끝 정렬을 지원합니다. 공간이 부족하면 자동으로 반전되어 뷰포트로 제한됩니다. RTL은 논리적 방향을 교환합니다.
투어는 자동으로 단계, 진행 상황, 목표 스포트라이트, 이전/다음/건너뛰기/완료 및 트리거 포커스 복원을 유지합니다. 목표 단계가 중앙에 표시되지 않습니다.
모바일 안내 쌍이 자동으로 단일 열, 도움말 패널이 상단 테두리로 변경되었습니다. 모션 감소는 핫스팟 펄스 및 스포트라이트 전환을 끕니다.
도구 설명, 팝오버, 둘러보기, 스포트라이트, 핫스팟 및 피드백 작업을 인쇄 및 숨기고 팁, 콜아웃, 메모 및 문제 해결 텍스트를 유지합니다.

기능 목록28개 모드, 8가지 유형의 부동 위치, 3가지 공유 런타임 및 테스트 매트릭스를 모두 등록합니다.독립형 도움말 시스템 예모든 루트 클래스, RTL/모바일 반응형, 도구 설명, 팝오버, FAQ 및 2단계 둘러보기를 다룹니다.

전통적인 조합을 형성

카테고리 6 기능은 일반 웹 페이지, 모바일 양식, 대시보드 설정 페이지, CMS 편집기 및 Tauri/Electron 검사기를 포함하여 기본 컨트롤을 37개의 안정적인 양식 구조로 향상시킵니다. 필드 레이블, 설명, 확인, 비즈니스 그룹화, 동적 추가 및 삭제, 최종 제출을 위한 명확한 인터페이스가 있습니다.

37패턴런타임 5개컨테이너 쿼리검증RTL인쇄

의미론적 요구사항:자리 표시자는 라벨을 대체할 수 없습니다. 필수, 오류 및 도움말 정보는 색상만으로는 표현할 수 없습니다. 관련 체크박스/라디오는 범례와 함께 Fieldset에 넣어야 합니다. 필드 수준 오류 및 검증 요약은 제출 실패 후 제공되어야 합니다.

실시간 조합 예시

사이트 정보

분야 구조, 사업 선정, 진행 상황이 일관되게 유지됩니다.

저장됨

사이트 이름필수

브라우저 제목에 표시13 / 60

릴리스 경로

/

해제 방법

즉시 석방프리플라이트 완료 후 프로덕션 버전으로 전환합니다.출시 예정사이트 시간대별로 게시를 수행합니다.

데이터 완성72%

37개의 완전한 모드

모드	루트 클래스	목적 및 주요 구성요소
양식	`g-form`	통일된 수직리듬; 기본값, 경계 있음
양식 섹션	`g-form-section`	헤더/제목/설명; 긴 형식의 파티션
필드	`g-field`	헤더/메타/필수/선택; 레이블, 컨트롤, 설명
필드셋	`g-fieldset`	범례/설명; 의미 관련 필드 그룹
양식 행	`g-form-row`	최소 필드 너비로 래핑
폼 그리드	`g-form-grid`	2/3/4열, 전체 범위; 결정적 형태 그리드
가로형	`g-form-horizontal`	고정 라벨 열 + 가변 제어 열
인라인 양식	`g-form-inline`	필터, 검색 및 압축 제출 포트폴리오
콤팩트한 형태	`g-form-compact`	대시보드, 데스크탑 인스펙터 고밀도 폼
입력 그룹	`g-input-group`	`g-input-addon`;버튼, 선택 및 입력 접합
입력부호	`g-input-affix`	시작/끝; 통화, 단위 및 정적 아이콘
검색 필드	`g-search-field`	아이콘/액션; 검색 입력의 표준 구조
비밀번호 필드	`g-password-field`	`data-g-password-toggle`;표시/숨기기 및 커서 유지
삭제 가능 필드	`g-clearable-field`	`data-g-clear-input`;이벤트 지우기, 입력/변경 및 포커스 복원
캐릭터 카운터	`g-character-field`	카운트; 기본값, 거의 한도, 한도 초과
유효성 검사 상태	`g-validation-state`	메시지; 성공, 경고, 위험, 오류
검증 요약	`g-validation-summary`	제목/목록; 제출 실패 후 필드에 대한 링크
체크박스 그룹	`g-check-group`	스택, 인라인; 다중 옵션 그룹화
라디오 그룹	`g-radio-group`	스택, 인라인; 단일 옵션 그룹화
스위치 행	`g-switch-row`	내용/제목/설명; 페이지 스위치 설정
초이스카드	`g-choice-group`	카드/제목/설명; 패키지 및 플랜 선택
이름 그룹	`g-name-group`	성/이름 또는 이름/성 더블 필드, 내용에 따라 순서 조정 가능
주소 그룹	`g-address-group`	노선/시/지역/우편번호; 6트랙 사업 레이아웃
전화그룹	`g-phone-group`	국가번호, 번호, 내선
머니그룹	`g-money-group`	통화+금액, 논리적 방향 둥근 모서리
날짜 범위	`g-date-range-group`	시작, 구분자, 종료 날짜
시간 범위	`g-time-range-group`	시작, 구분자, 종료시간
단위 필드	`g-unit-field`	수치값 + 고정/옵션 단위
범위 필드	`g-range-field`	범위 + 출력; 실시간 수치 표시
파일 필드	`g-file-field`	컨트롤/이름; 단일 파일 선택 라인
반복 가능한 필드	`g-repeatable-field`	목록/아이템/컨텐츠/액션; 템플릿 추가 및 삭제, 최소/최대, 인덱스
조건부 필드	`g-conditional-field`	컨트롤러/표시 시기; 보여주기, 숨기기, 불활성
양식 작업	`g-form-actions`	끝, 시작, 사이, 끈끈한; 안전지역
자동 저장 상태	`g-autosave-status`	유휴, 저장중, 저장됨, 오류
양식 진행	`g-form-progress`	메타/트랙/값; 완성도를 채우다
양식 검토	`g-form-review`	행 / 라벨 / 값 / 편집; 제출 전 검토
동의 그룹	`g-consent-group`	제목/설명; 조건, 승인 및 확인

레이아웃 및 필드 조합

<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">이름</label>
          <span class="g-field-required">필수</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>

선언적 런타임의 5가지 유형

<div class="g-password-field" data-g-password-toggle>
  <input class="g-input" type="password">
  <button data-g-password-button type="button">비밀번호 표시</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">추가</button>
  <template data-g-repeatable-template>...__INDEX__...</template>
</div>

응답성, 접근성 및 인쇄

g-form-container 640px 컨테이너 쿼리를 빌드합니다. 양식 그리드, 수평, 이름 및 주소 조합은 뷰포트 규칙을 대체하여 포함된 CMS 패널 내에서 독립적으로 축소할 수 있습니다.
모든 조합은 논리적 방향 속성을 사용합니다. 입력 그룹, 돈, 단위, 필드 작업 및 고정 작업은 RTL에서 올바른 일대일 관계를 유지합니다.
비밀번호 토글 동기화 aria-pressed 접근 가능한 이름으로 입력/변경을 디스패치합니다. 입력 지우기; 문자 수는 유니코드 문자 수를 계산합니다.
조건부 필드는 숨길 때 숨김, 비활성 및 아리아 숨김을 동시에 설정합니다. 반복 가능 필드는 최소/최대, 템플릿 인덱스, 새 컨트롤의 자동 초기화 및 삭제 후 포커스 복구를 지원합니다.
모션 감소는 저장 애니메이션을 줄입니다. 숨겨진 비밀번호, 지우기, 추가, 삭제 및 제출 작업을 인쇄하고 필드 값, 확인 및 감사 정보를 유지합니다.

기능 목록37개 조합, 5개 런타임 및 전체 테스트 매트릭스가 등록되었습니다.독립형 조합예모든 루트 클래스, 비즈니스 필드 그룹, 동적 추가 및 삭제, 조건부 표시, 컨테이너 응답, RTL 및 인쇄를 다룹니다.

기존 네비게이션 조합

카테고리 7 기능은 공공 웹사이트, 기업 포털, 대시보드, 슈퍼 CMS, 모바일 웹 및 Tauri/Electron 데스크톱을 포괄하는 38개의 안정적인 탐색 모드를 제공합니다. 글로벌, 로컬, 계층적, 선택, 인페이지, 페이지 넘기기, 프로세스, 모바일, 명령 및 ID 항목은 모두 기성 구조를 갖고 있으며 AI는 탐색 CSS를 일시적으로 재구성할 필요가 없습니다.

38패턴재사용 가능한 런타임 9개키보드안전지역RTL인쇄

선택 순서:먼저 탐색 범위(글로벌, 로컬, 계층적 또는 페이지 내)를 결정한 다음 방향과 터미널을 결정합니다. 탭은 동일한 컨텍스트 내의 뷰만 전환하고, 이동 경로는 위치만 표현하며, 페이지 매김은 결과 세트 페이지 전환만 표현하며 서로 대체되어서는 안 됩니다.

실시간 조합 예시

38개의 완전한 모드

가족	패턴 및 루트 클래스	목적
글로벌	탐색바 `g-navbar`	브랜드, 센터 존, 테일 작동 및 이동 토글
	기본 `g-primary-nav`	제품의 가장 중요한 1층 출입구
	유틸리티 `g-utility-nav`	도움말, 상태, 언어, 로그인 등의 보조 입구
	서브 네비게이션 `g-subnav`	제품 영역, 채널 또는 개체 내의 보조 탐색
부분 및 데스크탑	사이드바 `g-sidebar`	대시보드 및 CMS 영구 사이드바
	접이식 `g-collapsible-nav`	`data-g-nav-toggle`;접힌 영역 및 모바일 메뉴
	내비게이션 레일 `g-nav-rail`	`data-g-roving-nav`; 좁은 트랙 및 방향 키 초점
	활동 표시줄 `g-activitybar`	Tauri/Electron 작업대 주요 기능 엇바꾸기
	메뉴바 `g-menubar`	데스크톱 파일/편집/보기 유형 메뉴바
계층 구조 및 메뉴	메가메뉴 `g-mega-menu`	대형사이트 다중열 입구
	드롭다운 `g-dropdown`	버튼 메뉴; 화살, 집, 끝, 탈출
	컨텍스트 메뉴 `g-context-menu`	`data-g-context-menu`; 마우스 오른쪽 버튼 클릭, Shift+F10, 뷰포트 오버플로 방지
	트리 탐색 `g-tree-nav`	`data-g-tree`; 무제한 레벨, 확장 및 화살표 키
위치 및 선택	이동 경로 `g-breadcrumb`	현재 위치 및 상위 경로
	탭 `g-tabs`	`data-g-tabs`;동일 레이어 보기 전환
	세로 탭 `g-vertical-tabs`	설정 페이지 및 검사기 세로보기
	분할됨 `g-segmented`	소수의 상호 배타적인 표시 방법
	알약 탐색 `g-pill-nav`	카테고리, 상태 및 콘텐츠 채널
	앵커 네비게이션 `g-anchor-nav`	정적 기사 디렉토리
	스크롤스파이 `g-scrollspy-nav`	`data-g-scrollspy`;스크롤링으로 현재 위치 동기화
결과 세트	페이지 매김 `g-pagination`	총 페이지 수가 알려진 숫자 페이징
	커서 페이지 매김 `g-cursor-pagination`	API 커서 및 이전/다음 배치
	더 로드 `g-load-more-nav`	모바일 피드 및 프로그레시브 로딩
프로세스 및 문서화	스테퍼 `g-stepper`	단기 프로세스 진행 상태
	마법사 탐색 `g-wizard-nav`	긴 프로세스 단계 디렉토리 및 컨텐츠 영역
	뒤로 탐색 `g-back-nav`	상위 개체 또는 목록으로 돌아가기
	이전 / 다음 `g-prev-next-nav`	기사, 튜토리얼 및 세부정보의 순서
	탐색 건너뛰기 `g-skip-nav`	키보드 사용자의 경우 반복 탐색을 건너뛰었습니다.
모바일 단말기	모바일탑 `g-mobile-top-nav`	반환, 제목 및 꼬리 작업
	하단 탐색 `g-bottom-nav`	모바일 1단계 대상 및 안전 지역 3~5개
	모바일 탭바 `g-mobile-tab-bar`	모바일 애플리케이션 최상위 라벨
	서랍 내비게이션 `g-drawer-nav`	작은 화면 측면 슬라이딩 탐색 및 초점 복구
명령과 신원	명령 팔레트 `g-command-palette`	글로벌 검색 명령어 입력
	명령 탐색 `g-command-nav`	인라인 명령 목록 및 단축키
	점프 내비게이션 `g-jump-nav`	`data-g-jump-nav`;긴 페이지 장으로 이동하려면 선택하세요.
	빠른 탐색 `g-quick-nav`	최근, 즐겨찾기 및 자주 사용하는 항목
	로캘 탐색 `g-locale-nav`	언어, 지역 및 사이트 버전
	계정 탐색 `g-account-nav`	사용자, 조직, 설정 및 종료

5가지 새로운 선언적 동작

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

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

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

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

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

접근성, 대응성 및 환경 규칙

현재 페이지 사용량 aria-current="page", 현재 페이지 위치가 사용됩니다. aria-current="location", 탭 사용 aria-selected;색상에만 의존하지 마세요.
Roving Nav는 가로/세로, RTL, 4방향 키, 홈 및 끝을 지원합니다. 상황에 맞는 메뉴는 마우스 오른쪽 버튼, 키보드 메뉴 키, Shift+F10, Esc 및 포커스 복구를 지원합니다.
g-nav-container 640px 컨테이너 응답성을 구축합니다. Navbar, 수직 탭 및 마법사는 CMS 슬롯 또는 데스크탑 검사기 내에서 독립적으로 축소될 수 있습니다.
하단 탐색 및 모바일 탭 표시줄 처리 safe-area-inset-bottom;서랍은 RTL에서 오른쪽부터 들어가는 논리적 방향을 사용합니다.
동작 감소는 서랍, 트리 및 링크 건너뛰기 전환을 끕니다. 강제 색상은 명시적인 현재 항목 개요를 제공합니다. 인쇄하면 작업 탐색이 숨겨지고 이동 경로, 문서 앞/뒤 페이지, 프로세스 정보가 유지됩니다.

기능 목록38개의 탐색 모드, 11개의 탐색 제품군, 9가지 유형의 재사용 런타임 및 완전한 테스트 매트릭스를 등록합니다.독립 네비게이션 예시전역, 계층, 선택, 메뉴, 페이지 내, 프로세스, 모바일 및 데스크톱 탐색을 다루며 키보드 및 마우스 오른쪽 버튼 클릭 상호 작용을 직접 테스트할 수 있습니다.

데이터 표시 및 동작 조합

카테고리 8 기능은 "데이터 표시"와 "데이터 조작"을 동일한 계약 세트로 처리하는 48개의 안정적인 데이터 모드를 제공합니다. 일반 웹사이트, 대시보드, 슈퍼 CMS, 모바일 목록, 분석 보고서 및 Tauri/Electron 고밀도 워크벤치 등 모두 테이블, 레코드, 목록, 계층, 흐름, 표시기, 시각화, 계획, 공간 또는 작동 모드를 직접 선택할 수 있습니다.

48패턴재사용 가능한 런타임 8개끈적임/쌓임키보드 그리드RTL인쇄

선택 순서:먼저 데이터 형식을 결정한 다음 작업 강도를 결정합니다. 소수의 정적 속성에 대해서는 설명 목록 또는 키 값을 사용하십시오. 여러 레코드에 대해 목록 또는 테이블을 사용합니다. 셀에 키보드 이동 및 편집이 필요한 경우에만 데이터 그리드를 사용하십시오. 계층적 데이터에는 트리 또는 트리 테이블을 사용합니다. 추세와 비교는 먼저 읽을 수 있는 값을 제공한 다음 그래픽을 추가합니다.

실시간 조합 예시

2,480게시됨

128검토 대기 중

6위험항목

페이지	상태	방문
기업 홈페이지	게시됨	28,420
제품센터	검토중	16,208

48개의 완전한 모드

가족	패턴 및 루트 클래스	목적 및 주요 기능
테이블	테이블 `g-table`	기본 의미 테이블; 스트라이프, 호버, 컴팩트
	반응 테이블 `g-responsive-table`	가로 스크롤, 모바일 카딩, 고정 첫 번째 및 마지막 열
	데이터 그리드 `g-data-grid`	ARIA 그리드, 4방향키, 홈/엔드
	편집 가능한 그리드 `g-editable-grid`	편집 가능한 셀, 편집 중, 무효
	트리 테이블 `g-tree-table`	들여쓰기 수준, 상위-하위 줄 확장
	그룹화된 테이블 `g-grouped-table`	지역, 날짜, 유형별로 그룹화
	확장형 테이블 `g-expandable-table`	세부정보 라인 및 `g-row-disclosure`
	비교표 `g-comparison-table`	패키지, 버전, 기능의 수평적 비교
	피벗 테이블 `g-pivot`	교차 요약, 고정 행 헤더
기록 및 목록	설명 목록 `g-description-list`	정적 태그 및 값이 거의 없음
	키 값 `g-key-value`	값, 긴 텍스트 및 단일 작업
	기록상세 `g-record-detail`	단일 사업 기록의 완전한 세부사항
	목록 그룹 `g-list-group`	일반 목록 및 대화형 행
	미디어 목록 `g-media-list`	아바타, 썸네일, 바디, 테일 액션
	밀집 목록 `g-dense-list`	Desktop 및 Inspector 고밀도 목록
	가상 목록 `g-virtual-list`	대량 기록을 위한 창형 호스팅 셸
계층 구조 및 흐름	나무 `g-tree`	무한 레벨, 확장 및 키보드 이동
	타임라인 `g-timeline`	마일스톤 및 상태 기록
	활동 피드 `g-activity-feed`	사용자 및 시스템 활동 흐름
	감사 로그 `g-audit-log`	날짜 그룹, 연산자, 동작 및 시간
표시기 및 그래픽	KPI `g-kpi`	키값 및 상승 및 하강 방향
	통계 목록 `g-stat-list`	간결한 통계값 세트
	미터법 카드 `g-metric-card`	값, 라벨 및 작은 추세 차트
	스파크라인 `g-sparkline`	바 또는 SVG 마이크로트렌드
	진행 상태 `g-progress-stats`	분류 진행 및 비율
	차트 `g-chart`	차트 라이브러리 독립적인 제목, 플롯 영역 및 작업 컨테이너
	데이터 범례 `g-data-legend`	색상, 제품군 및 판독 가능한 라벨
	순위 `g-ranking`	순위, 이름 및 값
	상태 요약 `g-status-summary`	상태 수량의 빠른 개요
계획과 공간	달력 `g-calendar`	주간/월간 시간 그리드 및 이벤트
	의제 `g-agenda`	선형 일정 목록
	칸반 `g-kanban`	단계 열 및 작업 카드
	간트 `g-gantt`	작업, 타임라인 및 진행률 표시줄
	조직도 `g-org-chart`	조직 노드 및 계층적 관계
	지도 `g-map-shell`	맵 캔버스, 도구 및 결과 패널
	데이터 매트릭스 `g-data-matrix`	권한, 기능 및 2차원 상태 매트릭스
	히트맵 `g-heatmap`	활동, 기여도 및 밀도
데이터 연산	데이터 툴바 `g-data-toolbar`	검색, 필터링, 결과 개수 및 작업
	열 선택기 `g-column-chooser`	열 표시 및 숨기기
	저장된 보기 `g-saved-views`	필터, 정렬 및 열 구성 저장
	내보내기 패널 `g-export-panel`	형식, 범위 및 필드 내보내기
	데이터 상태 `g-data-state`	로드 중, 비어 있음, 오류, 오프라인
	뷰 전환기 `g-data-view-switcher`	테이블, 목록, 카드 보기 전환
	선택 요약 `g-selection-summary`	수량선택 및 일괄작업
	테이블 밀도 `g-table-density`	편안함, 표준 및 컴팩트 밀도
	필터 요약 `g-filter-summary`	현재상태 및 원클릭 클리어
	정렬 빌더 `g-sort-builder`	다중 필드 정렬 순서
	데이터 검사기 `g-data-inspector`	CMS 및 데스크톱 기록 검사기

6개의 새로운 선언적 동작

<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="모두 선택">
  <button data-g-sort-key="revenue" data-g-sort-type="number">소득</button>
  <input data-g-select-row type="checkbox" value="record-id">
  <button data-g-row-toggle="detail-id" aria-expanded="false">확장</button>
  <label><input data-g-toggle-column="owner" checked>담당자</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="선택적 인덱스 텍스트">...</article>
  <div data-g-filter-empty hidden>결과 없음</div>
</div>

<div data-g-data-view data-g-current-view="table">
  <button data-g-view="table">테이블</button>
  <button data-g-view="card">카드</button>
  <section data-g-view-panel="table">...</section>
  <section data-g-view-panel="card" hidden>...</section>
</div>

런타임, 접근성 및 환경 규칙

테이블 정렬은 테이블 헤더를 자동으로 유지합니다. aria-sort는 텍스트, 숫자, 날짜 및 안정적인 정렬을 지원합니다. 정렬 중에 세부 행이 기본 행과 함께 이동합니다.
행선택은 전체선택, 부분선택,indeterminate, 알았어 aria-selected, 교대 간격 선택 및 선택 요약.
행 공개는 세부 행과 트리 테이블을 모두 제공하고 유지 관리합니다. aria-controls、aria-expanded, 이스케이프 축소 및 재귀 하위 행 숨기기.
열 토글은 하나 이상의 열을 유지합니다. 데이터 필터는 유니코드 정규화, 다중 키워드 AND 일치, 결과 개수 및 비어 있음을 지원합니다. 데이터 보기는 화살표 키, Home, End를 지원합니다.
g-data-container 640px 컨테이너 접기를 생성합니다. 누적 테이블은 작은 화면에서 각 그리드를 사용합니다. data-g-label 데스크탑 테이블 의미를 손상시키지 않고 읽을 수 있는 카드를 생성합니다.
모든 구조는 논리적 방향 속성을 채택하고 RTL을 지원합니다. 강제 색상은 선택 윤곽선을 제공합니다. 숨겨진 데이터 작업을 인쇄하고, 세부 정보 및 계층 구조 행을 확장하고, 스크롤 클리핑을 제거합니다.

기능 목록48개의 데이터 모드, 11개의 데이터 계열, 8가지 유형의 다중화된 런타임 및 완전한 테스트 매트릭스를 등록합니다.독립 데이터 예시정렬, 선택, 확장, 열 가시성, 검색, 보기 전환, 스택 테이블 이동, 키보드 그리드를 직접 테스트할 수 있습니다.

구성 요소 선택 및 일괄 처리

카테고리 9 기능은 "객체 선택, 선택 범위 표현, 일괄 실행 및 선택 조건 저장"을 완전한 프로토콜로 만듭니다. 슈퍼 CMS, 권한 할당, 회원 관리, 미디어 라이브러리, 관련 분야, 대시보드, 모바일 백엔드 및 Tauri/Electron 데스크톱 워크벤치에 적합합니다.

32패턴재사용 가능한 런타임 7개다중 선택계층 구조키보드RTL/인쇄

실시간 선택 및 일괄작업

문서 페이지

모두 선택

현재 보기0 / 3

빠른 시작공개 문서게시됨API 참조개발자 문서초안FAQ도움말 센터게시됨

32개 모드의 완전한 매트릭스

#	패턴/루트 클래스	목적 및 계약
01	선택 제어 `g-selection-control`	수량, 총계, 범위 정보 선택
02	모두 선택 `g-select-all-control`	전체선택 및 부분선택 미정
03	반전 `g-invert-selection-control`	현재 사용 가능한 항목 반전
04	범위 `g-range-selection-control`	변속 간격 선택
05	배치 도구 모음 `g-batch-toolbar`	안전 영역 인식 고정 일괄 작업
06	선택 범위 `g-selection-scope`	목록, 테이블 또는 트리의 선택 경계
07	전송 `g-transfer`	선택/전체 양방향 이동 및 검색
08	듀얼리스트 `g-dual-list`	권한, 구성원, 태그 이중 목록
09	트리 선택 `g-tree-select`	계층적 다중 선택 및 경로 표시
10	캐스케이더 `g-cascader`	레벨별 확장을 위한 계단식 선택
11	멘션 선택기 `g-mention-picker`	@ 사람, 채널 또는 자원
12	사용자 선택기 `g-user-picker`	아바타, 이름, 팀 및 다중 선택
13	조직 선택기 `g-organization-picker`	조직도, 부서 및 직위
14	리소스 선택기 `g-resource-picker`	파일, 페이지, 데이터 소스 및 자산
15	미디어 선택기 `g-media-picker`	썸네일 그리드 및 미디어 다중 선택
16	아이콘 선택기 `g-icon-picker`	아이콘 검색, 그리드 및 선택 상태
17	색상 선택기 `g-color-picker`	색상 미리보기, 입력 및 견본
18	날짜 범위 `g-date-range-picker`	사전 설정, 격월 달력 및 날짜 범위
19	시간 범위 `g-time-range-picker`	시간 간격 및 교차일 표현
20	저장된 필터 `g-saved-filters`	재사용 가능한 필터 조건
21	저장된 보기 `g-saved-views`	필터, 열, 정렬 및 밀도 스냅샷
22	열 선택기 `g-column-chooser`	열을 숨기고 하나 이상의 열을 유지합니다.
23	정렬 빌더 `g-sort-builder`	동적 다중 필드 대조
24	그룹 빌더 `g-group-builder`	동적 다중 필드 그룹화 규칙
25	엔터티 선택기 `g-entity-picker`	통합 비즈니스 엔터티 선택기
26	태그 선택기 `g-tag-picker`	태그 검색, 생성 및 다중 선택
27	관계 선택기 `g-relation-picker`	레코드, 페이지 및 상위-하위 관계
28	대량확인 `g-bulk-confirmation`	위험한 배치 작업 영향 확인
29	대량 진행 `g-bulk-progress`	단계별 진행, 실패, 백그라운드 작업
30	피커 패널 `g-picker-panel`	데스크톱 플로팅 레이어 및 모바일 하단 패널
31	선택기 요약 `g-picker-summary`	선정된 값 및 선정 결과 요약
32	선택 요약 `g-selection-summary`	선택된 수량 및 빠른 동작

선언적 런타임 인터페이스

<section data-g-row-select>
  <input type="checkbox" data-g-select-all>
  <button data-g-invert-selection>역선택</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">사용자</button>
  </div>
</div>

런타임 및 환경 규칙

row-select 전체선택, 역선택, 지우기, 보이는 항목선택, 쉬프트간격, 수량출력, 배치열표시, 행표시 지원 aria-selected。
transfer 선택/전체 양방향 이동, 양면 검색, 수량 및 비어 있음 상태, Ctrl/Command + 왼쪽 및 오른쪽 화살표 키를 지원합니다.
picker 통합 단일/다중 선택, 유니코드 검색, 칩 삭제, 숨겨진 필드 출력, 화살표 키, Home, End, Enter, Space, Escape 및 닫으려면 외부 클릭.
data-g-cascader 경로와 값을 유지합니다.data-g-saved-choice 서비스 필터, 보기, 아이콘 및 견본.data-g-builder-list 템플릿 추가, 삭제, 정렬/그룹화 규칙 이동을 지원합니다.
g-selection-container 640px 컨테이너 축소를 제공합니다. 모바일 선택기 패널은 자동으로 하단 패널이 되고 배치 도구 모음은 안전 영역을 피합니다.
논리적 방향, RTL, 움직임 감소, 강제 색상 및 인쇄는 모든 모드에서 지원됩니다. 선택 상태를 변경하는 컨트롤은 인쇄할 때 숨겨지고 결과 요약은 유지됩니다.

기능 목록32개 모드, 8개 기능군 및 테스트 매트릭스를 모두 등록합니다.독립선택 예시모두 선택, 역선택, 범위 선택, 전송, 선택기, 캐스케이더, 저장된 선택 및 동적 빌더를 직접 테스트할 수 있습니다.

파일 및 콘텐츠 시스템

카테고리 10 기능은 시스템 입력, 업로드 및 구성, 미리보기, 편집, 공동 작업, 개정 및 저장에 이르기까지 파일의 전체 수명 주기를 포괄합니다. AI가 복잡한 워크벤치 CSS를 일시적으로 구성할 필요 없이 웹, 모바일 백엔드, 슈퍼 CMS, 미디어 센터 및 Tauri/Electron 데스크톱 편집기를 모두 직접 재사용할 수 있습니다.

32패턴재사용 가능한 런타임 6개업로드 + 편집자데스크톱 + 모바일키보드RTL/인쇄

실시간 업로드, 편집, 수정

업로드 대기열완료 0 · 활동 0

PDF제품설명서.pdf

편집 가능한 콘텐츠

캐릭터 통계 및 자동 저장 상태를 확인하려면 이 텍스트를 수정하세요.

- 웹페이지만 지원

+ 웹 및 데스크톱 지원

32개 모드의 완전한 매트릭스

#	패턴/루트 클래스	목적 및 계약
01	파일 드롭 `g-file-drop`	클릭/드래그, 파일 입력 및 드래그 상태
02	파일 목록 `g-file-list`	컴팩트 파일 라인, 메타 정보 및 액션
03	업로드 대기열 `g-upload-queue`	여러 파일 대기열, 계산, 일시 중지 및 제거
04	청크 업로드 `g-chunk-upload`	조각화 상태, 중단점 재개 시각적 프로토콜
05	업로드 진행 `g-upload-progress`	진행률 값, 상태 텍스트 및 ARIA
06	업로드 실패 `g-failed-upload`	실패 이유, 재시도 및 제거
07	파일카드 `g-file-card`	썸네일, 이름, 속성 및 빠른 동작
08	폴더 트리 `g-folder-tree`	디렉터리 수준, 번호 및 현재 경로
09	파일 브라우저 `g-file-browser`	카탈로그, 검색, 그리드/목록 및 키보드 선택
10	파일 미리보기 `g-file-preview`	캔버스, 확대/축소 도구 및 메타 정보 미리보기
11	미디어 라이브러리 `g-media-library`	미디어 자산 워크벤치 및 세부정보 표시줄
12	미디어 그리드 `g-media-grid`	반응형 썸네일 및 선택 상태
13	미디어 세부정보 `g-media-details`	미리보기, 대체 텍스트, 저작권 및 크기
14	이미지 자르기 `g-image-crop`	자르기 단계, 크기 조정 및 검사기
15	이미지 주석 `g-image-annotation`	핫스팟, 마크 및 리뷰 노트
16	문서뷰어 `g-document-viewer`	종이, 축소판, 페이지 넘김 및 확대/축소
17	PDF 뷰어 `g-pdf-viewer`	PDF.js, 기본 또는 데스크톱 브리지 셸
18	비디오 플레이어 `g-video-player`	16:9 스테이지, 진행 및 재생 제어
19	오디오 플레이어 `g-audio-player`	표지, 파형/타임라인 및 컨트롤
20	코드 에디터 `g-code-editor`	줄번호, 코드 캔버스 및 상태 표시줄
21	리치 텍스트 편집기 `g-rich-text-editor`	서식 지정 도구, 편집 가능한 텍스트 및 통계
22	마크다운 편집기 `g-markdown-editor`	소스코드/미리보기 이중열 및 모바일 폴딩
23	블록 에디터 `g-block-editor`	블록 핸들, 텍스트 및 작업
24	개정판 비교 `g-revision-compare`	병렬/통합 차이점과 추가 및 삭제 의미 체계
25	자동 저장 `g-autosave-indicator`	더러움, 저장 중, 저장됨, 오류
26	콘텐츠 개요 `g-content-outline`	문서 제목 수준 및 현재 장
27	에디터 툴바 `g-editor-toolbar`	명령어 그룹, 눌려진 상태, 단축키
28	찾기 및 바꾸기 `g-find-replace`	찾기, 바꾸기, 결과 및 탐색
29	코멘트 스레드 `g-comment-thread`	아바타, 문자, 시간, 공동답장
30	버전 기록 `g-version-history`	버전 타임라인, 현재 버전 및 복구
31	파일 속성 `g-file-properties`	유형, 소유자, 값 확인 및 저작권
32	수납미터 `g-storage-meter`	할당량, 분류 점유율 및 진행 상황

선언적 런타임 인터페이스

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

런타임, 접근성 및 환경 규칙

dropzone 드래그 깊이, 키보드 활성화 및 실제 파일 이벤트를 처리합니다.upload-manager 대기열 상태, 진행률, 일시 중지, 재시도, 제거 및 집계 수를 유지합니다.
file-browser 유니코드 검색, 그리드/목록 전환, 단일 선택, 화살표 키, Home, End, Enter 및 Space를 제공하고 선택 이벤트를 게시합니다.
editor-shell 도구 명령, Ctrl/명령 단축키, 문자 및 단어 수를 통합합니다. 서식 있는 텍스트, 마크다운, 코드 및 블록 편집기를 위한 공통 프로토콜입니다.
revision-compare 병렬/통합 diff를 전환합니다.autosave Dirty, Saving, Saved 및 Error를 표현하며 지연 및 즉시 저장을 지원합니다.
g-content-container 704px 컨테이너 축소를 사용합니다. 파일 브라우저, 미디어 세부 정보, 이미지 편집기, 문서 축소판, Markdown 이중 열 및 버전 비교에는 모두 모바일 레이아웃이 있습니다.
모든 모드는 논리적 방향을 사용하고 RTL, 감소된 동작, 강제 색상 및 인쇄를 포함합니다. 인쇄는 업로드 및 편집 작업을 숨기고 스크롤 영역을 병합하며 텍스트 및 개정 정보를 유지합니다.

기능 목록32개 모드, 8개 기능군 및 테스트 매트릭스를 모두 등록합니다.독립형 콘텐츠 시스템 예시업로드, 파일 탐색, 미디어, 사진, 문서, 오디오 및 비디오, 4가지 유형의 편집기, 공동 작업, 버전 및 저장을 다룹니다.

로그인 및 계정 시스템

카테고리 11 기능은 시스템 입력, 확인, 복구, 승인, 세션, 테넌트, 장치 및 보안 감사에 이르기까지 ID의 전체 수명 주기를 포괄합니다. 단일 로그인 카드가 아니라 PC, 모바일 웹, 대시보드, Super CMS 및 Tauri/Electron 데스크톱 WebView에서 직접 작동하는 32개의 안정적인 조합입니다.

실시간 검증 조합

휴대폰번호 확인

인증코드가 +86 138****6608로 전송되었습니다.

새로운 비밀번호 설정

비밀번호 강도설정되지 않음

8자리 이상
대문자
소문자
번호
기호

!

새로운 장치가 감지되었습니다.

리눅스 · Firefox · 베이징

32개 모드의 완전한 매트릭스

#	모드	루트 클래스	목적 및 주요 구성요소
01	중앙인증	`g-auth-centered`	1열 출입구, 이동단말기, 경량제품; 협력 `g-auth-container`、`g-auth-panel`
02	컬럼인증	`g-auth-split`	`g-auth-split-aside` 브랜드 영역 + `g-auth-split-main` 양식 영역
03	로그인	`g-sign-in`	이메일/사용자 이름, 비밀번호, 로그인 상태 유지, 출입 검색 및 `g-auth-provider`
04	등록	`g-registration`	개인/기업 등록, 약관 확인, 비밀번호 강도
05	비밀번호찾기	`g-password-recovery`	이메일, 휴대폰, 관리자 복구 방법
06	비밀번호 재설정	`g-password-reset`	새 비밀번호, 비밀번호 확인, 만료된 토큰 상태
07	이메일 확인	`g-email-verification`	`g-verification-icon`, 주소, 재전송 타이밍
08	휴대폰 인증	`g-phone-verification`	국가번호, 마스크번호, OTP
09	MFA 챌린지	`g-mfa-challenge`	인증기, SMS, 보안 키, 복구 코드 및 신뢰할 수 있는 장치
10	OTP 입력	`g-otp-input`	`g-otp-cell`; 숫자 입력, 붙여넣기, 백스페이스 및 화살표 키
11	패스키	`g-passkey`	`g-passkey-graphic`, 플랫폼 유효성 검사기 및 교차 장치 포털
12	SSO	`g-sso`	SAML/OIDC, 엔터프라이즈 도메인 검색 및 공급자 목록
13	QR코드 로그인	`g-qr-login`	`g-qr-login-layout`、`g-qr-code`, 새로 고침 및 만료 상태
14	매직링크	`g-magic-link`	비밀번호 없는 이메일 로그인, 유효 기간 및 일회용 알림
15	가입 초대	`g-invitation`	`g-invitation-details`, 조직, 역할, 초대자 및 유효기간
16	최초 설정	`g-first-time-setup`	최초 비밀번호, 정보, 조직 및 보안 기본 설정
17	잠금화면	`g-lock-screen`	`g-lock-screen-panel`, 시간, 현재 사용자 및 빠른 잠금 해제
18	세션이 만료되었습니다.	`g-session-expired`	`g-session-expired-panel`, 로컬 변경 지침 및 재인증
19	계정 선택	`g-account-chooser`	`g-auth-choice`, 아바타, 이메일 및 새 계정
20	테넌트 선택	`g-tenant-chooser`	작업공간, 조직 역할, 멤버십 및 현재 테넌트
21	신원 전환	`g-identity-switcher`	`g-identity-switcher-menu`, 역할 정체성 및 방문자 미리보기
22	완전한 정보	`g-profile-setup`	`g-auth-avatar`, 이름, 위치, 시간대 및 언어
23	계정 보안 센터	`g-account-security`	`g-security-section` 비밀번호, MFA, 장치 및 연결을 집계합니다.
24	장치 관리	`g-device-management`	`g-device-item`, 현재 기기, 위치, 시간 및 취소
25	로그인 활동	`g-login-activity`	`g-login-event`, 방법, IP, 위치, 성공 및 위험
26	보안사고	`g-security-alert`	`g-security-alert-actions` 본인 확인 또는 계정 보호
27	복구 코드	`g-recovery-codes`	`g-recovery-code` 그리드, 복사, 다운로드 및 재생성
28	신뢰할 수 있는 장치	`g-trusted-device`	MFA 건너뛰기 기한 및 공공 장비 위험 설명
29	계정이 연결되었습니다	`g-connected-accounts`	`g-connected-account`, 연결상태 및 연결해제 동작
30	비밀번호 강도	`g-password-strength`	`g-password-strength-meter`、`g-password-rule` 실시간 채점 기능 포함
31	승인 및 동의	`g-auth-consent`	`g-auth-consent-scope` 권한 범위, 허용 및 거부
32	인증결과	`g-auth-result`	`g-auth-result-icon`; 성공, 실패 및 처리 상태

선언적 런타임 인터페이스

행동	속성	능력
비밀번호 전환	`data-g-password-toggle`	커서 표시/숨기기 및 유지
OTP 입력	`data-g-otp-input`	자동진행, 백스페이스, 방향키, 전체 문자열 붙여넣기, 완료 이벤트
비밀번호 강도	`data-g-password-strength`	5가지 규칙, 0~4 등급, ARIA 진행
인증 타이머	`data-g-auth-timer`	재전송, QR 코드 및 세션 카운트다운/만료
선택이 저장되었습니다	`data-g-saved-choice`	계정 및 테넌트 선택
드롭다운	`data-g-dropdown`	ID 전환 메뉴
복사	`data-g-copy`	복구 코드 복사
대화상자	`data-g-dialog`	장치 취소, 민감한 동작 확인

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

상태, 엔드포인트 및 보안 규칙

비밀번호 필드에서는 올바른 비밀번호를 사용합니다. autocomplete; 확인 코드를 비트 단위로 입력하려면 여전히 접근 가능한 이름이 필요하며 제출 시 전체 값이 숨겨집니다.
OTP는 숫자 필터링, 자동 진행, 백스페이스, 왼쪽 및 오른쪽 화살표 키, 홈, 종료 및 붙여넣기를 지원합니다. 완료되면 출시됨 gardener:otpcomplete。
인증 결과는 성공, 오류 및 보류 중이어야 합니다. 세션 만료는 제출되지 않은 데이터의 보존 여부를 나타내야 하며 보안 이벤트는 색상만으로 표현할 수 없습니다.
계정, 테넌트, ID는 서로 다른 개념입니다. 다중 조직 CMS에서 오작동을 방지하려면 각각 Chooser/Switcher를 사용하십시오.
열 인증은 704px 미만의 단일 열로 수렴됩니다. 카드는 384px 미만의 QR, 규칙 및 복구 코드로 재정렬됩니다. 하단 작업은 안전 영역을 존중합니다.
모든 스타일에는 RTL, 모션 감소, 강제 색상 및 인쇄가 포함됩니다. 필요한 보안 감사 정보만 유지하면서 숨겨진 비밀번호, 공급자, 카운트다운 및 민감한 작업을 인쇄합니다.

기능 목록32개 모드, 8개 기능 제품군, 8개 다중화 런타임 클래스 및 전체 테스트 매트릭스를 모두 등록합니다.독립계좌제 예시모든 모드를 포괄하며 OTP, 비밀번호 강도, 카운트다운, 계정/테넌트 선택 및 ID 메뉴를 직접 테스트할 수 있습니다.

상거래 및 결제

카테고리 12 기능은 제품 검색, 사양 및 가격, 장바구니, 정산, 이행, 지불, 주문 및 구독 청구의 전체 거래 체인을 포괄합니다. PC Mall, 모바일 웹, 대시보드, Super CMS, 디지털 상품, SaaS 및 Tauri/Electron Desktop WebView에서 사용할 수 있는 32가지 조합.

실시간 트레이딩 포트폴리오

지

Gardener 스튜디오기업 라이센스 · Windows

¥699.00

소계

할인

배달

대처

플랫폼 선택

32개 모드의 완전한 매트릭스

#	모드	루트 클래스	목적 및 주요 구성요소
01	제품카드	`g-commerce-product-card`	`g-product-media`、`g-product-card-badge`, 제목, 가격 및 동작
02	상품목록	`g-commerce-product-list`	`g-product-list-item`, 미디어, 요약, 가격 및 행 작업
03	상품상세정보	`g-commerce-product-detail`	`g-product-detail-summary`, 제목, 공급업체, SKU, 재고 및 구매 조치
04	제품갤러리	`g-commerce-product-gallery`	`g-product-gallery-thumb` 및 무대; 재사용 가능한 캐러셀 동작
05	SKU 선택	`g-sku-selector`	`g-sku-group`、`g-sku-option`, 조합 및 전체 선택 출력 비활성화
06	수량 단계	`g-quantity-stepper`	`g-quantity-button`, 입력, 최소/최대/단계 및 변경 이벤트
07	가격 표시	`g-price-display`	`g-price-current`, 정가, 할인, 주기, 세금포함 설명 및 재고 `g-stock-status`
08	장바구니 입력	`g-commerce-cart-item`	`g-cart-item-media`, 사양, 수량, 행 합계 및 작업
09	장바구니	`g-cart`	수량연계,`g-cart-empty`, 소계, 혜택, 배송비, 세금 및 합계
10	미니장바구니	`g-mini-cart`	드롭다운 컨테이너, 목록 및 `g-mini-cart-footer`
11	장바구니 요약	`g-cart-summary`	비용 항목 합계 `g-cart-summary-total`
12	정착	`g-commerce-checkout`	`g-checkout-section` 메인영역 + 스티키 `g-checkout-sidebar` + 안전지역 `g-checkout-mobile-actions`
13	정산 단계	`g-checkout-steps`	`g-checkout-step-marker`, 완료/현재/보류 상태
14	주소 선택	`g-address-selector`	저장된 선택, 기본 주소 및 새 항목
15	주소카드	`g-address-card`	`g-address-main`, 담당자, 전화번호, 상세주소, 태그 및 편집
16	배송 방법	`g-shipping-method`	`g-shipping-option`, 적시성, 운송업체, 가격 및 도달불가 상태
17	셀프 픽업 옵션	`g-pickup-selector`	`g-pickup-option`, 매장, 거리, 영업시간 및 재고
18	할인코드	`g-coupon`	`g-coupon-status`; 유휴, 적용됨, 유효하지 않음 및 삭제됨
19	프로모션 목록	`g-promotion-list`	`g-promotion-item`, 코드, 임계값, 상호 배제 및 유효기간
20	송장정보	`g-invoice-information`	`g-invoice-fields`, 송장 유형, 헤더, 세금 번호 및 수령 방법
21	결제방법	`g-payment-method`	`g-payment-option`, 은행카드, 지갑, 잔액, 오프라인 및 비활성화 상태
22	결제 패널	`g-payment-sheet`	`g-payment-sheet-total`, 금액, 확인, 리스크 관리 프롬프트 및 반품
23	결제 결과	`g-payment-result`	`g-payment-result-icon`; 성공, 실패, 처리 및 후속 조치
24	주문 요약	`g-commerce-order-summary`	품목, 할인, 배송, 세금, 결제 & `g-order-summary-total`
25	주문 타임라인	`g-commerce-order-timeline`	`g-order-timeline-item`, 노드, 시간, 물류 및 현재 단계
26	주문내역	`g-order-detail`	헤더, 상태, 품목, 주소, 결제, 송장 및 `g-order-detail-section`
27	구독 패키지	`g-subscription-plan`	`g-plan-price-value`, 주기, 기능, 특징 및 동작
28	가격비교	`g-pricing-comparison`	고정 성능 열, 패키지 차이, 불리언/금액/가격 셀
29	복용량 측정기	`g-commerce-usage-meter`	`g-usage-meter-track`, 전류/한계, 리셋 기간, 경고/위험
30	청구 내역	`g-billing-history`	`g-billing-history-item`, 기간, 금액, 상태, PDF 및 필터링
31	환불 상태	`g-refund-status`	`g-refund-status-progress`, 금액, 원래 반품, 예상 도착 및 실패
32	세금 요약	`g-tax-summary`	`g-tax-summary-row`, 비과세금액, 과세종류, 세율, 지역 및 총액이 포함된 금액

선언적 런타임 인터페이스

행동	속성	능력
수량 스테퍼	`data-g-quantity-stepper`	최소/최대/단계, 버튼 상태, 입력 정규화,`gardener:quantitychange`
SKU 선택기	`data-g-sku-selector`	그룹화된 라디오 선택, 비활성화된 사양, 키보드 로밍, JSON 출력,`gardener:skuchange`
카트	`data-g-cart`	센트정수계산, 수량/제거연계, 소계/할인/운임/세금/합계
쿠폰	`data-g-coupon`	유효한 코드 선언, 상태 및 이벤트 적용/무효/지우기
선택이 저장되었습니다	`data-g-saved-choice`	주소, 배송, 픽업 및 결제 옵션
캐러셀	`data-g-carousel`	제품갤러리
드롭다운	`data-g-dropdown`	미니장바구니

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

금액, 상태 및 환경 규칙

장바구니는 가장 작은 화폐 단위 정수 계산을 사용하며, 표시 레이어는 에게 넘겨집니다. Intl.NumberFormat부동 소수점 양 오류를 방지합니다. 과세, 우대 오버레이, 재고 및 지불 확인은 여전히 비즈니스 백엔드에 의해 결정됩니다.
SKU 비활성화, 재고 부족/품절, 할인 코드 유효하지 않음, 결제 성공/오류/보류 및 환불 처리/완료/실패는 모두 독립적인 상태를 가지며 색상에만 의존할 수 없습니다.
주소, 배송, 픽업, 송장, 결제는 서로 다른 비즈니스 객체입니다. 정산 쉘은 이를 구성하는 역할을 하며 백엔드 비즈니스 규칙을 CSS로 하드코딩하지 않습니다.
g-commerce-container 704px에서 세부정보 축소/이중 열 체크아웃, 480px에서 항목 순서 변경 및 카드 선택; 컨테이너 컨텍스트가 없을 때 대체 수단으로 뷰포트 쿼리를 사용합니다.
모든 모드에는 키보드, RTL, 움직임 감소, 강제 색상 및 인쇄가 포함됩니다. 모바일 청구서는 안전 영역을 존중하며 인쇄 시 구매 조치를 숨기고 주문, 송장 및 세금 정보를 유지합니다.
4px의 작은 둥근 모서리가 있는 기본 흰색 표면. 구성 요소는 42개 기본 색상 세트와 모든 직교 테마 축에서 재사용할 수 있는 테마 토큰만 사용합니다.

기능 목록32개 모드, 8개 기능 제품군, 7가지 유형의 다중화된 런타임 및 전체 테스트 매트릭스를 모두 등록합니다.독립사업 및 결제 예시카탈로그, SKU, 카트, 체크아웃, 이행, 결제, 주문, 구독, 청구, 환불 및 세금을 다룹니다.

모바일 전용 구성요소

카테고리 13 기능은 단순히 데스크톱 구성 요소의 범위를 좁히는 것이 아니라 모바일 웹 페이지, PWA, 하이브리드 애플리케이션 및 데스크톱 WebView의 고유한 구조를 보완합니다. 32가지 모드는 안전 영역 및 동적 뷰포트, 모바일 탐색, 하단 팝업, 제스처 및 스크롤, 검색 및 필터링, 입력 및 키보드, 모바일 인증/청구/미디어는 물론 오프라인, 권한 및 빈 오류 상태를 다룹니다.

32패턴8가족재사용 가능한 런타임 14개안전지역터치RTL인쇄

선택 순서:먼저 선택 g-mobile-safe-shell 또는 기존 페이지 셸에서 "탐색 → 콘텐츠 → 임시 레이어 → 고정 작업 → 시스템 피드백" 조합을 누릅니다. 하단 탐색은 3~5개의 첫 번째 수준 대상에 사용됩니다. 스와이프 탭은 동일한 컨텍스트 내에서 전환하는 데 사용됩니다. 바텀 시트(Bottom Sheet)는 짧은 작업을 수행합니다. 전체 화면 대화 상자는 긴 작업을 수행하며 서로 혼합될 수 없습니다.

실시간 모바일 결합

이동식 작업대

지

슬라이딩 동작 입력

제스처, 버튼, Escape를 모두 사용할 수 있습니다.

계속 로딩

모바일 계약

100svh 안정적인 초기 고도를 제공하며,100dvh 브라우저 표시줄 변경 사항을 따릅니다.
양면 사용 env(safe-area-inset-*); 하단 표시줄, 구매 표시줄, 스낵바 및 동작 프롬프트는 홈 표시기를 재정의하지 않습니다.
대략 포인터 환경의 터치 대상은 최소 44px입니다. 모든 제스처 구성 요소는 버튼이나 키보드 경로를 유지합니다.
논리적 방향 속성은 RTL을 지원합니다. 모션 감소는 변위 전환을 끕니다. 강제 색상은 선택한 윤곽을 향상시킵니다. 인쇄하면 껍질이 자동으로 편평해집니다.

32개 모드의 완전한 매트릭스

#	모드	루트 클래스	목적 및 주요 구성요소
01	안전지대 인클로저	`g-mobile-safe-shell`	`g-mobile-safe-content`, svh/dvh, 4면 안전 영역, 포함된 미리보기
02	상단 애플리케이션 바	`g-mobile-app-bar`	`g-mobile-app-bar-start/title/actions`,고정,큰 제목
03	하단 탐색	`g-mobile-bottom-navigation`	`g-mobile-bottom-navigation-item`, 3~5개의 1차 대상 및 현재 상태
04	바닥탄성층	`g-mobile-bottom-sheet`	`g-mobile-sheet-panel/handle/header/footer`, 포커스 제약, Escape, 스크롤 잠금
05	액션 메뉴	`g-mobile-action-sheet`	`g-mobile-action-list/item`, 공유, 삭제 및 상황별 작업
06	아래로 당겨 새로고침	`g-mobile-pull-refresh`	`g-mobile-pull-refresh-indicator/content`, 임계값, 새로고침/완료 API
07	무한로딩	`g-mobile-infinite-load`	IntersectionObserver, 로드 버튼 대체, 로드 중/완료
08	슬라이드 조작	`g-mobile-swipe-actions`	`g-mobile-swipe-actions-track/main/buttons`, LTR/RTL, 버튼 및 이스케이프 폴백
09	슬라이딩 탭	`g-mobile-swipe-tabs`	`g-mobile-swipe-tab`, 가로 스크롤 흡착 및 탭 의미론
10	모바일 분류	`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	모바일 필터링	`g-mobile-filter-sheet`	콘텐츠 필터링, 고정 바닥글, 재설정 및 결과 작업
12	고정구매바	`g-mobile-purchase-bar`	`g-mobile-purchase-main`、`g-mobile-purchase-actions`, 가격, 수량 및 안전지대
13	모바일 검색	`g-mobile-search`	`g-mobile-search-field/icon`, 취소 및 삭제
14	이동 선택기	`g-mobile-picker`	`g-mobile-picker-grid/option`, 단일/다중 선택 및 저장된 선택
15	휠 셀렉터	`g-mobile-wheel-picker`	`g-mobile-wheel-column/option`, 스크롤스냅, 방향키, JSON 출력
16	플로팅 액션 버튼	`g-mobile-fab`	액션, 안전 영역, 하단 바 오프셋을 주로 생성합니다.
17	전체화면 대화상자	`g-mobile-fullscreen-dialog`	긴 형식, 편집 작업, 포커스 관리 및 동적 뷰포트
18	키보드 회피	`g-mobile-keyboard-avoidance`	`--g-keyboard-offset`, 스크롤 패딩 및 가시 영역 형성
19	제스처 프롬프트	`g-mobile-gesture-hint`	`g-mobile-gesture-hint-line`, 최초 사용 및 시스템 제스처 영역
20	오프라인 배너	`g-mobile-offline-banner`	캐시 콘텐츠 프롬프트, 재시도 및 네트워크 복구
21	분할 제어	`g-mobile-segmented-control`	`g-mobile-segmented-item`, 2-5개의 상호 배타적 뷰
22	모바일 콘텐츠 스트리밍	`g-mobile-feed`	`g-mobile-feed-item/main`, 미디어, 본문 및 꼬리 작업
23	카드 캐러셀	`g-mobile-card-carousel`	수평 스크롤 스냅, 픽, 선택적 캐러셀 런타임
24	모바일폼	`g-mobile-form`	`g-mobile-form-actions`, 전체 너비 제출 및 터치 필드
25	모바일 인증	`g-mobile-auth`	`g-mobile-auth-actions`, 로그인/등록/인증코드 및 키보드 환경
26	모바일결제	`g-mobile-checkout`	`g-mobile-checkout-actions/summary`, 주문확인 및 안전영역
27	모바일 미디어 시청	`g-mobile-media-viewer`	`g-mobile-media-viewer-stage/tools`, 이동, 확대/축소 및 전체 화면 도구 모음
28	키보드 툴바	`g-mobile-keyboard-toolbar`	이전 항목, 다음 항목, 완성, 형식 및 입력 방법 상단 가장자리
29	모드 선택	`g-mobile-selection-mode`	`g-mobile-selection-main/actions`, 계산 및 일괄 작업
30	스낵바	`g-mobile-snackbar`	`g-mobile-snackbar-main`, 짧은 피드백, 실행 취소 및 하단 표시줄 오프셋
31	권한 프롬프트	`g-mobile-permission-prompt`	`g-mobile-permission-icon`、`g-mobile-permission-actions`, 위치, 알림, 카메라 및 미디어
32	비어 있음/오류/오프라인 상태	`g-mobile-state`	`g-mobile-state-icon/actions`, 비어 있음/오류/오프라인/성공

선언적 런타임 인터페이스

행동	속성	키 인터페이스
모바일 시트	`data-g-mobile-sheet` / `data-g-mobile-sheet-open`	열기/닫기/토글, 포커스 트랩, 스크롤 잠금, 백드롭, 이스케이프
풀 리프레시	`data-g-pull-refresh`	`gardener:refresh`、`complete()`, 버튼 백업
무한부하	`data-g-infinite-load`	`gardener:loadmore`、`complete({done})`, IntersectionObserver
스와이프 동작	`data-g-swipe-actions`	공개/닫기/토글, LTR/RTL 제스처, 버튼, 이스케이프
휠피커	`data-g-wheel-picker`	스크롤 스냅、클릭/화살표/홈/끝、`gardener:wheelchange`
런타임 재사용	`data-g-tabs`、`data-g-saved-choice`、`data-g-dialog`、`data-g-toast`	태그, 분할/선택, 전체화면 대화상자, 스낵바

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

엔드포인트, 제스처 및 비즈니스 경계

안전 영역 쉘 사용 100svh 추가 100dvh; 기업이 소프트 키보드를 따르기를 원하는 경우 Visual Viewport/호스트 브리지를 통해 업데이트할 수 있습니다. --g-keyboard-offset。
제스처는 효율성만 향상시킵니다. Pull Refresh에는 새로 고침 버튼 경로가 있고, Infinite Load에는 "추가 로드"가 있고, Swipe Actions에는 Toggle이 있고, Wheel Picker에는 키보드 지원이 있습니다.
기본 권한 요청, 네트워크 상태, 데이터 로딩, 결제, 인증 및 미디어 확장은 비즈니스 또는 호스트에 의해 구현됩니다. Gardener는 결과를 위조하지 않고도 안정적인 비전, 상태, 이벤트 및 접근 가능한 인터페이스를 제공합니다.
하단 시트는 짧은 작업에 적합하고, 액션 시트는 작업 목록에 적합하며, 필터 시트는 필터링에 적합합니다. 복잡한 편집에는 전체 화면 대화 상자를 사용하고, 파괴적인 확인에는 여전히 전용 대화 상자를 사용합니다.
기본 흰색 표면, 1px 테두리 및 4px 작은 둥근 모서리; 크고 둥근 모서리와 강한 그림자는 모바일의 기본값이 아닙니다.
32개 모드는 모두 구성 요소 매니페스트 및 동적 구성 요소 디렉터리에 들어갑니다. CSS 소스 전체 API에는 모듈, 선택기, 변수 및 상태도 나열됩니다.

기능 목록32개 모드, 8개 기능 제품군 및 전체 테스트 매트릭스를 모두 등록합니다.독립형 모바일 단말기 예시앱 바, 하단 탐색, 스와이프 탭, 스와이프 작업, 무한 로드, 작업/필터 시트 및 모바일 선택기를 직접 테스트합니다.

데스크탑 전용 구성요소

카테고리 14 기능은 Tauri, Electron, 데스크톱 WebView 및 브라우저의 시뮬레이션된 데스크톱 워크벤치의 재사용률이 높은 32개 모드를 포함합니다. 창 Chrome, 전역 탐색, Dock/작업 공간, 명령 및 입력, 문서 및 파일, 시스템 통합, 수명 주기 업데이트, 복구 및 상태를 안정적인 인터페이스로 분류합니다. AI는 제목 표시줄, IDE 레이아웃 또는 시스템 프롬프트를 임시로 만들 필요가 없습니다.

일반 데스크탑 레이아웃과의 관계:g-desktop-shell、g-titlebar、g-workbench 은 호환성 기반으로 계속됩니다. 이 섹션 g-desktop-workspace 및 31개의 컴패니언 모드는 데스크톱 애플리케이션을 위한 더욱 완전하고 정확한 구성 레이어입니다.

라이브 데스크탑 작업공간

Gardener Studio — 문서 공간

데스크톱 CMS 편집 영역

레이블, 열, Dock, Inspector 및 상태 표시줄은 모두 고밀도, 작고 둥근 모서리 및 전체 키보드 경로를 유지합니다.

↑

새 버전 사용 가능

다운로드되었으며 다시 시작을 기다리고 있습니다.

32개 모드의 완전한 매트릭스

#	패턴 및 루트 클래스	안정적인 구성요소/상태/용도
1	네이티브 제목 표시줄 `g-native-titlebar`	`g-native-titlebar-start`、`g-native-titlebar-title`、`g-native-titlebar-end`
2	창 컨트롤 `g-desktop-window-controls`	`g-desktop-window-button`; 최소화, 최대화/복원, 닫기
3	메뉴바 `g-desktop-menubar`	`g-desktop-menubar-item`;메뉴 항목 및 플랫폼 순서
4	활동 표시줄 `g-desktop-activity-bar`	`g-desktop-activity-item`;현재 모듈, 전역 도구
5	도크 패널 `g-desktop-dock-panel`	`g-desktop-panel-header`、`g-desktop-panel-body`,접힘됨
6	크기 조정 가능한 분할 창 `g-desktop-split-pane`	`g-split-panel`、`g-split-handle`;가로/세로
7	검사관 `g-desktop-inspector-panel`	속성, 스타일, 감사, 상황별 정보
8	상태 표시줄 `g-desktop-status-bar`	`g-desktop-status-group`、`g-desktop-status-item`
9	명령 팔레트 `g-desktop-command-palette`	`g-desktop-command-panel`、`g-desktop-command-input`、`g-desktop-command-results`、`g-desktop-command-item`
10	단축녹화기 `g-shortcut-recorder`	`g-shortcut-recorder-control`、`g-shortcut-recorder-keys`、`g-shortcut-recorder-status`
11	컨텍스트 메뉴 `g-desktop-context-menu`	`g-desktop-menu-item`、`g-desktop-menu-separator`
12	저장되지 않은 탭 `g-desktop-document-tabs`	`g-desktop-document-tab`、`g-desktop-document-tab-close`;활성, 더티, 고정됨
13	드래그 영역 `g-desktop-drag-region`	`g-desktop-no-drag` 버튼, 링크 및 입력 보호
14	창 로딩 `g-window-loading`	`g-window-loading-icon`、`g-window-loading-progress`
15	업데이트 가능 `g-update-available`	버전, 릴리스 노트, 업데이트 연기/다시 시작
16	권한 요청 `g-desktop-permission-request`	`g-desktop-notice-icon`、`g-desktop-notice-main`、`g-desktop-notice-actions`
17	네이티브 파일 선택기 `g-native-file-picker`	`g-native-file-picker-value`; 단일 선택, 다중 선택, 폴더는 입력/호스트에 따라 결정됩니다.
18	트레이 메뉴 쉘 `g-tray-menu`	데스크탑 메뉴 항목을 재사용합니다. 온라인 상태, 창 진입 및 종료
19	다중 창 자리표시자 `g-multi-window-placeholder`	`g-desktop-state-icon`、`g-desktop-state-actions`
20	데스크탑 작업공간 `g-desktop-workspace`	`g-desktop-workspace-main`;제목/활동/메인/검사자/상태 그리드
21	윈도우 스위처 `g-desktop-window-switcher`	`g-desktop-window-switcher-panel`、`g-desktop-window-list`、`g-desktop-window-item`、`g-desktop-window-main`
22	최근 문서 `g-recent-documents`	`g-recent-document`、`g-recent-document-main`、`g-recent-document-path`
23	데스크톱 도구 모음 `g-desktop-toolbar`	`g-desktop-toolbar-group`、`g-desktop-toolbar-separator`
24	하단 패널 `g-desktop-bottom-panel`	터미널, 로그, 질문, 출력 및 백그라운드 작업
25	백그라운드 작업 센터 `g-background-task-center`	`g-background-task`、`g-background-task-main`、`g-background-task-progress`
26	알림 센터 `g-desktop-notification-center`	`g-desktop-notification`、`g-desktop-notification-main`;읽지 않음
27	동기화 상태 `g-sync-status`	`g-sync-status-dot`; 동기화 중, 동기화됨, 오프라인, 오류
28	업데이트 진행 `g-update-progress`	`g-update-progress-header`、`g-update-progress-track`、`g-update-progress-value`
29	충돌 복구 `g-crash-recovery`	문서 복원, 세션 복원, 안전 부팅, 복원 중단
30	단일 인스턴스 알림 `g-single-instance-notice`	기존 창으로 전환, 새 창으로 계속, 취소
31	딥링크 핸들러 `g-deep-link-handler`	소스, 대상, 허용/거부 및 "다시 묻지 않음" 표시
32	대화상자 정보 `g-about-dialog`	`g-about-dialog-icon`; 버전, 라이센스, 업데이트 및 진단 포털

선언적 런타임

행동	속성/트리거	키보드 및 이벤트
단축녹화기	`data-g-shortcut-recorder`、`data-g-shortcut-control`、`data-g-shortcut-output`	Esc 취소, 삭제 삭제, 문제 `gardener:shortcutchange`
데스크탑 탭	`data-g-desktop-tabs`、`data-g-desktop-tab`、`data-g-desktop-tab-close`	화살표/Home/End, Ctrl/⌘+Tab, Ctrl/⌘+W, 닫기용 가운데 키
네이티브 파일 선택기	`data-g-native-file-picker`、`data-g-native-file-trigger`、`data-g-native-file-value`	기본 입력 대체; 방출 `gardener:nativefiles`
윈도우 스위처	`data-g-window-switcher`、`data-g-window-item`	Ctrl/⌘+`, 화살표 키, Enter, Esc
런타임 재사용	`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`	열, 명령, 메뉴, 탐색, Dock, 트레이 및 정보 대화 상자

타우리 / 전자호스트 계약

<!-- 호스트가 화이트리스트 브리지를 제공한 경우에만 어댑터를 로드하세요. -->
<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>

전자사용 contextIsolation 보안 사전 로드를 사용하면 최소화, 최대화/복원 및 닫기와 같은 화이트리스트 방법만 노출됩니다. 노드 통합을 활성화하지 말고 IPC 채널을 페이지에 노출하지 마십시오.
Tauri v2는 애플리케이션에 의해 Window API에 주입됩니다. 권한 기능, 파일 시스템, 업데이터, 딥링크, 트레이, 멀티 윈도우는 애플리케이션 기능에 따라 구성되며 CSS에 의해 자동으로 적용되지 않습니다.
app-region: drag 그리고 -webkit-app-region: drag 드래그 가능한 영역만 담당합니다. 버튼, 링크, 입력 및 메뉴는 다음 위치에 배치되어야 합니다. g-desktop-no-drag 또는 내장 선택기로 보호됩니다.
플랫폼 사용 가능 data-g-os="macos" 또는 data-g-platform="macos" 신호등 창 제어를 전환합니다. Windows/Linux는 올바른 직사각형 컨트롤을 유지합니다.
업데이트, 권한, 파일 선택, 트레이, 다중 창, 딥 체인, 단일 인스턴스 및 충돌 복구는 모두 비즈니스 또는 호스트가 실제 결과를 반환해야 합니다. 구성 요소는 예측 가능한 프레젠테이션, 이벤트, 포커스 및 상태 구조만 제공합니다.

응답성, 접근성 및 인쇄

g-desktop-workspace 빌드 컨테이너 쿼리: 56rem 미만은 검사기를 숨기고, 40rem 미만은 Dock을 숨기고 제목 표시줄을 단순화합니다. 토글을 통해 비즈니스에서는 독립 패널을 계속 표시할 수 있습니다.
문서 태그, 명령 패널, 메뉴, 열, 단축키 기록 및 창 전환기에는 모두 키보드 경로가 있습니다. 더티 태그는 닫기 전에 취소 가능한 메시지를 표시합니다. beforetabclose。
논리적 방향 속성이 RTL을 재정의합니다. 감소된 동작은 동기화 펄스를 중지합니다. 강제 색상은 현재 활동/탭/명령에 대한 명확한 개요를 제공합니다.
인쇄할 때 창 Chrome, 활동 표시줄, 상태 표시줄, 도구 모음, 하단 패널 및 모든 플로팅 레이어를 숨기고 기본 콘텐츠, Dock 및 Inspector를 확장하여 잘림을 방지합니다.
기본 흰색 표면, 1px 테두리 및 4px 작은 둥근 모서리. 그림자는 명령 패널, 창 전환기 및 메뉴와 같은 실제 오버레이에만 사용됩니다.

기능 목록32개 모드, 8개 기능군 및 테스트 매트릭스를 모두 등록합니다.독립형 데스크탑 예시창, 작업 공간, 탭, 명령, 바로 가기, 파일, 트레이, 업데이트, 알림 및 복원 상태를 다룹니다.

AI 제품 및 지능형 인터랙티브 구성요소

카테고리 15 기능은 AI 보조자, Copilot, 에이전트 워크벤치, 생성 도구, 지식 기반 Q&A, 다중 모드 제품 및 AI 데스크톱 클라이언트의 전체 작업 체인을 포괄합니다. 32가지 모드는 세션 입력부터 프롬프트, 추론, 스트리밍 출력, 도구 승인, 다중 에이전트, 소스 및 아티팩트, 컨텍스트 및 비용, 음성, 권한, 개인 정보 보호, 보안 및 피드백 평가까지 확장되며 AI 제품 오류를 "채팅 버블 + 입력 상자"로 줄이지 않습니다.

AI 페이지 생성 프로토콜과의 차이점:이 섹션은 최종 사용자를 위한 AI 제품 UI에 대한 것입니다. 다음 텍스트 AI 페이지 생성 프로토콜 은 발전기에서 Gardener를 사용하기 위한 제약사항입니다. 전자는 인터페이스 구성 요소를 제공하고 후자는 기능, 레시피, 구성 요소 및 도구 클래스가 선택되는 순서를 지정합니다.

실시간 AI 작업공간

컨텍스트 38%

다중 테넌트 기업 포털을 생성하세요.

지

Gardener Agent작업 중

엔터프라이즈 포털 레시피가 일치하여 권한, CMS 및 대시보드 구성 요소를 확인합니다.

테넌트, 워크플로, 대시보드, 미디어 라이브러리와 일치합니다.

쓰기 페이지 템플릿에 대한 승인이 필요합니다.

현재 프로젝트의 생성된 디렉터리만 수정합니다.

범위: 생성/** · 작업: 생성/업데이트

32개 모드의 완전한 매트릭스

#	패턴 및 루트 클래스	안정적인 구성요소/상태/용도
1	AI 작업공간 `g-ai-shell`	`g-ai-sidebar`、`g-ai-sidebar-header`、`g-ai-main`、`g-ai-header`
2	대화 목록 `g-conversation-list`	`g-conversation-item`、`g-conversation-title`;기록, 고정, 그룹화 및 현재 세션
3	채팅 스레드 `g-chat`	`g-chat-list`、`g-ai-empty-chat`; 비어 있음, 로드 중, 스트리밍 중, 오류
4	AI 메시지 `g-message`	`g-message-avatar`、`g-message-meta`、`g-message-body`、`g-message-actions`;사용자/보조자/시스템
5	프롬프트 작성기 `g-composer`	`g-composer-input`、`g-composer-toolbar`、`g-composer-status`; 보내려면 Enter를 누르고 줄 바꿈하려면 Shift+Enter를 누른 다음 중지하세요.
6	부착 `g-attachment`	`g-attachment-list`、`g-attachment-preview`、`g-attachment-name`、`g-attachment-meta`
7	프롬프트 스타터 `g-prompt-starter`	`g-prompt-starter-header`、`g-prompt-suggestions`、`g-prompt-suggestion`
8	프롬프트 라이브러리 `g-prompt-library`	`g-prompt-card`;검색, 카테고리, 컬렉션, 매개변수화된 템플릿
9	멘션/슬래시 메뉴 `g-ai-command-menu`	`g-ai-command-group`、`g-ai-command-item`、`g-mention`、`g-slash-command`
10	모델 선택기 `g-model-selector`	`g-model-selector-trigger`、`g-model-selector-menu`、`g-model-option`
11	생각하다 `g-thinking`	`g-thinking-trigger`、`g-thinking-content`; 축소, 확장, 스트리밍
12	스트리밍 응답 `g-streaming-response`	`g-streaming-response-header`、`g-streaming-response-body`、`g-streaming-response-actions`、`g-stream-cursor`
13	공구 호출 `g-tool-call`	`g-tool-call-header`、`g-tool-call-status`、`g-tool-call-body`、`g-tool-call-progress`
14	도구 승인 `g-approval`	`g-approval-title`、`g-approval-scope`、`g-approval-actions`;승인됨/거부됨/취소됨/만료됨
15	에이전트 상태 `g-agent-status`	유휴, 작업 중, 대기 중, 차단됨, 완료, 실패
16	에이전트 계획 `g-plan`	`g-plan-header`、`g-plan-list`、`g-plan-item`
17	멀티 에이전트 보드 `g-agent-board`	`g-agent-card`、`g-agent-card-header`、`g-agent-card-task`
18	에이전트 핸드오프 `g-agent-handoff`	`g-agent-handoff-main`、`g-agent-handoff-actions`;컨텍스트 핸드오버 및 수동 인수
19	출처/인용 `g-sources`	`g-source-list`、`g-source`、`g-citation`;인용 위치 및 신뢰성
20	아티팩트 작업공간 `g-artifact-layout`	대화상자 및 미리보기/코드/문서 이중 영역 레이아웃
21	아티팩트 패널 `g-artifact-panel`	`g-artifact-toolbar`、`g-artifact-tabs`、`g-artifact-content`、`g-artifact-status`
22	AI 파일 트리 `g-file-tree`	`g-file-tree-item`;계층 구조, 확장, 선택 및 키보드 탐색
23	버전 기록 `g-version-list`	`g-version`;생성자, 시간, 현재 버전, 비교 및 복원
24	제너레이션 갤러리 `g-generation-grid`	`g-generation-card`;여러 결과, 변형, 선택 및 계속 편집
25	세대 자리 표시자 `g-generation-placeholder`	대기 중, 생성 중, 부분, 완료, 실패
26	컨텍스트/메모리 `g-ai-context-manager`	`g-ai-memory-list`、`g-ai-memory-item`、`g-ai-context-sources`、`g-context-meter`
27	비용 / 요율 제한 `g-ai-usage-panel`	`g-ai-usage-grid`、`g-ai-usage-metric`、`g-ai-limit-status`、`g-cost`、`g-limit`
28	음성 세션 `g-voice-state`	`g-voice-bar`、`g-voice-state-label`; 듣기, 처리하기, 말하기, 오류
29	권한 범위 `g-permission-scope`	`g-permission-scope-header`、`g-permission-scope-list`;자원, 운영, 기한, 소스
30	개인정보 보호정책 `g-privacy-notice`	교육, 보유, 국경 간, 기업 정책 및 민감한 정보 설명
31	안전/정책 공지사항 `g-ai-safety-notice`	`g-ai-safety-icon`、`g-ai-safety-main`、`g-ai-safety-actions`
32	피드백/평가 `g-ai-feedback`	`g-ai-feedback-question`、`g-ai-feedback-options`、`g-ai-feedback-option`、`g-ai-feedback-detail`

전용 런타임과 재사용 런타임

행동	속성	키 인터페이스
AI작곡가	`data-g-ai-composer`、`data-g-composer-input`、`data-g-composer-send`、`data-g-composer-stop`	자동 높이, Enter/Shift+Enter,`promptsubmit`、`promptstop`, 스트리밍 상태
프롬프트 채우기	`data-g-prompt-fill`、`data-g-prompt-target`、`data-g-prompt-value`	지정된 Composer에 스타터/라이브러리 템플릿을 채우고 입력을 발행합니다.
AI 승인	`data-g-ai-approval`、`data-g-approval-choice`	이벤트 전 취소 가능, 승인/거부/취소, 재설정 API
AI 피드백	`data-g-ai-feedback`、`data-g-feedback-value`、`data-g-feedback-detail`	평가이유, 추가설명,`feedbackchange`、`feedbacksubmit`
런타임 재사용	`data-g-dropdown`、`data-g-accordion`、`data-g-roving-nav`、`data-g-tabs`、`data-g-tree`	모델선택,사고/도구,명령메뉴,아티팩트태그,파일트리

<form class="g-composer" data-g-ai-composer>
  <textarea class="g-composer-input"
            data-g-composer-input></textarea>
  <button data-g-composer-stop hidden>중지</button>
  <button data-g-composer-send>보내기</button>
  <span data-g-composer-status></span>
</form>

지위, 신뢰 및 사업 경계

스트리밍은 중지, 일시 중지됨/중지됨/완료/오류 상태를 제공해야 합니다. 커서 애니메이션은 향상되기만 하고 모션 감소는 애니메이션을 끕니다.
Thinking은 기본적으로 읽을 수 있는 추론 요약 또는 진행 상황을 표시하며 모델 비공개 추론 체인을 공개할 필요가 없습니다. 제품은 "요약", "도구 로그" 및 "최종 답변"을 명확하게 구분해야 합니다.
도구 호출과 도구 승인의 분리: 호출 상태는 권한 확인을 대체할 수 없습니다. 파괴적인 외부 통신, 결제, 민감한 데이터 및 지속적인 권한은 비즈니스 실행에 의해 실제로 승인되어야 합니다.
출처/인용은 인용 관계를 나타내며 진위 여부를 자동으로 증명하지 않습니다. 비즈니스는 소스 URL, 조각, 시간 및 접근성을 유지해야 하며, 생성된 콘텐츠는 여전히 사실 확인이 필요합니다.
컨텍스트/메모리는 소스 보기, 삭제 또는 비활성화를 허용해야 합니다. 비용/요율 제한은 백엔드의 실제 측정을 사용해야 하며 프런트엔드에서 청구서인 척 추정할 수 없습니다.
안전 공지는 서버 측 정책을 대체하지 않습니다. 개인정보 보호정책은 법적 동의를 대체하지 않습니다. UI에는 차단 이유, 항소 가능 여부, 데이터 보관 및 사용 방법이 표시되어야 합니다.
모든 모드에서 흰색 표면, 1px 테두리 및 4px 작은 둥근 모서리를 사용합니다. 아티팩트, 사이드바 및 이중 열 모드를 960/704/512px 컨테이너 너비로 축소하고 RTL, 강제 색상 및 인쇄를 재정의합니다.

기능 목록32개 모드, 8개 능력 계열 및 전체 테스트 매트릭스를 모두 등록합니다.독립형 AI 예시대화, 작성기, 프롬프트, 사고, 도구 승인, 에이전트, 아티팩트, 빌드, 컨텍스트, 요금, 권한, 보안, 음성 및 피드백을 다룹니다.

완전한 페이지 및 산업 솔루션

카테고리 16은 Gardener의 가장 높은 구성 계층입니다. 처음 15개 카테고리는 레이아웃, 구성 요소, 비즈니스 체인 및 최종 특정 상호 작용을 제공하며 이 카테고리는 이를 직접 선택할 수 있는 전체 페이지 계약 32개로 통합합니다. 개인 및 기업, 공공 웹사이트 및 백엔드, 일반 기업 및 수직 산업을 포괄하며 브라우저, 모바일 웹페이지, PWA, Tauri 및 Electron WebView에도 적합합니다. AI는 먼저 여기에서 페이지 루트 클래스와 해당 레시피를 선택한 다음 전체 페이지 CSS를 처음부터 구성하는 대신 구성 요소를 채워야 합니다.

32페이지 전체총 52가지 레시피8가족컨테이너 쿼리RTL인쇄

실시간 대시보드 전체 페이지 스켈레톤

기업개요

멀티 테넌트 콘텐츠 플랫폼

페이지 수준 헤더, 표시기, 기본 콘텐츠, 보조 영역 및 모바일 접기는 안정적인 계약을 갖습니다.

사이트28,640↑ 12.4%

페이지486k42개 주제에 걸쳐

검토138처리 필요

32개의 완전한 페이지 행렬

#	페이지 루트 클래스	주요성분 및 용도
1	제품 랜딩 `g-product-landing`	`g-landing-hero`, 복사, 시각적, 증명, 섹션; SaaS, 앱, AI 제품 및 신제품 출시
2	기업홈 `g-corporate-home`	`g-corporate-hero`, 신뢰, 솔루션 그리드; 그룹, 브랜드, 기관 및 기업 포털
3	개인홈 `g-personal-home`	`g-personal-intro`, 링크, 타임라인; 개인 브랜드, 이력서, 전문가 홈페이지
4	포트폴리오 `g-portfolio-page`	`g-portfolio-hero`, 특집, 프로젝트 그리드; 디자인, 사진, 개발 및 사례 라이브러리
5	블로그 색인 `g-blog-index`	`g-blog-index-header`, 카테고리, 입력 그리드; 블로그, 뉴스, 기업정보
6	기사 `g-article-page`	`g-article-page-layout`, 본문, 목차, 메타; 긴 기사, 뉴스, 튜토리얼 및 인쇄
7	문서포털 `g-docs-portal`	`g-docs-layout`, 사이드바, 메인, 목차; 제품, API 및 내부 문서
8	도움말 센터 `g-help-center-page`	`g-help-center-hero`, 검색, 레이아웃, 옆으로; FAQ 및 고객 셀프 지원
9	검색결과 `g-search-results-page`	`g-search-results-layout`, 필터, 목록, 결과; 사이트, 문서, 제품 및 리소스 내에서 검색
10	연락처 `g-contact-page`	`g-contact-layout`, 세부사항, 양식; 연락, 영업 상담 및 리드 수집
11	가격 `g-pricing-page`	`g-pricing-page-header`, 그리드, 카드; SaaS, 멤버십 및 서비스 패키지
12	대시보드 `g-dashboard-overview`	`g-dashboard-metrics`, 레이아웃, 패널; 운영 개요, 조종석 및 모니터링
13	관리자 목록 `g-admin-list-page`	`g-admin-list-header`, 필터, 콘텐츠, 도구 모음; 백그라운드 리소스 관리
14	기록상세 `g-record-detail-page`	`g-record-detail-layout`, 메인, 옆, 섹션; 고객, 주문, 콘텐츠 및 자산 세부정보
15	설정 `g-settings-center`	`g-settings-center-layout`, 탐색, 콘텐츠, 섹션; 제품, 조직 및 데스크탑 기본 설정
16	사용자 센터 `g-user-center`	`g-user-center-layout`, 탐색, 콘텐츠; 정보, 보안, 주문 및 회원권
17	알림 `g-notification-center-page`	`g-notification-groups`, 그룹, 행; 알림, 미리 알림 및 업데이트
18	온보딩 `g-onboarding-flow`	`g-onboarding-aside`, 메인, 단계, 진행; 초기화, 정산 및 가져오기
19	CRM `g-crm-workspace`	`g-crm-layout`, 탐색, 기본, 검사기, 파이프라인; 고객, 비즈니스 기회 및 판매 후속 조치
20	프로젝트 작업공간 `g-project-workspace`	`g-project-layout`, 보드, 기둥, 검사관; 프로젝트, 과제 및 R&D 협업
21	지원센터 `g-support-center`	`g-support-layout`, 스레드, 메시지, 답글; 고객 서비스, 작업 주문 및 애프터 서비스
22	승인센터 `g-approval-center`	`g-approval-layout`, 대기열, 열, 검사기; 프로세스, 비용, 내용 및 권한 승인
23	기술 자료 `g-knowledge-base`	`g-knowledge-hero`, 검색, 레이아웃; 엔터프라이즈 위키, 시스템 라이브러리 및 내부 도움말
24	학습포털 `g-learning-portal`	`g-learning-layout`, 코스 그리드, 카드; 과정, 훈련 및 학교 포털
25	이벤트 포털 `g-event-portal`	`g-event-hero`, 그리드, 카드; 컨퍼런스, 전시회, 커뮤니티 및 라이브 방송 이벤트
26	예약포털 `g-booking-portal`	`g-booking-layout`, 결과, 요약; 의료, 장소, 호텔 및 서비스 예약
27	헬스케어 `g-healthcare-portal`	`g-healthcare-layout`, 요약, 기록, 업계 경고; 환자 및 의료 서비스
28	금융 `g-finance-portal`	`g-finance-layout`, 요약, 계정, 업계 경고; 은행, 부, 기업 금융
29	공공 서비스 `g-public-service-portal`	`g-public-service-layout`, 요약, 항목; 대관업무, 신청진행 및 편의서비스
30	마켓플레이스 `g-marketplace-page`	`g-marketplace-hero`, 필터, 그리드, 카드; 애플리케이션, 서비스, 인재 및 플러그인 시장
31	커뮤니티 `g-community-page`	`g-community-hero`, 피드, 사이드바, 게시물; 커뮤니티, 포럼 및 사용자 콘텐츠
32	상태 센터 `g-status-center-page`	`g-status-overall`, 서비스, 역사, 사건; 상태, 결함, 유지 관리 및 SLA

공개 전체페이지 부분

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 그리고 g-solution-empty 는 32가지 유형의 페이지에 걸쳐 재사용될 수 있어 산업 변화 시 AI의 기본 구문이 변경되지 않도록 보장합니다.

선정, 구성 및 사업경계

다음으로 시작 solution.* 레시피 전체 페이지 유형을 결정한 다음 플랫폼, 주제 축 및 밀도를 선택합니다.
루트 클래스는 페이지 수준 응답 및 영역 관계를 담당합니다. 양식, 데이터, 인증, 비즈니스, 모바일, 데스크톱 및 AI 구성 요소는 여전히 처음 15개 클래스로 채워집니다.
마케팅, 개인 및 콘텐츠 페이지는 자연 문서 스크롤을 사용합니다. 대시보드 및 워크벤치는 고밀도 다중 열을 허용합니다. 의료, 재무 및 정부는 UI 계약일 뿐이며 규정, 인증, 개인 정보 보호, 감사 및 백엔드 비즈니스 규칙을 대체하지 않습니다.
모든 모드는 논리적 방향, 작고 둥근 모서리, 흰색 표면을 사용합니다. 960px 및 704px 컨테이너 너비로 축소되며 RTL, 모션 감소, 강제 색상 및 인쇄를 지원합니다.
CRM, 프로젝트, 대시보드, 설정 및 알림 루트 페이지를 Tauri/Electron에 배치할 수 있습니다. g-desktop-workspace;실제 창, 파일, 업데이트 및 권한은 여전히 데스크탑 어댑터의 책임입니다.

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

기능 목록32개의 루트 모드와 8개의 능력 계열을 모두 등록합니다.레시피 목록각 페이지의 터미널, 위젯, 런타임 및 목적을 제공합니다.독립형 예시전환 가능한 공개 웹사이트, 대시보드, CRM, 산업 포털 및 상태 센터 미리보기.

공개 API 및 스키마

부터 0.3.0 시작,gardener.public-api.json 은 CSS 레이어, 패키지 항목, 테마 속성, JavaScript 내보내기, 동작, 이벤트, 데스크톱 어댑터 및 호환성 필드를 완전히 등록하는 공개 이름 지정 및 프로그래밍 인터페이스의 표준 목록입니다.

공개 API 매니페스트를 읽는 중...

통일된 네이밍

범위	사양	예시
CSS 클래스	`g-` + 케밥케이스	`g-command-palette`
CSS 변수	`--g-` + 케밥케이스	`--g-color-primary`
행동 속성	`data-g-{behavior}`	`data-g-dialog`
이벤트	`gardener:{event}`	`gardener:beforeopen`
메타데이터 상호작용	`behaviors: string[]`	`["dialog"]`
데스크탑 브리징	`adapters: string[]`	`["tauri","electron"]`
플랫폼	`platforms: string[]`	`["web","mobile"]`
레시피 ID	점으로 구분된 케밥케이스	`solution.admin-list`

전체 스키마

11개 스키마 세트 모두 JSON 스키마 2020-12를 사용하며 알 수 없는 필드는 거부됩니다.구성품、레시피、기능、유틸리티、매니페스트、공개 API、빌드、커스텀 빌드、성과예산、실적 보고서、호환성. 모든 객체 스키마는 알 수 없는 필드를 끄거나 동적 값 유형을 명시적으로 선언합니다.npm run test:schema Ajv 2020-12를 사용하여 10개의 릴리스/구성 문서, 알 수 없는 루트 필드, 10가지 유형의 알 수 없는 중첩 필드, 10가지 유형의 누락된 중첩 필수 필드, 교차 스키마 참조, JavaScript 식별자, SHA-256 형식, 기준 회귀 상태 및 레거시 구성 요소 스키마 호환 별칭을 다루는 48개의 표준 검증 사용 사례를 실행했습니다.npm run contracts 15개 세트의 부정적인 계약 테스트를 계속 수행하고 교차 매니페스트 참조, 소스 코드 및 빌드 아티팩트 일관성, 선택기, 실제 구성 요소 속성, SHA-256/SRI 무결성, 재현 가능한 빌드 명령, 모듈 유형/매개변수/서명, 인스턴스 멤버, 데이터 속성, 이벤트 페이로드, 어댑터, 유형 및 릴리스 스크립트, 호환성 기준, 빌드 아카이브, 42개의 절대 및 상대 예산 아티팩트, 예산 결과, 버전 및 전체 패키지를 확인합니다. 수출.

모듈 9개 모두 내보내기

모듈 인터페이스 읽기...

66개 동작 및 인스턴스 멤버 모두

각 항목에는 선언적 초기화 속성이 나열되어 있으며, getInstance() 호출이 허용된 개체의 모든 구성원을 반환합니다.

행동계약 읽기...

전체 75개 이벤트 및 페이로드

각 항목 전체를 나열합니다. CustomEvent.detail ; 이벤트가 발생하고 취소될 수 있습니다. before 초반 7개 이벤트는 무난합니다 preventDefault() 후속 작업을 방지하는 프로세스 가드입니다.

이벤트 계약을 읽는 중...

모든 런타임 데이터 속성

작성자가 사용할 수 있는 309개 속성은 위 동작 계약의 동작 항목 66개, 구조/동작 선택기 166개, 추가 구성 속성 77개로 나뉩니다. 런타임에 의해 유지되는 27개의 상태 속성도 있습니다. 상태 속성은 초기 구성과 동시에 읽을 수 있지만 작성자가 사용할 수 있는 처음 세 세트는 상호 배타적이며 이중으로 계산되지 않습니다.

구조 및 동작 선택기

선택기 속성을 읽는 중...

추가 구성 속성

구성 속성을 읽는 중...

런타임 유지관리 상태

상태 속성을 읽는 중...

Tauri/Electron 어댑터 계약

어댑터 계약을 읽는 중...

호환성 규칙

매니페스트의 사양 필드는 다음과 같습니다. behaviors. 오래된 필드 runtimeBehaviors 전반에 걸쳐 0.x 읽기 전용 호환 별칭으로 예약된 버전 행입니다. 늙은 metadata/schema.json 계속해서 새 구성 요소 스키마를 가리킵니다. 1.0.0은 공개 계약을 Stable로 승격하고 기계가 읽을 수 있는 호환성 기준을 사용하여 0.9.0의 모든 공개 항목, 레이어, 테마, 런타임, 구성 요소 및 레시피를 저장합니다. 1.x는 호환되는 항목을 삭제하기 전에 변경 기록 및 마이그레이션 지침을 제공해야 하며 최소 두 개의 부 버전에 대한 지원 중단 기간을 거쳐야 합니다. 실제 제거는 새로운 주요 버전에서만 발생할 수 있습니다.

부품 카탈로그

구성요소 목록 gardener.manifest.json에는 카테고리, 유형, 상태, 선택기, 변형, 위젯, 기능, 플랫폼, 동작, 어댑터 및 접근성 계약이 포함되어 있습니다. 아래의 동적은 선별된 목록이 아닌 모든 항목과 모든 메타데이터를 표시합니다.

구성요소 목록을 읽는 중...

구성요소 상태 요구사항

새 구성 요소는 기본값, 마우스 오버, 초점 표시, 활성, 비활성화, 읽기 전용, 로드 중, 비어 있음, 오류 및 성공에 대해 검토되어야 합니다. 모든 구성 요소가 모든 상태를 표시하는 것은 아니지만 "해당 없음" 또는 "포함" 여부가 명확해야 합니다.

JavaScript 런타임

런타임 프레임워크 독립적, 통과됨 data-g-* 자동 초기화. MutationObserver는 새로운 노드와 추가된 동작 속성을 동시에 처리하며 SPA, CMS 캔버스 및 AI 스트리밍에 적합하여 DOM을 생성합니다.

런타임 매니페스트를 읽는 중...

선언적 대화상자

<button data-g-dialog-open="confirm">열기</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">동작 확인</h2>
    <button data-g-close>취소</button>
  </section>
</div>

프로그래밍 API

import Gardener from "@gardener/css";

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

Gardener.toast({
  title: "성공적으로 저장되었습니다",
  message: "페이지가 게시되었습니다",
  tone: "success"
});

API	설명
`init(root)`	루트 노드 자체와 그 하위 항목의 모든 동작을 초기화합니다.
`destroy(root)`	리스너, 타이머 및 인스턴스 참조를 해제합니다.
`register(name, factory)`	프로젝트 사용자 정의 동작을 등록합니다.
`getInstance(element, name)`	단일 또는 지정된 동작 인스턴스를 가져옵니다.
`emit(element, name, detail)`	취소 가능한 Gardener 이벤트를 비활성화합니다.
`toast(options)`	상태 또는 경고 토스트를 만듭니다.
`behaviors`	현재 등록된 행위명을 읽어옵니다.

이벤트

gardener:init、gardener:beforeopen、gardener:open、gardener:beforeclose、gardener:close、gardener:change、gardener:dismiss. 이벤트가 전달되기 전 preventDefault() 취소하세요.

런타임 시 액세스 제어 테스트(0.4.0부터)

npm run test:runtime Node.js 내장 테스트 실행기와 Happy DOM을 사용하여 공개 목록의 66개 동작 모두에 대해 실제 인스턴스 멤버를 양방향으로 비교하고 초기화, 멱등성, 파괴 및 재초기화를 확인합니다. MutationObserver의 동적 노드, 동적 속성, 하위 트리 제거, 범위 파괴, 다중 동작 공존, 전역 파괴 및 초기화 이벤트 버블링을 다루고 있습니다.

런타임 동작이 추가되거나 이름이 바뀌면 공개 API, 샘플/보조 고정 장치 및 동작별 테스트를 동기화해야 합니다. 그렇지 않으면 고정 장치, 인스턴스 또는 멤버 누락으로 인해 테스트가 실패합니다.

페이지 레시피

전체 레시피 JSON 고주파수 페이지 루트 클래스, 필요한 모든 구성요소, 적용 가능한 플랫폼, 동작, 데스크탑 어댑터 및 사용법을 정의합니다. 스크린샷 템플릿이 아닌, 테마로 변경이 가능하고 반응성이 뛰어나며 지속적으로 결합될 수 있는 안정적인 구조입니다. 다음 확장은 각 레시피의 모든 필드를 유지합니다.

레시피 목록을 읽는 중...

AI와 템플릿 시스템이 먼저 일치해야 합니다. 레시피.id, 다시 확인해보세요 플랫폼, 드디어 사용 부품 은 완전한 구조를 형성합니다. 하나의 유사한 구성 요소로 전체 페이지 레시피를 전달하지 마십시오.

AI 페이지 생성 프로토콜

Gardener는 AI에 대한 5개 레이어의 진실 소스를 제공합니다. 공개 API 목록은 "무엇이 안정적인 이름과 항목을 사용할 수 있는지"에 답하고, 기능 목록은 "업계의 일반 기능이 구현되는지 여부"에 답하고, 구성 요소 목록은 "무엇이 있습니까?"에 답하고, 도구 클래스 목록은 "정확한 클래스 이름은 무엇입니까"에 답하고, 레시피 목록은 "복잡한 페이지를 시작하는 방법"에 답합니다.

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

제약조건 생성

먼저 확인해보세요 gardener.capabilities.json, 요구사항에 상응하는 산업 역량이 달성되었음을 확인한다.
매니페스트에 존재하지 않는 정보를 작성하는 것을 금지합니다. g-* 클래스.
레시피가 있는 경우 재사용률이 높은 페이지가 처음부터 정리되지 않습니다.
의미 구성 요소 클래스의 사용을 우선시합니다. 도구 클래스는 지역적 차이만 처리합니다.
대화형 구성 요소는 등록된 런타임과 지정된 ARIA 구조를 사용해야 합니다.
출력하기 전에 엔드포인트, 키보드, 포커스, 상태, RTL, 인쇄 및 고대비 환경을 확인하십시오.
차이가 있는 경우 이를 프레임워크 기능 요구사항으로 등록하고 임시 CSS를 시스템 인터페이스에 혼합하지 마십시오.

Tauri/Electron

.g-desktop-shell 편집자, AI 도구 및 슈퍼 CMS에 적합한 고정 뷰포트 레이아웃을 제공합니다. 패스 data-g-platform 그리고 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>

보안 브리징

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

// preload 화이트리스트 작업만 노출
contextBridge.exposeInMainWorld("gardenerDesktop", {
  windowAction: action => ipcRenderer.send("gardener:window-action", action)
});

렌더러에서 노드 통합을 활성화하지 말고 IPC를 페이지에 노출하지 마십시오. 어댑터는 화이트리스트 최소화, 최대화, 닫기 및 끌기 작업만 허용합니다.

주문형 빌드, 유형, 버전 간 호환성 및 릴리스 액세스

1.0.0 5개의 플랫폼, 28개의 구성 요소 패키지, 공식 압축 및 성능 예산을 이전 버전의 측정된 기준으로 롤업하고 공개 계약을 Stable로 업그레이드하여 유형, 버전 간 호환성 및 실제 npm 릴리스 패키지 액세스를 계속 유지합니다.gardener.builds.json모든 42개 프로덕션 아티팩트에 대해 플랫폼 프로필 5개, 구성 요소 패키지 28개, 하나 이상의 실제 소유 패키지에 대한 구성 요소 매핑 506개, 선택기 서명, 브라우저 대상, 빌더 매개변수 및 SHA-256/SRI를 모두 등록했습니다.gardener.performance.json각 공식 빌드의 raw, gzip, Brotli, 압축 비율 및 npm 패키지 볼륨 결과를 저장합니다.

TypeScript는 버전 간 호환됩니다.

빌드는 공개 API에서 자동으로 생성됩니다. gardener.d.ts、gardener.tauri.d.ts 그리고 gardener.electron.d.ts. 66개의 행동과 75개의 이벤트가 완전한 리터럴 결합 유형을 형성합니다.npm run test:types TypeScript 엄격 모드를 사용하여 기본 및 명명된 내보내기, 동작 팩토리, 알림, 인스턴스 쿼리 및 두 가지 유형의 데스크톱 브리지를 다루는 실제 소비자를 컴파일합니다.

gardener.compatibility.json 47개의 패키지 항목, CSS 레이어, 테마, 런타임, 데이터 속성, 어댑터, 506개의 구성 요소 및 52개의 레시피를 모두 포함하여 0.9.0에서 상속된 1,145개의 계약이 강화되었습니다.npm run verify:compatibility 마이그레이션 경로 없이 후속 1.x 추가를 허용하고 삭제를 금지합니다. 1.0.0 안정 컷오프 지점에서는 기존 항목도 역으로 검사되어 누락되었는지 확인합니다. 더 이상 사용되지 않는 항목은 두 개 이상의 부 버전에 남아 있으며 새 주요 버전에서만 제거할 수 있습니다. 닫힌 구조는 다음과 같이 구성됩니다. 호환성 스키마 제약.

패키지는 Node.js >=18.18, Chrome/Edge/Firefox 100+, Safari/iOS 15.4+ 및 ESM을 명시적으로 지원합니다. 메인 포털 및 데스크탑 어댑터는 조건을 제공합니다 types 내보내기. 런타임 자동 초기화는 다음과 같이 표시됩니다. sideEffects패키저에 의한 실수로 삭제되는 것을 방지합니다.npm run verify:package 실제 npm 패키지 화이트리스트, 각 내보내기 대상, 유형 파일, 개발 디렉터리 누출 및 Publint를 확인합니다.prepublishOnly 시행 완료 release:verify, 공개 패키지 및 npm 출처를 활성화합니다.

플랫폼 파일 5개

파일	패키지 항목	전용레이어	동작환경
웹	`./platform/web.css`	모바일/데스크톱 특정 조합을 제외한 일반 구성요소	PC와 반응형 웹페이지
모바일	`./platform/mobile.css`	유니버설 컴포넌트 + 모바일/모바일-컴포지션	모바일 웹, PWA, 하이브리드 WebView
데스크탑	`./platform/desktop.css`	공통컴포넌트 + 데스크탑 / 데스크탑-구성	데스크톱 브라우저 및 애플리케이션 셸
타우리	`./platform/tauri.css`	독립적인 경량 항목 상속 데스크탑 CSS + Tauri 어댑터	Tauri의 v2
전자	`./platform/electron.css`	독립적인 경량 입장 상속 탁상용 CSS + Electron 안전 교량 접합기	Electron 렌더링

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

디렉토리별 가독성 있는 CSS 동시 생성, 형식 .min.css, 외부 소스 맵 및 폐쇄형 빌드 매니페스트 Tauri/Electron도 해당 JavaScript 어댑터를 복사합니다. 공식 플랫폼 패키지 입구는 다음과 같이 통합됩니다. .css 종료하고 실제 설치 패키지의 CSS 패키징 테스트를 통해 중첩된 상속이 완전히 확장될 수 있는지 확인합니다.

28개의 안정적인 구성 요소 패키지

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 위의 모든 공식 압축 패키지 내보내기를 표준화하고,./component/* 호환 가능한 별칭으로 예약되어 있습니다. 구성 요소 이름으로 빌드하는 경우 빌더는 클래스 선택기에 따라 달라지며 data-g-* 속성에 대한 실제 소스 코드 적중은 개별 선택기를 자르는 대신 506개의 구성 요소를 하나 이상의 완전한 소속 패키지로 확인하므로 의사 클래스, 상태, 애니메이션, 하위 부분, 컨테이너 쿼리 및 종속성 규칙이 손실되지 않습니다.

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

매개변수에는 다음이 포함됩니다. --platform、--components、--packs、--utilities / --no-utilities 그리고 --out. 알 수 없는 플랫폼, 패키지 또는 구성 요소가 즉시 실패합니다. 출력 목록은 다음과 같이 제공됩니다. 사용자 정의 빌드 스키마 확인.

각 사용자 정의 빌드 매니페스트는 읽기 가능한 CSS, 압축 CSS, 소스 맵 및 패키지와 함께 복사된 Tauri/Electron 어댑터에 대한 SHA-256 및 표준 SRI도 생성합니다. 수신자는 빌드 시스템에 의존하지 않고도 전달이 완료되었고 대체되지 않았음을 파일별로 확인할 수 있습니다.

바이트 수준의 재현 가능한 빌드

npm run verify:reproducible 은 현재 공식 출력을 기록하고 전체 빌드를 다시 실행한 다음 CSS, JavaScript, 소스 맵, 메타데이터 및 gardener.builds.json 에 대한 파일별 SHA-256. 출력 매니페스트 또는 파일 콘텐츠의 비결정적 차이는 실패합니다. 성과 보고서는 실행 시간을 포함하므로 바이트 비교에 참여하지 않지만 수치 계약은 예산 명령에 의해 독립적으로 검토됩니다.

공식적인 압축 및 성과 예산

정식 CSS 및 JavaScript는 일반 교체를 사용하지 않고 구문 수준 압축을 위해 esbuild를 사용합니다. 기본 압축 항목과 각 사용자 지정 빌드는 추적 가능한 외부 소스 맵을 생성합니다. 압축된 CSS는 순수한 버전 텍스트가 Brotli 기준을 방해하지 않도록 버전에 따라 변경되지 않는 안정적인 MIT 배너를 사용합니다. 압축되지 않은 CSS와 런타임은 여전히 정확한 버전을 제공합니다.npm run budget gzip 레벨 9 및 Brotli 품질 11을 사용하여 42개 공식 압축 제품 전체에 대해 raw, gzip 및 Brotli를 동시에 계산하고 전체 CSS, Runtime 및 Brotli의 압축 비율을 확인합니다. npm pack --dry-run 압축, 압축 해제 및 반환된 파일 수입니다. 1.0.0은 봉인된 버전 0.9.0의 실제 측정 결과를 즉각적인 기준으로 사용하여 각 제품의 원시 성장을 2% 이하, gzip/Brotli를 3% 이하, npm 패키지를 3% 이하, 압축을 푼 경우 2% 이하, 파일 수를 10% 이하로 제한합니다. 5가지 플랫폼 제품은 모두 직접적인 역사적 기준을 가지고 있습니다. 포함 볼륨 측정값은 압축된 4KiB 및 압축되지 않은 64KiB로 반올림되어 실제 포함 볼륨을 과소평가하지 않고 성능 보고서의 자체 포함 압축 주기에 영향을 받지 않는 결정론적 상한을 형성합니다. 절대 한도 또는 상대적 한도가 실패하면 릴리스가 차단됩니다.

통제 대상 제품	원시 상한	gzip 상한	브로틀리 상한
gardener.min.css	1,050,000B	145,000B	65,000B
gardener.core.min.css	65,000B	9,000B	6,000B
gardener.themes.min.css	60,000B	7,500B	5,000B
gardener.utilities.min.css	550,000B	80,000B	18,000B
gardener.comComponents.min.css	400,000B	55,000B	42,000B
gardener.ai.min.css	30,000B	6,000B	5,000B
gardener.runtime.min.js	105,000B	30,000B	25,000B
플랫폼/web.min.css	1,000,000B	140,000B	60,000B
플랫폼/mobile.min.css	1,020,000B	142,000B	62,000B
플랫폼/desktop.min.css	1,030,000B	143,000B	63,000B
플랫폼/tauri.min.css	256B	256B	256B
플랫폼/electron.min.css	256B	256B	256B

위 표에는 12개의 주요 CSS/런타임 항목이 나열되어 있습니다. 또한 예산 문서에는 단일 제품 검사를 대체하기 위한 일반 공유 한도를 사용하지 않고 데스크톱 어댑터 2개, 구성 요소 패키지 28개, 공식 압축 제품 총 42개에 대한 적용 범위가 항목화되어 있습니다.

npm 패키지 예산은 압축 시 2,050,000B, 압축 해제 시 16,500,000B, 최대 92개 파일입니다. 예산 출처 performance-budgets.json 관리 및 별도 적용 예산 스키마 그리고 보고서 스키마 보호.

npm run build       # 전체 계층형 구성 요소 패키지 28개 및 플랫폼 파일 5개
npm run verify:reproducible # SHA 파일을 파일별로 지속적으로 구축 및 검증-256
npm run budget      # 42 프로덕션을 위한 절대/상대 예산 게이트키핑 + npm 패키지
npm run verify:compatibility # 1,145 항목 0.9.0 공개 계약
npm run test:types # TypeScript 엄격한 소비자 검증
npm run verify:package # npm 화이트리스트, 내보내기 대상 및 Publint
npm run test:build  # 10 빌드, 호환성, 유형, 릴리스 및 실패 경로 사용 사례

접근성 및 국제화

프레임워크는 초점 스타일, 동작 감소, 고대비 및 강제 색상에 대한 기반을 제공하지만 의미 체계 명명 및 콘텐츠 순서는 여전히 페이지 작성자의 책임입니다.

키보드탭, 메뉴, 트리, 그리드, 회전판, 분할기, 대화 상자 및 명령 팔레트에는 모두 키보드 경로가 있습니다.

집중대화 상자 및 명령 패널이 초점을 제한하고 닫은 후 트리거 소스를 복원합니다. 보이지 않는 항목은 탭 순서를 종료합니다.

이름아이콘 버튼에는 aria-label이 필요합니다. 양식에는 label, aria-label 또는 aria-labelledby가 필요합니다.

동적상태토스트는 상태/경고를 사용합니다. ARIA 상태를 통해 동기화된 확장, 선택, 현재 항목.

방향레이아웃은 논리적 속성을 사용하고 구성 요소는 RTL 아래의 애니메이션 방향과 화살표를 재정의합니다.

애니메이션prefers-reduced-motion은 애니메이션 지속 시간을 압축하고 부드러운 스크롤링을 끕니다.

배송 체크리스트

페이지에 올바른 내용이 있습니다. lang 및 고유한 제목입니다.
제목 계층 구조는 연속적이며 랜드마크에는 식별 가능한 이름이 있습니다.
모든 이미지는 목적에 적합합니다. alt; 장식용 이미지에는 빈 Alt를 사용하세요.
중요한 작업 전용 키보드, 포커스가 항상 표시됩니다.
텍스트 및 상태 색상이 WCAG AA를 충족합니다. 상태를 표현하기 위해 색상에만 의존할 수는 없습니다.
200% 배율, RTL, 움직임 감소, 강제 색상에서 여전히 작동 가능합니다.
모바일 터치 대상은 최소 약 44px의 터치 밀도를 사용합니다.

1.0.0 자동화된 테스트 매트릭스

접근통제	환경	수량	재정의
`test:build`	Node.js + esbuild + Ajv	10	플랫폼 경계, 실제 구성요소 소유권, 공식 압축, 소스 맵, SHA-256/SRI, 재현 가능한 빌드, 절대/상대 예산, 유형, 호환성 기준, 지원 정책, 사용자 정의 빌드, 실패 경로 및 npm 패키지 설치 해결
`test:browser`	데스크탑 Chromium + WebKit	48	전체 21개 예, 홈 랜딩 페이지 및 문서, 콘솔, 요청, 스타일, 수평 오버플로, 대화 상자 키보드 및 포커스 수명 주기
`test:browser:firefox`	데스크탑 Firefox	24	데스크톱 기본 액세스와 동일합니다. Playwright Firefox 시스템 런타임을 사용하여 호스트 또는 CI에서 실행됨
`test:mobile`	화소 7 Chromium + 아이폰 13 WebKit	52	전체 21개 예시, 홈 랜딩 페이지 및 설명서, 리플로우, 44px 터치 대상, 바텀 시트, 320px 좁은 화면 및 가로 화면
`test:a11y`	Chromium+Axe	25	WCAG 2 A/AA, 2.1 A/AA, 2.2 AA, 키보드, 포커스, RTL, 감소된 동작, 강제 색상의 21개 예 및 홈 2페이지
`test:html`	파싱5	24	21개 예, 홈 및 문서 구문 분석, 중복 ID, ARIA 참조, 언어, 제목, 뷰포트 및 목록

npm run test:html             # 24 HTML 구조 사용 사례
npm run test:browser          # Chromium + WebKit，48 데스크탑 사용 사례
npm run test:browser:firefox  # Firefox 독립형 액세스 제어, 24가지 데스크탑 사용 사례
npm run test:browser:all      # Chromium + Firefox + WebKit，72 데스크탑 사용 사례
npm run test:mobile           # Pixel 7 + iPhone 13，52 모바일 사용 사례
npm run test:a11y             # Axe、키보드 및 환경 매트릭스, 25가지 사용 사례
npm run test:e2e              # 기본 125개 실제 브라우저 사용 사례
npm run test:types            # TypeScript 엄격한 소비자 접근 통제
npm run verify:compatibility  # 1,145 항목 0.9.0 호환 기준선
npm run verify:package        # npm 파일, 내보내기 및 공개
npm test                      # 281 기본 자동화 사용 사례 및 모든 정적, 계약, 유형, 호환, 릴리스, 재현 가능 및 예산 게이트

Axe Gate blocks all violations detected by the selected WCAG A/AA rules, passes them without downgrade by impact, and outputs the rule, node selector, HTML, and remediation summary. Automation cannot replace human screen reader testing; production products should still use NVDA/JAWS/VoiceOver for mission-critical walkthroughs.

인쇄 및 문서 출력

기본 인쇄 레이어는 흰색 배경의 검정색 텍스트를 전환하고, 플로팅 레이어와 고정 탐색을 숨기고, 테이블 헤더를 반복하고, 카드와 미디어가 페이지에 퍼지는 것을 방지하고, 긴 코드가 자동으로 줄 바꿈되도록 허용합니다. 추가로 전체 래스터 사용 가능 g-print-col-1 에게 g-print-col-24, 인쇄 오프셋 및 표시/숨김 클래스는 용지 너비 내에서 독립적인 재배열에 사용됩니다. 보고서, 송장 및 CMS 편집기에는 레시피 수준의 인쇄 기능도 있습니다.

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

사용 가능한 도구 클래스는 다음과 같습니다. g-print-hidden、g-print-block、g-print-break-before 그리고 g-break-inside-avoid。

사용자 정의, 검사 및 릴리스

프로젝트 취재

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

프레임 체크

npm run build      # 전체 계층형 구성 요소 패키지 28개 및 플랫폼 파일 5개
npm run build:platform -- --platform mobile # 플랫폼 중심 구축
npm run build:custom -- --components button,dialog # 구성요소 지향 빌드
npm run verify:reproducible # 접근통제의 바이트 수준 재현 가능한 구성
npm run budget     # raw / gzip / Brotli、절대/상대 및 npm 패키지 예산
npm run verify:compatibility # 0.9.0 버전 간 공개 계약 기준
npm run test:types # TypeScript 엄격한 소비자 검증
npm run verify:package # npm 파일, 내보내기 대상 및 공개
npm run test:schema # Ajv 2020-12 11개의 스키마 세트 확인
npm run test:build # 10 빌드, 유형, 호환성, 릴리스 및 실패 경로 사용 사례
npm run contracts  # Schema、공개 API, 이름 지정 및 교차 매니페스트 계약
npm run test:runtime # 66 동작 및 DOM 수명주기
npm run test:html   # 홈의 예시 및 HTML 구조
npm run check      # 테마, 구성 요소, 런타임 및 매니페스트 일관성
npm run audit      # Token、대비, 패킷 경계, 내보내기 및 버전
npm run validate   # 레시피, 예제 클래스 이름 및 기본 접근성
npm run test:e2e   # 다중 브라우저, 모바일 및 Axe
npm test           # 모든 프레임 검사를 수행합니다.

node website/scripts/build-css-catalog.mjs
node website/scripts/check.mjs
node website/scripts/check-coverage.mjs  # 문서 누락 제로 검증

새로운 기능을 동기화해야 합니다.

CSS 또는 런타임을 구현합니다.
등록 metadata/components.json。
산업능력등록 metadata/capabilities.json, 복합페이지 등록 metadata/recipes.json。
전체 상태 매트릭스와 환경 매트릭스를 검토하세요.
실행 가능한 예제 및 유효성 검사 입력을 추가합니다.
모든 매니페스트를 다시 빌드하고 브라우저 회귀를 실행합니다.

문서 사이트의 디렉토리 브라우저가 직접 읽어옵니다. css/dist, Vue, React, AngularJS 및 Blazor metadata / dist 목록. 따라서 프레임워크가 구축된 후에는 CSS나 구성 요소 수, 동작 이름, 입구 또는 4개 적응 레이어 세트의 도구 클래스 검색 데이터를 수동으로 업데이트할 필요가 없습니다.

빠른 시작

추천 선택 순서

설치 및 패키지

레이어별로 그룹화

Gardener Vue 3 프로젝트

설치 및 글로벌 플러그인

주문형 구성요소 및 테마 제공자

모든 컴포넌트의 공용 속성, 투명 전송 및 Ref

v-model, 맞춤 이벤트 및 지침

컴포저블 7개 모두

웹, 모바일, 데스크탑 스타일 입구

공개 패키지 항목 29개 모두

비구성요소 런타임 내보내기 및 TypeScript 유형

공개 스키마, 메타데이터 및 게시 액세스

모든 506 Vue 구성 요소

Gardener React Project

설치 및 루트 구성 요소

토픽 제공자 및 10개의 토픽 축

모든 구성 요소에 대한 10가지 공통 속성

제어되는 값, 맞춤 이벤트 및 동작 인스턴스

후크 7개 모두

웹, 모바일, 데스크탑 스타일 입구

SSR, 수화 및 데스크탑 브리징

공개 패키지 항목 29개 모두

비구성요소 런타임 내보내기 및 TypeScript 유형

공개 스키마, 성능 및 릴리스 액세스

506개의 React 컴포넌트 전체

Gardener AngularJS Project

설치, ESM 로딩 및 모듈공장

요소 지시어, 속성 지시어 및 의미론

8개 구성 요소 모두에 대한 공용 속성

ngModel, 네이티브 폼, Gardener 이벤트

공통 명령, 서비스 및 10축 테마

웹, 모바일, 데스크톱 및 도메인별 스타일

공개 패키지 항목 29개 모두

비구성요소 런타임 내보내기 및 TypeScript 유형

공개 스키마, 호환성, 성능 및 릴리스 액세스

모든 506 AngularJS 구성 요소

Gardener Blazor Project

설치, 등록 및 정적 리소스

구성요소, 공급자 및 SSR

공통 매개변수, 참조 번호 및 형식

값 바인딩, 75개 이벤트 및 7개 동기화 가드

테마, 서비스 및 데스크탑 브리지

완전한 공개 유형 및 기계 판독 가능 계약

1.0.0 출시품질

모든 506 Blazor 구성 요소

설계원리

CSS 레이어 순서

테마 시스템

주제 축

디자인 토큰

부분보상

CSS 풀 API

모든 CSS 인터페이스 검색

모든 소스코드 모듈

도구

전체 도구 목록 검색

레이아웃 시스템

대시보드 예시

24 / 12 완전한 그리드 시스템

실시간 24그리드

12그리드 호환

완전한 클래스 이름 매트릭스

중단점

컨테이너 쿼리

RTL, 중첩 및 인쇄

전통적인 영역 레이아웃 시스템

실시간 5개 지역 레이아웃

완성된 뼈대 16종

5개 영역 및 마스터/디테일

도킹 및 조절 가능한 기둥

응답, 컨테이너, 상태 및 변수

클래식 레이아웃 프리미티브

실시간 도시락 및 스트리밍 프리미티브

22개 프리미티브의 완전한 행렬

일반적으로 사용되는 조합

미디어 개체, 오버레이 및 스크롤링

대응 및 환경규칙

페이지 수준 공개 구성요소