smithsonian / castle_components
使用 TailwindCSS 和 AlpineJS 的 Drupal 组件库。
dev-main
2024-03-08 20:30 UTC
Requires
- php: >=8.1
- gehrisandro/tailwind-merge-php: ^1.0
This package is not auto-updated.
Last update: 2024-09-20 23:13:47 UTC
README
使用 TailwindCSS 和 AlpineJS 的 Drupal 组件库。查看在线文档。
警告
此模块正在积极开发中,尚未准备好在生产环境中使用。
安装
作为任何 Drupal 模块安装。建议使用 composer。
composer install smithsonian/castle_components
扩展
要在主题中使用组件,您需要在主题的 info.yml 文件中包含模块的库。
例如
# my_theme.info.yml name: my_theme type: theme libraries: - castle_components/scripts - castle_components/tailwind dependencies: - castle_components:castle_components
注意:包含 castle_components/tailwind
库将使用软件包的默认 TailwindCSS 样式。通常,您会希望排除此库,并在自定义主题中创建 Tailwind 配置来自定义组件在主题中的样式。一个示例配置
// tailwind.config.js const colors = require('tailwindcss/colors') /** @type {import('tailwindcss').Config} */ module.exports = { content: [ '../../../modules/contrib/castle_components/components/**/*.twig', './templates/**/*.twig', ], darkMode: 'selector', theme: { colors: { primary: colors.blue, secondary: colors.slate, accent: colors.red, success: 'hsl(160, 84%, 39%)', warning: 'hsl(38, 92%, 50%)', error: 'hsl(0, 84%, 60%)', } }, plugins: [require('@tailwindcss/typography')], }
使用方法
配置完成后,您可以使用 Twig embed。
{% embed 'castle_components:button' with { size: 'large' } only %} {% block content %} This is a Castle button {% endblock %} {% endembed %}
或 Twig include
{{ include ('castle_components:icon', { 'name': 'download' }, with_context=false ) }}
AlpineJS
许多 Castle 组件使用 AlpineJS 进行交互性、过渡和事件处理。
您需要将以下样式添加到您的 HTML head 中,以防止在 Alpine 初始化之前出现未样式化的组件。
<style> [x-cloak] { display: none !important; } </style>
Visual Studio Code
为了复制自动完成辅助工具,请将模块目录中的 .vscode/castle-components.code-snippets
Snippets 文件复制到您的 VSCode 项目根目录。有关创建自己的片段的更多信息。