SunUI-Komponentenbibliothek

SunUI ist die selbst entwickelte Frontend-UI-Komponentenbibliothek von Doggy. Sie basiert auf Twig-Macros und bietet mehr als 25 Komponenten.

Übersicht

SunUI ist nicht von Drittanbieter-UI-Frameworks wie Bootstrap abhängig. Die Komponenten-Templates befinden sich unter templates/ui/:

templates/ui/
├── elements.html.twig          # 元素展示
├── table.html.twig             # 表格组件
├── buttons/
│   ├── button.html.twig        # 按钮
│   ├── button_group.html.twig  # 按钮组
│   └── icon_button.html.twig   # 图标按钮
├── drawer/
│   ├── drawer.html.twig        # 抽屉
│   ├── addField.html.twig
│   └── confirmButton.html.twig
├── form/
│   └── singleField.html.twig   # 单字段表单
├── template/
│   ├── icons.html.twig         # 图标模板
│   └── ui.html.twig            # UI 模板
└── example/
    └── button.html.twig        # 按钮示例

Zusätzlich gibt es öffentliche Komponenten:

templates/components/
├── breadcrumb.html.twig    # 面包屑
├── datagrid.html.twig      # 数据表格
└── tree.html.twig          # 树形组件

Kernkomponenten

Datendarstellung

Komponente	Template	Beschreibung
DataGrid	components/datagrid.html.twig	Erweiterte Datentabelle
Tree	components/tree.html.twig	Baumstruktur
Table	ui/table.html.twig	Basistabelle

Formulare

Komponente	Template-Beschreibung	Typ
Input	Texteingabe	siehe Testtemplate test/input.html.twig
Select	Dropdown-Auswahl (unterstützt Suche, Mehrfachauswahl)	test/select.html.twig
DatePicker	Datumsauswahl	test/date.html.twig
Switch	Schalter	test/switch.html.twig
Checkbox	Kontrollkästchen	test/checkbox.html.twig
Upload	Datei-Upload	test/file.html.twig
Radio	Einzelauswahl	test/radio.html.twig

Feedback

Komponente	Template	Beschreibung
Modal	test/modal.html.twig	Modaler Dialog
Drawer	ui/drawer/drawer.html.twig	Seitliches Panel
Toast	test/alert.html.twig	Nachrichtenhinweis

Navigation

Komponente	Beschreibung
Tabs	Registerkarten (test/tabs.html.twig)
Breadcrumb	Brotkrümelnavigation (components/breadcrumb.html.twig)
Menu	Menü (admin/dynamic/menu.html.twig)

Formular-Theme

Die Formular-Renderdarstellung basiert auf einem benutzerdefinierten Twig-Theme:

templates/form/
├── ef_ui_form_theme.html.twig              # 默认表单主题
└── ef_ui_form_theme_department.html.twig   # 部门选择器主题

Testseiten

Vollständige Komponentenbeispiele und Testseiten befinden sich unter templates/test/ (45+ Test-Templates), darunter:

• Alle Formularfeldtypen (input, select, date, file, color, password, money, percent usw.)
• Layout-Komponenten (grid, table, tabs, drawer, modal)
• Business-Komponenten (employee, department, company-Beispiele)
• Funktionstests (form_dates_check, choice_fields usw.)