README

这里应该放置您的描述。尽量限制在一到两段话内。可以考虑添加一个小例子。

安装

您可以通过composer安装此包

composer require codevicecompany/laravel-ui-kit

resources/js/app.js

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

module.exports = {
    mode: "jit",
    
    content: [
        // vendors
        "./vendor/codevicecompany/laravel-ui-kit/resources/views/**/*.blade.php",
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter", ...defaultTheme.fontFamily.sans],
            },
            colors: {
                cyan: colors.cyan,
                facebook: "#4867aa",
                instagram: "#bc2a8d",
                twitter: "#2eb6f1",
                linkedin: "#1a77b5",
            },
            backgroundPosition: {
                "left-2": "left 0.5rem center",
                "right-2": "right 0.5rem center",
            },
        },
    },
};

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="laravel-ui-kit-config"

这是发布配置文件的内容

return [
];

可选地，您可以使用以下命令发布视图

php artisan vendor:publish --tag="laravel-ui-kit-views"

用法

<x-ui-app title="Page title">
    {{-- Your content here --}}
</x-ui-app>

按钮

<x-ui-button icon="heroicon-o-user" href="#" hide-text-on-mobile>Click Me</x-ui-button>
<x-ui-button.default>Click Me</x-ui-button.default>
<x-ui-button.primary>Click Me</x-ui-button.primary>
<x-ui-button.success>Click Me</x-ui-button.success>
<x-ui-button.warning>Click Me</x-ui-button.warning>
<x-ui-button.danger>Click Me</x-ui-button.danger>
<x-ui-button.dark>Click Me</x-ui-button.dark>

表单

表单包装器

<x-ui-form-group
    name="website"
    label="Website"
    suffix=".com"
    prefix="www."
    prefixClass="class"
    hint="Hint"
    required
    bag="default"
    for="id"
>
    {{-- x-ui-input / x-ui-textarea / x-ui-select --}}
</x-ui-form-group>

<ui-input bag="bag" />

<ui-select bag="bag">
    <option value=""></option>
</ui-select>

<ui-textarea bag="bag">{{-- text --}}</ui-textarea>

@isset($name)
<x-ui-error :field="$name" :bag="$bag" id="{{$for}}-error">
    <ul>
        @foreach ($component->messages($errors) as $error)
        <li class="mt-2 text-sm text-red-600">{{ $error }}</li>
        @endforeach
    </ul>
</x-ui-error>
@endisset

模态框

<x-ui-button.primary x-on:click="$dispatch('openModal','modal-id')">Open</x-ui-button.primary>

<x-ui-modal id="modal-id">
    <x-slot name="footer"> Foorter </x-slot>
    {{-- Modal content --}}
</x-ui-modal>

布局

侧边栏

<x-ui-layout.sidebar title="Page">
    <x-slot name="actions"></x-slot>
    {{-- Your content here --}}
</x-ui-layout.sidebar>

要编辑导航或用户下拉菜单，发布视图后进行编辑

• resources/views/vendor/ui-kit/layout/sidebar/nav.blade.php
• resources/views/vendor/ui-kit/layout/sidebar/profile-dropdown.blade.php

测试

composer test

许可证

MIT许可证（MIT）。请参阅许可证文件以获取更多信息。