Skip to content

SusCore - documentation

Package: com.sharq-it.sus.coreThe foundation of the SUS UI system is an analogue of Vue.js: reactivity, SFC compiler, directives, slots, CSS scoped

Contents

#DocumentContents
0Integration from scratch 🆕Installation, scene, first .sharq, SusApp, sus.config.json, Sharq generation
1Quick startMinimal component, bootstrap, installation, configuration
2.sharq and directivesSFC-format, $using, $MainElement, v-if/v-show/v-for/:text/@click/style
3ReactivityProp<T>, Computed<T>, Watch<T>, DependencyTracker, P/C helpers
4SlotsNamed slots, default slot, SlotPropMap
5CSS Scopingscoped/global, hash classes, Sharq restrictions
6Adaptive layoutSusBreakpointService, breakpoint classes, Watch
7OverlayHost and portalsPortal container, OverlayCategory, z-order
8EventsEmit/On, communication via Prop<T>
9Compilation and generationPipeline, incremental compilation, SharqValidator
10Configurationsus.config.json
11API ReferenceSusApp, SusComponent, Bind helpers, SusBootstrap
12Running examplesSusBootstrap + SusKeepAlive examples from Samples~
13Built-in audits (Debug / QA)ClickAudit, BoundsAudit, CallbackAudit, OverlayAudit, StateAudit, LifecycleAudit, …
18MCP / AI probeSusUiProbe JSON facade (tree/props/health), MCP phases
17Dev consoleSusConsoleService, hotkey ~, OverlayCategory.Console
Design tokensFonts, colors, icons, themes
快速入门(中文)Chinese getting-started (site, translated; package copy: GETTING_STARTED.zh-CN.md in this folder)

Quick start

xml
<!-- HelloWorld.sharq -->
<template>
<ui:Label $MainElement :text="Message" class="greeting"
          style="font-size: 24px; -unity-text-align: middle-center; color: white;" />
</template>

<script>
public string Message = "Hello SUS!";
</script>
csharp
// MonoBehaviour on stage — prefer SusApp.
// Mount the component you defined above (HelloWorld); its .g.cs must be generated first.
public class AppEntry : MonoBehaviour
{
    public UIDocument uiDocument;
    void Start() => SusApp.Create(uiDocument).UseTheme(SusTheme.Dark).Mount<HelloWorld>();
}

Where to look for what