README

WireBlade 是一个组件集合，如表单、图标、布局等，使用 Tailwind CSS 和 AlpineJS 构建。此包的主要目的是用于我的项目。如果您喜欢此包，请尝试使用它并给出您的反馈。请对我友好，我没有太多经验，我只是通过观看和学习教程来尝试自己。感谢所有人。

安装

您可以通过 composer 安装此包

composer require lianmaymesi/wireblade

可选：您可以发布布局以进行自定义

php artisan vendor:publish --tag="wireblade-views"

如果使用 trix 编辑器，则必须发布，它有助于配置存储磁盘

php artisan vendor:publish --tag="wireblade-config"

可选：您可以发布组件视图和类

php artisan vendor:publish --tag="wireblade-components"

用法

如果您不发布视图或组件及其类，请按照以下用法操作。

WireBlade 布局 - 应用布局

您可以通过创建 resources\views\layouts\app.blade.php 来扩展 app layout，并复制以下代码并更新内容。

<x-wb::app :title="app()->view->getSections()['title']" :main-menu="app()->view->getSections()['mainMenu']">
    <!---Adding & customize the logo -->
    <x-slot name="logo"> Title </x-slot>

    <!---Updating sidebar footer -->
    <x-slot name="profile">
        <x-wb::profile
            name="LiAn DhAs"
            logout=""
            image="assets/lian-dhas.jpg"
            :linkSettings="route('profile.settings')"
        />
    </x-slot>

    <!---Adding Notification features -->
    // Notification is optional if your notification has an empty content, it will hide automatically.
    <x-slot name="notification">
        <x-wb::notification-item :read="$isRead" wire:key="$key">
            <div class="relative h-11 w-11">
                <img src="assets/brian-hughes.jpg" class="rounded-full" alt="" />
            </div>
            <div class="flex flex-col">
                <a href="" class="text-sm font-semibold"> LiAn Dhas added new Product </a>
                <div class="mt-1 flex space-x-2 text-xs">
                    <span> 3 hrs ago </span>
                    <span class="text-gray-200"> &verbar; </span>
                    <button>Mark as read</button>
                </div>
            </div>
        </x-wb::notification-item>
        <!---Add more ... -->
    </x-slot>

    <!---Sidebar Navigations -->
    <x-slot name="navigation">
        <!---Main Menu -->
        <x-wb::nav-item title="Dashboard" route="" :active="request()->is('/')">
            <x-wb::nav-help title="Dashboard" help-text="Analysis, Summary & Performance" />
        </x-wb::nav-item>

        <!---Dropdown Menu -->
        <x-wb::nav-item title="Pages" route="" dropdown>
            <x-wb::nav-help title="Dashboard" help-text="Analysis, Summary & Performance" />
            <x-slot name="submenu">
                <x-wb::dropdown-link title="Add Page" route=""></x-wb::dropdown-link>
            </x-slot>
        </x-wb::nav-item>

        <!---Add More -->
    </x-slot>

    <!---It will yield your content throught this slot -->
    <x-slot name="content"> {{ $slot }} </x-slot>
</x-wb::app>

WireBlade 布局 - 认证布局

您可以通过创建 resources\views\layouts\app.blade.php 来扩展 auth layout，并复制以下代码并更新内容。

<x-wb::auth title="Login" show-graphics>
    <x-slot name="page_content"> Show your Login / Register / Forgot Password Page Content </x-slot>

    <x-wb::auth-layout-content
        title="Graphic Section Title"
        content="This is Login page for the website and it works nice so far."
        cta="/"
        cta_text="Know More"
    />
</x-wb::auth>

样式和脚本的指令

在您的 <head></head> 标签内添加这两个样式：@wbstyles 和 @wbscripts

添加深色模式

您必须安装 Tailwind CSS 并启用 darkMode: 'class'

并在标签内添加以下 alpinejs 脚本

