搜索amoschou / hyle
作为 Laravel 包的网页 Material 组件。
Requires
- php: ^8.0
This package is auto-updated.
Last update: 2024-09-30 01:30:53 UTC
README
作为 Laravel 包的网页 Material 组件。
© Andrew Gilbert Moschou 2021
此包有两个目的
- 将 Material Design UI 组件暴露给 Laravel 开发者作为视图组件。
- 实现一个主题系统
安装
-
composer require amoschou/hyle -
php artisan vendor:publish并选择AMoschou\Hyle\HyleServiceProvider。这将发布config/hyle.json，可以在安装之前进行配置。 -
php artisan hyle:install此命令安装 Hyle 并配置主题。必须在步骤 2 之后完成此操作，它假设config/hyle.json已存在。 -
npm install && npm run dev安装依赖项并运行mix以根据webpack.mix.js编译资源。
使用
主题
此包帮助用户定义多个主题，并生成 Sass 和 CSS 文件来管理它们。Material 主题的一个方面是颜色，主色和辅助色对此至关重要。config/hyle.json 定义了一组主色和一组辅助色。当 Hyle 安装到 Laravel 应用程序中时，所有主色和辅助色的组合都将得到管理。例如，如果有四个主色和两个辅助色定义，则将生成八种主色和辅助色的组合。此外，为每种组合生成一个浅色主题和一个深色主题，总共生成十六个 CSS 主题。
primaryColours 和 secondaryColours 数组的每个元素都有一个 name、一个 value 和一个 desaturated 属性。name 是一个字符串，用于标记颜色，value 是用于浅色主题的颜色，desaturated 是用于深色主题的颜色。这些可以是匹配 2014 年 Material 颜色调色板中颜色的字符串（例如 deep-purple-500），也可以是表示字面 RGB 颜色的十六进制字符串（例如 #123456）。将来，这可能会以简单的方式扩展到包括其他颜色调色板。如果 value 和 desaturated 之一被省略，则将自动生成值，这可能是合适的。