README

实验性 Twig 扩展，将自定义 HTML 元素转换为基于 https://github.com/material-components/material-components-web 规范和建议的必要 Material Design 模板代码

动机

Material Design 网络组件可以作为熟悉它所提供的选项的快速原型设计工具。然而，我所找到的大部分，如果不是所有，包装组件库都是前端框架插件。这个库试图使用 HTML 标记来包装这些组件，同时在内部连接必要的 JavaScript 初始化，以便于使用 Twig 模板语言的日常项目。

快速入门

composer require webesque/twig-material-design

在 Twig 中注册扩展

$twig->addExtension(
  new webesque\TwigMaterialDesign\Extension
);

如果您使用 symfony，请将以下行添加到 services.yaml 中

webesque\TwigMaterialDesign\Extension:
  tags: ['twig.extension']

使用以下基本 Twig 模板作为起点

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {{ material_design_includes() }}
</head>

<body class="mdc-typography">
{% apply material_design %}

  <tmd-button>Button</tmd-button>

{% endapply %}

{{ material_design_autoinit() }}
</body>
</html>

关于此扩展您需要知道的所有信息

开发者体验

文档是从代码生成的，旨在易于访问，如果您的编辑器支持模糊搜索，则尝试搜索特定的组件 material component name 以快速访问特定组件的文档。

该库试图遵循 Material Design 规范中的可访问性说明/指南，并在可能的情况下添加必要的 aria 属性。值得注意的例外 是 tabindex 属性。在选项、菜单等选择中，添加 tabindex 属性取决于库用户。未来库可能会代表用户执行此操作。

与 Material Design 相关的怪癖

为了使用 Material Design 排版系统，页面主体需要具有 mdc-typography 类。

该库解析了标记中的所有标签（不仅限于组件），因为它在所有 HTML 标签上公开了排版和提升属性。

实现怪癖

此库不试图与 material-components-web 组件列表进行 1-1 映射。虽然它最初是这样开始的，但它切换到了更高级别的抽象。原因在于，即使在 1-1 映射的情况下，简单的组件也需要额外的标记。例如 <tmd-button><tmd-label>A button</tmd-label></tmd-button> 与 <tmd-button>A button</tmd-button>。

如果您遇到一个场景，其中此限制阻止了您按您希望的方式实现/设计组件（漏斗抽象定律），我建议您在该页面的特定部分内联原始 Material Design 组件模板。

同样，在几个Material Design组件中存在一个常见的模式；组件可能包含子部分，例如：操作、内容、标题、文本等。它们的结构通常相似，但可能具有不同的属性/样式类。为了避免多个特定的细粒度子组件，存在一些通用的非组件标签来简化问题。例如操作、内容、文本等。

webesque / twig-material-design

维护者

详细信息