lmc / spirit-web-twig-bundle
这是一个使用Twig实现Spirit设计系统组件的Symfony扩展包,并扩展了类似于HTML的语法。
Requires
- php: ^8.1
- ext-simplexml: *
- lmc/twigx-bundle: ^3.3
- symfony/config: ^4.4 || ^5.4 || ^6.1
- symfony/dependency-injection: ^4.4 || ^5.4 || ^6.1
- symfony/http-foundation: ^4.4 || ^5.4 || ^6.1
- symfony/http-kernel: ^4.4 || ^5.4 || ^6.1
- symfony/polyfill-php80: ^1.23
- twig/twig: ^2.12.5 || ^3.0.0
Requires (Dev)
- ergebnis/composer-normalize: ^2.42
- lmc/coding-standard: ^4.1
- mockery/mockery: ^1.5
- phpstan/extension-installer: ^1.1
- phpstan/phpstan: ^1.2
- phpstan/phpstan-mockery: ^1.0
- phpstan/phpstan-symfony: ^1.0
- phpunit/phpunit: ^9
- spatie/phpunit-snapshot-assertions: ^4.2.12
- symfony/yaml: ^4.4 || ^5.4 || ^6.1
- dev-main
- 3.4.0
- 3.2.0
- 3.1.0
- 3.0.0
- 2.16.0
- 2.15.0
- 2.14.1
- 2.14.0
- 2.13.0
- 2.12.1
- 2.12.0
- 2.11.0
- 2.10.0
- 2.9.0
- 2.8.0
- 2.7.0
- 2.6.0
- 2.5.0
- 2.4.0
- 2.3.1
- 2.3.0
- 2.2.0
- 2.1.0
- 2.0.0
- 1.34.1
- 1.34.0
- 1.33.0
- 1.32.0
- 1.31.0
- 1.30.0
- 1.29.0
- 1.28.1
- 1.28.0
- 1.27.0
- 1.26.0
- 1.25.1
- 1.25.0
- 1.24.0
- 1.23.0
- 1.22.0
- 1.21.0
- 1.20.0
- 1.19.0
- 1.18.0
- 1.17.0
- 1.16.0
- 1.15.0
- 1.14.0
- 1.13.0
- 1.12.0
- 1.11.0
- 1.10.0
- 1.9.0
- 1.8.0
- 1.7.0
- 1.6.0
- 1.5.0
- 1.4.0
- 1.3.0
- 1.2.0
- 1.1.0
- 1.0.0
- 0.1.0
- 0.0.2
- 0.0.1
- dev-fix/web-twig-raw-issue
This package is auto-updated.
Last update: 2024-09-09 12:43:33 UTC
README
这是一个使用Twig实现Spirit设计系统组件的Symfony扩展包,并扩展了类似JSX的语法。
要求
- PHP >= 8.1
- Symfony 4.4+ || 5.4+ || ^6.1
- Twig >=2.12.5 || 3+
变更日志
如何安装
步骤 1
使用 composer 下载
安装包
composer require lmc/spirit-web-twig-bundle
步骤 2
将 SpiritWebTwigBundle
添加到包(在 all
包下)。如果你使用Symfony flex,它将自动配置。
bundles.php
return [ ..., Lmc\SpiritWebTwigBundle\SpiritWebTwigBundle::class => ['all' => true], ];
步骤 3(可选)
如果你想要更改默认设置,创建一个配置文件
config/packages/spirit_web_twig.yml
# all parameters are optional spirit_web_twig: # define one or more paths to expand or overload components (uses glob patterns) paths: - '%kernel.project_dir%/templates/components' paths_alias: 'jobs-ui' # default is 'spirit' html_syntax_lexer: false # default is true spirit_css_class_prefix: 'jobs' # default is null icons: # optional settings for svg assets paths: - '%kernel.project_dir%/assets/icons' # define paths for svg icons set alias: 'jobs-icons' # default is 'icons-assets'
用法
有关详细用法,请参阅 TwigX 包
未转义的属性
所有内部使用 raw 过滤器的属性都以前缀 UNSAFE_
开头。这被认为是一种传递HTML字符串的方式。
<Checkbox UNSAFE_helperText="<strong>Help!</strong>" />
Spirit 组件
有关可用组件,请参阅 components 目录。
如果你想要扩展这些组件,示例指南见 这里。如果你想要贡献,请阅读指南 这里。
附加属性
所有组件都接受传递给组件根元素的附加属性。这对于添加自定义事件处理器、无障碍属性或其他不支持组件API的属性很有用。
ℹ️ 如果你需要将事件处理器传递给我们的表单组件中的原生日元素,可以使用 inputProps
属性。
支持的属性有
on*
(例如onclick
)data-*
aria-*
id
如果组件为这些属性中的任何一个设置了值,传入的值将被覆盖。
样式
Spirit 组件旨在在所有 Alma Career 应用程序中保持一致性。它们包括经过精心考虑和广泛测试的内置样式。一般来说,不建议自定义Spirit设计,但大多数组件都提供对布局和其他方面的控制。此外,你可以使用Spirit定义的设计令牌来确保你的应用程序符合你的设计要求,并适应平台缩放和配色方案。
样式属性
所有Spirit组件都接受一组属性,可以用来控制它们的间距。这些属性包括
margin
marginTop
marginRight
marginBottom
marginLeft
marginX
marginY
这些属性接受一个间距令牌(例如 space-100
)、auto
或一个包含断点键和间距令牌值的对象或 auto
。我们使用这些属性在组件的根元素上设置全局CSS实用工具类。
示例
<Alert marginBottom="space-100" /> <Button marginX="{{ { mobile: 'space-100', tablet: 'space-200' } }}" /> <Button marginLeft="{{ { mobile: 'space-100', tablet: 'space-200', desktop: 'auto' } }}" />
如果您需要更多控制组件的样式,可以使用逃生舱。
逃生舱
虽然我们鼓励团队直接使用Spirit设计,但我们意识到有时可能需要特定产品的定制化。在这些情况下,我们鼓励您或您的设计师与我们沟通。我们可能能提出替代实现策略,或者您的设计可能有助于提出未来的Spirit新增功能。
尽管Spirit Web Twig组件不支持传统的类和样式属性,但有两种逃生舱供您在自行承担风险的情况下使用。这些是UNSAFE_className和UNSAFE_style。使用这些属性应被视为最后的手段。它们可以用来解决Spirit Web Twig中的错误或限制,但不应该长期使用。
原因在于,Spirit设计的未来更新可能会在不经意间导致产品出现破坏性更改。如果Spirit Web Twig组件的内部DOM结构或CSS属性发生变化,这可能会导致与产品中的CSS覆盖冲突。因此,className和style是不安全的,如果您使用它们,请知道您是在自行承担风险。
请参阅Web包文档获取更多样式信息。
弃用
此包使用弃用警告,用于props、函数和组件,这些将在下一个主要版本中删除或替换。检查您的Symfony控制台或日志,看您是否使用了任何已弃用的功能。