SunUI コンポーネントライブラリ

SunUI は Doggy が独自開発したフロントエンド UI コンポーネントライブラリで、Twig マクロに基づいて実装され、25+ のコンポーネントを提供します。

概要

SunUI は Bootstrap などのサードパーティ UI フレームワークに依存せず、コンポーネントテンプレートは 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        # 按钮示例

そのほかパブリックコンポーネント:

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

コアコンポーネント

データ表示

コンポーネント	テンプレート	説明
DataGrid	components/datagrid.html.twig	高度なデータテーブル
Tree	components/tree.html.twig	ツリー構造
Table	ui/table.html.twig	基本テーブル

フォーム

コンポーネント	テンプレート説明	タイプ
Input	テキスト入力	テストテンプレート test/input.html.twig を参照
Select	ドロップダウン選択（検索、複数選択対応）	test/select.html.twig
DatePicker	日付セレクター	test/date.html.twig
Switch	スイッチ	test/switch.html.twig
Checkbox	チェックボックス	test/checkbox.html.twig
Upload	ファイルアップロード	test/file.html.twig
Radio	ラジオボタン	test/radio.html.twig

フィードバック

コンポーネント	テンプレート	説明
Modal	test/modal.html.twig	モーダル
Drawer	ui/drawer/drawer.html.twig	ドロワー
Toast	test/alert.html.twig	メッセージ通知

ナビゲーション

コンポーネント	説明
Tabs	タブ（test/tabs.html.twig）
Breadcrumb	パンくず（components/breadcrumb.html.twig）
Menu	メニュー（admin/dynamic/menu.html.twig）

フォームテーマ

フォームレンダリングはカスタム Twig テーマに基づきます:

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

テストページ

完全なコンポーネントサンプルとテストページは templates/test/（45+ テストテンプレート）にあり、以下をカバーします:

• すべてのフォームフィールドタイプ（input, select, date, file, color, password, money, percent など）
• レイアウトコンポーネント（grid, table, tabs, drawer, modal）
• 業務コンポーネント（employee, department, company サンプル）
• 機能テスト（form_dates_check, choice_fields など）