diangang / larawinds
Laravel-Tailwind CSS 组件套件
v0.0.16
2024-01-10 04:50 UTC
README
警告:处于开发中
安装
按照指南在您的 Laravel 项目上安装 Larawinds。
Composer
首先,您需要安装 Larawinds 的 composer 包
composer require dianagung/larawinds
注册服务提供者
您需要在 config/app.php
中注册 Larawinds 服务提供者
Dianagung\Larawinds\LarawindsServiceProvider::class
设置 Tailwind
在您的项目上打开 tailwind.config.js
文件。然后添加以下命令
content: [ "./vendor/dianagung/larawinds/src/resources/**/*.blade.php", "./vendor/dianagung/larawinds/src/resources/**/*.js", ],
依赖
安装以下 NPM 包
npm install alpinejs npm install sweetalert2 npm install vanillajs-datepicker --save-dev
然后,运行 npm 开发服务器
npm run dev
组件
输入文本
<x-input.text name="title" label="Content Title" placeholder="Enter title here" value="" />
输入数字
<x-input.number name="price" label="Price" prefix="IDR" suffix="Pcs" maxlength="18" value="" />
输入密码
<x-input.password name="password" label="Password" placeholder="Enter password here" value="" />
输入日期
<x-input.date name="date" label="Select Date" placeholder="mm/dd/yyyy" value="" />
输入文本域
<x-input.textarea name="description" label="Description" placeholder="Describe yourself here..." />
复选框 & 单选按钮
复选框
未选中
<x-checkbox name="newsletter" title="Submit Newsletter" text="Get upto 45% OFF discount for this seasons." />
选中
<x-checkbox name="newsletter" title="Submit Newsletter" text="Get upto 45% OFF discount for this seasons." checked="1" />
或
<x-checkbox name="newsletter" title="Submit Newsletter" text="Get upto 45% OFF discount for this seasons." checked="true" />
单选按钮
未选中
<x-radio name="package" title="Free, Pro" text="IDR 99000, IDR 249000" value="free,pro" />
选中
<x-radio name="package" title="Free, Pro" text="IDR 99000, IDR 249000" value="free,pro" key="free" />
上传
上传图片
<x-upload.image name="avatar" label="Upload Avatar" accept="jpg,png" maxsize="2 MB" />
表单
卡片表单
存储方法
<x-card.form title="Card Title" action="{{ route('route') }}" btext="Save"> // other components here </x-card.form>
更新方法
<x-card.form title="Card Title" action="{{ route('route') }}" btext="Update" method="PUT"> // other components here </x-card.form>
删除(按钮)
<x-delete action="{{ route('route') }}" confirm-title="Are you sure want to delete" confirm-text="This action can not be undo!" confirm-yes="Yes. Delete it!" confirm-no="No. Cancel." />
按钮
主要
<x-button.primary type="button" text="Save" />
次要
<x-button.secondary type="button" text="Cancel" />
许可证
Laravel 框架和 Tailwind CSS 是开源软件,受 MIT 许可 许可。