x-data="{ darkMode: false }" x-init=" darkMode = JSON.parse(localStorage.getItem('darkMode')); $watch('darkMode', value
=> localStorage.setItem('darkMode', JSON.stringify(value)))" :class="{ 'dark': darkMode == true }"

侧边栏

在您的 <body> 标签内添加以下代码

x-data="sidebar"
@resize.window="handleResize"

闪存通知

在您的 app 布局上添加此组件

<x-wb::notification />

在 livewire 中触发此通知

public function store() {
    ...
    ...
    $this->dispacthBrowserEvent('notify', 'Ah! It\'s Working');
}

表格

您可以使用表格组件。

<x-wb::table>
    <x-slot name="head">
        <x-wb::row>
            <x-wb::heading>Name</x-wb::heading>
        </x-wb::row>
    </x-slot>

    <x-slot name="body">
        <x-wb::row>
            <x-wb::cell>John Doe</x-wb::cell>
        </x-wb::row>
    </x-slot>
</x-wb::table>

模态框

您可以使用与 Jetstream Laravel 中相同的模态框组件。

<x-wb::dialog wire:model="showModal">

    <x-slot name="title">
        // Title goes here
    </x-slot>

    <x-slot name="content">
        // Content goes here
    </x-slot>

    <x-slot name="footer">
        // Footer goes here
    </x-slot>

</x-wb::dialog>

表单字段

您可以使用表单，目前仅限于测试目的。

<x-wb::input label="First Name" type="text" placeholder="First Name"></x-wb::input>

<x-wb::input label="Email" type="email" placeholder="john.doe@ymail.com" />

<x-wb::input label="Age" type="number" placeholder="25" min="1" max="50" />

<x-wb::input label="DOB" type="date" />

<x-wb::input label="App Date" type="datetime-local" />

<x-wb::input label="Password" type="password" placeholder="Password" />

<x-wb::input label="Month" type="month" />

<x-wb::checkbox label="Are you sure?" />

<x-wb::form label="Product Images" />

<x-wb::input label="Search" type="search" placeholder="Search" />

<x-wb::input label="Time" type="time" suffix-label />

<x-wb::input label="Website" type="url" placeholder="www.formwind.com" prefix-label mandatory>
    <x-slot name="icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
        </svg>
    </x-slot>
</x-wb::input>

<x-wb::input label="Week" type="Week" />

<x-wb::input label="Tel" type="tel" laceholder="9x5xxxxx562" />

<x-wb::textarea label="Description" placeholder="Description" rows="10">
    <x-slot name="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non libero praesentium
        voluptate debitis dolorum quas suscipit eos deleniti odit architecto dolor
        facilis itaque temporibus, quaerat quod provident. Quam, necessitatibus porro.
    </x-slot>
</x-wb::textarea>

<x-wb::select label="Email">
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
</x-wb::select>

Trix 编辑器

如果您使用 trix 编辑器，应在您的首页下面的 livewire 指令中添加 @trixCss 和 @trixJs 指令。

如果您想通过 trix 编辑器添加图片上传，请使用 use WithFileAttachment 特性。

\\ Page.php
use HasFileAttachment;

public $description = '';

\\ page.blade.php
<x-wb::trix label="Description" wire:model.defer="description" name="description" editor-height="100rem" />

链接

锚点链接

<x-wb::links.anchor color="red" link="https:://example.com/">
    Edit
</x-wb::links.anchor>

按钮链接

<x-wb::links.anchor color="blue">
    Add
</x-wb::links.anchor>

标签输入

它需要 Livewire，您必须在 Livewire 中添加属性 public $meta_key = []

<x-wb::tags-input label="Meta Keywords" wire:model.lazy="meta_key" />

测试

composer test

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请参阅我们的安全策略了解如何报告安全漏洞。

致谢

许可

MIT 许可证（MIT）。有关更多信息，请参阅许可文件。

lianmaymesi/ wireblade

维护者

详细信息