README

Bless UI

Bless UI 包包含一组无头 Blade 组件，其样式可以通过配置文件进行修改。这允许您为之前由 Bless UI 定义的组件创建样式，而不用担心其行为。

Bless UI 与 Tailwindcss 完美配合，但也可能定义来自其他 CSS 框架的样式类。

安装

在您的 Laravel 应用程序中安装 Bless UI，您需要使用 composer，如下所示

composer require wallacemaxters/bless-ui

安装后，您可以通过 bless-ui:list-components 命令使组件可用于您的 Blade 视图。

可用组件

用法

要开始使用 Bless UI，您需要生成一个配置文件。这可以通过以下两个命令完成

php artisan vendor:publish --tag=bless-ui-config 或

php artisan bless-ui:make-config

注意：我们建议使用 vendor:publish，因为它已经提供了具有预定义样式的配置文件。如果您想从头开始设计样式，请使用 bless-ui:make-config 命令。

上述两个命令都会生成 config/bless-ui.php 文件。

如果您正在使用 Tailwindcss，请将 config/bless-ui.php 中的值添加到您的 tailwind.config.js 配置脚本中的 content 属性。

export default {
  // ...
  content: [
    // ... another configs
    "config/bless-ui.php",
  ],
};

它是如何工作的？

此配置文件用于定义每个 Bless UI 组件的样式类。例如，如果您想修改 ui::button 组件的类，您必须修改 config/bless-ui.php 中定义的 "button" 键。

按照此示例，"button" 中的 "base" 键修改了 ui::button 的主要样式。但是，如果您想定义可选样式，您必须在 "variants" 键内定义它们。当您在 "variants" 中定义某些内容时，您可以在使用 ui::button 时通过 variant 属性应用这些样式。

示例

return [
    'button' => [
        'base' => [
            'px-5 py-3 duration-500 inline-flex justify-center items-center',
        ],
        'variants' => [
            'normal'  => '',
            'square'  => 'rounded-none border-2 border-black',
            'rounded' => 'rounded-full p-12',
            'rounded-primary' => 'rounded-full p-12 bg-primary text-white hover:bg-black',
        ]
    ]
];

<!-- both is same -->
<x-ui::button></x-ui::button>
<x-ui::button variant="normal"></x-ui::button>

<x-ui::button variant="square"></x-ui::button>
<x-ui::button variant="rounded"></x-ui::button>
<x-ui::button variant="rounded-primary"></x-ui::button>

使用 CSS

如果您不想使用 config/bless-ui.php 文件来定义 Bless UI 组件的样式，您可以生成 CSS 文件。

使用 php artisan bless-ui:make-tailwindcss 命令，您将生成一个具有 Bless UI 组件默认定义的 CSS 文件，您也可以按需更改。

在 Bless UI 中，我们使用 Tailwindcss 生成 CSS 文件。

例如

php artisan bless-ui:make-tailwindcss
# or
php artisan bless-ui:make-tailwindcss custom-bless-ui

上述命令将生成 resources/css/bless-ui.css，或者第二种情况下为 resources/css/custom-bless-ui.css。

现在，您可以将此生成的文件添加到您的 Blade 布局中。

<head>
    <!-- ... -->
    @vite(['resources/css/bless-ui.css'])
</head>

以及您的 vite.config.js 文件

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/bless-ui.css'],
            refresh: true,
        }),
    ],
});

生成自定义组件

如果您想使用与 Bless UI 相同的结构来创建自定义组件，您可以使用 bless-ui:make-component 命令。

例如

php artisan bless-ui:make-component hero

将生成 resources/views/vendor/bless-ui/components/hero.blade.php 文件。

您应该在 config/bless-ui.php 文件中的 'components' 部分 'hero' 插入以定义您生成组件的样式。

wallacemaxters / bless-ui

维护者

详情