diangang/larawinds

Laravel-Tailwind CSS 组件套件

v0.0.16 2024-01-10 04:50 UTC

This package is auto-updated.

Last update: 2024-09-10 06:21:47 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 许可 许可。