README

Slate UI Kit 是一组使用 tailwindcss 构建，专为您的下一个 Laravel 项目设计的精美匿名blade组件。

演示 | 文档

要求

• PHP 7.4+
• Laravel 7+
• Tailwindcss

Slate UI套件完全依赖于Tailwind CSS。如果您使用的是其他CSS框架，可能会发生冲突。不建议与其他CSS框架一起使用本套件

安装

首先使用composer安装包。

composer require electrik/slate

我们许多组件都有（并将会有）图标的占位符。对于这些图标，我们使用blade blade-carbon-icons。您也可以使用此处可用的其他图标集 - blade-icons。

安装Tailwind CSS

npm install @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography --save-dev

设置

在您的Laravel根目录下的tailwind.config.js文件中，按照以下所示引入我们安装的插件

{
...
plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
...
}

接下来，您应该为您的项目定义一个颜色方案

{
...
theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
            },
        },
    },
...
}

您的最终tailwind.config.js应该看起来像这样

const colors = require('tailwindcss/colors')
const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
    purge: [
        './resources/**/*.blade.php',
        './vendor/electrik/slate/resources/views/components/**/*.blade.php',
        './vendor/electrik/slate/src/Helpers/SlateUiHelper.php',
    ],
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
            },
        },
    },
    plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

开始使用

安装完成后，您就可以开始在Laravel视图中使用UI套件了。

例如，对于徽章，以下代码将生成徽章

<x-slate::badge color="success" size="xs">xs badge</x-slate::badge> 
<x-slate::badge color="success" size="sm">small badge</x-slate::badge> 
<x-slate::badge color="success" size="lg">large badge</x-slate::badge>