rapidez/blade-components
Composer 安装命令：
composer require rapidez/blade-components
包简介
Collection of awesome Blade Components, used by Rapidez
README 文档
README
This package includes some Tailwind CSS styled Blade components, the components do not need or require Rapidez. This package is only used within Rapidez by default, but can be used in any Laravel project.
- Input
- Checkbox
- Radio
- Select
- Textarea
- Label
- Accordion
- Buttons
- Prose
- Slideover
- Slideover (mobile only)
- Readmore
The idea with these components is to have a good starting point and centralized styling. Most of the components use a Anonymous Index, this way you have a default and variants can be added next to it. We're using the (currently undocumented) component name guessing here.
We don't provide a input + label combination component as you'll end up with attribute merging issues. We can't guess where the attribute should go; the input or the label. We could provide a 99% use case but you'll eventually end up with exceptions and complexity within the components. But; we do provide it for the checkbox and radio as you can see within those components. If you don't need the label you can use the base component as you can find within the examples.
The base button doesn't have any styling; here, we only use the x-rapidez::tag. All other buttons use the button/button, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state. The button variants contain styling for the background and text color. There is only one exception: the button/slider, which has more custom styling than the other button variants.
Installation
composer require rapidez/blade-components
And include the CSS file in your resources/css/app.css:
@import '../../vendor/rapidez/blade-components/resources/css/package.css';
If you're not using Tailwind yet, you've to make sure you've setup Tailwind 4 with these plugins:
A minimal setup can be found in this repos app.css, package.json and vite.config.js.
More information about the usage and variables can be found in the Rapidez docs: https://docs.rapidez.io/5.x/theming.html#css
Views
If you like to change the components you can publish the views with:
php artisan vendor:publish --tag=rapidez-blade-components-views
Read more component
The readmore component includes some Javascript, we're using a Blade Stack named foot for that. Make sure you've an @stack('foot') before your closing </body> tag. Within Rapidez this is already present within the layouts/app.blade.php.
Usage
Just like any other Blade component, check out the Laravel Blade docs and the examples within the components code linked above. All components are prefixed with x-rapidez:: to avoid any conflicts with existing Blade components within your project.
Basic examples
Input with a label
<label> <x-rapidez::label>Something</x-rapidez::label> <x-rapidez::input name="something" class="extra-styling" /> </label>
Checkbox
<x-rapidez::input.checkbox name="something"> @lang('Translatable label') </x-rapidez::input.checkbox>
Prose
<x-rapidez::prose> Content </x-rapidez::prose>
Accordion
<x-rapidez::accordion> <x-slot:label>Title</x-slot:label> <x-slot:content> Collapsable content goes here </x-slot:content> </x-rapidez::accordion>
Slideover
<label for="my-slideover"> Open Slideover </label> <x-rapidez::slideover id="my-slideover" title="Example Slideover"> Your slideover content goes here </x-rapidez::slideover>
Make sure to add this class to your body tag to prevent scrolling when the slideover is open:
<body class="has-[.prevent-scroll:checked]:overflow-clip">
Tag
It is a Blade version of a dynamic Vue component
Usage
<x-rapidez::tag is="span" class="font-bold"> Something </x-rapidez::tag>
which will result in
<span class="font-bold"> Something </span>
Changing components
If you like to change the components you can publish the views with:
php artisan vendor:publish --tag=rapidez-blade-components-views
Preview
There is a preview Blade file included with all the components, to view that in your project you could register a route for it within routes/web.php and visit the /components route from your browser:
Route::view('components', 'rapidez::components-preview');
Development
When you're working on this package you should first install the frontend dependencies with yarn, create an initial build with yarn build, symlink the public build with yarn symlink-public and to show a preview in the browser use yarn preview.
License
GNU General Public License v3. Please see License File for more information.
rapidez/blade-components 适用场景与选型建议
rapidez/blade-components 是一款 基于 Blade 开发的 Composer 扩展包，目前已累计 57.67k 次下载、GitHub Stars 达 2， 最近一次更新时间为 2024 年 09 月 05 日， 在 PHP 生态内属于活跃度较高的组件。
它主要适用于以下技术方向： 「blade-components」 「rapidez」 等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。
我们在过去多个企业项目中使用过 rapidez/blade-components 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。
基于 rapidez/blade-components 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。
线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。
承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。
与 rapidez/blade-components 相关的其它包
同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：
统计信息
- 总下载量： 57.67k
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 2
- 点击次数： 23
- 依赖项目数： 1
- 推荐数： 0
其他信息
- 授权协议： GPL-3.0-or-later
- 更新时间： 2024-09-05