REAL SHOWCASE SOURCEquick-start-application
1 个文件 · 63 行 · TypeScript
// ===== showcase/src/examples/getting_started/quick_start_application.ts ===== import { Application, MedicalCompactLightTheme, RenderButton, RenderPage, RenderStackPanel, RenderText, RenderWindow, loadDirectSurfaceFonts, type AppHost,} from 'ds-ui' function createHelloPage(): RenderPage { const status = new RenderText('应用已经挂载,可以开始交互。', { role: 'secondary' }) const content = new RenderStackPanel({ orientation: 'vertical', spacing: 12, padding: 24, crossAxisAlignment: 'stretch', }) content.addChild(new RenderText('Hello DirectSurface UI', { role: 'title' })) content.addChild(new RenderText( '页面、布局、组件与事件均由 DirectSurface UI 的 Render Tree 管理。', )) content.addChild(status) content.addChild(new RenderButton({ label: '执行操作', variant: 'primary', onClick: () => { status.text = `最近点击:${new Date().toLocaleTimeString()}` }, })) return new RenderPage({ child: content })} class HelloWindow extends RenderWindow { constructor() { super({ title: 'DirectSurface UI Hello', chrome: 'none', contentPadding: 0, contentSpacing: 0, }) this.setChildren([createHelloPage()]) }} /** 独立业务项目的真实启动入口。宿主卸载时必须调用返回值的 dispose()。 */export async function mountHelloApplication(selector = '#app'): Promise<AppHost> { await loadDirectSurfaceFonts() return Application.mount(selector).run(new HelloWindow(), { theme: MedicalCompactLightTheme, })} /** 文档站共用的示例运行器只需要页面内容,避免重复创建 Application。 */export function createQuickStartApplicationExample(): RenderPage { return createHelloPage()}