更新、想法和资源
Mary UI：使用 daisyUI 构建的 Laravel Blade 组件
Mary UI 是为 Livewire 3 构建并围绕 daisyUI 和 Tailwind CSS 风格化的一系列 Laravel Blade 组件的集合。
什么是 Mary UI？
Mary UI是为 Livewire 3 构建的一系列 Laravel Blade 组件的集合。 这些组件构建于daisyUI和Tailwind CSS. 如果你是一名 Laravel 开发者并且正在使用 Livewire，你会喜欢 Mary UI，因为它能让你更快更轻松地构建网页。
Mary UI 不包含任何自定义 CSS，而是依赖 daisyUI 和 Tailwind 进行开箱即用的样式设置。你可以通过内联覆盖 daisyUI 和 Tailwind CSS 类来自定义大多数组件的样式。
它看起来如何？
Mary UI 允许你在 Laravel Blade 文件中使用 Livewire 语法来使用 daisyUI 组件。
要创建像这样的表单 
你只需要这几行代码
<x-form wire:submit="save">
<x-input label="Name" wire:model="name" />
<x-input
label="Amount"
wire:model="amount"
prefix="USD"
money
hint="It submits an unmasked value" />
<x-slot:actions>
<x-button label="Cancel" />
<x-button label="Click me!" class="btn-primary" type="submit" spinner="save" />
</x-slot:actions>
</x-form>如何在新的 Laravel 项目上安装 Mary UI？
你可以使用 Composer 安装 Mary UI
composer require robsontenorio/mary如果这是一个新的 Laravel 项目，你可以通过运行以下命令完成设置
php artisan mary:install并启动开发服务器
yarn dev阅读更多关于Mary UI 安装.
如何在现有的 Laravel 项目上安装 Mary UI？
使用 Composer 安装 Mary UI
composer require robsontenorio/mary如果这是一个现有的 Laravel 项目，请安装 daisyUI 和 Tailwind CSS 并初始化 Tailwind CSS 配置文件
yarn add -D tailwindcss daisyui@latest postcss autoprefixer && npx tailwindcss init -p像这样更改你的 tailwind.config.js 文件
export default {
content: [
// You will probably also need those lines
"./resources/**/**/*.{js,blade.php}",
"./app/View/Components/**/**/*.php",
"./app/Livewire/**/**/*.php",
// Add mary
"./vendor/robsontenorio/mary/src/View/Components/**/*.php",
],
// Add daisyUI
plugins: [require("daisyui")],
}将 Tailwind 指令添加到resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;设置 Livewire 默认应用模板。
# It creates `views/components/layouts/app.blade.php`
php artisan livewire:layout然后添加@vite到默认应用模板中views/components/layouts/app.blade.php
<head>
...
<!-- This -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
...
</body>最后，启动开发服务器。
yarn dev就是这样！你现在可以在你的 Blade 文件中使用 Mary UI 组件了。
阅读更多关于Mary UI.
不要错过新文章！
订阅 daisyUI 博客新闻邮件，获取新文章的更新。
当有新博文发布时，你只会收到一封电子邮件。无垃圾邮件。无广告。