README

Slate

Slate UI工具包是一套使用tailwindcss构建的精美匿名Blade组件，适用于您的下一个Laravel项目。

This package is under active development. Use responsibly!

要求

• PHP 7.4+
• Laravel 7+
• Tailwindcss

Slate UI工具包完全依赖于Tailwind CSS。如果您使用的是其他CSS框架，可能会发生冲突。不建议与任何其他CSS框架一起使用此工具包。

安装

首先使用Composer安装此包。

composer require neerajsohal/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/neerajsohal/slate/resources/views/components/**/*.blade.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>