smithsonian/castle_components

使用 TailwindCSS 和 AlpineJS 的 Drupal 组件库。

dev-main 2024-03-08 20:30 UTC

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 项目根目录。有关创建自己的片段的更多信息。

开发