包简介

The Bless UI is a package to make easy your ui elements with tailwindcss or another framework

README 文档

README

Bless UI

The Bless UI package is a set of headless Blade components whose styles can be modified via a configuration file. This allows you to create styles for components previously defined by Bless UI, without worrying about their behavior.

Bless UI works perfectly with Tailwindcss, but it is also possible to define style classes from other css frameworks.

Install

To install Bless UI in your Laravel application, you need to use composer, as follows:

composer require wallacemaxters/bless-ui

After installation, you can make the components available for use in your Blade Views through the bless-ui:list-components command.

Components Avaliable

Components
ui::avatar
ui::button
ui::card
ui::checkbox
ui::container
ui::h1
ui::h2
ui::h3
ui::h4
ui::h5
ui::h6
ui::input
ui::label
ui::radio
ui::section
ui::select
ui::textarea

Usage

To start using Bless UI, you need to generate a configuration file. This can be done using two commands:

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

php artisan bless-ui:make-config

Note: We recommend using vendor:publish, as it already provides the configuration file with pre-defined styles. The bless-ui:make-config command should be used if you want to start styling from scratch.

Both commands above will generate a config/bless-ui.php file.

If you are using Tailwindcss, add the config/bless-ui.php value to the content property in your tailwind.config.js configuration script.

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

How it works?

This configuration file is used to define the styling classes for each Bless UI component. For example, if you want to modify the classes of the ui::button component, you must modify the "button" key defined in config/bless-ui.php

Following this example, the "base" key inside "button" modifies the main style of ui::button. However, if you want to define optional styles, you must define them within the "variants" key. When you define something in "variants", you can apply these styles through the variant property when using ui::button.

Example:

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>

Using the CSS

If you don't want to use config/bless-ui.php file to define the styles of Bless UI components, you can generate the CSS File.

Using the php artisan bless-ui:make-tailwindcss command, you will generate a css file with the default definitions of the Bless UI components, which you can also change as you wish.

In Bless UI, we use Tailwindcss to generate the css file.

For example:

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

The command above will generate the resources/css/bless-ui.css, or resources/css/custom-bless-ui.css in second case.

Now, you can add this generated file to your Blade layout.

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

And your vite.config.js file:

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

Generate Custom Components

If you want to use the same structure of Bless UI to make your custom components, you can use the bless-ui:make-component command.

For example:

php artisan bless-ui:make-component hero

The file resources/views/vendor/bless-ui/components/hero.blade.php will be generated.

You should be insert the 'hero' in 'components' section of config/bless-ui.php file to define styles for your generated component.

wallacemaxters/bless-ui 适用场景与选型建议

wallacemaxters/bless-ui 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 322 次下载、GitHub Stars 达 0，最近一次更新时间为 2023 年 09 月 14 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「ui」「blade」「tailwindcss」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 wallacemaxters/bless-ui 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 wallacemaxters/bless-ui 我们能提供哪些服务？

定制开发 / 二次开发

基于 wallacemaxters/bless-ui 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 wallacemaxters/bless-ui 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

camya/filament-title-with-slug 134

TitleWithSlugInput - Easy Permalink Slugs for the FilamentPHP Form Builder (PHP / Laravel / Livewire)

arnolem/tailwindphp 14

TailwindPHP - use Tailwind CSS in your PHP projects (without npm)

flavorly/laravel-vanilla-components 3

Vanilla Components Integration with Laravel

jvmtech/multicolumn 0

Multicolumn grid for Neos CMS

carlosre/laravel-preset-tailwindcss-sass 2

Laravel >= 5.5 preset for Tailwind CSS & Sass

dxgx/blade-tailwind-extract 0

Extract Tailwind CSS classes to reduce Livewire wire transfer size

wallacemaxters/bless-ui

包简介

关键字：