README

Turbine UI 是一个 Laravel Blade 和 Tailwind CSS UI 组件库，帮助您构建优雅且响应式的用户界面，使您的页面更加生动。从此告别设计师的瓶颈。

文档

下载

Turbine UI 免费提供，可以通过 composer 下载。

composer require brandymedia/turbine-ui-core

安装

要求

• 必须使用 Laravel 10 或更高版本
• 必须使用 PHP 8.1 或更高版本
• 必须使用 Tailwind CSS

Tailwind CSS 配置

安装 Turbine UI 后，您需要更新您的 tailwind.config.js 文件。

在 'content' 部分，添加 ./vendor/brandymedia/turbine-ui-core//*.php** 作为新行

content: [
    '...',
    './vendor/brandymedia/turbine-ui-core/**/*.php',
],

您还需要确保在您的 tailwind.config.js 文件中使用了 Tailwind Forms 插件。这通常在如 Laravel Breeze 等启动器中默认包含。

import forms from '@tailwindcss/forms';

export default {
    ...
    plugins: [forms],
};

然后在开发环境中运行

npm run dev

或在生产环境中运行

npm run build

主题

Turbine UI 默认提供 2 个主题，还有更多主题正在开发中。

• Kinetic（默认）
• Primal（专业版）

您可以通过在 .env 文件中添加 TURBINE_UI_THEME 键来切换主题。

TURBINE_UI_THEME=kinetic|primal

您还可以通过发布包的资产来编辑主题

php artisan vendor:publish --tag=turbine-ui-themes

这将在 ./resources/views/vendor/turbine-ui/themes 目录中创建主题的本地副本，然后可以编辑以满足您的需求。

注意

要使用本地主题，您需要更新您的 tailwind.config.js 文件。

在 'content' 部分，添加 ./resources/views//*.php** 作为新行

content: [
    '...',
    './resources/views/**/*.php',
],

变体

将变体视为调色板。默认主题已经包含几个预定义的变体，但您可以创建自己的，甚至覆盖现有的。

要创建一个新的变体，请在 CLI 中运行以下命令

php artisan turbine:create-variant

然后您将被提示输入变体的名称。要覆盖现有的主题级别变体，请使用相同的名称，例如 primary。

创建新变体后，您将在这里找到它 ../resources/views/vendor/turbine-ui/variants。

注意

要使用本地变体，您需要更新您的 tailwind.config.js 文件。

在 'content' 部分，添加 ./resources/views//*.php** 作为新行

content: [
    '...',
    './resources/views/**/*.php',
],

现在，您可以使用新的变体在组件中，使用短横线命名法。

JavaScript

注意

一些 Turbine UI 组件需要 JavaScript 才能正常工作。

您首先需要发布 JS 文件

php artisan vendor:publish --tag=turbine-ui-js

然后，将 Turbine UI blade 指令添加到您的 head 中

@turbineUI

组件

您可以在此处查看每个组件的文档 这里