README

使用此扩展包，您必须在项目中安装 TailwindCss 和 AlpineJs。

该扩展包中使用的图标库为 remixicon.com

安装

使用 composer 命令

composer require windsondias/laravel-components

在您的 tailwind.config.js 文件中包含以下代码

safelist: [
    {
        pattern: /(bg|border|text)-(primary|secondary|tertiary|success|error|warning|info)-(100|200|300|400|500)/,
        variants: ['sm', 'md', 'lg', 'xl', 'dark', 'hover', 'focus'],
    },
],

theme: {
    extend: {
        colors: {
            primary: {
                100: '#bfdbfe',
                200: '#93c5fd',
                300: '#60a5fa',
                400: '#3b82f6',
                500: '#2563eb',
            },
            secondary: {
                100: '#e5e7eb',
                200: '#d1d5db',
                300: '#9ca3af',
                400: '#6b7280',
                500: '#4b5563',
            },
            tertiary: {
                100: '#a1a1aa',
                200: '#71717a',
                300: '#52525b',
                400: '#3f3f46',
                500: '#27272a',
            },
            success: {
                100: '#bbf7d0',
                200: '#86efac',
                300: '#4ade80',
                400: '#4ade80',
                500: '#16a34a',
            },
            error: {
                100: '#fecaca',
                200: '#fca5a5',
                300: '#f87171',
                400: '#ef4444',
                500: '#dc2626',
            },
            warning: {
                100: '#fef08a',
                200: '#fde047',
                300: '#facc15',
                400: '#eab308',
                500: '#ca8a04',
            },
            info: {
                100: '#a5f3fc',
                200: '#67e8f9',
                300: '#22d3ee',
                400: '#06b6d4',
                500: '#0891b2',
            },
        }
    },
},

还必须在 tailwind.config.js 的 content 键中添加扩展包文件夹的相对路径，从 vendor 文件夹开始

content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./vendor/windsondias/laravel-components/**/*.blade.php",
],

在此配置之后，侧边栏和导航栏组件将无法正常工作，因为它们依赖于组件提供的布局。

要使用布局，首先使用以下命令发布扩展包文件

php artisan vendor:publish

搜索提供者

Provider: WindsonDias\Components\ComponentServiceProvider

文件将发布在以下文件夹中：resources/views/vendor/components/components

将布局文件夹复制到您的结构中，必须在 blade 组件文件夹中，通常是 resources/views/components

更改主文件中导航栏和侧边栏组件的路径，以匹配您结构中复制的两个组件

示例

从

<x-components::app.navbar/>
<x-components::app.sidebar/>

到

<x-app.navbar/>
<x-app.sidebar/>

在这些组件中，您将找到它们工作方式的基础。之后，只需将主文件作为布局安装到您的应用程序中，并使用它。

windsondias / laravel-components

维护者

详细信息

README

使用此扩展包，您必须在项目中安装 TailwindCss 和 AlpineJs。

该扩展包中使用的图标库为 remixicon.com

安装

示例