# 树枝组件具有 PHP 类 + Twig 模板的可重用 UI 组件。想想 React/Vue 组件，但使用零 JavaScript 进行服务器渲染。存在两种风格：**类组件**（PHP 类 + Twig 模板），用于需要逻辑、服务或计算属性的组件；**匿名组件**（仅 Twig，无 PHP 类），用于简单的表示元素。 ## 何时使用 TwigComponent 当您需要带有 props 的可重用标记但在初始渲染后不需要服务器重新渲染时，请使用 TwigComponent。如果组件需要对用户输入做出反应（通过 AJAX、数据绑定、操作重新渲染），请改用 LiveComponent。好的候选者：按钮、警报、卡片、徽章、图标、表单小部件、布局部分、导航项、表格行、模式（仅限结构）。 ## 安装作曲家需要 symfony/ux-twig-component ## 类组件用“#[AsTwigComponent]”注释的 PHP 类与 Twig 模板配对。 // src/Twig/Components/Alert.php 命名空间 App\Twig\Components；使用 Symfony\UX\TwigComponent\Attribute\AsTwigComponent; #[AsTwigComponent] 最后一堂课警报 { 公共字符串 $type = '信息'; 公共字符串$消息；公共布尔 $dismissible = false; } {# 模板/组件/Alert.html.twig #}

{{消息}} {% 如果可驳回 %} {% 结束 %}

{# 用法#} {# 使用块内容而不是消息属性#} 警告：检查您的输入 ## 匿名组件（仅限 Twig）不需要 PHP 类。道具直接在模板中使用“{% props %}”声明。用于没有逻辑的简单表示组件。 {# 模板/组件/Button.html.twig #} {% props 变体 = 'primary', size = 'md', 禁用 = false %} <按钮 class="btn btn-{{ 变体 }} btn-{{ 大小 }}" {{ 禁用？ ‘禁用’}} {{属性}} > {% 块内容 %}{% 结束块 %} 删除 ## 道具 ### 公共属性（类组件）公共财产成为道具。必需的道具没有默认值。 #[AsTwigComponent] 期末班卡 { 公共字符串$标题； // 必填公共？字符串 $subtitle = null; // 可选公共布尔 $shadow = true; // 可选，默认 } ### mount() 用于派生状态使用 mount() 来计算传入 props 的值。该方法在组件初始化期间运行一次。 #[AsTwigComponent] 最终类用户卡 { 公共用户$user; 公共字符串$displayName；公共函数挂载（用户$用户）：无效 { $这个->用户= $用户； $this->displayName = $user->getFullName(); } } ### 动态道具（冒号前缀）在 prop 前面添加 `:` 来传递 Twig 表达式而不是字符串文字。 {# 传递变量#} {# 传递一个表达式#} ## 块（槽）块允许父模板将内容注入到组件的特定区域。 ### 默认块组件标签之间的内容转到“{% block content %}”： {# 组件模板#}

{% 块内容 %}{% endblock %}

{# 用法#}

这是卡片内容

### 命名块 {# 模板/组件/Modal.html.twig #}

树枝组件

包含技能